refactor(ui/dialog): refactor event trigger

varletjs · Mar 1, 2022 · bec03cc · bec03cc
1 parent d70575d
commit bec03cc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 32 deletions.
diff --git a/packages/varlet-vue2-ui/src/dialog/Dialog.vue b/packages/varlet-vue2-ui/src/dialog/Dialog.vue
@@ -9,11 +9,11 @@
     :lock-scroll="lockScroll"
     :close-on-click-overlay="popupCloseOnClickOverlay"
     :teleport="teleport"
-    @open="onOpen"
-    @close="onClose"
-    @closed="onClosed"
-    @opened="onOpened"
-    @route-change="onRouteChange"
+    @open="$emit('open')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+    @opened="$emit('opened')"
+    @route-change="$emit('route-change')"
     @click-overlay="handleClickOverlay"
   >
     <div class="var--box var-dialog" :class="dialogClass" :style="dialogStyle" v-bind="$attrs">
@@ -109,14 +109,18 @@ export default defineComponent({
     dt,
 
     done() {
-      this.getListeners()['onUpdate:show']?.(false)
+      this.$emit('update:show', false)
+    },
+
+    normalizeBeforeClose() {
+      return this.getListeners().onBeforeClose || this.beforeClose
     },
 
     handleClickOverlay() {
-      const { closeOnClickOverlay, getListeners } = this
-      const [onClickOverlay, onBeforeClose] = getListeners()
+      const { closeOnClickOverlay, normalizeBeforeClose } = this
+      const onBeforeClose = normalizeBeforeClose()
 
-      onClickOverlay?.()
+      this.$emit('click-overlay')
 
       if (!closeOnClickOverlay) {
         return
@@ -127,33 +131,33 @@ export default defineComponent({
         return
       }
 
-      getListeners()['onUpdate:show']?.(false)
+      this.$emit('update:show', false)
     },
 
     confirm() {
-      const { onBeforeClose, onConfirm } = this.getListeners()
+      const onBeforeClose = this.normalizeBeforeClose()
 
-      onConfirm?.()
+      this.$emit('confirm')
 
       if (onBeforeClose != null) {
         onBeforeClose('confirm', this.done)
         return
       }
 
-      this.getListeners()['onUpdate:show']?.(false)
+      this.$emit('update:show', false)
     },
 
     cancel() {
-      const { onBeforeClose, onCancel } = this.getListeners()
+      const onBeforeClose = this.normalizeBeforeClose()
 
-      onCancel?.()
+      this.$emit('cancel')
 
       if (onBeforeClose != null) {
         onBeforeClose('cancel', this.done)
         return
       }
 
-      this.getListeners()['onUpdate:show']?.(false)
+      this.$emit('update:show', false)
     },
   },
 })

diff --git a/packages/varlet-vue2-ui/src/dialog/index.ts b/packages/varlet-vue2-ui/src/dialog/index.ts
@@ -8,7 +8,7 @@ type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | ' err
 type DialogMessageAlign = 'left' | 'center' | 'right'
 
 interface DialogOptions {
-  value?: boolean
+  show?: boolean
   title?: string
   message?: string
   messageAlign?: DialogMessageAlign
@@ -54,12 +54,12 @@ function Dialog(options: DialogOptions | string | number): Promise<DialogActions
       },
     })
 
-    instance.value = true
+    instance.show = true
 
     singletonInstance = instance
 
-    instance.$on('input', (value: boolean) => {
-      instance.value = value
+    instance.$on('update:show', (value: boolean) => {
+      instance.show = value
     })
 
     instance.$on('open', () => dialogOptions.onOpen?.())

diff --git a/packages/varlet-vue2-ui/src/dialog/props.ts b/packages/varlet-vue2-ui/src/dialog/props.ts
@@ -54,19 +54,16 @@ export const props = {
   dialogStyle: {
     type: Object,
   },
+  // internal
+  beforeClose: {
+    type: Function,
+  },
   ...pickProps(popupProps, [
     'overlay',
     'overlayClass',
     'overlayStyle',
     'lockScroll',
     'closeOnClickOverlay',
     'teleport',
-    'onOpen',
-    'onClose',
-    'onOpened',
-    'onClosed',
-    'onClickOverlay',
-    // internal for function call closes the dialog
-    'onRouteChange',
   ]),
 }
diff --git a/packages/varlet-vue2-ui/src/popup/props.ts b/packages/varlet-vue2-ui/src/popup/props.ts
@@ -38,9 +38,4 @@ export const props = {
   teleport: {
     type: String,
   },
-
-  // internal for Dialog
-  onRouteChange: {
-    type: Function as PropType<() => void>,
-  },
 }