fix(ui): popup dialog原型完成

affects: @varlet/cli, @varlet/eslint-config, @varlet/ui

packages/varlet-cli/src/config/webpack.dev.config.ts

@@ -18,7 +18,8 @@ export function getDevConfig() {
       publicPath: '/',
       stats: 'errors-only',
       disableHostCheck: true,
-      hot: true
+      hot: true,
+      open: true
     },
     plugins: [
       new WebpackBarPlugin({

packages/varlet-eslint-config/index.js

@@ -50,6 +50,7 @@ module.exports = {
     'vue/attributes-order': 'off',
     'vue/require-default-prop': 'off',
     'vue/no-unused-components': 'off',
+    'vue/require-explicit-emits': 'off',
     // typescript-eslint
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',

packages/varlet-ui/src/button/propsEmits.ts

@@ -1,19 +1,12 @@
-import {
-  typeValidator as loadingTypeValidator,
-  sizeValidator as loadingSizeValidator,
-  getTypeDefault as getLoadingTypeDefault
-} from '../loading/propsEmits'
+import { props as loadingProps } from '../loading/propsEmits'
+import { pickProps } from '../utils/components'
 
 function typeValidator(type: string): boolean {
-  const validTypes = ['plain', 'primary', 'info', 'success', 'warning', 'danger']
-
-  return validTypes.includes(type)
+  return ['plain', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
 }
 
 function sizeValidator(size: string): boolean {
-  const validSizes = ['normal', 'mini', 'small', 'large']
-
-  return validSizes.includes(size)
+  return ['normal', 'mini', 'small', 'large'].includes(size)
 }
 
 export const props = {
@@ -35,17 +28,9 @@ export const props = {
     default: false
   },
   // 加载动画类型
-  loadingType: {
-    type: String,
-    default: getLoadingTypeDefault,
-    validator: loadingTypeValidator
-  },
+  loadingType: pickProps(loadingProps, 'type'),
   // 加载动画尺寸
-  loadingSize: {
-    type: String,
-    default: (props: any) => props.size,
-    validator: loadingSizeValidator
-  },
+  loadingSize: pickProps(loadingProps, 'size'),
   // 圆型按钮
   round: {
     type: Boolean,

packages/varlet-ui/src/context/lock.ts

@@ -10,70 +10,97 @@ import {
 import context from '.'
 
 export function resolveLock() {
-  const lockCounts: number = Object.keys(context.locks).reduce((lockCounts: number, key: string) => {
-    return lockCounts + context.locks[key]
-  }, 0)
+  const lockCounts: number = Object.keys(context.locks).length
   lockCounts <= 0
     ? document.body.classList.remove('var--lock')
     : document.body.classList.add('var--lock')
 }
 
 export function addLock(uid: number) {
   context.locks[uid] = 1
+  resolveLock()
 }
 
 export function releaseLock(uid: number) {
-  context.locks[uid] = 0
+  delete context.locks[uid]
+  resolveLock()
 }
 
-export function useLock(props: any, state: string) {
+/**
+ * 组件锁操作
+ * @param props 组件props
+ * @param state 组件props中控制组件加锁的开关对应的key值
+ * @param use 组件props中控制组件加锁的开关是否可用对应的key值
+ */
+export function useLock(props: any, state: string, use?: string) {
   const { uid } = getCurrentInstance() as ComponentInternalInstance
+  if (use) {
+    watch(() => props[use], (newValue: boolean) => {
+      if (newValue === false) {
+        // 改变为禁用状态 组件解锁
+        releaseLock(uid)
+      } else if (newValue === true && props[state] === true) {
+        // 改变为启用状态 并且popup处于开启状态 组件加锁
+        addLock(uid)
+      }
+    })
+  }
+
+  watch(() => props[state], (newValue: boolean) => {
+    if (use && props[use] === false) {
+      return
+    }
 
-  watch(() => props[state], (newValue) => {
     if (newValue === true) {
       // popup开启 组件加锁
       addLock(uid)
     } else {
       // popup关闭 组件解锁
       releaseLock(uid)
     }
-    // 处理全局锁
-    resolveLock()
   })
 
   onBeforeMount(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
     if (props[state] === true) {
       // popup处于开启状态 组件挂载 组件加锁
       addLock(uid)
     }
-    // 处理全局锁
-    resolveLock()
   })
 
   onUnmounted(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
     if (props[state] === true) {
       // popup处于开启状态 组件卸载 组件解锁
       releaseLock(uid)
     }
-    // 处理全局锁
-    resolveLock()
   })
 
   onActivated(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
     if (props[state] === true) {
       // popup处于开启状态 组件处于keepalive前台 组件加锁
       addLock(uid)
     }
-    // 处理全局锁
-    resolveLock()
   })
 
   onDeactivated(() => {
+    if (use && props[use] === false) {
+      return
+    }
+
     if (props[state] === true) {
       // popup处于开启状态 组件处于keepalive后台 组件解锁
       releaseLock(uid)
     }
-
-    resolveLock()
   })
 }

packages/varlet-ui/src/context/zIndex.ts

@@ -1,10 +1,15 @@
 import context from './index'
-import { watch } from 'vue'
+import { watch, ref, Ref } from 'vue'
+
+export function useZIndex(props: any, state: string, count: number) {
+  const zIndex: Ref<number> = ref(context.zIndex)
 
-export function useZIndex(props: any, state: string, zIndex: number) {
   watch(() => props[state], (newValue) => {
     if (newValue === true) {
-      context.zIndex += zIndex
+      context.zIndex += count
+      zIndex.value = context.zIndex
     }
   }, { immediate: true })
+
+  return { zIndex }
 }

packages/varlet-ui/src/dialog/Dialog.vue

@@ -1,17 +1,136 @@
 <template>
-  <div class="var-dialog"></div>
+  <var-popup
+    class="var-dialog__popup-radius"
+    v-model:show="popupShow"
+    :overlay="overlay"
+    :overlay-class="overlayClass"
+    :lock-scroll="lockScroll"
+    :close-on-click-overlay="popupCloseOnClickOverlay"
+    :teleport="teleport"
+    @open="$emit('open')"
+    @close="$emit('close')"
+    @opened="$emit('opened')"
+    @closed="$emit('closed')"
+    @click-overlay="handleClickOverlay"
+  >
+    <div
+      class="var-dialog"
+      v-bind="$attrs"
+    >
+      <div class="var-dialog__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div
+        class="var-dialog__message"
+        :style="{
+          'text-align': messageAlign
+        }"
+      >
+        <slot>
+          {{ message }}
+        </slot>
+      </div>
+      <div class="var-dialog__actions">
+        <var-button
+          class="var-dialog__button"
+          :color="cancelButtonColor"
+          :background="cancelButtonBackground"
+          v-if="cancelButton"
+          @click="cancel"
+        >
+          {{ cancelButtonText }}
+        </var-button>
+        <var-button
+          class="var-dialog__button"
+          :color="confirmButtonColor"
+          :background="confirmButtonBackground"
+          v-if="confirmButton"
+          @click="confirm"
+        >
+          {{ confirmButtonText }}
+        </var-button>
+      </div>
+    </div>
+  </var-popup>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import Popup from '../popup'
+import Button from '../button'
+import { props, emits } from './propsEmits'
+import { defineComponent, ref, Ref, watch } from 'vue'
 
 export default defineComponent({
-  name: 'VarDialog'
+  name: 'VarDialog',
+  components: {
+    [Popup.name]: Popup,
+    [Button.name]: Button
+  },
+  inheritAttrs: false,
+  props,
+  emits,
+  setup(props, { emit }) {
+    // 需要透传到popup组件里并需要特殊处理的参数
+    const popupShow: Ref<boolean> = ref(false)
+    const popupCloseOnClickOverlay: Ref<boolean> = ref(false)
+
+    watch(() => props.show, (newValue) => {
+      popupShow.value = newValue
+    }, { immediate: true })
+
+    watch(() => props.closeOnClickOverlay, (newValue) => {
+      if (props.beforeClose) {
+        // 异步关闭情况下 禁止点击弹出层关闭
+        popupCloseOnClickOverlay.value = false
+        return
+      }
+      popupCloseOnClickOverlay.value = newValue
+    }, { immediate: true })
+
+    // 异步关闭回调
+    const done = () => emit('update:show', false)
+
+    const handleClickOverlay = () => {
+      emit('click-overlay')
+      if (props.closeOnClickOverlay === false) {
+        return
+      }
+      if (props.beforeClose) {
+        props.beforeClose(done)
+        return
+      }
+      emit('update:show', false)
+    }
+
+    const confirm = () => {
+      emit('confirm')
+      if (props.beforeClose) {
+        props.beforeClose(done)
+        return
+      }
+      emit('update:show', false)
+    }
+
+    const cancel = () => {
+      emit('cancel')
+      if (props.beforeClose) {
+        props.beforeClose(done)
+        return
+      }
+      emit('update:show', false)
+    }
+
+    return {
+      popupShow,
+      popupCloseOnClickOverlay,
+      handleClickOverlay,
+      confirm,
+      cancel
+    }
+  }
 })
 </script>
 
 <style lang="less">
-.var-dialog {
-  display: flex;
-}
+@import "./dialog";
 </style>

packages/varlet-ui/src/dialog/dialog.less

@@ -0,0 +1,47 @@
+@import "../styles/var";
+
+@dialog-width: 270px;
+@dialog-padding: 20px;
+@dialog-border-radius: 2px;
+
+@dialog-message-padding: 26px 0;
+@dialog-message-line-height: 24px;
+
+@dialog-button-margin-left: 6px;
+
+.var-dialog {
+  width: @dialog-width;
+  padding: @dialog-padding;
+  border-radius: 3px;
+
+  &__popup-radius {
+    border-radius: @dialog-border-radius
+  }
+
+  &__title {
+    font-size: @font-size-lg;
+    font-weight: 600;
+  }
+
+  &__message {
+    padding: @dialog-message-padding;
+    color: @color-font-md;
+    line-height: @dialog-message-line-height;
+    font-size: @font-size-md;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__button {
+    margin-left: @dialog-button-margin-left;
+    background-color: transparent;
+    box-shadow: none;
+
+    &:active {
+      box-shadow: none;
+    }
+  }
+}