@koi-design/uxd-ui 12.1.36-beta.0

package/es/components/Drawer/Drawer.mjs

@@ -0,0 +1,282 @@
+import { defineComponent, ref, watch, nextTick, provide, inject, computed, onMounted, onBeforeUnmount, onActivated, onDeactivated, createVNode, Fragment, withDirectives, mergeProps, vShow, Teleport, Transition } from 'vue';
+import { URoundClose } from '@koi-design/uxd-icon';
+import { UIcon } from '../Icon/index.mjs';
+import '../Mask/index.mjs';
+import KeyCode from '../../utils/KeyCode.mjs';
+import '../base/hooks/index.mjs';
+import '../../utils/index.mjs';
+import { drawerProps, drawerEmits } from './Drawer.type.mjs';
+import useGlobalConfig from '../base/hooks/useGlobalConfig.mjs';
+import { useLazyRender } from '../base/hooks/useLazyRender.mjs';
+import { setBodyStyle } from '../../utils/tools.mjs';
+import { isValid } from '../../utils/isValid.mjs';
+import Mask from '../Mask/Mask.mjs';
+import { useShouldRender } from '../base/hooks/useShouldRender.mjs';
+
+let visibleCount = 0;
+const drawerGlobalZIndex = 1e3;
+var Drawer = defineComponent({
+  name: "UDrawer",
+  inheritAttrs: false,
+  props: drawerProps,
+  emits: drawerEmits,
+  setup(props, {
+    emit,
+    attrs,
+    slots
+  }) {
+    let openStatus = false;
+    let shouldReopen = false;
+    const {
+      prefixCls
+    } = useGlobalConfig("drawer");
+    const selfVisible = ref(props.visible);
+    const zIndex = ref(drawerGlobalZIndex);
+    const animationEnd = ref(false);
+    const isMounted = ref(false);
+    const wrapRef = ref(null);
+    const headerRef = ref(null);
+    const footerRef = ref(null);
+    const lazyRender = useLazyRender(() => props.visible || !props.lazyRender);
+    const open = () => {
+      if (!openStatus) {
+        if (props.zIndex !== void 0) {
+          zIndex.value = +props.zIndex;
+        }
+        openStatus = true;
+      }
+    };
+    watch(() => props.visible, (val) => {
+      selfVisible.value = val;
+      if (val && !openStatus) {
+        open();
+        if (attrs.tabindex === 0) {
+          nextTick(() => {
+            var _a;
+            (_a = wrapRef.value) == null ? void 0 : _a.focus();
+          });
+        }
+      }
+      if (!val && openStatus) {
+        openStatus = false;
+      }
+    });
+    const handleClose = (type) => {
+      selfVisible.value = false;
+      openStatus = false;
+      emit("update:visible", false);
+      emit("close", type);
+    };
+    const handleMaskClose = () => {
+      if (props.maskClosable) {
+        handleClose("mask");
+      }
+    };
+    const drawerLevel = ref(1);
+    const changeTrans = (val) => {
+      if (val) {
+        drawerLevel.value += 1;
+      } else if (drawerLevel.value > 1) {
+        drawerLevel.value -= 1;
+      }
+    };
+    provide("changeParentTrans", changeTrans);
+    const changeParentTrans = inject("changeParentTrans", null);
+    const changeBodyOverflow = (val) => {
+      if (visibleCount > 0 && val) {
+        setBodyStyle(true);
+      } else if (!visibleCount) {
+        setBodyStyle(false);
+      }
+    };
+    const bodyHeight = ref("");
+    const calcBodyHeight = () => {
+      var _a, _b;
+      const headerFooter = Number(((_a = headerRef.value) == null ? void 0 : _a.offsetHeight) || 0) + Number(((_b = footerRef.value) == null ? void 0 : _b.offsetHeight) || 0);
+      bodyHeight.value = `calc(100% - ${headerFooter}px)`;
+    };
+    const observer = new MutationObserver(calcBodyHeight);
+    let init = false;
+    watch(selfVisible, (val) => {
+      if (changeParentTrans) {
+        changeParentTrans(val);
+      }
+      if (props.parentDom === "body") {
+        if (val) {
+          visibleCount += 1;
+        } else if (init) {
+          visibleCount -= 1;
+        }
+        if (init) {
+          changeBodyOverflow(val);
+        }
+      }
+      init = true;
+      if (val) {
+        nextTick(() => {
+          calcBodyHeight();
+          const config = {
+            attributes: true,
+            childList: true,
+            subtree: true
+          };
+          if (wrapRef.value) {
+            observer.observe(wrapRef.value, config);
+          }
+        });
+      } else {
+        observer.disconnect();
+      }
+    }, {
+      immediate: true
+    });
+    const toDom = computed(() => {
+      if (!props.parentDom) {
+        return "body";
+      }
+      if (typeof props.parentDom === "function") {
+        return props.parentDom() || "body";
+      }
+      return props.parentDom;
+    });
+    const positionStyle = computed(() => {
+      const style = {};
+      if (toDom.value !== "body") {
+        style.position = "absolute";
+      }
+      return style;
+    });
+    const wrapStyle = computed(() => {
+      const style = {
+        zIndex: zIndex.value
+      };
+      if (isValid(props.duration)) {
+        style.transitionDuration = `${props.duration}s`;
+      }
+      const place = props.placement;
+      let translate = "none";
+      let widthStyle = props.width;
+      let heightStyle = props.height;
+      if (place === "left" || place === "right") {
+        translate = `translate(${place === "left" ? 180 : -180}px, 0)`;
+        heightStyle = void 0;
+      }
+      if (place === "top" || place === "bottom") {
+        translate = `translateY(${place === "top" ? 180 : -180}px)`;
+        widthStyle = void 0;
+      }
+      style.width = widthStyle && `${widthStyle}px`;
+      style.height = heightStyle && `${heightStyle}px`;
+      style.transform = drawerLevel.value > 1 ? translate : void 0;
+      style.zIndex = zIndex.value;
+      return style;
+    });
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    onBeforeUnmount(() => {
+      observer.disconnect();
+      if (changeParentTrans && selfVisible.value) {
+        changeParentTrans(false);
+      }
+      if (props.parentDom === "body") {
+        if (selfVisible.value) {
+          visibleCount = visibleCount > 0 ? visibleCount - 1 : visibleCount;
+          changeBodyOverflow(false);
+        }
+      }
+    });
+    onActivated(() => {
+      if (shouldReopen) {
+        emit("update:visible", true);
+        shouldReopen = false;
+      }
+    });
+    onDeactivated(() => {
+      observer.disconnect();
+      if (selfVisible.value) {
+        handleClose("close");
+        shouldReopen = true;
+      }
+    });
+    const handleKeyDown = (e) => {
+      if (e.keyCode === KeyCode.ESC && props.escClosable) {
+        handleClose("esc");
+      }
+    };
+    const handleAnimationEnd = () => {
+      emit("after-visible-change", selfVisible.value);
+      animationEnd.value = !selfVisible.value;
+    };
+    const renderMask = () => {
+      if (props.showMask) {
+        return createVNode(Mask, {
+          "show": props.visible,
+          "zIndex": zIndex.value - 1,
+          "duration": props.duration,
+          "customStyle": {
+            ...props.maskStyle,
+            ...positionStyle.value
+          },
+          "class": props.maskClass,
+          "onClick": handleMaskClose
+        }, null);
+      }
+    };
+    const renderDrawer = lazyRender(() => {
+      const renderConrent = () => {
+        var _a;
+        return createVNode(Fragment, null, [createVNode("div", {
+          "ref": headerRef,
+          "class": `${prefixCls.value}-header`,
+          "style": props.headerStyle
+        }, [createVNode("h2", {
+          "class": `${prefixCls.value}-header-title`
+        }, [slots.title ? slots.title() : props.title]), props.closable && createVNode("button", {
+          "class": `${prefixCls.value}-close`,
+          "onClick": () => handleClose("close")
+        }, [createVNode(UIcon, {
+          "class": `${prefixCls.value}-close-icon`
+        }, {
+          default: () => [createVNode(URoundClose, null, null)]
+        })])]), createVNode("div", {
+          "class": `${prefixCls.value}-body`,
+          "style": {
+            ...props.bodyStyle,
+            height: bodyHeight.value
+          }
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), slots.footer ? createVNode("div", {
+          "ref": footerRef,
+          "class": `${prefixCls.value}-footer`,
+          "style": props.footerStyle
+        }, [slots.footer()]) : null]);
+      };
+      return withDirectives(createVNode("div", mergeProps({
+        "ref": wrapRef,
+        "class": [prefixCls.value, props.className, `${prefixCls.value}-${props.placement}`, `${prefixCls.value}-${props.size}`],
+        "style": {
+          ...wrapStyle.value,
+          ...positionStyle.value
+        }
+      }, attrs, {
+        "tabindex": -1,
+        "onKeydown": handleKeyDown
+      }), [useShouldRender(props.visible, props.destroyOnClose, animationEnd.value, renderConrent)]), [[vShow, selfVisible.value]]);
+    });
+    return () => isMounted.value ? createVNode(Teleport, {
+      "to": toDom.value
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": props.transition || `drawer-slide-${props.placement}`,
+        "appear": props.transitionAppear,
+        "onAfterEnter": handleAnimationEnd,
+        "onAfterLeave": handleAnimationEnd
+      }, {
+        default: renderDrawer
+      }), renderMask()]
+    }) : null;
+  }
+});
+
+export { Drawer as default };
+//# sourceMappingURL=Drawer.mjs.map

package/es/components/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","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 { URoundClose } from '@koi-design/uxd-icon';\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, 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                  <URoundClose />\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","URoundClose","bodyStyle","footer","footerStyle","_withDirectives","_mergeProps","className","size","useShouldRender","destroyOnClose","_vShow","Teleport","Transition","transition","transitionAppear"],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import type Drawer from './Drawer';
+export declare type ParentDom = string | (() => HTMLElement | string | null);
+export declare const drawerPlacement: readonly ["top", "right", "bottom", "left"];
+export declare type DrawerPlacement = (typeof drawerPlacement)[number];
+export declare const drawerSize: readonly ["default", "large"];
+export declare type DrawerSize = (typeof drawerSize)[number];
+export declare type ChangeTranslateFunction = (val: boolean) => void;
+export declare const drawerProps: {
+    parentDom: {
+        type: PropType<ParentDom>;
+        default: string;
+    };
+    className: StringConstructor;
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placement: {
+        type: PropType<"top" | "bottom" | "right" | "left">;
+        validator: (val: "top" | "bottom" | "right" | "left") => boolean;
+        default: string;
+    };
+    size: {
+        type: PropType<"default" | "large">;
+        validator: (val: "default" | "large") => boolean;
+        default: string;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClass: StringConstructor;
+    maskStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    headerStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    bodyStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    footerStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zIndex: NumberConstructor;
+    duration: NumberConstructor;
+    escClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: StringConstructor;
+    transitionAppear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare type DrawerProps = ExtractPropTypes<typeof drawerProps>;
+export declare const drawerCloseType: readonly ["esc", "mask", "close"];
+export declare type DrawerCloseType = (typeof drawerCloseType)[number];
+export declare const drawerEmits: {
+    'update:visible': (v: boolean) => boolean;
+    close: (type: DrawerCloseType) => boolean;
+    'after-visible-change': (v: boolean) => boolean;
+};
+export declare type DrawerEmits = typeof drawerEmits;
+export declare type DrawerInstanceType = InstanceType<typeof Drawer>;

package/es/components/Drawer/Drawer.type.mjs

@@ -0,0 +1,88 @@
+import { oneOf } from '../../utils/propsValidators.mjs';
+
+const drawerPlacement = ["top", "right", "bottom", "left"];
+const drawerSize = ["default", "large"];
+const drawerProps = {
+  parentDom: {
+    type: [String, Function],
+    default: "body"
+  },
+  className: String,
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  placement: {
+    type: String,
+    validator: oneOf(drawerPlacement),
+    default: "right"
+  },
+  size: {
+    type: String,
+    validator: oneOf(drawerSize),
+    default: "default"
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  showMask: {
+    type: Boolean,
+    default: true
+  },
+  maskClass: String,
+  maskStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  headerStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  bodyStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  footerStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  width: Number,
+  height: Number,
+  zIndex: Number,
+  duration: Number,
+  escClosable: {
+    type: Boolean,
+    default: true
+  },
+  destroyOnClose: {
+    type: Boolean,
+    default: true
+  },
+  transition: String,
+  transitionAppear: {
+    type: Boolean,
+    default: true
+  },
+  lazyRender: {
+    type: Boolean,
+    default: true
+  }
+};
+const drawerCloseType = ["esc", "mask", "close"];
+const drawerEmits = {
+  "update:visible": (v) => typeof v === "boolean",
+  close: (type) => drawerCloseType.includes(type),
+  "after-visible-change": (v) => typeof v === "boolean"
+};
+
+export { drawerCloseType, drawerEmits, drawerPlacement, drawerProps, drawerSize };
+//# sourceMappingURL=Drawer.type.mjs.map

package/es/components/Drawer/Drawer.type.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.type.mjs","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":[],"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,WAAW,MAAM,eAAe;AAAA,IAChC,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW,MAAM,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;;;;"}