@koi-design/uxd-ui 14.0.2 → 14.0.4

package/lib/components/Drawer/Drawer.js

@@ -230,20 +230,22 @@ var Drawer = vue.defineComponent({
     const renderDrawer = lazyRender(() => {
       const renderConrent = () => {
         var _a;
-        return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-          "ref": headerRef,
-          "class": `${prefixCls.value}-header`,
-          "style": props.headerStyle
-        }, [vue.createVNode("h2", {
-          "class": `${prefixCls.value}-header-title`
-        }, [slots.title ? slots.title() : props.title]), props.closable && vue.createVNode("button", {
+        return vue.createVNode(vue.Fragment, null, [props.closable && vue.createVNode("button", {
           "class": `${prefixCls.value}-close`,
           "onClick": () => handleClose("close")
         }, [vue.createVNode(index.UIcon, {
           "class": `${prefixCls.value}-close-icon`
         }, {
           default: () => [vue.createVNode(lucideVueNext.X, null, null)]
-        })])]), vue.createVNode("div", {
+        })]), vue.createVNode("div", {
+          "ref": headerRef,
+          "class": `${prefixCls.value}-header`,
+          "style": props.headerStyle
+        }, [vue.createVNode("h2", {
+          "class": `${prefixCls.value}-header-title`
+        }, [slots.title ? slots.title() : props.title]), props.description && vue.createVNode("p", {
+          "class": `${prefixCls.value}-header-description`
+        }, [props.description])]), vue.createVNode("div", {
           "class": `${prefixCls.value}-body`,
           "style": {
             ...props.bodyStyle,

package/lib/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  defineComponent,\n  watch,\n  computed,\n  ref,\n  provide,\n  inject,\n  // onMounted,\n  onBeforeUnmount,\n  onActivated,\n  onDeactivated,\n  nextTick,\n  Teleport,\n  Transition,\n  onMounted\n} from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { X } from 'lucide-vue-next';\nimport UIcon from '@uxd-ui/components/Icon';\nimport Mask from '../Mask';\nimport KeyCode from '../../utils/KeyCode';\nimport { useGlobalConfig, useLazyRender, useShouldRender } from '../base/hooks';\nimport { setBodyStyle, isValid } from '../../utils';\nimport { drawerProps, drawerEmits, type ChangeTranslateFunction, type DrawerCloseType } from './Drawer.type';\n\nlet visibleCount = 0;\nconst drawerGlobalZIndex = 1000;\n\nexport default defineComponent({\n  name: 'UDrawer',\n  inheritAttrs: false,\n  props: drawerProps,\n  emits: drawerEmits,\n  setup(props, { emit, attrs, slots }) {\n    let openStatus = false;\n    let shouldReopen = false;\n    const { prefixCls } = useGlobalConfig('drawer');\n    const selfVisible = ref(props.visible);\n    const zIndex = ref<number>(drawerGlobalZIndex);\n    const animationEnd = ref(false);\n    const isMounted = ref(false);\n\n    const wrapRef = ref<HTMLElement | null>(null);\n    const headerRef = ref<HTMLElement | null>(null);\n    const footerRef = ref<HTMLElement | null>(null);\n\n    const lazyRender = useLazyRender(() => props.visible || !props.lazyRender);\n\n    const open = () => {\n      if (!openStatus) {\n        if (props.zIndex !== undefined) {\n          zIndex.value = +props.zIndex;\n        }\n        openStatus = true;\n        // zIndex.value = ++drawerGlobalZIndex;\n      }\n    };\n\n    watch(\n      () => props.visible,\n      (val) => {\n        selfVisible.value = val;\n        if (val && !openStatus) {\n          open();\n          if (attrs.tabindex === 0) {\n            nextTick(() => {\n              wrapRef.value?.focus();\n            });\n          }\n        }\n        if (!val && openStatus) {\n          openStatus = false;\n        }\n      }\n    );\n\n    const handleClose = (type: DrawerCloseType) => {\n      selfVisible.value = false;\n      openStatus = false;\n      emit('update:visible', false);\n      emit('close', type);\n    };\n\n    /**\n     * @param {*}\n     * @return {*}\n     * @description mask close method\n     */\n    const handleMaskClose = () => {\n      if (props.maskClosable) {\n        handleClose('mask');\n      }\n    };\n\n    /**\n     * In case drawer might has child drawer component,\n     * we need to translate parent drawer to tell them apart\n     */\n    const drawerLevel = ref(1);\n\n    const changeTrans = (val: boolean) => {\n      if (val) {\n        drawerLevel.value += 1;\n      } else if (drawerLevel.value > 1) {\n        drawerLevel.value -= 1;\n      }\n    };\n\n    provide('changeParentTrans', changeTrans);\n\n    const changeParentTrans = inject<ChangeTranslateFunction | null>('changeParentTrans', null);\n\n    const changeBodyOverflow = (val: boolean) => {\n      if (visibleCount > 0 && val) {\n        setBodyStyle(true);\n      } else if (!visibleCount) {\n        setBodyStyle(false);\n      }\n    };\n\n    const bodyHeight = ref<string>('');\n\n    const calcBodyHeight = () => {\n      const headerFooter = Number(headerRef.value?.offsetHeight || 0) + Number(footerRef.value?.offsetHeight || 0);\n      bodyHeight.value = `calc(100% - ${headerFooter}px)`;\n    };\n\n    const observer = new MutationObserver(calcBodyHeight);\n\n    let init = false;\n    watch(\n      selfVisible,\n      (val) => {\n        if (changeParentTrans) {\n          changeParentTrans(val);\n        }\n        if (props.parentDom === 'body') {\n          if (val) {\n            visibleCount += 1;\n          } else if (init) {\n            visibleCount -= 1;\n          }\n          if (init) {\n            changeBodyOverflow(val);\n          }\n        }\n        init = true;\n        if (val) {\n          nextTick(() => {\n            calcBodyHeight();\n            const config = { attributes: true, childList: true, subtree: true };\n            if (wrapRef.value) {\n              observer.observe(wrapRef.value as any, config);\n            }\n          });\n        } else {\n          observer.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n\n    const toDom = computed(() => {\n      if (!props.parentDom) {\n        return 'body';\n      }\n      if (typeof props.parentDom === 'function') {\n        return props.parentDom() || 'body';\n      }\n      return props.parentDom;\n    });\n\n    const positionStyle = computed(() => {\n      const style: CSSProperties = {};\n      if (toDom.value !== 'body') {\n        style.position = 'absolute';\n      }\n      return style;\n    });\n\n    const wrapStyle = computed(() => {\n      const style: CSSProperties = {\n        zIndex: zIndex.value\n      };\n\n      if (isValid(props.duration)) {\n        style.transitionDuration = `${props.duration}s`;\n      }\n\n      const place = props.placement;\n      let translate = 'none';\n      let widthStyle: number | undefined = props.width;\n      let heightStyle: number | undefined = props.height;\n      if (place === 'left' || place === 'right') {\n        translate = `translate(${place === 'left' ? 180 : -180}px, 0)`;\n        heightStyle = undefined;\n      }\n\n      if (place === 'top' || place === 'bottom') {\n        translate = `translateY(${place === 'top' ? 180 : -180}px)`;\n        widthStyle = undefined;\n      }\n\n      style.width = widthStyle && `${widthStyle}px`;\n      style.height = heightStyle && `${heightStyle}px`;\n      style.transform = drawerLevel.value > 1 ? translate : undefined;\n      style.zIndex = zIndex.value;\n\n      return style;\n    });\n\n    onMounted(() => {\n      isMounted.value = true;\n    });\n\n    onBeforeUnmount(() => {\n      observer.disconnect();\n      if (changeParentTrans && selfVisible.value) {\n        changeParentTrans(false);\n      }\n      if (props.parentDom === 'body') {\n        if (selfVisible.value) {\n          visibleCount = visibleCount > 0 ? visibleCount - 1 : visibleCount;\n          changeBodyOverflow(false);\n        }\n      }\n    });\n\n    onActivated(() => {\n      if (shouldReopen) {\n        emit('update:visible', true);\n        shouldReopen = false;\n      }\n    });\n\n    onDeactivated(() => {\n      observer.disconnect();\n      if (selfVisible.value) {\n        handleClose('close');\n        shouldReopen = true;\n      }\n    });\n\n    /**\n     * @param {event} e\n     * @return {*}\n     * @description handle key down event, to close drawer\n     */\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.keyCode === KeyCode.ESC && props.escClosable) {\n        handleClose('esc');\n      }\n    };\n\n    /**\n     * @param {*}\n     * @return {*}\n     * @description after transition animation end, invoke callback and desdroy wrap\n     */\n    const handleAnimationEnd = () => {\n      // if (wrapRef.value === e.target && e.animationName.match(/^drawerSlide/)) {\n      //   emit('after-visible-change', selfVisible.value);\n      //   animationEnd.value = !selfVisible.value;\n      // }\n      emit('after-visible-change', selfVisible.value);\n      animationEnd.value = !selfVisible.value;\n    };\n\n    const renderMask = () => {\n      if (props.showMask) {\n        return (\n          <Mask\n            show={props.visible}\n            zIndex={zIndex.value - 1}\n            duration={props.duration}\n            customStyle={{ ...props.maskStyle, ...positionStyle.value }}\n            class={props.maskClass}\n            onClick={handleMaskClose}\n          />\n        );\n      }\n    };\n\n    const renderDrawer = lazyRender(() => {\n      const renderConrent = () => (\n        <>\n          <div ref={headerRef} class={`${prefixCls.value}-header`} style={props.headerStyle}>\n            <h2 class={`${prefixCls.value}-header-title`}>{slots.title ? slots.title() : props.title}</h2>\n            {props.closable && (\n              <button class={`${prefixCls.value}-close`} onClick={() => handleClose('close')}>\n                <UIcon class={`${prefixCls.value}-close-icon`}>\n                  <X />\n                </UIcon>\n              </button>\n            )}\n          </div>\n          <div class={`${prefixCls.value}-body`} style={{ ...props.bodyStyle, height: bodyHeight.value }}>\n            {slots.default?.()}\n          </div>\n          {slots.footer ? (\n            <div ref={footerRef} class={`${prefixCls.value}-footer`} style={props.footerStyle}>\n              {slots.footer()}\n            </div>\n          ) : null}\n        </>\n      );\n\n      return (\n        <div\n          v-show={selfVisible.value}\n          ref={wrapRef}\n          class={[prefixCls.value, props.className, `${prefixCls.value}-${props.placement}`, `${prefixCls.value}-${props.size}`]}\n          style={{ ...wrapStyle.value, ...positionStyle.value }}\n          {...attrs}\n          tabindex={-1}\n          onKeydown={handleKeyDown}\n        >\n          {useShouldRender(props.visible, props.destroyOnClose, animationEnd.value, renderConrent)}\n        </div>\n      );\n    });\n\n    return () =>\n      isMounted.value ? (\n        <Teleport to={toDom.value}>\n          <Transition\n            v-slots={{ default: renderDrawer }}\n            name={props.transition || `drawer-slide-${props.placement}`}\n            appear={props.transitionAppear}\n            onAfterEnter={handleAnimationEnd}\n            onAfterLeave={handleAnimationEnd}\n          />\n          {renderMask()}\n        </Teleport>\n      ) : null;\n  }\n});\n"],"names":["visibleCount","drawerGlobalZIndex","defineComponent","name","inheritAttrs","props","drawerProps","emits","drawerEmits","setup","emit","attrs","slots","openStatus","shouldReopen","prefixCls","useGlobalConfig","selfVisible","ref","visible","zIndex","animationEnd","isMounted","wrapRef","headerRef","footerRef","lazyRender","useLazyRender","open","undefined","value","watch","val","tabindex","nextTick","focus","handleClose","type","handleMaskClose","maskClosable","drawerLevel","changeTrans","provide","changeParentTrans","inject","changeBodyOverflow","setBodyStyle","bodyHeight","calcBodyHeight","headerFooter","Number","offsetHeight","observer","MutationObserver","init","parentDom","config","attributes","childList","subtree","observe","disconnect","immediate","toDom","computed","positionStyle","style","position","wrapStyle","isValid","duration","transitionDuration","place","placement","translate","widthStyle","width","heightStyle","height","transform","onMounted","onBeforeUnmount","onActivated","onDeactivated","handleKeyDown","e","keyCode","KeyCode","ESC","escClosable","handleAnimationEnd","renderMask","showMask","_createVNode","Mask","maskStyle","maskClass","renderDrawer","renderConrent","_Fragment","headerStyle","title","closable","onClick","UIcon","default","X","bodyStyle","footer","footerStyle","_withDirectives","_mergeProps","className","size","useShouldRender","destroyOnClose","_vShow","Teleport","Transition","transition","transitionAppear"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  defineComponent,\n  watch,\n  computed,\n  ref,\n  provide,\n  inject,\n  // onMounted,\n  onBeforeUnmount,\n  onActivated,\n  onDeactivated,\n  nextTick,\n  Teleport,\n  Transition,\n  onMounted\n} from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { X } from 'lucide-vue-next';\nimport UIcon from '@uxd-ui/components/Icon';\nimport Mask from '../Mask';\nimport KeyCode from '../../utils/KeyCode';\nimport { useGlobalConfig, useLazyRender, useShouldRender } from '../base/hooks';\nimport { setBodyStyle, isValid } from '../../utils';\nimport { drawerProps, drawerEmits, type ChangeTranslateFunction, type DrawerCloseType } from './Drawer.type';\n\nlet visibleCount = 0;\nconst drawerGlobalZIndex = 1000;\n\nexport default defineComponent({\n  name: 'UDrawer',\n  inheritAttrs: false,\n  props: drawerProps,\n  emits: drawerEmits,\n  setup(props, { emit, attrs, slots }) {\n    let openStatus = false;\n    let shouldReopen = false;\n    const { prefixCls } = useGlobalConfig('drawer');\n    const selfVisible = ref(props.visible);\n    const zIndex = ref<number>(drawerGlobalZIndex);\n    const animationEnd = ref(false);\n    const isMounted = ref(false);\n\n    const wrapRef = ref<HTMLElement | null>(null);\n    const headerRef = ref<HTMLElement | null>(null);\n    const footerRef = ref<HTMLElement | null>(null);\n\n    const lazyRender = useLazyRender(() => props.visible || !props.lazyRender);\n\n    const open = () => {\n      if (!openStatus) {\n        if (props.zIndex !== undefined) {\n          zIndex.value = +props.zIndex;\n        }\n        openStatus = true;\n        // zIndex.value = ++drawerGlobalZIndex;\n      }\n    };\n\n    watch(\n      () => props.visible,\n      (val) => {\n        selfVisible.value = val;\n        if (val && !openStatus) {\n          open();\n          if (attrs.tabindex === 0) {\n            nextTick(() => {\n              wrapRef.value?.focus();\n            });\n          }\n        }\n        if (!val && openStatus) {\n          openStatus = false;\n        }\n      }\n    );\n\n    const handleClose = (type: DrawerCloseType) => {\n      selfVisible.value = false;\n      openStatus = false;\n      emit('update:visible', false);\n      emit('close', type);\n    };\n\n    /**\n     * @param {*}\n     * @return {*}\n     * @description mask close method\n     */\n    const handleMaskClose = () => {\n      if (props.maskClosable) {\n        handleClose('mask');\n      }\n    };\n\n    /**\n     * In case drawer might has child drawer component,\n     * we need to translate parent drawer to tell them apart\n     */\n    const drawerLevel = ref(1);\n\n    const changeTrans = (val: boolean) => {\n      if (val) {\n        drawerLevel.value += 1;\n      } else if (drawerLevel.value > 1) {\n        drawerLevel.value -= 1;\n      }\n    };\n\n    provide('changeParentTrans', changeTrans);\n\n    const changeParentTrans = inject<ChangeTranslateFunction | null>('changeParentTrans', null);\n\n    const changeBodyOverflow = (val: boolean) => {\n      if (visibleCount > 0 && val) {\n        setBodyStyle(true);\n      } else if (!visibleCount) {\n        setBodyStyle(false);\n      }\n    };\n\n    const bodyHeight = ref<string>('');\n\n    const calcBodyHeight = () => {\n      const headerFooter = Number(headerRef.value?.offsetHeight || 0) + Number(footerRef.value?.offsetHeight || 0);\n      bodyHeight.value = `calc(100% - ${headerFooter}px)`;\n    };\n\n    const observer = new MutationObserver(calcBodyHeight);\n\n    let init = false;\n    watch(\n      selfVisible,\n      (val) => {\n        if (changeParentTrans) {\n          changeParentTrans(val);\n        }\n        if (props.parentDom === 'body') {\n          if (val) {\n            visibleCount += 1;\n          } else if (init) {\n            visibleCount -= 1;\n          }\n          if (init) {\n            changeBodyOverflow(val);\n          }\n        }\n        init = true;\n        if (val) {\n          nextTick(() => {\n            calcBodyHeight();\n            const config = { attributes: true, childList: true, subtree: true };\n            if (wrapRef.value) {\n              observer.observe(wrapRef.value as any, config);\n            }\n          });\n        } else {\n          observer.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n\n    const toDom = computed(() => {\n      if (!props.parentDom) {\n        return 'body';\n      }\n      if (typeof props.parentDom === 'function') {\n        return props.parentDom() || 'body';\n      }\n      return props.parentDom;\n    });\n\n    const positionStyle = computed(() => {\n      const style: CSSProperties = {};\n      if (toDom.value !== 'body') {\n        style.position = 'absolute';\n      }\n      return style;\n    });\n\n    const wrapStyle = computed(() => {\n      const style: CSSProperties = {\n        zIndex: zIndex.value\n      };\n\n      if (isValid(props.duration)) {\n        style.transitionDuration = `${props.duration}s`;\n      }\n\n      const place = props.placement;\n      let translate = 'none';\n      let widthStyle: number | undefined = props.width;\n      let heightStyle: number | undefined = props.height;\n      if (place === 'left' || place === 'right') {\n        translate = `translate(${place === 'left' ? 180 : -180}px, 0)`;\n        heightStyle = undefined;\n      }\n\n      if (place === 'top' || place === 'bottom') {\n        translate = `translateY(${place === 'top' ? 180 : -180}px)`;\n        widthStyle = undefined;\n      }\n\n      style.width = widthStyle && `${widthStyle}px`;\n      style.height = heightStyle && `${heightStyle}px`;\n      style.transform = drawerLevel.value > 1 ? translate : undefined;\n      style.zIndex = zIndex.value;\n\n      return style;\n    });\n\n    onMounted(() => {\n      isMounted.value = true;\n    });\n\n    onBeforeUnmount(() => {\n      observer.disconnect();\n      if (changeParentTrans && selfVisible.value) {\n        changeParentTrans(false);\n      }\n      if (props.parentDom === 'body') {\n        if (selfVisible.value) {\n          visibleCount = visibleCount > 0 ? visibleCount - 1 : visibleCount;\n          changeBodyOverflow(false);\n        }\n      }\n    });\n\n    onActivated(() => {\n      if (shouldReopen) {\n        emit('update:visible', true);\n        shouldReopen = false;\n      }\n    });\n\n    onDeactivated(() => {\n      observer.disconnect();\n      if (selfVisible.value) {\n        handleClose('close');\n        shouldReopen = true;\n      }\n    });\n\n    /**\n     * @param {event} e\n     * @return {*}\n     * @description handle key down event, to close drawer\n     */\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.keyCode === KeyCode.ESC && props.escClosable) {\n        handleClose('esc');\n      }\n    };\n\n    /**\n     * @param {*}\n     * @return {*}\n     * @description after transition animation end, invoke callback and desdroy wrap\n     */\n    const handleAnimationEnd = () => {\n      // if (wrapRef.value === e.target && e.animationName.match(/^drawerSlide/)) {\n      //   emit('after-visible-change', selfVisible.value);\n      //   animationEnd.value = !selfVisible.value;\n      // }\n      emit('after-visible-change', selfVisible.value);\n      animationEnd.value = !selfVisible.value;\n    };\n\n    const renderMask = () => {\n      if (props.showMask) {\n        return (\n          <Mask\n            show={props.visible}\n            zIndex={zIndex.value - 1}\n            duration={props.duration}\n            customStyle={{ ...props.maskStyle, ...positionStyle.value }}\n            class={props.maskClass}\n            onClick={handleMaskClose}\n          />\n        );\n      }\n    };\n\n    const renderDrawer = lazyRender(() => {\n      const renderConrent = () => (\n        <>\n          {props.closable && (\n            <button class={`${prefixCls.value}-close`} onClick={() => handleClose('close')}>\n              <UIcon class={`${prefixCls.value}-close-icon`}>\n                <X />\n              </UIcon>\n            </button>\n          )}\n          <div ref={headerRef} class={`${prefixCls.value}-header`} style={props.headerStyle}>\n            <h2 class={`${prefixCls.value}-header-title`}>{slots.title ? slots.title() : props.title}</h2>\n            {props.description && <p class={`${prefixCls.value}-header-description`}>{props.description}</p>}\n          </div>\n          <div class={`${prefixCls.value}-body`} style={{ ...props.bodyStyle, height: bodyHeight.value }}>\n            {slots.default?.()}\n          </div>\n          {slots.footer ? (\n            <div ref={footerRef} class={`${prefixCls.value}-footer`} style={props.footerStyle}>\n              {slots.footer()}\n            </div>\n          ) : null}\n        </>\n      );\n\n      return (\n        <div\n          v-show={selfVisible.value}\n          ref={wrapRef}\n          class={[prefixCls.value, props.className, `${prefixCls.value}-${props.placement}`, `${prefixCls.value}-${props.size}`]}\n          style={{ ...wrapStyle.value, ...positionStyle.value }}\n          {...attrs}\n          tabindex={-1}\n          onKeydown={handleKeyDown}\n        >\n          {useShouldRender(props.visible, props.destroyOnClose, animationEnd.value, renderConrent)}\n        </div>\n      );\n    });\n\n    return () =>\n      isMounted.value ? (\n        <Teleport to={toDom.value}>\n          <Transition\n            v-slots={{ default: renderDrawer }}\n            name={props.transition || `drawer-slide-${props.placement}`}\n            appear={props.transitionAppear}\n            onAfterEnter={handleAnimationEnd}\n            onAfterLeave={handleAnimationEnd}\n          />\n          {renderMask()}\n        </Teleport>\n      ) : null;\n  }\n});\n"],"names":["visibleCount","drawerGlobalZIndex","defineComponent","name","inheritAttrs","props","drawerProps","emits","drawerEmits","setup","emit","attrs","slots","openStatus","shouldReopen","prefixCls","useGlobalConfig","selfVisible","ref","visible","zIndex","animationEnd","isMounted","wrapRef","headerRef","footerRef","lazyRender","useLazyRender","open","undefined","value","watch","val","tabindex","nextTick","focus","handleClose","type","handleMaskClose","maskClosable","drawerLevel","changeTrans","provide","changeParentTrans","inject","changeBodyOverflow","setBodyStyle","bodyHeight","calcBodyHeight","headerFooter","Number","offsetHeight","observer","MutationObserver","init","parentDom","config","attributes","childList","subtree","observe","disconnect","immediate","toDom","computed","positionStyle","style","position","wrapStyle","isValid","duration","transitionDuration","place","placement","translate","widthStyle","width","heightStyle","height","transform","onMounted","onBeforeUnmount","onActivated","onDeactivated","handleKeyDown","e","keyCode","KeyCode","ESC","escClosable","handleAnimationEnd","renderMask","showMask","_createVNode","Mask","maskStyle","maskClass","renderDrawer","renderConrent","_Fragment","closable","onClick","UIcon","default","X","headerStyle","title","description","bodyStyle","footer","footerStyle","_withDirectives","_mergeProps","className","size","useShouldRender","destroyOnClose","_vShow","Teleport","Transition","transition","transitionAppear"],"mappings":"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"}

package/lib/components/Drawer/Drawer.type.d.ts

@@ -34,6 +34,10 @@ export declare const drawerProps: {
         type: StringConstructor;
         default: string;
     };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;

package/lib/components/Drawer/Drawer.type.js

@@ -34,6 +34,10 @@ const drawerProps = {
     type: String,
     default: ""
   },
+  description: {
+    type: String,
+    default: ""
+  },
   closable: {
     type: Boolean,
     default: true

package/lib/components/Drawer/Drawer.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.type.js","sources":["../../../../src/components/Drawer/Drawer.type.ts"],"sourcesContent":["import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';\nimport { oneOf } from '../../utils/propsValidators';\nimport type Drawer from './Drawer';\n\nexport type ParentDom = string | (() => HTMLElement | string | null);\nexport const drawerPlacement = ['top', 'right', 'bottom', 'left'] as const;\nexport type DrawerPlacement = (typeof drawerPlacement)[number];\nexport const drawerSize = ['default', 'large'] as const;\nexport type DrawerSize = (typeof drawerSize)[number];\n\nexport type ChangeTranslateFunction = (val: boolean) => void;\n\nexport const drawerProps = {\n  parentDom: {\n    type: [String, Function] as PropType<ParentDom>,\n    default: 'body'\n  },\n  className: String,\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  placement: {\n    type: String as PropType<DrawerPlacement>,\n    validator: oneOf(drawerPlacement),\n    default: 'right'\n  },\n  size: {\n    type: String as PropType<DrawerSize>,\n    validator: oneOf(drawerSize),\n    default: 'default'\n  },\n  maskClosable: {\n    type: Boolean,\n    default: true\n  },\n  title: {\n    type: String,\n    default: ''\n  },\n  closable: {\n    type: Boolean,\n    default: true\n  },\n  showMask: {\n    type: Boolean,\n    default: true\n  },\n  maskClass: String,\n  maskStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  headerStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  bodyStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  footerStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  width: Number,\n  height: Number,\n  zIndex: Number,\n  duration: Number,\n  escClosable: {\n    type: Boolean,\n    default: true\n  },\n  destroyOnClose: {\n    type: Boolean,\n    default: true\n  },\n  transition: String,\n  transitionAppear: {\n    type: Boolean,\n    default: true\n  },\n  lazyRender: {\n    type: Boolean,\n    default: true\n  }\n};\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>;\n\nexport const drawerCloseType = ['esc', 'mask', 'close'] as const;\nexport type DrawerCloseType = (typeof drawerCloseType)[number];\n\nexport const drawerEmits = {\n  'update:visible': (v: boolean) => typeof v === 'boolean',\n  close: (type: DrawerCloseType) => drawerCloseType.includes(type),\n  'after-visible-change': (v: boolean) => typeof v === 'boolean'\n};\n\nexport type DrawerEmits = typeof drawerEmits;\n\nexport type DrawerInstanceType = InstanceType<typeof Drawer>;\n"],"names":["oneOf"],"mappings":";;;;;;MAKa,kBAAkB,CAAC,OAAO,SAAS,UAAU,MAAM;MAEnD,aAAa,CAAC,WAAW,OAAO;MAKhC,cAAc;AAAA,EACzB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AACX,EACA,WAAW;AAAA,EACX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAWA,sBAAM,eAAe;AAAA,IAChC,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAWA,sBAAM,UAAU;AAAA,IAC3B,SAAS;AAAA;AACX,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,EACX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,EACZ,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAEb;MAIa,kBAAkB,CAAC,OAAO,QAAQ,OAAO;MAGzC,cAAc;AAAA,EACzB,kBAAkB,CAAC,MAAe,OAAO,MAAM;AAAA,EAC/C,OAAO,CAAC,SAA0B,gBAAgB,SAAS,IAAI;AAAA,EAC/D,wBAAwB,CAAC,MAAe,OAAO,MAAM;AACvD;;;;;;;;"}
+{"version":3,"file":"Drawer.type.js","sources":["../../../../src/components/Drawer/Drawer.type.ts"],"sourcesContent":["import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';\nimport { oneOf } from '../../utils/propsValidators';\nimport type Drawer from './Drawer';\n\nexport type ParentDom = string | (() => HTMLElement | string | null);\nexport const drawerPlacement = ['top', 'right', 'bottom', 'left'] as const;\nexport type DrawerPlacement = (typeof drawerPlacement)[number];\nexport const drawerSize = ['default', 'large'] as const;\nexport type DrawerSize = (typeof drawerSize)[number];\n\nexport type ChangeTranslateFunction = (val: boolean) => void;\n\nexport const drawerProps = {\n  parentDom: {\n    type: [String, Function] as PropType<ParentDom>,\n    default: 'body'\n  },\n  className: String,\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  placement: {\n    type: String as PropType<DrawerPlacement>,\n    validator: oneOf(drawerPlacement),\n    default: 'right'\n  },\n  size: {\n    type: String as PropType<DrawerSize>,\n    validator: oneOf(drawerSize),\n    default: 'default'\n  },\n  maskClosable: {\n    type: Boolean,\n    default: true\n  },\n  title: {\n    type: String,\n    default: ''\n  },\n  description: {\n    type: String,\n    default: ''\n  },\n  closable: {\n    type: Boolean,\n    default: true\n  },\n  showMask: {\n    type: Boolean,\n    default: true\n  },\n  maskClass: String,\n  maskStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  headerStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  bodyStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  footerStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({})\n  },\n  width: Number,\n  height: Number,\n  zIndex: Number,\n  duration: Number,\n  escClosable: {\n    type: Boolean,\n    default: true\n  },\n  destroyOnClose: {\n    type: Boolean,\n    default: true\n  },\n  transition: String,\n  transitionAppear: {\n    type: Boolean,\n    default: true\n  },\n  lazyRender: {\n    type: Boolean,\n    default: true\n  }\n};\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>;\n\nexport const drawerCloseType = ['esc', 'mask', 'close'] as const;\nexport type DrawerCloseType = (typeof drawerCloseType)[number];\n\nexport const drawerEmits = {\n  'update:visible': (v: boolean) => typeof v === 'boolean',\n  close: (type: DrawerCloseType) => drawerCloseType.includes(type),\n  'after-visible-change': (v: boolean) => typeof v === 'boolean'\n};\n\nexport type DrawerEmits = typeof drawerEmits;\n\nexport type DrawerInstanceType = InstanceType<typeof Drawer>;\n"],"names":["oneOf"],"mappings":";;;;;;MAKa,kBAAkB,CAAC,OAAO,SAAS,UAAU,MAAM;MAEnD,aAAa,CAAC,WAAW,OAAO;MAKhC,cAAc;AAAA,EACzB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AACX,EACA,WAAW;AAAA,EACX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,WAAWA,sBAAM,eAAe;AAAA,IAChC,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAWA,sBAAM,UAAU;AAAA,IAC3B,SAAS;AAAA;AACX,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,EACX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,EACZ,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAEb;MAIa,kBAAkB,CAAC,OAAO,QAAQ,OAAO;MAGzC,cAAc;AAAA,EACzB,kBAAkB,CAAC,MAAe,OAAO,MAAM;AAAA,EAC/C,OAAO,CAAC,SAA0B,gBAAgB,SAAS,IAAI;AAAA,EAC/D,wBAAwB,CAAC,MAAe,OAAO,MAAM;AACvD;;;;;;;;"}

package/lib/components/Drawer/index.d.ts

@@ -27,6 +27,10 @@ export declare const UDrawer: {
             type: StringConstructor;
             default: string;
         };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -84,6 +88,7 @@ export declare const UDrawer: {
     }, import("vue").PublicProps, {
         closable: boolean;
         size: "default" | "large";
+        description: string;
         visible: boolean;
         placement: "top" | "bottom" | "right" | "left";
         title: string;
@@ -133,6 +138,10 @@ export declare const UDrawer: {
             type: StringConstructor;
             default: string;
         };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -186,6 +195,7 @@ export declare const UDrawer: {
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         closable: boolean;
         size: "default" | "large";
+        description: string;
         visible: boolean;
         placement: "top" | "bottom" | "right" | "left";
         title: string;
@@ -232,6 +242,10 @@ export declare const UDrawer: {
         type: StringConstructor;
         default: string;
     };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -289,6 +303,7 @@ export declare const UDrawer: {
 }, string, {
     closable: boolean;
     size: "default" | "large";
+    description: string;
     visible: boolean;
     placement: "top" | "bottom" | "right" | "left";
     title: string;

package/lib/components/Mask/Mask.d.ts

@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         validator: (value: any) => boolean;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "after-show-mask-change"[], "after-show-mask-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "after-show-mask-change")[], "click" | "after-show-mask-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (StringConstructor | NumberConstructor)[];
     duration: (StringConstructor | NumberConstructor)[];
@@ -86,6 +86,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         validator: (value: any) => boolean;
     };
 }>> & Readonly<{
+    onClick?: (...args: any[]) => any;
     "onAfter-show-mask-change"?: (...args: any[]) => any;
 }>, {
     show: boolean;

package/lib/components/Mask/Mask.js

@@ -55,7 +55,7 @@ const maskProps = {
 var Mask = vue.defineComponent({
   name: "UMask",
   props: maskProps,
-  emits: ["after-show-mask-change"],
+  emits: ["after-show-mask-change", "click"],
   setup(props, {
     slots,
     emit,
@@ -86,6 +86,9 @@ var Mask = vue.defineComponent({
       const maskColor = props.color === "white" ? "255, 255, 255" : "0, 0, 0";
       return `rgba(${maskColor}, ${opacity})`;
     });
+    const handleClick = () => {
+      emit("click");
+    };
     const renderMask = lazyRender(() => {
       const style = {
         backgroundColor: maskBackground.value,
@@ -101,7 +104,8 @@ var Mask = vue.defineComponent({
         "class": prefixCls.value,
         "onTouchmove": props.preventScroll ? handleTouchMove : () => {
         },
-        "onAnimationend": handleAnimationend
+        "onAnimationend": handleAnimationend,
+        "onClick": handleClick
       }, [useShouldRender.useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)]), [[vue.vShow, props.show]]);
     });
     return () => vue.createVNode(vue.Transition, {

package/lib/components/Mask/Mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mask.js","sources":["../../../../src/components/Mask/Mask.tsx"],"sourcesContent":["import { ref, computed, Transition, defineComponent } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { isValid, oneOf, getPropStyle, preventDefault } from '../../utils';\nimport { useGlobalConfig, useLazyRender, useShouldRender } from '../base/hooks';\nimport type { OpacityMap, MaskColor, MaskOpacity } from './Mask.type';\n\nexport const maskColors = ['black', 'white'] as const;\nexport const maskOpacity = ['lighter', 'default', 'darker'] as const;\nexport const opacityMap: OpacityMap = {\n  lighter: 0.35,\n  default: 0.55,\n  darker: 0.75\n};\n\nexport const maskProps = {\n  show: Boolean,\n  zIndex: [Number, String],\n  duration: [Number, String],\n  preventScroll: {\n    type: Boolean,\n    default: true\n  },\n  lazyRender: {\n    type: Boolean,\n    default: true\n  },\n  desdroyOnClose: {\n    type: Boolean,\n    default: true\n  },\n  customStyle: Object as PropType<CSSProperties>,\n  color: {\n    type: String as PropType<MaskColor>,\n    default: 'black',\n    validator: oneOf(maskColors)\n  },\n  opacity: {\n    type: [Number, String],\n    default: 'default',\n    validator: (value: any) => {\n      if (typeof value === 'string') {\n        return maskOpacity.includes(value as MaskOpacity);\n      }\n      return value >= 0 && value <= 1;\n    }\n  }\n};\n\nexport default defineComponent({\n  name: 'UMask',\n  props: maskProps,\n  emits: ['after-show-mask-change'],\n  setup(props, { slots, emit, expose }) {\n    const { prefixCls } = useGlobalConfig('mask');\n    const maskRef = ref<HTMLElement | null>(null);\n    const animationEnd = ref(false);\n    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);\n    expose({ maskRef, animationEnd });\n\n    const handleTouchMove = (event: Event) => {\n      preventDefault(event, true);\n    };\n\n    const handleAnimationend = (event: AnimationEvent) => {\n      if (event.target === maskRef.value && event.animationName.match(/uuiFade$/)) {\n        animationEnd.value = !props.show;\n        emit('after-show-mask-change', props.show);\n      }\n    };\n\n    const maskBackground = computed(() => {\n      const opacity = opacityMap[props.opacity as keyof OpacityMap] ?? props.opacity;\n      const maskColor = props.color === 'white' ? '255, 255, 255' : '0, 0, 0';\n      return `rgba(${maskColor}, ${opacity})`;\n    });\n\n    const renderMask = lazyRender(() => {\n      const style: CSSProperties = {\n        backgroundColor: maskBackground.value,\n        ...getPropStyle('zIndex', props.zIndex),\n        ...props.customStyle\n      };\n\n      if (isValid(props.duration)) {\n        style.animationDuration = `${props.duration}s`;\n      }\n\n      return (\n        <div\n          ref={maskRef}\n          v-show={props.show}\n          style={style}\n          class={prefixCls.value}\n          onTouchmove={props.preventScroll ? handleTouchMove : () => {}}\n          onAnimationend={handleAnimationend}\n        >\n          {useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)}\n        </div>\n      );\n    });\n\n    return () => <Transition v-slots={{ default: renderMask }} name={`fade`} appear />;\n  }\n});\n"],"names":["maskColors","maskOpacity","opacityMap","lighter","default","darker","maskProps","show","Boolean","zIndex","Number","String","duration","preventScroll","type","lazyRender","desdroyOnClose","customStyle","Object","color","validator","oneOf","opacity","value","includes","defineComponent","name","props","emits","setup","slots","emit","expose","prefixCls","useGlobalConfig","maskRef","ref","animationEnd","useLazyRender","handleTouchMove","event","preventDefault","handleAnimationend","target","animationName","match","maskBackground","computed","maskColor","renderMask","style","backgroundColor","getPropStyle","isValid","animationDuration","_withDirectives","_createVNode","useShouldRender","_vShow","Transition"],"mappings":"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"}
+{"version":3,"file":"Mask.js","sources":["../../../../src/components/Mask/Mask.tsx"],"sourcesContent":["import { ref, computed, Transition, defineComponent } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { isValid, oneOf, getPropStyle, preventDefault } from '../../utils';\nimport { useGlobalConfig, useLazyRender, useShouldRender } from '../base/hooks';\nimport type { OpacityMap, MaskColor, MaskOpacity } from './Mask.type';\n\nexport const maskColors = ['black', 'white'] as const;\nexport const maskOpacity = ['lighter', 'default', 'darker'] as const;\nexport const opacityMap: OpacityMap = {\n  lighter: 0.35,\n  default: 0.55,\n  darker: 0.75\n};\n\nexport const maskProps = {\n  show: Boolean,\n  zIndex: [Number, String],\n  duration: [Number, String],\n  preventScroll: {\n    type: Boolean,\n    default: true\n  },\n  lazyRender: {\n    type: Boolean,\n    default: true\n  },\n  desdroyOnClose: {\n    type: Boolean,\n    default: true\n  },\n  customStyle: Object as PropType<CSSProperties>,\n  color: {\n    type: String as PropType<MaskColor>,\n    default: 'black',\n    validator: oneOf(maskColors)\n  },\n  opacity: {\n    type: [Number, String],\n    default: 'default',\n    validator: (value: any) => {\n      if (typeof value === 'string') {\n        return maskOpacity.includes(value as MaskOpacity);\n      }\n      return value >= 0 && value <= 1;\n    }\n  }\n};\n\nexport default defineComponent({\n  name: 'UMask',\n  props: maskProps,\n  emits: ['after-show-mask-change', 'click'],\n  setup(props, { slots, emit, expose }) {\n    const { prefixCls } = useGlobalConfig('mask');\n    const maskRef = ref<HTMLElement | null>(null);\n    const animationEnd = ref(false);\n    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);\n    expose({ maskRef, animationEnd });\n\n    const handleTouchMove = (event: Event) => {\n      preventDefault(event, true);\n    };\n\n    const handleAnimationend = (event: AnimationEvent) => {\n      if (event.target === maskRef.value && event.animationName.match(/uuiFade$/)) {\n        animationEnd.value = !props.show;\n        emit('after-show-mask-change', props.show);\n      }\n    };\n\n    const maskBackground = computed(() => {\n      const opacity = opacityMap[props.opacity as keyof OpacityMap] ?? props.opacity;\n      const maskColor = props.color === 'white' ? '255, 255, 255' : '0, 0, 0';\n      return `rgba(${maskColor}, ${opacity})`;\n    });\n\n    const handleClick = () => {\n      emit('click');\n    };\n\n    const renderMask = lazyRender(() => {\n      const style: CSSProperties = {\n        backgroundColor: maskBackground.value,\n        ...getPropStyle('zIndex', props.zIndex),\n        ...props.customStyle\n      };\n\n      if (isValid(props.duration)) {\n        style.animationDuration = `${props.duration}s`;\n      }\n\n      return (\n        <div\n          ref={maskRef}\n          v-show={props.show}\n          style={style}\n          class={prefixCls.value}\n          onTouchmove={props.preventScroll ? handleTouchMove : () => {}}\n          onAnimationend={handleAnimationend}\n          onClick={handleClick}\n        >\n          {useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)}\n        </div>\n      );\n    });\n\n    return () => <Transition v-slots={{ default: renderMask }} name={`fade`} appear />;\n  }\n});\n"],"names":["maskColors","maskOpacity","opacityMap","lighter","default","darker","maskProps","show","Boolean","zIndex","Number","String","duration","preventScroll","type","lazyRender","desdroyOnClose","customStyle","Object","color","validator","oneOf","opacity","value","includes","defineComponent","name","props","emits","setup","slots","emit","expose","prefixCls","useGlobalConfig","maskRef","ref","animationEnd","useLazyRender","handleTouchMove","event","preventDefault","handleAnimationend","target","animationName","match","maskBackground","computed","maskColor","handleClick","renderMask","style","backgroundColor","getPropStyle","isValid","animationDuration","_withDirectives","_createVNode","useShouldRender","_vShow","Transition"],"mappings":"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"}

package/lib/components/Mask/index.d.ts

@@ -28,8 +28,9 @@ export declare const UMask: {
             validator: (value: any) => boolean;
         };
     }>> & Readonly<{
+        onClick?: (...args: any[]) => any;
         "onAfter-show-mask-change"?: (...args: any[]) => any;
-    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "after-show-mask-change"[], import("vue").PublicProps, {
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "after-show-mask-change")[], import("vue").PublicProps, {
         color: import("./Mask.type").MaskColor;
         show: boolean;
         opacity: string | number;
@@ -71,6 +72,7 @@ export declare const UMask: {
             validator: (value: any) => boolean;
         };
     }>> & Readonly<{
+        onClick?: (...args: any[]) => any;
         "onAfter-show-mask-change"?: (...args: any[]) => any;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         color: import("./Mask.type").MaskColor;
@@ -111,8 +113,9 @@ export declare const UMask: {
         validator: (value: any) => boolean;
     };
 }>> & Readonly<{
+    onClick?: (...args: any[]) => any;
     "onAfter-show-mask-change"?: (...args: any[]) => any;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "after-show-mask-change"[], "after-show-mask-change", {
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "after-show-mask-change")[], "click" | "after-show-mask-change", {
     color: import("./Mask.type").MaskColor;
     show: boolean;
     opacity: string | number;

package/lib/components/Menu/MenuItem.vue.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -108,41 +108,41 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'visible-change': (v: boolean) => boolean;
             'update:visible': (v: boolean) => boolean;
         }, import("vue").PublicProps, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -396,8 +396,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -409,38 +409,38 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -503,8 +503,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         color: {
-            type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-            default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            type: import("vue").PropType<"light" | "red">;
+            default: "light" | "red";
             validator: (val: string) => boolean;
         };
     }>> & Readonly<{
@@ -516,41 +516,41 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         prefixCls: import("vue").ComputedRef<string>;
         arrowStyle: import("vue").ComputedRef<{
             top: string;
+            right: string;
             transform: string;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
             bottom: string;
+            right: string;
             transform: string;
             top?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
+            top: string;
             left: string;
             transform: string;
-            top?: undefined;
-            bottom?: undefined;
             right?: undefined;
+            bottom?: undefined;
         } | {
-            right: string;
+            bottom: string;
+            left: string;
             transform: string;
             top?: undefined;
-            bottom?: undefined;
-            left?: undefined;
+            right?: undefined;
         } | {
             top?: undefined;
+            right?: undefined;
             transform?: undefined;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         }>;
         onVisibleChange: (val: boolean) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'visible-change': (v: boolean) => boolean;
         'update:visible': (v: boolean) => boolean;
     }, string, {
-        color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+        color: "light" | "red";
         offset: number[];
         visible: boolean;
         placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";