@koi-design/uxd-ui 14.0.0 → 14.0.2

package/es/components/Modal/ConfirmDialog.vue.d.ts

@@ -92,7 +92,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        title: StringConstructor;
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -133,10 +140,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         };
         afterClose: import("vue").PropType<() => void>;
-        vertical: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         locale: import("vue").PropType<import("../locale/default").ModalLocal>;
         top: {
             type: NumberConstructor;
@@ -210,7 +213,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        title: StringConstructor;
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -251,10 +261,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         };
         afterClose: import("vue").PropType<() => void>;
-        vertical: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         locale: import("vue").PropType<import("../locale/default").ModalLocal>;
         top: {
             type: NumberConstructor;
@@ -292,8 +298,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         size: "small" | "default";
         width: string | number;
         mask: boolean;
+        description: string;
         visible: boolean;
-        vertical: boolean;
+        title: string;
         parentDom: import("..").ParentDom;
         maskClosable: boolean;
         fullScreen: boolean;

package/es/components/Modal/Modal.mjs

@@ -46,9 +46,6 @@ const _sfc_main = defineComponent({
       } else {
         const width = typeof props.width === "number" ? `${props.width}px` : props.width;
         style.width = width;
-        if (!props.vertical) {
-          style.marginTop = `${props.top}px`;
-        }
       }
       if (props.draggable) {
         style.transform = `translate(${dragData.x}px, ${dragData.y}px)`;
@@ -232,10 +229,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", {
         class: normalizeClass([
           `${_ctx.prefixCls}-wrap`,
-          `${_ctx.prefixCls}-size-${_ctx.size}`,
           ..._ctx.customClass,
           {
-            [`${_ctx.prefixCls}-vertical`]: _ctx.vertical,
             [`${_ctx.prefixCls}-no-mask`]: _ctx.draggable,
             [`${_ctx.prefixCls}-visible`]: _ctx.wrapVisible,
             [`${_ctx.prefixCls}-full-screen`]: _ctx.fullScreen
@@ -261,6 +256,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: "contentRef",
                 class: normalizeClass([
                   `${_ctx.prefixCls}`,
+                  `${_ctx.prefixCls}-size-${_ctx.size}`,
                   {
                     [`${_ctx.prefixCls}-drag`]: _ctx.draggable,
                     [`${_ctx.prefixCls}-dragging`]: _ctx.draggable && _ctx.dragData.dragging,
@@ -296,7 +292,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   renderSlot(_ctx.$slots, "header", {}, () => [
                     createElementVNode("div", {
                       class: normalizeClass(`${_ctx.prefixCls}-title`)
-                    }, toDisplayString(_ctx.title), 3)
+                    }, toDisplayString(_ctx.title), 3),
+                    _ctx.description ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: normalizeClass(`${_ctx.prefixCls}-description`)
+                    }, toDisplayString(_ctx.description), 3)) : createCommentVNode("v-if", true)
                   ])
                 ], 2)) : createCommentVNode("v-if", true),
                 createElementVNode("div", {

package/es/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../../src/components/Modal/Modal.vue"],"sourcesContent":["<template>\n  <teleport :to=\"toDom\">\n    <div :id=\"id\" v-bind=\"$attrs\" :class=\"`${prefixCls}-root`\">\n      <transition name=\"fade\" appear>\n        <div v-show=\"visible\" v-if=\"mask && !draggable && !fullScreen\" :class=\"`${prefixCls}-mask`\" :style=\"{ ...zIndexStyle, ...positionStyle }\" />\n      </transition>\n      <div\n        :class=\"[\n          `${prefixCls}-wrap`,\n          `${prefixCls}-size-${size}`,\n          ...customClass,\n          {\n            [`${prefixCls}-vertical`]: vertical,\n            [`${prefixCls}-no-mask`]: draggable,\n            [`${prefixCls}-visible`]: wrapVisible,\n            [`${prefixCls}-full-screen`]: fullScreen\n          }\n        ]\"\n        :style=\"{ ...zIndexStyle, ...positionStyle }\"\n        @click=\"onMaskClick\"\n        @mousedown=\"onMaskMouseDown\"\n      >\n        <transition :name=\"fullScreen ? 'zoom-big-fast' : 'zoom-big'\" appear @after-leave=\"afterLeave\" @after-enter=\"handleAnimationEnd\">\n          <div v-show=\"visible\" :class=\"`${prefixCls}-container`\" :style=\"transitionDivStyle\">\n            <div\n              ref=\"contentRef\"\n              :class=\"[\n                `${prefixCls}`,\n                {\n                  [`${prefixCls}-drag`]: draggable,\n                  [`${prefixCls}-dragging`]: draggable && dragData.dragging,\n                  [`${prefixCls}-no-title`]: !showHead\n                }\n              ]\"\n              :style=\"modalStyles\"\n              @mousedown=\"onmMouseStart\"\n            >\n              <button v-if=\"closable\" data-not-drag-target :class=\"`${prefixCls}-close`\" @click=\"handleClose('close')\">\n                <slot name=\"close\">\n                  <UIcon :class=\"`${prefixCls}-close-x`\" flex>\n                    <component :is=\"closeIcon\" />\n                  </UIcon>\n                </slot>\n              </button>\n              <div v-if=\"showHead\" key=\"header\" ref=\"header\" :class=\"`${prefixCls}-header`\">\n                <slot name=\"header\">\n                  <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\n                </slot>\n              </div>\n              <div\n                :class=\"[\n                  `${prefixCls}-body ${$attrs.class || ''}`,\n                  { [`${prefixCls}-body-footer-hide`]: footerHide, [`${prefixCls}-body-head-hide`]: !showHead }\n                ]\"\n              >\n                <slot />\n              </div>\n              <div v-if=\"!footerHide\" :class=\"`${prefixCls}-footer`\">\n                <slot name=\"footer\">\n                  <UButton data-not-drag-target type=\"default\" :size=\"size\" @click=\"handleClose('cancel')\">\n                    {{ cancelText || computedLocale.cancelText }}\n                  </UButton>\n                  <UButton data-not-drag-target type=\"primary\" :size=\"size\" :loading=\"loading\" @click=\"handleOk\">\n                    {{ okText || computedLocale.okText }}\n                  </UButton>\n                </slot>\n              </div>\n            </div>\n          </div>\n        </transition>\n      </div>\n    </div>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, onBeforeUnmount, watch, reactive, shallowRef } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport UButton from '@uxd-ui/components/Button';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport { setBodyStyle } from '../../utils/tools';\nimport { type DragData, modalProps, modalEmits, type ModalCloseType } from './Modal.type';\n\nlet openModalCount = 0;\nlet modalsList: ((e?: any) => void)[] = [];\n\nexport default defineComponent({\n  name: 'UModal',\n  components: {\n    UIcon,\n    UButton\n  },\n  inheritAttrs: false,\n  props: modalProps,\n  emits: modalEmits,\n  setup(props, { emit, slots }) {\n    const { prefixCls, config: globalConfig } = useGlobalConfig('modal');\n    const contentRef = shallowRef<HTMLElement | null>(null);\n    const dragData = reactive({\n      x: 0,\n      y: 0,\n      eventX: null,\n      eventY: null,\n      dragging: false\n    } as DragData);\n    const isMouseIn = ref(false);\n    const wrapVisible = ref(false);\n    // ===================== computed ============================\n\n    const computedLocale = computed(() => {\n      return props.locale || globalConfig.locale.modal;\n    });\n\n    const zIndexStyle = computed(() => {\n      return props.zIndex !== undefined ? { zIndex: props.zIndex } : {};\n    });\n    const showHead = computed(() => {\n      return slots.header || props.title;\n    });\n    const modalStyles = computed(() => {\n      const style = {} as CSSProperties;\n      if (props.fullScreen) {\n        style.width = '100%';\n        style.height = '100%';\n      } else {\n        const width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n        style.width = width;\n        if (!props.vertical) {\n          style.marginTop = `${props.top}px`;\n        }\n      }\n      if (props.draggable) {\n        style.transform = `translate(${dragData.x}px, ${dragData.y}px)`;\n      }\n      return {\n        ...style,\n        ...props.dialogStyle\n      } as CSSProperties;\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    const positionStyle = computed(() => {\n      const style: CSSProperties = {};\n      if (toDom.value !== 'body') {\n        style.position = 'absolute';\n      }\n      return style;\n    });\n\n    // ===================== methods ============================\n\n    const handleClose = (type: ModalCloseType) => {\n      emit('update:visible', false);\n      emit('close', type);\n    };\n    const handleOk = (e: Event) => {\n      emit('ok', e);\n    };\n\n    const handleVisible = () => {\n      if (props.visible) {\n        openModalCount += 1;\n        wrapVisible.value = true;\n      } else {\n        openModalCount = openModalCount > 0 ? openModalCount - 1 : openModalCount;\n      }\n      if (openModalCount) {\n        modalsList.push(() => handleClose('esc'));\n        if (toDom.value === 'body') setBodyStyle(true);\n      } else if (toDom.value === 'body') setBodyStyle(false);\n    };\n\n    const onMaskClick = (e: Event) => {\n      if (!props.maskClosable) return;\n      if (isMouseIn.value && props.draggable) {\n        isMouseIn.value = false;\n        return;\n      }\n      if (e.target === e.currentTarget) {\n        handleClose('mask');\n      }\n    };\n\n    const onMaskMouseDown = () => {\n      isMouseIn.value = true;\n    };\n\n    const onKeyDown = (e: any) => {\n      if (props.visible && e.keyCode === 27 && openModalCount) {\n        e.stopPropagation();\n        modalsList[openModalCount - 1]();\n      }\n    };\n    // ===================== drag ============================\n    const onMoveing = (event: any) => {\n      const distanceX = event.clientX - dragData.eventX;\n      const distanceY = event.clientY - dragData.eventY;\n      dragData.eventX = event.clientX;\n      dragData.eventY = event.clientY;\n\n      dragData.x += distanceX;\n      dragData.y += distanceY;\n    };\n    const onMoveEnd = () => {\n      dragData.eventX = null;\n      dragData.eventY = null;\n      dragData.dragging = false;\n      window.removeEventListener('mousemove', onMoveing);\n      window.removeEventListener('mouseup', onMoveEnd);\n    };\n\n    const onmMouseStart = (event: any) => {\n      if (!props.draggable || !contentRef.value) return;\n      if (event.target.closest('[data-not-drag-target]')) return;\n      // if (event.target === contentRef.value) return;\n\n      dragData.eventX = event.clientX;\n      dragData.eventY = event.clientY;\n      dragData.dragging = true;\n\n      window.addEventListener('mousemove', onMoveing);\n      window.addEventListener('mouseup', onMoveEnd);\n    };\n\n    const handleAnimationEnd = () => {\n      emit('after-visible-change', wrapVisible.value);\n    };\n\n    const afterLeave = () => {\n      wrapVisible.value = false;\n      if (props.afterClose) {\n        props.afterClose();\n      }\n      if (!openModalCount) {\n        if (toDom.value === 'body') setBodyStyle(false);\n        modalsList = [];\n      }\n      handleAnimationEnd();\n    };\n\n    // ===================== watch ==============================\n    watch(\n      () => props.visible,\n      () => {\n        handleVisible();\n      }\n    );\n\n    const transitionDivStyle = computed(() => {\n      if (contentRef.value && props.mousePosition) {\n        const rect = contentRef.value.getBoundingClientRect();\n        const transformOrigin = `${props.mousePosition.x - rect.left}px ${props.mousePosition.y - rect.top}px`;\n        return {\n          transformOrigin\n        };\n      }\n      return {};\n    });\n\n    onMounted(() => {\n      document.addEventListener('keydown', onKeyDown);\n\n      handleVisible();\n    });\n\n    onBeforeUnmount(() => {\n      document.removeEventListener('keydown', onKeyDown);\n      if (props.visible) {\n        openModalCount = openModalCount > 0 ? openModalCount - 1 : openModalCount;\n        afterLeave();\n      }\n    });\n\n    return {\n      prefixCls,\n      wrapVisible,\n      contentRef,\n      toDom,\n      positionStyle,\n      showHead,\n      zIndexStyle,\n      modalStyles,\n      transitionDivStyle,\n      computedLocale,\n      dragData,\n      handleClose,\n      handleOk,\n      onMaskClick,\n      onMaskMouseDown,\n      afterLeave,\n      onmMouseStart,\n      onKeyDown,\n      handleAnimationEnd\n    };\n  }\n});\n</script>\n\n<style></style>\n"],"names":["_createBlock","_Teleport","_createElementVNode","_mergeProps","_createVNode","_Transition","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../../../src/components/Modal/Modal.vue"],"sourcesContent":["<template>\n  <teleport :to=\"toDom\">\n    <div :id=\"id\" v-bind=\"$attrs\" :class=\"`${prefixCls}-root`\">\n      <transition name=\"fade\" appear>\n        <div v-show=\"visible\" v-if=\"mask && !draggable && !fullScreen\" :class=\"`${prefixCls}-mask`\" :style=\"{ ...zIndexStyle, ...positionStyle }\" />\n      </transition>\n      <div\n        :class=\"[\n          `${prefixCls}-wrap`,\n\n          ...customClass,\n          {\n            [`${prefixCls}-no-mask`]: draggable,\n            [`${prefixCls}-visible`]: wrapVisible,\n            [`${prefixCls}-full-screen`]: fullScreen\n          }\n        ]\"\n        :style=\"{ ...zIndexStyle, ...positionStyle }\"\n        @click=\"onMaskClick\"\n        @mousedown=\"onMaskMouseDown\"\n      >\n        <transition :name=\"fullScreen ? 'zoom-big-fast' : 'zoom-big'\" appear @after-leave=\"afterLeave\" @after-enter=\"handleAnimationEnd\">\n          <div v-show=\"visible\" :class=\"`${prefixCls}-container`\" :style=\"transitionDivStyle\">\n            <div\n              ref=\"contentRef\"\n              :class=\"[\n                `${prefixCls}`,\n                `${prefixCls}-size-${size}`,\n                {\n                  [`${prefixCls}-drag`]: draggable,\n                  [`${prefixCls}-dragging`]: draggable && dragData.dragging,\n                  [`${prefixCls}-no-title`]: !showHead\n                }\n              ]\"\n              :style=\"modalStyles\"\n              @mousedown=\"onmMouseStart\"\n            >\n              <button v-if=\"closable\" data-not-drag-target :class=\"`${prefixCls}-close`\" @click=\"handleClose('close')\">\n                <slot name=\"close\">\n                  <UIcon :class=\"`${prefixCls}-close-x`\" flex>\n                    <component :is=\"closeIcon\" />\n                  </UIcon>\n                </slot>\n              </button>\n              <div v-if=\"showHead\" key=\"header\" ref=\"header\" :class=\"`${prefixCls}-header`\">\n                <slot name=\"header\">\n                  <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\n                  <div v-if=\"description\" :class=\"`${prefixCls}-description`\">{{ description }}</div>\n                </slot>\n              </div>\n              <div\n                :class=\"[\n                  `${prefixCls}-body ${$attrs.class || ''}`,\n                  { [`${prefixCls}-body-footer-hide`]: footerHide, [`${prefixCls}-body-head-hide`]: !showHead }\n                ]\"\n              >\n                <slot />\n              </div>\n              <div v-if=\"!footerHide\" :class=\"`${prefixCls}-footer`\">\n                <slot name=\"footer\">\n                  <UButton data-not-drag-target type=\"default\" :size=\"size\" @click=\"handleClose('cancel')\">\n                    {{ cancelText || computedLocale.cancelText }}\n                  </UButton>\n                  <UButton data-not-drag-target type=\"primary\" :size=\"size\" :loading=\"loading\" @click=\"handleOk\">\n                    {{ okText || computedLocale.okText }}\n                  </UButton>\n                </slot>\n              </div>\n            </div>\n          </div>\n        </transition>\n      </div>\n    </div>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, onBeforeUnmount, watch, reactive, shallowRef } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport UButton from '@uxd-ui/components/Button';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport { setBodyStyle } from '../../utils/tools';\nimport { type DragData, modalProps, modalEmits, type ModalCloseType } from './Modal.type';\n\nlet openModalCount = 0;\nlet modalsList: ((e?: any) => void)[] = [];\n\nexport default defineComponent({\n  name: 'UModal',\n  components: {\n    UIcon,\n    UButton\n  },\n  inheritAttrs: false,\n  props: modalProps,\n  emits: modalEmits,\n  setup(props, { emit, slots }) {\n    const { prefixCls, config: globalConfig } = useGlobalConfig('modal');\n    const contentRef = shallowRef<HTMLElement | null>(null);\n    const dragData = reactive({\n      x: 0,\n      y: 0,\n      eventX: null,\n      eventY: null,\n      dragging: false\n    } as DragData);\n    const isMouseIn = ref(false);\n    const wrapVisible = ref(false);\n    // ===================== computed ============================\n\n    const computedLocale = computed(() => {\n      return props.locale || globalConfig.locale.modal;\n    });\n\n    const zIndexStyle = computed(() => {\n      return props.zIndex !== undefined ? { zIndex: props.zIndex } : {};\n    });\n    const showHead = computed(() => {\n      return slots.header || props.title;\n    });\n    const modalStyles = computed(() => {\n      const style = {} as CSSProperties;\n      if (props.fullScreen) {\n        style.width = '100%';\n        style.height = '100%';\n      } else {\n        const width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n        style.width = width;\n        // if (!props.vertical) {\n        //   style.marginTop = `${props.top}px`;\n        // }\n      }\n      if (props.draggable) {\n        style.transform = `translate(${dragData.x}px, ${dragData.y}px)`;\n      }\n      return {\n        ...style,\n        ...props.dialogStyle\n      } as CSSProperties;\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    const positionStyle = computed(() => {\n      const style: CSSProperties = {};\n      if (toDom.value !== 'body') {\n        style.position = 'absolute';\n      }\n      return style;\n    });\n\n    // ===================== methods ============================\n\n    const handleClose = (type: ModalCloseType) => {\n      emit('update:visible', false);\n      emit('close', type);\n    };\n    const handleOk = (e: Event) => {\n      emit('ok', e);\n    };\n\n    const handleVisible = () => {\n      if (props.visible) {\n        openModalCount += 1;\n        wrapVisible.value = true;\n      } else {\n        openModalCount = openModalCount > 0 ? openModalCount - 1 : openModalCount;\n      }\n      if (openModalCount) {\n        modalsList.push(() => handleClose('esc'));\n        if (toDom.value === 'body') setBodyStyle(true);\n      } else if (toDom.value === 'body') setBodyStyle(false);\n    };\n\n    const onMaskClick = (e: Event) => {\n      if (!props.maskClosable) return;\n      if (isMouseIn.value && props.draggable) {\n        isMouseIn.value = false;\n        return;\n      }\n      if (e.target === e.currentTarget) {\n        handleClose('mask');\n      }\n    };\n\n    const onMaskMouseDown = () => {\n      isMouseIn.value = true;\n    };\n\n    const onKeyDown = (e: any) => {\n      if (props.visible && e.keyCode === 27 && openModalCount) {\n        e.stopPropagation();\n        modalsList[openModalCount - 1]();\n      }\n    };\n    // ===================== drag ============================\n    const onMoveing = (event: any) => {\n      const distanceX = event.clientX - dragData.eventX;\n      const distanceY = event.clientY - dragData.eventY;\n      dragData.eventX = event.clientX;\n      dragData.eventY = event.clientY;\n\n      dragData.x += distanceX;\n      dragData.y += distanceY;\n    };\n    const onMoveEnd = () => {\n      dragData.eventX = null;\n      dragData.eventY = null;\n      dragData.dragging = false;\n      window.removeEventListener('mousemove', onMoveing);\n      window.removeEventListener('mouseup', onMoveEnd);\n    };\n\n    const onmMouseStart = (event: any) => {\n      if (!props.draggable || !contentRef.value) return;\n      if (event.target.closest('[data-not-drag-target]')) return;\n      // if (event.target === contentRef.value) return;\n\n      dragData.eventX = event.clientX;\n      dragData.eventY = event.clientY;\n      dragData.dragging = true;\n\n      window.addEventListener('mousemove', onMoveing);\n      window.addEventListener('mouseup', onMoveEnd);\n    };\n\n    const handleAnimationEnd = () => {\n      emit('after-visible-change', wrapVisible.value);\n    };\n\n    const afterLeave = () => {\n      wrapVisible.value = false;\n      if (props.afterClose) {\n        props.afterClose();\n      }\n      if (!openModalCount) {\n        if (toDom.value === 'body') setBodyStyle(false);\n        modalsList = [];\n      }\n      handleAnimationEnd();\n    };\n\n    // ===================== watch ==============================\n    watch(\n      () => props.visible,\n      () => {\n        handleVisible();\n      }\n    );\n\n    const transitionDivStyle = computed(() => {\n      if (contentRef.value && props.mousePosition) {\n        const rect = contentRef.value.getBoundingClientRect();\n        const transformOrigin = `${props.mousePosition.x - rect.left}px ${props.mousePosition.y - rect.top}px`;\n        return {\n          transformOrigin\n        };\n      }\n      return {};\n    });\n\n    onMounted(() => {\n      document.addEventListener('keydown', onKeyDown);\n\n      handleVisible();\n    });\n\n    onBeforeUnmount(() => {\n      document.removeEventListener('keydown', onKeyDown);\n      if (props.visible) {\n        openModalCount = openModalCount > 0 ? openModalCount - 1 : openModalCount;\n        afterLeave();\n      }\n    });\n\n    return {\n      prefixCls,\n      wrapVisible,\n      contentRef,\n      toDom,\n      positionStyle,\n      showHead,\n      zIndexStyle,\n      modalStyles,\n      transitionDivStyle,\n      computedLocale,\n      dragData,\n      handleClose,\n      handleOk,\n      onMaskClick,\n      onMaskMouseDown,\n      afterLeave,\n      onmMouseStart,\n      onKeyDown,\n      handleAnimationEnd\n    };\n  }\n});\n</script>\n\n<style></style>\n"],"names":["_createBlock","_Teleport","_createElementVNode","_mergeProps","_createVNode","_Transition","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_resolveDynamicComponent"],"mappings":"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"}

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

@@ -12,7 +12,14 @@ export declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    title: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -53,10 +60,6 @@ export declare const modalProps: {
         default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     };
     afterClose: PropType<() => void>;
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     locale: PropType<ModalLocal>;
     top: {
         type: NumberConstructor;

package/es/components/Modal/Modal.type.mjs

@@ -9,7 +9,14 @@ const modalProps = {
     type: Boolean,
     default: false
   },
-  title: String,
+  title: {
+    type: String,
+    default: ""
+  },
+  description: {
+    type: String,
+    default: ""
+  },
   closable: {
     type: Boolean,
     default: false
@@ -50,10 +57,6 @@ const modalProps = {
     default: () => X
   },
   afterClose: Function,
-  vertical: {
-    type: Boolean,
-    default: false
-  },
   locale: Object,
   top: {
     type: Number,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.type.mjs","sources":["../../../../src/components/Modal/Modal.type.ts"],"sourcesContent":["import type { CSSProperties, ExtractPropTypes, PropType, VNodeChild } from 'vue';\nimport { X } from 'lucide-vue-next';\nimport type { IconPropType } from '../../utils/globalType';\nimport type { ModalLocal } from '../locale/default';\nimport type { ParentDom } from '../Drawer/Drawer.type';\n\nimport type Modal from './Modal.vue';\n\nexport const modalProps = {\n  parentDom: {\n    type: [String, Function] as PropType<ParentDom>,\n    default: 'body'\n  },\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  title: String,\n  closable: {\n    type: Boolean,\n    default: false\n  },\n  maskClosable: {\n    type: Boolean,\n    default: true\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  fullScreen: {\n    type: Boolean,\n    default: false\n  },\n  draggable: {\n    type: Boolean,\n    default: false\n  },\n  mask: {\n    type: Boolean,\n    default: true\n  },\n  okText: String,\n  cancelText: String,\n  width: {\n    type: [String, Number],\n    default: 520\n  },\n  footerHide: {\n    type: Boolean,\n    default: false\n  },\n  zIndex: Number,\n  closeIcon: {\n    type: [String, Object, Function] as PropType<IconPropType>,\n    default: () => X\n  },\n  afterClose: Function as PropType<() => void>,\n  vertical: {\n    type: Boolean,\n    default: false\n  },\n  locale: Object as PropType<ModalLocal>,\n  top: {\n    type: Number,\n    default: 100\n  },\n  // confirm\n  customClass: {\n    type: Array as PropType<string[]>,\n    default: (): string[] => []\n  },\n  mousePosition: {\n    type: Object as PropType<{ x: number; y: number } | undefined>\n  },\n  dialogStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({} as CSSProperties)\n  },\n  id: String,\n  size: {\n    type: String as PropType<'small' | 'default'>,\n    default: 'default',\n    validator: (val: string) => ['small', 'default'].includes(val)\n  }\n};\n\nexport type ModalProps = ExtractPropTypes<typeof modalProps>;\n\nexport interface DragData {\n  x: number | null;\n  y: number | null;\n  eventX: number | null;\n  eventY: number | null;\n  dragging: boolean;\n}\n\nexport const confirmDialogProps = {\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  width: {\n    type: [String, Number]\n  },\n  type: String,\n  content: [String, Function] as PropType<string | (() => VNodeChild)>,\n  title: String,\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  okCancel: Boolean,\n  iconName: [String, Object] as PropType<IconPropType>,\n  okText: String,\n  cancelText: String,\n  close: Function as PropType<() => void>,\n  afterClose: Function as PropType<() => void>,\n  onOk: Function as PropType<() => void>,\n  onCancel: Function as PropType<() => void>,\n  id: String,\n  locale: Object as PropType<ModalLocal>,\n\n  closable: {\n    type: Boolean,\n    default: false\n  },\n  size: {\n    type: String as PropType<'small' | 'default'>,\n    default: 'default',\n    validator: (val: string) => ['small', 'default'].includes(val)\n  }\n};\n\nexport type ConfirmDialogProps = ExtractPropTypes<typeof confirmDialogProps>;\n\nexport const modalCloseType = ['cancel', 'mask', 'close', 'esc'] as const;\nexport type ModalCloseType = (typeof modalCloseType)[number];\n\nexport const modalEmits = {\n  'update:visible': (v: boolean) => typeof v === 'boolean',\n  close: (type: ModalCloseType) => modalCloseType.includes(type),\n  ok: (e: Event) => e instanceof Event,\n  'after-visible-change': (v: boolean) => typeof v === 'boolean'\n};\n\nexport type ModalEmits = typeof modalEmits;\n\nexport type ModalInstanceType = InstanceType<typeof Modal>;\n"],"names":[],"mappings":";;MAQa,aAAa;AAAA,EACxB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AACX,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM;AAAA;AACjB,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,QAAQ;AAAA,EACR,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EAEA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,MAAgB;AAAC;AAC5B,EACA,eAAe;AAAA,IACb,MAAM;AAAA;AACR,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,IAAI;AAAA,EACJ,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW,CAAC,QAAgB,CAAC,SAAS,SAAS,EAAE,SAAS,GAAG;AAAA;AAEjE;MAYa,qBAAqB;AAAA,EAChC,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ,MAAM;AAAA;AACvB,EACA,MAAM;AAAA,EACN,SAAS,CAAC,QAAQ,QAAQ;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,EACV,UAAU,CAAC,QAAQ,MAAM;AAAA,EACzB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW,CAAC,QAAgB,CAAC,SAAS,SAAS,EAAE,SAAS,GAAG;AAAA;AAEjE;MAIa,iBAAiB,CAAC,UAAU,QAAQ,SAAS,KAAK;MAGlD,aAAa;AAAA,EACxB,kBAAkB,CAAC,MAAe,OAAO,MAAM;AAAA,EAC/C,OAAO,CAAC,SAAyB,eAAe,SAAS,IAAI;AAAA,EAC7D,IAAI,CAAC,MAAa,aAAa;AAAA,EAC/B,wBAAwB,CAAC,MAAe,OAAO,MAAM;AACvD;;;;"}
+{"version":3,"file":"Modal.type.mjs","sources":["../../../../src/components/Modal/Modal.type.ts"],"sourcesContent":["import type { CSSProperties, ExtractPropTypes, PropType, VNodeChild } from 'vue';\nimport { X } from 'lucide-vue-next';\nimport type { IconPropType } from '../../utils/globalType';\nimport type { ModalLocal } from '../locale/default';\nimport type { ParentDom } from '../Drawer/Drawer.type';\n\nimport type Modal from './Modal.vue';\n\nexport const modalProps = {\n  parentDom: {\n    type: [String, Function] as PropType<ParentDom>,\n    default: 'body'\n  },\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  title: {\n    type: String,\n    default: ''\n  },\n  description: {\n    type: String,\n    default: ''\n  },\n  closable: {\n    type: Boolean,\n    default: false\n  },\n  maskClosable: {\n    type: Boolean,\n    default: true\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  fullScreen: {\n    type: Boolean,\n    default: false\n  },\n  draggable: {\n    type: Boolean,\n    default: false\n  },\n  mask: {\n    type: Boolean,\n    default: true\n  },\n  okText: String,\n  cancelText: String,\n  width: {\n    type: [String, Number],\n    default: 520\n  },\n  footerHide: {\n    type: Boolean,\n    default: false\n  },\n  zIndex: Number,\n  closeIcon: {\n    type: [String, Object, Function] as PropType<IconPropType>,\n    default: () => X\n  },\n  afterClose: Function as PropType<() => void>,\n  locale: Object as PropType<ModalLocal>,\n  top: {\n    type: Number,\n    default: 100\n  },\n  // confirm\n  customClass: {\n    type: Array as PropType<string[]>,\n    default: (): string[] => []\n  },\n  mousePosition: {\n    type: Object as PropType<{ x: number; y: number } | undefined>\n  },\n  dialogStyle: {\n    type: Object as PropType<CSSProperties>,\n    default: () => ({} as CSSProperties)\n  },\n  id: String,\n  size: {\n    type: String as PropType<'small' | 'default'>,\n    default: 'default',\n    validator: (val: string) => ['small', 'default'].includes(val)\n  }\n};\n\nexport type ModalProps = ExtractPropTypes<typeof modalProps>;\n\nexport interface DragData {\n  x: number | null;\n  y: number | null;\n  eventX: number | null;\n  eventY: number | null;\n  dragging: boolean;\n}\n\nexport const confirmDialogProps = {\n  visible: {\n    type: Boolean,\n    default: false\n  },\n  width: {\n    type: [String, Number]\n  },\n  type: String,\n  content: [String, Function] as PropType<string | (() => VNodeChild)>,\n  title: String,\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  okCancel: Boolean,\n  iconName: [String, Object] as PropType<IconPropType>,\n  okText: String,\n  cancelText: String,\n  close: Function as PropType<() => void>,\n  afterClose: Function as PropType<() => void>,\n  onOk: Function as PropType<() => void>,\n  onCancel: Function as PropType<() => void>,\n  id: String,\n  locale: Object as PropType<ModalLocal>,\n\n  closable: {\n    type: Boolean,\n    default: false\n  },\n  size: {\n    type: String as PropType<'small' | 'default'>,\n    default: 'default',\n    validator: (val: string) => ['small', 'default'].includes(val)\n  }\n};\n\nexport type ConfirmDialogProps = ExtractPropTypes<typeof confirmDialogProps>;\n\nexport const modalCloseType = ['cancel', 'mask', 'close', 'esc'] as const;\nexport type ModalCloseType = (typeof modalCloseType)[number];\n\nexport const modalEmits = {\n  'update:visible': (v: boolean) => typeof v === 'boolean',\n  close: (type: ModalCloseType) => modalCloseType.includes(type),\n  ok: (e: Event) => e instanceof Event,\n  'after-visible-change': (v: boolean) => typeof v === 'boolean'\n};\n\nexport type ModalEmits = typeof modalEmits;\n\nexport type ModalInstanceType = InstanceType<typeof Modal>;\n"],"names":[],"mappings":";;MAQa,aAAa;AAAA,EACxB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AACX,EACA,SAAS;AAAA,IACP,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,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,SAAS;AAAA;AACX,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM;AAAA;AACjB,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EAEA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,MAAgB;AAAC;AAC5B,EACA,eAAe;AAAA,IACb,MAAM;AAAA;AACR,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS,OAAO;AAAC;AACnB,EACA,IAAI;AAAA,EACJ,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW,CAAC,QAAgB,CAAC,SAAS,SAAS,EAAE,SAAS,GAAG;AAAA;AAEjE;MAYa,qBAAqB;AAAA,EAChC,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ,MAAM;AAAA;AACvB,EACA,MAAM;AAAA,EACN,SAAS,CAAC,QAAQ,QAAQ;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,UAAU;AAAA,EACV,UAAU,CAAC,QAAQ,MAAM;AAAA,EACzB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AACX,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW,CAAC,QAAgB,CAAC,SAAS,SAAS,EAAE,SAAS,GAAG;AAAA;AAEjE;MAIa,iBAAiB,CAAC,UAAU,QAAQ,SAAS,KAAK;MAGlD,aAAa;AAAA,EACxB,kBAAkB,CAAC,MAAe,OAAO,MAAM;AAAA,EAC/C,OAAO,CAAC,SAAyB,eAAe,SAAS,IAAI;AAAA,EAC7D,IAAI,CAAC,MAAa,aAAa;AAAA,EAC/B,wBAAwB,CAAC,MAAe,OAAO,MAAM;AACvD;;;;"}

package/es/components/Modal/Modal.vue.d.ts

@@ -9,7 +9,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    title: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -50,10 +57,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     };
     afterClose: import("vue").PropType<() => void>;
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     locale: import("vue").PropType<import("../locale/default").ModalLocal>;
     top: {
         type: NumberConstructor;
@@ -127,7 +130,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    title: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -168,10 +178,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     };
     afterClose: import("vue").PropType<() => void>;
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     locale: import("vue").PropType<import("../locale/default").ModalLocal>;
     top: {
         type: NumberConstructor;
@@ -209,8 +215,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: "small" | "default";
     width: string | number;
     mask: boolean;
+    description: string;
     visible: boolean;
-    vertical: boolean;
+    title: string;
     parentDom: import("..").ParentDom;
     maskClosable: boolean;
     fullScreen: boolean;

package/es/components/Modal/index.d.ts

@@ -19,7 +19,14 @@ export declare const UModal: ({
             type: BooleanConstructor;
             default: boolean;
         };
-        title: StringConstructor;
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -60,10 +67,6 @@ export declare const UModal: ({
             default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         };
         afterClose: import("vue").PropType<() => void>;
-        vertical: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         locale: import("vue").PropType<import("../locale/default").ModalLocal>;
         top: {
             type: NumberConstructor;
@@ -140,8 +143,9 @@ export declare const UModal: ({
         size: "small" | "default";
         width: string | number;
         mask: boolean;
+        description: string;
         visible: boolean;
-        vertical: boolean;
+        title: string;
         parentDom: import("..").ParentDom;
         maskClosable: boolean;
         fullScreen: boolean;
@@ -857,7 +861,14 @@ export declare const UModal: ({
             type: BooleanConstructor;
             default: boolean;
         };
-        title: StringConstructor;
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
         closable: {
             type: BooleanConstructor;
             default: boolean;
@@ -898,10 +909,6 @@ export declare const UModal: ({
             default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         };
         afterClose: import("vue").PropType<() => void>;
-        vertical: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         locale: import("vue").PropType<import("../locale/default").ModalLocal>;
         top: {
             type: NumberConstructor;
@@ -973,8 +980,9 @@ export declare const UModal: ({
         size: "small" | "default";
         width: string | number;
         mask: boolean;
+        description: string;
         visible: boolean;
-        vertical: boolean;
+        title: string;
         parentDom: import("..").ParentDom;
         maskClosable: boolean;
         fullScreen: boolean;
@@ -996,7 +1004,14 @@ export declare const UModal: ({
         type: BooleanConstructor;
         default: boolean;
     };
-    title: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
@@ -1037,10 +1052,6 @@ export declare const UModal: ({
         default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     };
     afterClose: import("vue").PropType<() => void>;
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     locale: import("vue").PropType<import("../locale/default").ModalLocal>;
     top: {
         type: NumberConstructor;
@@ -1117,8 +1128,9 @@ export declare const UModal: ({
     size: "small" | "default";
     width: string | number;
     mask: boolean;
+    description: string;
     visible: boolean;
-    vertical: boolean;
+    title: string;
     parentDom: import("..").ParentDom;
     maskClosable: boolean;
     fullScreen: boolean;

package/es/components/Pagination/Options.d.ts

@@ -42,6 +42,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    totalPage: {
+        type: NumberConstructor;
+        required: true;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'change-page-size': (v: number) => boolean;
     'change-page': (v: number) => boolean;
@@ -88,6 +92,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    totalPage: {
+        type: NumberConstructor;
+        required: true;
+    };
 }>> & Readonly<{
     "onChange-page-size"?: (v: number) => any;
     "onChange-page"?: (v: number) => any;

package/es/components/Pagination/Options.mjs

@@ -54,6 +54,10 @@ var Options = defineComponent({
     dropdownWidth: {
       type: Number,
       default: 128
+    },
+    totalPage: {
+      type: Number,
+      required: true
     }
   },
   emits: {
@@ -127,7 +131,8 @@ var Options = defineComponent({
             "modelValue": stateValue.value,
             "onUpdate:modelValue": ($event) => stateValue.value = $event,
             "onKeyup": handleJumpTo,
-            "onBlur": handleBlur
+            "onBlur": handleBlur,
+            "inputSize": props.totalPage.toString().length
           }, null), createVNode("span", null, [props.locale.page])]);
         }
         return null;

package/es/components/Pagination/Options.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Options.mjs","sources":["../../../../src/components/Pagination/Options.tsx"],"sourcesContent":["import { ref, watch, defineComponent } from 'vue';\nimport type { PropType, Ref } from 'vue';\nimport USelect from '@uxd-ui/components/Select';\nimport UInput from '@uxd-ui/components/Input';\nimport keyCode from '../../utils/KeyCode';\nimport Render from '../base/Render';\nimport type { SelectValueType } from '../Select/Select.type';\nimport type { NormalSizeMap } from '../../utils/globalType';\n\nexport default defineComponent({\n  name: 'PaginationOption',\n  components: {\n    Render\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    current: {\n      type: Number,\n      required: true\n    },\n    showSizer: {\n      type: Boolean,\n      default: false\n    },\n    pageSizeOptions: {\n      type: Array as PropType<number[]>,\n      required: true\n    },\n    locale: {\n      type: Object,\n      required: true\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    pageSize: {\n      type: Number\n    },\n    showElevator: {\n      type: Boolean,\n      default: false\n    },\n    size: {\n      type: String as PropType<NormalSizeMap>,\n      default: 'default'\n    },\n    variant: {\n      type: String as PropType<'soft' | 'surface' | 'simple'>,\n      default: 'surface'\n    },\n    dropdownWidth: {\n      type: Number,\n      default: 128\n    }\n  },\n  emits: {\n    'change-page-size': (v: number) => typeof v === 'number',\n    'change-page': (v: number) => typeof v === 'number'\n  },\n  setup(props, { emit }) {\n    const stateValue: Ref<string> = ref(props.current.toString());\n    const changeSize = (value: number) => {\n      stateValue.value = props.current.toString();\n      emit('change-page-size', value);\n    };\n    watch(\n      () => props.current,\n      (value) => {\n        stateValue.value = value.toString();\n      }\n    );\n\n    const handleBlur = () => {\n      const value = !stateValue.value || Number.isNaN(Number(stateValue.value)) ? props.current : Number(stateValue.value);\n      emit('change-page', value);\n    };\n    const handleJumpTo = (e: any) => {\n      if (stateValue.value === '') return;\n      if (e.keyCode === keyCode.ENTER || e.type === 'click') {\n        emit('change-page', Number(stateValue.value));\n      }\n    };\n\n    return () => {\n      const { prefixCls, showSizer, size, disabled, pageSize, locale } = props;\n\n      const renderSelect = () => {\n        if (showSizer) {\n          const options = props.pageSizeOptions.map((opt) => {\n            return {\n              value: opt,\n              label: `${opt}${locale.item}/${locale.page}`\n            };\n          });\n\n          const cls = `${prefixCls}-options-size-changer`;\n          return (\n            <USelect\n              class={cls}\n              disabled={disabled}\n              size={size}\n              modelValue={pageSize}\n              options={options}\n              onChange={(value: SelectValueType) => changeSize(Number(value))}\n              clearable={false}\n              variant={props.variant !== 'simple' ? props.variant : undefined}\n              dropdownMenuWidth={props.dropdownWidth}\n            >\n              {options}\n            </USelect>\n          );\n        }\n        return null;\n      };\n\n      const renderJumpInput = () => {\n        if (props.showElevator) {\n          return (\n            <div class={`${props.prefixCls}-options-quick-jumper`}>\n              <span>{props.locale.jumpTo}</span>\n              <UInput\n                disabled={props.disabled}\n                size={size}\n                variant={props.variant !== 'simple' ? props.variant : undefined}\n                v-model={stateValue.value}\n                onKeyup={handleJumpTo}\n                onBlur={handleBlur}\n              />\n              <span>{props.locale.page}</span>\n            </div>\n          );\n        }\n        return null;\n      };\n\n      return (\n        <li class={`${prefixCls}-options`}>\n          {renderSelect()}\n          {renderJumpInput()}\n        </li>\n      );\n    };\n  }\n});\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","components","Render","props","prefixCls","type","String","current","Number","required","showSizer","Boolean","default","pageSizeOptions","Array","locale","disabled","pageSize","showElevator","size","variant","dropdownWidth","emits","v","setup","emit","stateValue","ref","changeSize","value","watch","handleBlur","isNaN","handleJumpTo","e","keyCode","ENTER","renderSelect","options","map","opt","label","item","page","cls","_createVNode","USelect","undefined","renderJumpInput","jumpTo","UInput","$event"],"mappings":"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"}
+{"version":3,"file":"Options.mjs","sources":["../../../../src/components/Pagination/Options.tsx"],"sourcesContent":["import { ref, watch, defineComponent } from 'vue';\nimport type { PropType, Ref } from 'vue';\nimport USelect from '@uxd-ui/components/Select';\nimport UInput from '@uxd-ui/components/Input';\nimport keyCode from '../../utils/KeyCode';\nimport Render from '../base/Render';\nimport type { SelectValueType } from '../Select/Select.type';\nimport type { NormalSizeMap } from '../../utils/globalType';\n\nexport default defineComponent({\n  name: 'PaginationOption',\n  components: {\n    Render\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    current: {\n      type: Number,\n      required: true\n    },\n    showSizer: {\n      type: Boolean,\n      default: false\n    },\n    pageSizeOptions: {\n      type: Array as PropType<number[]>,\n      required: true\n    },\n    locale: {\n      type: Object,\n      required: true\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    pageSize: {\n      type: Number\n    },\n    showElevator: {\n      type: Boolean,\n      default: false\n    },\n    size: {\n      type: String as PropType<NormalSizeMap>,\n      default: 'default'\n    },\n    variant: {\n      type: String as PropType<'soft' | 'surface' | 'simple'>,\n      default: 'surface'\n    },\n    dropdownWidth: {\n      type: Number,\n      default: 128\n    },\n    totalPage: {\n      type: Number,\n      required: true\n    }\n  },\n  emits: {\n    'change-page-size': (v: number) => typeof v === 'number',\n    'change-page': (v: number) => typeof v === 'number'\n  },\n  setup(props, { emit }) {\n    const stateValue: Ref<string> = ref(props.current.toString());\n    const changeSize = (value: number) => {\n      stateValue.value = props.current.toString();\n      emit('change-page-size', value);\n    };\n    watch(\n      () => props.current,\n      (value) => {\n        stateValue.value = value.toString();\n      }\n    );\n\n    const handleBlur = () => {\n      const value = !stateValue.value || Number.isNaN(Number(stateValue.value)) ? props.current : Number(stateValue.value);\n      emit('change-page', value);\n    };\n    const handleJumpTo = (e: any) => {\n      if (stateValue.value === '') return;\n      if (e.keyCode === keyCode.ENTER || e.type === 'click') {\n        emit('change-page', Number(stateValue.value));\n      }\n    };\n\n    return () => {\n      const { prefixCls, showSizer, size, disabled, pageSize, locale } = props;\n\n      const renderSelect = () => {\n        if (showSizer) {\n          const options = props.pageSizeOptions.map((opt) => {\n            return {\n              value: opt,\n              label: `${opt}${locale.item}/${locale.page}`\n            };\n          });\n\n          const cls = `${prefixCls}-options-size-changer`;\n          return (\n            <USelect\n              class={cls}\n              disabled={disabled}\n              size={size}\n              modelValue={pageSize}\n              options={options}\n              onChange={(value: SelectValueType) => changeSize(Number(value))}\n              clearable={false}\n              variant={props.variant !== 'simple' ? props.variant : undefined}\n              dropdownMenuWidth={props.dropdownWidth}\n            >\n              {options}\n            </USelect>\n          );\n        }\n        return null;\n      };\n\n      const renderJumpInput = () => {\n        if (props.showElevator) {\n          return (\n            <div class={`${props.prefixCls}-options-quick-jumper`}>\n              <span>{props.locale.jumpTo}</span>\n              <UInput\n                disabled={props.disabled}\n                size={size}\n                variant={props.variant !== 'simple' ? props.variant : undefined}\n                v-model={stateValue.value}\n                onKeyup={handleJumpTo}\n                onBlur={handleBlur}\n                inputSize={props.totalPage.toString().length}\n              />\n              <span>{props.locale.page}</span>\n            </div>\n          );\n        }\n        return null;\n      };\n\n      return (\n        <li class={`${prefixCls}-options`}>\n          {renderSelect()}\n          {renderJumpInput()}\n        </li>\n      );\n    };\n  }\n});\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","components","Render","props","prefixCls","type","String","current","Number","required","showSizer","Boolean","default","pageSizeOptions","Array","locale","disabled","pageSize","showElevator","size","variant","dropdownWidth","totalPage","emits","v","setup","emit","stateValue","ref","changeSize","value","watch","handleBlur","isNaN","handleJumpTo","e","keyCode","ENTER","renderSelect","options","map","opt","label","item","page","cls","_createVNode","USelect","undefined","renderJumpInput","jumpTo","UInput","$event","length"],"mappings":"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"}

package/es/components/Pagination/Pagination.d.ts

@@ -436,6 +436,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: NumberConstructor;
             default: number;
         };
+        totalPage: {
+            type: NumberConstructor;
+            required: true;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'change-page-size': (v: number) => boolean;
         'change-page': (v: number) => boolean;
@@ -482,6 +486,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: NumberConstructor;
             default: number;
         };
+        totalPage: {
+            type: NumberConstructor;
+            required: true;
+        };
     }>> & Readonly<{
         "onChange-page-size"?: (v: number) => any;
         "onChange-page"?: (v: number) => any;

package/es/components/Pagination/Pagination.mjs

@@ -222,6 +222,7 @@ var Pagination = defineComponent({
           "modelValue": this.stateCurrent,
           "disabled": this.disabled,
           "size": this.size,
+          "inputSize": this.totalPage.toString().length,
           "onKeyup": this.onKeyUp,
           "onKeydown": this.onKeyDown,
           "onBlur": this.onBlur
@@ -271,6 +272,7 @@ var Pagination = defineComponent({
       "dropdownWidth": this.selectDropdownWidth,
       "variant": this.variant,
       "pageSizeOptions": this.pageSizeOptions,
+      "totalPage": this.totalPage,
       "onChange-page-size": this.onChangePageSize,
       "onChange-page": this.onChangePage
     }, null)]);