feat(ui/dialog): add width props (#718)

varletjs · Oct 9, 2022 · 916ee21 · 916ee21
1 parent a3ff191
commit 916ee21
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -16,7 +16,11 @@
     @route-change="onRouteChange"
     @click-overlay="handleClickOverlay"
   >
-    <div :class="classes('var--box', n(), dialogClass)" :style="dialogStyle" v-bind="$attrs">
+    <div
+      :class="classes('var--box', n(), dialogClass)"
+      :style="{ ...dialogStyle, width: toSizeUnit(dialogWidth) }"
+      v-bind="$attrs"
+    >
       <div :class="n('title')">
         <slot name="title">{{ dt(title, pack.dialogTitle) }}</slot>
       </div>
@@ -62,6 +66,7 @@ import { dt } from '../utils/shared'
 import { pack } from '../locale'
 import type { Ref } from 'vue'
 import { call, createNamespace } from '../utils/components'
+import { toSizeUnit } from '../utils/elements'
 
 const { n, classes } = createNamespace('dialog')
 
@@ -153,6 +158,7 @@ export default defineComponent({
       handleClickOverlay,
       confirm,
       cancel,
+      toSizeUnit,
     }
   },
 })

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -29,6 +29,7 @@ const actions = {
 const createBasic = () =>
   Dialog({
     message: pack.value.message,
+    dialogWidth: 220,
   })
 
 const createAction = async () => actions[await Dialog(pack.value.message)]()
@@ -82,6 +83,7 @@ watchDarkMode(dark)
     v-model:show="show"
     :title="pack.title"
     :message="pack.message"
+    dialog-width="220"
     @confirm="() => Snackbar.success('confirm')"
     @cancel="() => Snackbar.error('cancel')"
     @closed="() => Snackbar.info('closed')"

diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts
@@ -67,6 +67,9 @@ export const props = {
   dialogStyle: {
     type: Object,
   },
+  dialogWidth: {
+    type: [Number, String],
+  },
   ...pickProps(popupProps, [
     'overlay',
     'overlayClass',