@vipl520/dk-ui 1.0.41 → 1.0.44

package/lib/attachment-dialog/src/attachment-dialog.vue2.js

@@ -52,7 +52,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(vue.unref(bem)()),
         title: title.value,
         width: "1040px",
-        fullscreen: false
+        fullscreen: false,
+        "z-index": _ctx.zIndex
       }, {
         default: vue.withCtx(() => [
           vue.createVNode(_component_dk_attachment, {
@@ -84,7 +85,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "class", "title"]);
+      }, 8, ["modelValue", "class", "title", "z-index"]);
     };
   }
 });

package/lib/attachment-dialog/src/attachment-dialog.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-dialog.vue2.js","sources":["../../../src/attachment-dialog/src/attachment-dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkAttachmentDialog',\n});\n</script>\n<template>\n  <DkDialog\n    v-model=\"dialogVisible\"\n    :class=\"bem()\"\n    :title=\"title\"\n    width=\"1040px\"\n    :fullscreen=\"false\"\n  >\n    <dk-attachment ref=\"attachment\" :type=\"_type\" />\n    <div class=\"text-center m2\">\n      <el-button type=\"primary\" @click=\"confirm()\">确定</el-button>\n      <el-button @click=\"cancel()\">关闭</el-button>\n    </div>\n  </DkDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  createNamespace,\n  getAttachmentTitle,\n  getAttachmentType,\n} from '@vipl520/utils'\nimport { attachmentDialogProps } from './props'\nimport { ref } from 'vue'\nimport { ElMessage } from 'element-plus'\nconst [_, bem] = createNamespace('attachment-dialog')\n\n\n\nconst props = defineProps(attachmentDialogProps)\nconst attachment = ref()\nconst dialogVisible = ref(false)\nconst title = ref(props.title || getAttachmentTitle(props.type))\n\nconst _type = ref(getAttachmentType(props.type))\n\nconst emit = defineEmits(['confirm'])\n\nconst confirm = () => {\n  if (attachment.value.chooseFileList.length > 0) {\n    emit('confirm', attachment.value.chooseFileList || [])\n    dialogVisible.value = false\n  } else {\n    ElMessage.warning({ message: '请先选择文件' })\n  }\n}\n\n// 关闭\nconst cancel = () => {\n  dialogVisible.value = false\n}\n\nconst open = () => {\n  dialogVisible.value = true\n}\n\ndefineExpose({\n  dialogVisible,\n  attachment,\n  cancel,\n  open,\n})\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","getAttachmentTitle","getAttachmentType","ElMessage"],"mappings":";;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,oBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AA2BD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,mBAAmB,CAAA,CAAA;AAKpD,IAAA,MAAM,aAAaC,OAAI,EAAA,CAAA;AACvB,IAAM,MAAA,aAAA,GAAgBA,QAAI,KAAK,CAAA,CAAA;AAC/B,IAAA,MAAM,QAAQA,OAAI,CAAA,KAAA,CAAM,SAASC,wBAAmB,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAE/D,IAAA,MAAM,KAAQ,GAAAD,OAAA,CAAIE,uBAAkB,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAI/C,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,IAAI,UAAW,CAAA,KAAA,CAAM,cAAe,CAAA,MAAA,GAAS,CAAG,EAAA;AAC9C,QAAA,IAAA,CAAK,SAAW,EAAA,UAAA,CAAW,KAAM,CAAA,cAAA,IAAkB,EAAE,CAAA,CAAA;AACrD,QAAA,aAAA,CAAc,KAAQ,GAAA,KAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAAC,qBAAA,CAAU,OAAQ,CAAA,EAAE,OAAS,EAAA,sCAAA,EAAU,CAAA,CAAA;AAAA,OACzC;AAAA,KACF,CAAA;AAGA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,KAAQ,GAAA,KAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAa,QAAA,CAAA;AAAA,MACX,aAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"attachment-dialog.vue2.js","sources":["../../../src/attachment-dialog/src/attachment-dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkAttachmentDialog',\n});\n</script>\n<template>\n  <DkDialog v-model=\"dialogVisible\" :class=\"bem()\" :title=\"title\" width=\"1040px\" :fullscreen=\"false\" :z-index=\"zIndex\">\n    <dk-attachment ref=\"attachment\" :type=\"_type\" />\n    <div class=\"text-center m2\">\n      <el-button type=\"primary\" @click=\"confirm()\">确定</el-button>\n      <el-button @click=\"cancel()\">关闭</el-button>\n    </div>\n  </DkDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace, getAttachmentTitle, getAttachmentType } from '@vipl520/utils'\nimport { attachmentDialogProps } from './props'\nimport { ref } from 'vue'\nimport { ElMessage } from 'element-plus'\nconst [_, bem] = createNamespace('attachment-dialog')\n\n\n\nconst props = defineProps(attachmentDialogProps)\nconst attachment = ref()\nconst dialogVisible = ref(false)\nconst title = ref(props.title || getAttachmentTitle(props.type))\n\nconst _type = ref(getAttachmentType(props.type))\n\nconst emit = defineEmits(['confirm'])\n\nconst confirm = () => {\n  if (attachment.value.chooseFileList.length > 0) {\n    emit('confirm', attachment.value.chooseFileList || [])\n    dialogVisible.value = false\n  } else {\n    ElMessage.warning({ message: '请先选择文件' })\n  }\n}\n\n// 关闭\nconst cancel = () => {\n  dialogVisible.value = false\n}\n\nconst open = () => {\n  dialogVisible.value = true\n}\n\ndefineExpose({\n  dialogVisible,\n  attachment,\n  cancel,\n  open,\n})\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","getAttachmentTitle","getAttachmentType","ElMessage"],"mappings":";;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,oBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAiBD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,mBAAmB,CAAA,CAAA;AAKpD,IAAA,MAAM,aAAaC,OAAI,EAAA,CAAA;AACvB,IAAM,MAAA,aAAA,GAAgBA,QAAI,KAAK,CAAA,CAAA;AAC/B,IAAA,MAAM,QAAQA,OAAI,CAAA,KAAA,CAAM,SAASC,wBAAmB,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAE/D,IAAA,MAAM,KAAQ,GAAAD,OAAA,CAAIE,uBAAkB,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAI/C,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,IAAI,UAAW,CAAA,KAAA,CAAM,cAAe,CAAA,MAAA,GAAS,CAAG,EAAA;AAC9C,QAAA,IAAA,CAAK,SAAW,EAAA,UAAA,CAAW,KAAM,CAAA,cAAA,IAAkB,EAAE,CAAA,CAAA;AACrD,QAAA,aAAA,CAAc,KAAQ,GAAA,KAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAAC,qBAAA,CAAU,OAAQ,CAAA,EAAE,OAAS,EAAA,sCAAA,EAAU,CAAA,CAAA;AAAA,OACzC;AAAA,KACF,CAAA;AAGA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,KAAQ,GAAA,KAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAa,QAAA,CAAA;AAAA,MACX,aAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/attachment-dialog/src/props.d.ts

@@ -4,6 +4,10 @@ export declare const attachmentDialogProps: {
         type: StringConstructor;
         default: string;
     };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
     type: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;

package/lib/attachment-dialog/src/props.js

@@ -8,6 +8,10 @@ const attachmentDialogProps = {
   title: {
     type: String,
     default: ""
+  },
+  zIndex: {
+    type: Number,
+    default: 1299
   }
 };
 

package/lib/attachment-dialog/src/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../src/attachment-dialog/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\nimport { attachmentProps } from '../../attachment'\n\nexport const attachmentDialogProps = {\n  ...attachmentProps,\n  title: {\n    type: String,\n    default: '',\n  },\n}\n\nexport type AttachmentDialogProps = ExtractPropTypes<\n  typeof attachmentDialogProps\n>\n"],"names":["attachmentProps"],"mappings":";;;;;AAGO,MAAM,qBAAwB,GAAA;AAAA,EACnC,GAAGA,qBAAA;AAAA,EACH,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AACF;;;;"}
+{"version":3,"file":"props.js","sources":["../../../src/attachment-dialog/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\nimport { attachmentProps } from '../../attachment'\n\nexport const attachmentDialogProps = {\n  ...attachmentProps,\n  title: {\n    type: String,\n    default: '',\n  },\n  zIndex: {\n    type: Number,\n    default: 1299,\n  },\n}\n\nexport type AttachmentDialogProps = ExtractPropTypes<typeof attachmentDialogProps>\n"],"names":["attachmentProps"],"mappings":";;;;;AAGO,MAAM,qBAAwB,GAAA;AAAA,EACnC,GAAGA,qBAAA;AAAA,EACH,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AACF;;;;"}

package/lib/audio-list-input/src/audio-list-input.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-list-input.vue2.js","sources":["../../../src/audio-list-input/src/audio-list-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkAudioListInput',\n});\n</script>\n<template>\n  <dk-file-list-input v-bind=\"$props\" v-model=\"input\" :class=\"bem()\" :type=\"2\" @change=\"handleInput(input)\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { audioListInputProps } from './props'\nimport { ref, watch } from 'vue'\nconst [_, bem] = createNamespace('audio-list-input')\n\n\n\nconst props = defineProps(audioListInputProps)\nconst input = ref(props.modelValue)\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,kBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAUD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,kBAAkB,CAAA,CAAA;AAKnD,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAGlC,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"audio-list-input.vue2.js","sources":["../../../src/audio-list-input/src/audio-list-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkAudioListInput',\n});\n</script>\n<template>\n  <dk-file-list-input\n    v-bind=\"$props\"\n    v-model=\"input\"\n    :class=\"bem()\"\n    :type=\"2\"\n    @change=\"handleInput(input)\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { audioListInputProps } from './props'\nimport { ref, watch } from 'vue'\nconst [_, bem] = createNamespace('audio-list-input')\n\n\n\nconst props = defineProps(audioListInputProps)\nconst input = ref(props.modelValue)\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,kBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAgBD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,kBAAkB,CAAA,CAAA;AAKnD,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAGlC,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;;"}

package/lib/box-size-input/src/box-size-input.vue2.js

@@ -7,6 +7,7 @@ var props = require('./props.js');
 var core = require('@vueuse/core');
 
 const _hoisted_1 = ["onMousedown"];
+const _hoisted_2 = { style: { "display": "flex" } };
 const __default__ = vue.defineComponent({
   name: "DkBoxSizeInput"
 });
@@ -184,8 +185,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _component_dk_icon = vue.resolveComponent("dk-icon");
       const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-      const _component_el_select_v2 = vue.resolveComponent("el-select-v2");
       const _component_el_input = vue.resolveComponent("el-input");
+      const _component_el_select_v2 = vue.resolveComponent("el-select-v2");
       const _component_el_button = vue.resolveComponent("el-button");
       return vue.openBlock(), vue.createElementBlock(
         "div",
@@ -198,61 +199,63 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.withDirectives(vue.createElementVNode(
             "div",
             {
-              class: vue.normalizeClass(vue.unref(width).value < 500 ? "" : "flex")
+              class: vue.normalizeClass(vue.unref(width) > 500 ? "" : "")
             },
             [
               (vue.openBlock(true), vue.createElementBlock(
                 vue.Fragment,
                 null,
                 vue.renderList(inputList.value, (item, key) => {
-                  return vue.openBlock(), vue.createBlock(_component_el_input, {
+                  return vue.openBlock(), vue.createElementBlock("div", {
                     key,
-                    modelValue: positions[item.position],
-                    "onUpdate:modelValue": ($event) => positions[item.position] = $event,
-                    type: "number",
-                    controls: false,
-                    disabled: unit[item.position] == "auto"
-                  }, vue.createSlots({
-                    append: vue.withCtx(() => [
-                      vue.createVNode(_component_el_select_v2, {
-                        modelValue: unit[item.position],
-                        "onUpdate:modelValue": ($event) => unit[item.position] = $event,
-                        options: options.value
-                      }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
+                    style: { "display": "flex" }
                   }, [
-                    vue.unref(width).value > 600 || vue.unref(width).value < 500 ? {
-                      name: "prefix",
-                      fn: vue.withCtx(() => [
-                        vue.createElementVNode("span", {
-                          class: "w-resize",
-                          onMousemove: handleMouseMove,
-                          onMousedown: ($event) => handleMouseDown(item.position, $event),
-                          onMouseup: handleMouseUp
-                        }, [
-                          vue.createVNode(_component_el_tooltip, {
-                            "hide-after": 0,
-                            class: "item",
-                            effect: "dark",
-                            content: item.name,
-                            placement: "top-start",
-                            disabled: disabledTooltip.value
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(_component_dk_icon, {
-                                icon: item.icon
-                              }, null, 8, ["icon"])
-                            ]),
-                            _: 2
-                            /* DYNAMIC */
-                          }, 1032, ["content", "disabled"])
-                        ], 40, _hoisted_1)
-                      ]),
-                      key: "0"
-                    } : void 0
-                  ]), 1032, ["modelValue", "onUpdate:modelValue", "disabled"]);
+                    vue.createVNode(_component_el_input, {
+                      modelValue: positions[item.position],
+                      "onUpdate:modelValue": ($event) => positions[item.position] = $event,
+                      type: "number",
+                      controls: false,
+                      disabled: unit[item.position] == "auto"
+                    }, vue.createSlots({
+                      _: 2
+                      /* DYNAMIC */
+                    }, [
+                      vue.unref(width) > 600 || vue.unref(width) < 500 ? {
+                        name: "prefix",
+                        fn: vue.withCtx(() => [
+                          vue.createElementVNode("span", {
+                            class: "w-resize",
+                            onMousemove: handleMouseMove,
+                            onMousedown: ($event) => handleMouseDown(item.position, $event),
+                            onMouseup: handleMouseUp
+                          }, [
+                            vue.createVNode(_component_el_tooltip, {
+                              "hide-after": 0,
+                              class: "item",
+                              effect: "dark",
+                              content: item.name,
+                              placement: "top-start",
+                              disabled: disabledTooltip.value
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createVNode(_component_dk_icon, {
+                                  icon: item.icon
+                                }, null, 8, ["icon"])
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            }, 1032, ["content", "disabled"])
+                          ], 40, _hoisted_1)
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1032, ["modelValue", "onUpdate:modelValue", "disabled"]),
+                    vue.createVNode(_component_el_select_v2, {
+                      modelValue: unit[item.position],
+                      "onUpdate:modelValue": ($event) => unit[item.position] = $event,
+                      options: options.value
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
+                  ]);
                 }),
                 128
                 /* KEYED_FRAGMENT */
@@ -265,11 +268,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]),
           vue.withDirectives(vue.createElementVNode(
             "div",
-            null,
+            _hoisted_2,
             [
               vue.createVNode(_component_el_input, {
                 modelValue: positions.all,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => positions.all = $event),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => positions.all = $event),
                 type: "number",
                 controls: false,
                 disabled: unit.all === "auto",
@@ -291,16 +294,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     /* HYDRATE_EVENTS */
                   )
                 ]),
-                append: vue.withCtx(() => [
-                  vue.createVNode(_component_el_select_v2, {
-                    modelValue: unit.all,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unit.all = $event),
-                    options: options.value
-                  }, null, 8, ["modelValue", "options"])
-                ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["modelValue", "disabled", "clearable"])
+              }, 8, ["modelValue", "disabled", "clearable"]),
+              vue.createVNode(_component_el_select_v2, {
+                modelValue: unit.all,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unit.all = $event),
+                options: options.value
+              }, null, 8, ["modelValue", "options"])
             ],
             512
             /* NEED_PATCH */

package/lib/box-size-input/src/box-size-input.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-size-input.vue2.js","sources":["../../../src/box-size-input/src/box-size-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkBoxSizeInput',\n});\n</script>\n<template>\n  <div ref=\"el\" class=\"dk-box-size-input\">\n    <div v-show=\"!isMerge\" :class=\"width.value < 500 ? '' : 'flex'\">\n      <el-input\n        v-for=\"(item, key) in inputList\"\n        :key=\"key\"\n        v-model=\"positions[item.position]\"\n        type=\"number\"\n        :controls=\"false\"\n        :disabled=\"unit[item.position] == 'auto'\"\n      >\n        <template v-if=\"width.value > 600 || width.value < 500\" #prefix>\n          <span\n            class=\"w-resize\"\n            @mousemove=\"handleMouseMove\"\n            @mousedown=\"handleMouseDown(item.position, $event)\"\n            @mouseup=\"handleMouseUp\"\n          >\n            <el-tooltip\n              :hide-after=\"0\"\n              class=\"item\"\n              effect=\"dark\"\n              :content=\"item.name\"\n              placement=\"top-start\"\n              :disabled=\"disabledTooltip\"\n            >\n              <dk-icon :icon=\"item.icon\" />\n            </el-tooltip>\n          </span>\n        </template>\n        <template #append>\n          <el-select-v2 v-model=\"unit[item.position]\" :options=\"options\"> </el-select-v2>\n        </template>\n      </el-input>\n    </div>\n    <div v-show=\"isMerge\">\n      <el-input\n        v-model=\"positions.all\"\n        type=\"number\"\n        :controls=\"false\"\n        :disabled=\"unit.all === 'auto'\"\n        :clearable=\"props.clearable\"\n      >\n        <template #prefix>\n          <span\n            class=\"w-resize\"\n            @mousemove=\"handleMouseMove\"\n            @mousedown=\"handleMouseDown('all', $event)\"\n            @mouseup=\"handleMouseUp\"\n          >\n            <dk-icon icon=\"Rank\"></dk-icon>\n          </span>\n        </template>\n        <template #append>\n          <el-select-v2 v-model=\"unit.all\" :options=\"options\"> </el-select-v2>\n        </template>\n      </el-input>\n    </div>\n    <div v-if=\"props.showMerge\" class=\"dk-full\" @click=\"isMerge = !isMerge\">\n      <el-tooltip\n        class=\"item\"\n        effect=\"dark\"\n        :content=\"isMerge ? '独立配置' : '批量配置'\"\n        placement=\"top\"\n        :hide-after=\"0\"\n      >\n        <el-button v-if=\"isMerge\">\n          <dk-icon icon=\"streamline:interface-layout-border-horizontal-border-cell-center-format-formatting\"></dk-icon>\n        </el-button>\n        <el-button v-else>\n          <dk-icon icon=\"streamline:interface-layout-border-full-grid-layout-layouts-module\"></dk-icon>\n        </el-button>\n      </el-tooltip>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { boxSizeInputProps } from './props'\nimport { computed, onMounted, reactive, ref, watch } from 'vue'\nimport { useElementSize } from '@vueuse/core'\n\n\nconst props = defineProps(boxSizeInputProps)\nconst el: any = ref()\nconst { width } = useElementSize(el) // 当前组件宽度\n// First, second, third, fourth\nconst positions: any = reactive({\n  all: '',\n  // 一般用于padding、margin、border\n  first: '',\n  second: '',\n  third: '',\n  fourth: '',\n  // 一般用于radius\n})\n\nconst unit: any = reactive({\n  all: 'px',\n  first: 'rem',\n  second: 'px',\n  third: 'px',\n  fourth: 'px',\n})\n\nconst units = ['px', '%', 'rem', 'rm', 'vh', 'auto']\nconst position = ref('')\nconst isMerge = ref(props.defaultIsMerge)\nconst isDragging = ref(false)\nconst startX = ref(0)\nconst disabledTooltip = ref(false)\nconst trackMouseBound: any = ref(null)\nconst stopChangeBound: any = ref(null)\n\nconst options = computed(() => {\n  return units.map((item) => {\n    return {\n      label: item,\n      value: item,\n    }\n  })\n})\n\nconst inputList = computed(() => {\n  let list: any[]\n  if (props.type === 'radius') {\n    list = [\n      {\n        position: 'first',\n        name: '左上',\n        icon: 'ant-design:radius-upleft-outlined',\n      },\n      {\n        position: 'second',\n        name: '右上',\n        icon: 'ant-design:radius-upright-outlined',\n      },\n      {\n        position: 'fourth',\n        name: '左下',\n        icon: 'ant-design:radius-bottomleft-outlined',\n      },\n      {\n        position: 'third',\n        name: '左下',\n        icon: 'ant-design:radius-bottomright-outlined',\n      },\n    ]\n  } else {\n    list = [\n      { position: 'first', name: '上', icon: 'ArrowUp' },\n      { position: 'second', name: '右', icon: 'ArrowRight' },\n      { position: 'third', name: '下', icon: 'ArrowDown' },\n      { position: 'fourth', name: '左', icon: 'ArrowLeft' },\n    ]\n  }\n  return list\n})\nconst emit = defineEmits(['update:modelValue'])\n\nconst handleMouseDown = (_position: any, event: any) => {\n  isDragging.value = true\n  startX.value = event.clientX\n  position.value = _position\n  trackMouseBound.value = handleMouseMove.bind(event)\n  stopChangeBound.value = handleMouseUp.bind(event)\n  document.addEventListener('mousemove', trackMouseBound.value)\n  document.addEventListener('mouseup', stopChangeBound.value)\n  document.body.style.cursor = 'ew-resize'\n}\n\nconst handleMouseMove = (event: any) => {\n  if (isDragging.value) {\n    positions[position.value] = event.clientX - startX.value\n  }\n}\n\nconst handleMouseUp = () => {\n  document.removeEventListener('mousemove', trackMouseBound.value)\n  document.removeEventListener('mouseup', stopChangeBound.value)\n  document.body.style.cursor = 'default'\n  isDragging.value = false\n  position.value = ''\n}\n\nconst initValue = () => {\n  const getUnit = (value: string) => {\n    let unit = 'px'\n    units.forEach((item) => {\n      if (value.includes(item)) {\n        unit = item\n      }\n    })\n    return unit\n  }\n\n  const arr = props.modelValue.split(' ') || ['0px']\n  let [first, second = first, third = first, fourth = second] = arr\n\n  if (arr.length === 4) {\n    isMerge.value = false\n  } else if (arr.length === 3) {\n    isMerge.value = false\n    fourth = ''\n  } else if (arr.length === 2) {\n    isMerge.value = false\n    third = first\n    fourth = second\n  } else {\n    isMerge.value = true\n    second = third = fourth = first\n  }\n\n  const positionValues: any = { first, second, third, fourth }\n  for (const pos in positionValues) {\n    positions[pos] = parseInt(positionValues[pos]) || 0\n    unit[pos] = getUnit(positionValues[pos])\n  }\n\n  if (isMerge.value) {\n    positions.all = positions.first\n    unit.all = unit.first\n  }\n}\n\n// 值的初始化\nwatch(\n  () => props.modelValue,\n  () => {\n    initValue()\n  }\n)\n\n// const sizeValue = computed(() => {\n//   if (isMerge.value) {\n//     if (unit.all === 'auto') {\n//       return 'auto'\n//       // emit('update:modelValue', 'auto')\n//     } else {\n//       // emit('update:modelValue', `${positions.all}${unit.all}`)\n//       return `${positions.all}${unit.all}`\n//     }\n//   } else {\n//     // 如果有一个值为auto，则为auto\n//     let value = ''\n//     for (const pos in unit) {\n//       if (pos === 'all') continue\n//       if (unit[pos] === 'auto') {\n//         value += 'auto '\n//       } else {\n//         value += `${positions[pos]}${unit[pos]} `\n//       }\n//     }\n//     // emit('update:modelValue', value.trim())\n//     return value.trim()\n//   }\n// })\n\nconst emitValue = () => {\n  if (isMerge.value) {\n    if (unit.all === 'auto') {\n      emit('update:modelValue', 'auto')\n    } else {\n      emit('update:modelValue', `${positions.all}${unit.all}`)\n    }\n  } else {\n    // 如果有一个值为auto，则为auto\n    let value = ''\n    for (const pos in unit) {\n      if (pos === 'all') continue\n      if (unit[pos] === 'auto') {\n        value += 'auto '\n      } else {\n        value += `${positions[pos]}${unit[pos]} `\n      }\n    }\n    emit('update:modelValue', value.trim())\n  }\n}\n\nwatch(positions, () => {\n  emitValue()\n})\nwatch(isMerge, () => {\n  emitValue()\n})\nwatch(unit, () => {\n  emitValue()\n})\n\n// watch(sizeValue, () => {\n//   console.log('sizeValue', sizeValue)\n//   emit('update:modelValue', sizeValue)\n// })\n\nonMounted(() => {\n  initValue()\n})\n</script>\n"],"names":["__MACROS_defineComponent","ref","useElementSize","reactive","computed","unit","watch","onMounted"],"mappings":"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"}
+{"version":3,"file":"box-size-input.vue2.js","sources":["../../../src/box-size-input/src/box-size-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkBoxSizeInput',\n});\n</script>\n<template>\n  <div ref=\"el\" class=\"dk-box-size-input\">\n    <div v-show=\"!isMerge\" :class=\"width > 500 ? '' : ''\">\n      <div v-for=\"(item, key) in inputList\" :key=\"key\" style=\"display: flex\">\n        <el-input\n          v-model=\"positions[item.position]\"\n          type=\"number\"\n          :controls=\"false\"\n          :disabled=\"unit[item.position] == 'auto'\"\n        >\n          <template v-if=\"width > 600 || width < 500\" #prefix>\n            <span\n              class=\"w-resize\"\n              @mousemove=\"handleMouseMove\"\n              @mousedown=\"handleMouseDown(item.position, $event)\"\n              @mouseup=\"handleMouseUp\"\n            >\n              <el-tooltip\n                :hide-after=\"0\"\n                class=\"item\"\n                effect=\"dark\"\n                :content=\"item.name\"\n                placement=\"top-start\"\n                :disabled=\"disabledTooltip\"\n              >\n                <dk-icon :icon=\"item.icon\" />\n              </el-tooltip>\n            </span>\n          </template>\n          <!--        <template #append>-->\n          <!--          <el-select-v2 v-model=\"unit[item.position]\" :options=\"options\">-->\n          <!--          </el-select-v2>-->\n          <!--        </template>-->\n        </el-input>\n        <el-select-v2 v-model=\"unit[item.position]\" :options=\"options\"> </el-select-v2>\n      </div>\n    </div>\n    <div v-show=\"isMerge\" style=\"display: flex\">\n      <el-input\n        v-model=\"positions.all\"\n        type=\"number\"\n        :controls=\"false\"\n        :disabled=\"unit.all === 'auto'\"\n        :clearable=\"props.clearable\"\n      >\n        <template #prefix>\n          <span\n            class=\"w-resize\"\n            @mousemove=\"handleMouseMove\"\n            @mousedown=\"handleMouseDown('all', $event)\"\n            @mouseup=\"handleMouseUp\"\n          >\n            <dk-icon icon=\"Rank\"></dk-icon>\n          </span>\n        </template>\n      </el-input>\n      <el-select-v2 v-model=\"unit.all\" :options=\"options\"> </el-select-v2>\n    </div>\n    <div v-if=\"props.showMerge\" class=\"dk-full\" @click=\"isMerge = !isMerge\">\n      <el-tooltip\n        class=\"item\"\n        effect=\"dark\"\n        :content=\"isMerge ? '独立配置' : '批量配置'\"\n        placement=\"top\"\n        :hide-after=\"0\"\n      >\n        <el-button v-if=\"isMerge\">\n          <dk-icon icon=\"streamline:interface-layout-border-horizontal-border-cell-center-format-formatting\"></dk-icon>\n        </el-button>\n        <el-button v-else>\n          <dk-icon icon=\"streamline:interface-layout-border-full-grid-layout-layouts-module\"></dk-icon>\n        </el-button>\n      </el-tooltip>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { boxSizeInputProps } from './props'\nimport { computed, onMounted, reactive, ref, watch } from 'vue'\nimport { useElementSize } from '@vueuse/core'\n\n\nconst props = defineProps(boxSizeInputProps)\nconst el: any = ref()\nconst { width } = useElementSize(el) // 当前组件宽度\n// First, second, third, fourth\nconst positions: any = reactive({\n  all: '',\n  // 一般用于padding、margin、border\n  first: '',\n  second: '',\n  third: '',\n  fourth: '',\n  // 一般用于radius\n})\n\nconst unit: any = reactive({\n  all: 'px',\n  first: 'rem',\n  second: 'px',\n  third: 'px',\n  fourth: 'px',\n})\n\nconst units = ['px', '%', 'rem', 'rm', 'vh', 'auto']\nconst position = ref('')\nconst isMerge = ref(props.defaultIsMerge)\nconst isDragging = ref(false)\nconst startX = ref(0)\nconst disabledTooltip = ref(false)\nconst trackMouseBound: any = ref(null)\nconst stopChangeBound: any = ref(null)\n\nconst options = computed(() => {\n  return units.map((item) => {\n    return {\n      label: item,\n      value: item,\n    }\n  })\n})\n\nconst inputList = computed(() => {\n  let list: any[]\n  if (props.type === 'radius') {\n    list = [\n      {\n        position: 'first',\n        name: '左上',\n        icon: 'ant-design:radius-upleft-outlined',\n      },\n      {\n        position: 'second',\n        name: '右上',\n        icon: 'ant-design:radius-upright-outlined',\n      },\n      {\n        position: 'fourth',\n        name: '左下',\n        icon: 'ant-design:radius-bottomleft-outlined',\n      },\n      {\n        position: 'third',\n        name: '左下',\n        icon: 'ant-design:radius-bottomright-outlined',\n      },\n    ]\n  } else {\n    list = [\n      { position: 'first', name: '上', icon: 'ArrowUp' },\n      { position: 'second', name: '右', icon: 'ArrowRight' },\n      { position: 'third', name: '下', icon: 'ArrowDown' },\n      { position: 'fourth', name: '左', icon: 'ArrowLeft' },\n    ]\n  }\n  return list\n})\nconst emit = defineEmits(['update:modelValue'])\n\nconst handleMouseDown = (_position: any, event: any) => {\n  isDragging.value = true\n  startX.value = event.clientX\n  position.value = _position\n  trackMouseBound.value = handleMouseMove.bind(event)\n  stopChangeBound.value = handleMouseUp.bind(event)\n  document.addEventListener('mousemove', trackMouseBound.value)\n  document.addEventListener('mouseup', stopChangeBound.value)\n  document.body.style.cursor = 'ew-resize'\n}\n\nconst handleMouseMove = (event: any) => {\n  if (isDragging.value) {\n    positions[position.value] = event.clientX - startX.value\n  }\n}\n\nconst handleMouseUp = () => {\n  document.removeEventListener('mousemove', trackMouseBound.value)\n  document.removeEventListener('mouseup', stopChangeBound.value)\n  document.body.style.cursor = 'default'\n  isDragging.value = false\n  position.value = ''\n}\n\nconst initValue = () => {\n  const getUnit = (value: string) => {\n    let unit = 'px'\n    units.forEach((item) => {\n      if (value.includes(item)) {\n        unit = item\n      }\n    })\n    return unit\n  }\n\n  const arr = props.modelValue.split(' ') || ['0px']\n  let [first, second = first, third = first, fourth = second] = arr\n\n  if (arr.length === 4) {\n    isMerge.value = false\n  } else if (arr.length === 3) {\n    isMerge.value = false\n    fourth = ''\n  } else if (arr.length === 2) {\n    isMerge.value = false\n    third = first\n    fourth = second\n  } else {\n    isMerge.value = true\n    second = third = fourth = first\n  }\n\n  const positionValues: any = { first, second, third, fourth }\n  for (const pos in positionValues) {\n    positions[pos] = parseInt(positionValues[pos]) || 0\n    unit[pos] = getUnit(positionValues[pos])\n  }\n\n  if (isMerge.value) {\n    positions.all = positions.first\n    unit.all = unit.first\n  }\n}\n\n// 值的初始化\nwatch(\n  () => props.modelValue,\n  () => {\n    initValue()\n  }\n)\n\n// const sizeValue = computed(() => {\n//   if (isMerge.value) {\n//     if (unit.all === 'auto') {\n//       return 'auto'\n//       // emit('update:modelValue', 'auto')\n//     } else {\n//       // emit('update:modelValue', `${positions.all}${unit.all}`)\n//       return `${positions.all}${unit.all}`\n//     }\n//   } else {\n//     // 如果有一个值为auto，则为auto\n//     let value = ''\n//     for (const pos in unit) {\n//       if (pos === 'all') continue\n//       if (unit[pos] === 'auto') {\n//         value += 'auto '\n//       } else {\n//         value += `${positions[pos]}${unit[pos]} `\n//       }\n//     }\n//     // emit('update:modelValue', value.trim())\n//     return value.trim()\n//   }\n// })\n\nconst emitValue = () => {\n  if (isMerge.value) {\n    if (unit.all === 'auto') {\n      emit('update:modelValue', 'auto')\n    } else {\n      emit('update:modelValue', `${positions.all}${unit.all}`)\n    }\n  } else {\n    // 如果有一个值为auto，则为auto\n    let value = ''\n    for (const pos in unit) {\n      if (pos === 'all') continue\n      if (unit[pos] === 'auto') {\n        value += 'auto '\n      } else {\n        value += `${positions[pos]}${unit[pos]} `\n      }\n    }\n    emit('update:modelValue', value.trim())\n  }\n}\n\nwatch(positions, () => {\n  emitValue()\n})\nwatch(isMerge, () => {\n  emitValue()\n})\nwatch(unit, () => {\n  emitValue()\n})\n\n// watch(sizeValue, () => {\n//   console.log('sizeValue', sizeValue)\n//   emit('update:modelValue', sizeValue)\n// })\n\nonMounted(() => {\n  initValue()\n})\n</script>\n"],"names":["__MACROS_defineComponent","ref","useElementSize","reactive","computed","unit","watch","onMounted"],"mappings":";;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,gBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAsFD,IAAA,MAAM,KAAUC,OAAI,EAAA,CAAA;AACpB,IAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,mBAAA,CAAe,EAAE,CAAA,CAAA;AAEnC,IAAA,MAAM,YAAiBC,YAAS,CAAA;AAAA,MAC9B,GAAK,EAAA,EAAA;AAAA;AAAA,MAEL,KAAO,EAAA,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,KAAO,EAAA,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA;AAAA,KAET,CAAA,CAAA;AAED,IAAA,MAAM,OAAYA,YAAS,CAAA;AAAA,MACzB,GAAK,EAAA,IAAA;AAAA,MACL,KAAO,EAAA,KAAA;AAAA,MACP,MAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,IAAA;AAAA,MACP,MAAQ,EAAA,IAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,QAAQ,CAAC,IAAA,EAAM,KAAK,KAAO,EAAA,IAAA,EAAM,MAAM,MAAM,CAAA,CAAA;AACnD,IAAM,MAAA,QAAA,GAAWF,QAAI,EAAE,CAAA,CAAA;AACvB,IAAM,MAAA,OAAA,GAAUA,OAAI,CAAA,KAAA,CAAM,cAAc,CAAA,CAAA;AACxC,IAAM,MAAA,UAAA,GAAaA,QAAI,KAAK,CAAA,CAAA;AAC5B,IAAM,MAAA,MAAA,GAASA,QAAI,CAAC,CAAA,CAAA;AACpB,IAAM,MAAA,eAAA,GAAkBA,QAAI,KAAK,CAAA,CAAA;AACjC,IAAM,MAAA,eAAA,GAAuBA,QAAI,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,eAAA,GAAuBA,QAAI,IAAI,CAAA,CAAA;AAErC,IAAM,MAAA,OAAA,GAAUG,aAAS,MAAM;AAC7B,MAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACzB,QAAO,OAAA;AAAA,UACL,KAAO,EAAA,IAAA;AAAA,UACP,KAAO,EAAA,IAAA;AAAA,SACT,CAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYA,aAAS,MAAM;AAC/B,MAAI,IAAA,IAAA,CAAA;AACJ,MAAI,IAAA,KAAA,CAAM,SAAS,QAAU,EAAA;AAC3B,QAAO,IAAA,GAAA;AAAA,UACL;AAAA,YACE,QAAU,EAAA,OAAA;AAAA,YACV,IAAM,EAAA,cAAA;AAAA,YACN,IAAM,EAAA,mCAAA;AAAA,WACR;AAAA,UACA;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,IAAM,EAAA,cAAA;AAAA,YACN,IAAM,EAAA,oCAAA;AAAA,WACR;AAAA,UACA;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,IAAM,EAAA,cAAA;AAAA,YACN,IAAM,EAAA,uCAAA;AAAA,WACR;AAAA,UACA;AAAA,YACE,QAAU,EAAA,OAAA;AAAA,YACV,IAAM,EAAA,cAAA;AAAA,YACN,IAAM,EAAA,wCAAA;AAAA,WACR;AAAA,SACF,CAAA;AAAA,OACK,MAAA;AACL,QAAO,IAAA,GAAA;AAAA,UACL,EAAE,QAAU,EAAA,OAAA,EAAS,IAAM,EAAA,QAAA,EAAK,MAAM,SAAU,EAAA;AAAA,UAChD,EAAE,QAAU,EAAA,QAAA,EAAU,IAAM,EAAA,QAAA,EAAK,MAAM,YAAa,EAAA;AAAA,UACpD,EAAE,QAAU,EAAA,OAAA,EAAS,IAAM,EAAA,QAAA,EAAK,MAAM,WAAY,EAAA;AAAA,UAClD,EAAE,QAAU,EAAA,QAAA,EAAU,IAAM,EAAA,QAAA,EAAK,MAAM,WAAY,EAAA;AAAA,SACrD,CAAA;AAAA,OACF;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAGD,IAAM,MAAA,eAAA,GAAkB,CAAC,SAAA,EAAgB,KAAe,KAAA;AACtD,MAAA,UAAA,CAAW,KAAQ,GAAA,IAAA,CAAA;AACnB,MAAA,MAAA,CAAO,QAAQ,KAAM,CAAA,OAAA,CAAA;AACrB,MAAA,QAAA,CAAS,KAAQ,GAAA,SAAA,CAAA;AACjB,MAAgB,eAAA,CAAA,KAAA,GAAQ,eAAgB,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAClD,MAAgB,eAAA,CAAA,KAAA,GAAQ,aAAc,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAChD,MAAS,QAAA,CAAA,gBAAA,CAAiB,WAAa,EAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAC5D,MAAS,QAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAC1D,MAAS,QAAA,CAAA,IAAA,CAAK,MAAM,MAAS,GAAA,WAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAe,KAAA;AACtC,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAA,SAAA,CAAU,QAAS,CAAA,KAAK,CAAI,GAAA,KAAA,CAAM,UAAU,MAAO,CAAA,KAAA,CAAA;AAAA,OACrD;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAS,QAAA,CAAA,mBAAA,CAAoB,WAAa,EAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAC/D,MAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAC7D,MAAS,QAAA,CAAA,IAAA,CAAK,MAAM,MAAS,GAAA,SAAA,CAAA;AAC7B,MAAA,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AACnB,MAAA,QAAA,CAAS,KAAQ,GAAA,EAAA,CAAA;AAAA,KACnB,CAAA;AAEA,IAAA,MAAM,YAAY,MAAM;AACtB,MAAM,MAAA,OAAA,GAAU,CAAC,KAAkB,KAAA;AACjC,QAAA,IAAIC,KAAO,GAAA,IAAA,CAAA;AACX,QAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACtB,UAAI,IAAA,KAAA,CAAM,QAAS,CAAA,IAAI,CAAG,EAAA;AACxB,YAAAA,KAAO,GAAA,IAAA,CAAA;AAAA,WACT;AAAA,SACD,CAAA,CAAA;AACD,QAAOA,OAAAA,KAAAA,CAAAA;AAAA,OACT,CAAA;AAEA,MAAA,MAAM,MAAM,KAAM,CAAA,UAAA,CAAW,MAAM,GAAG,CAAA,IAAK,CAAC,KAAK,CAAA,CAAA;AACjD,MAAI,IAAA,CAAC,OAAO,MAAS,GAAA,KAAA,EAAO,QAAQ,KAAO,EAAA,MAAA,GAAS,MAAM,CAAI,GAAA,GAAA,CAAA;AAE9D,MAAI,IAAA,GAAA,CAAI,WAAW,CAAG,EAAA;AACpB,QAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAAA,OAClB,MAAA,IAAW,GAAI,CAAA,MAAA,KAAW,CAAG,EAAA;AAC3B,QAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,QAAS,MAAA,GAAA,EAAA,CAAA;AAAA,OACX,MAAA,IAAW,GAAI,CAAA,MAAA,KAAW,CAAG,EAAA;AAC3B,QAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,QAAQ,KAAA,GAAA,KAAA,CAAA;AACR,QAAS,MAAA,GAAA,MAAA,CAAA;AAAA,OACJ,MAAA;AACL,QAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA,CAAA;AAChB,QAAA,MAAA,GAAS,QAAQ,MAAS,GAAA,KAAA,CAAA;AAAA,OAC5B;AAEA,MAAA,MAAM,cAAsB,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,OAAO,MAAO,EAAA,CAAA;AAC3D,MAAA,KAAA,MAAW,OAAO,cAAgB,EAAA;AAChC,QAAA,SAAA,CAAU,GAAG,CAAI,GAAA,QAAA,CAAS,cAAe,CAAA,GAAG,CAAC,CAAK,IAAA,CAAA,CAAA;AAClD,QAAA,IAAA,CAAK,GAAG,CAAA,GAAI,OAAQ,CAAA,cAAA,CAAe,GAAG,CAAC,CAAA,CAAA;AAAA,OACzC;AAEA,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,SAAA,CAAU,MAAM,SAAU,CAAA,KAAA,CAAA;AAC1B,QAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAGA,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;AACJ,QAAU,SAAA,EAAA,CAAA;AAAA,OACZ;AAAA,KACF,CAAA;AA2BA,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAI,IAAA,IAAA,CAAK,QAAQ,MAAQ,EAAA;AACvB,UAAA,IAAA,CAAK,qBAAqB,MAAM,CAAA,CAAA;AAAA,SAC3B,MAAA;AACL,UAAA,IAAA,CAAK,qBAAqB,CAAG,EAAA,SAAA,CAAU,GAAG,CAAG,EAAA,IAAA,CAAK,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,SACzD;AAAA,OACK,MAAA;AAEL,QAAA,IAAI,KAAQ,GAAA,EAAA,CAAA;AACZ,QAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,UAAA,IAAI,GAAQ,KAAA,KAAA;AAAO,YAAA,SAAA;AACnB,UAAI,IAAA,IAAA,CAAK,GAAG,CAAA,KAAM,MAAQ,EAAA;AACxB,YAAS,KAAA,IAAA,OAAA,CAAA;AAAA,WACJ,MAAA;AACL,YAAA,KAAA,IAAS,GAAG,SAAU,CAAA,GAAG,CAAC,CAAG,EAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA,CAAA,CAAA;AAAA,WACxC;AAAA,SACF;AACA,QAAK,IAAA,CAAA,mBAAA,EAAqB,KAAM,CAAA,IAAA,EAAM,CAAA,CAAA;AAAA,OACxC;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA,CAAM,WAAW,MAAM;AACrB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AACD,IAAAA,SAAA,CAAM,SAAS,MAAM;AACnB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AACD,IAAAA,SAAA,CAAM,MAAM,MAAM;AAChB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAOD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/box-size-input/style/index.css

@@ -1 +1 @@
-.dk-box-size-input{display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-box-size-input .alone{display:flex}.dk-box-size-input .w-resize{cursor:w-resize;display:flex;align-items:center}.dk-box-size-input .el-input-group__append{padding:0}.dk-box-size-input .el-select-v2__suffix{display:none}.dk-box-size-input .el-select-v2__placeholder{width:100%}.dk-box-size-input .el-virtual-scrollbar{width:2px!important;right:0!important}
+.dk-box-size-input{display:flex;align-items:flex-start;justify-content:space-between;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-box-size-input .alone{display:flex}.dk-box-size-input .w-resize{display:flex;align-items:center;cursor:w-resize}.dk-box-size-input .el-input-group__append{padding:0}.dk-box-size-input .el-select-v2__suffix{display:none}.dk-box-size-input .el-select-v2__placeholder{width:100%}.dk-box-size-input .el-virtual-scrollbar{right:0!important;width:2px!important}

package/lib/box-size-input/style/index.scss

@@ -1,27 +1,34 @@
 .dk-box-size-input {
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
   user-select: none;
+
   .alone {
     display: flex;
   }
+
   .w-resize {
-    cursor: w-resize;
     display: flex;
     align-items: center;
+    cursor: w-resize;
   }
+
   .el-input-group__append {
     padding: 0;
   }
+
   .el-select-v2__suffix {
     display: none;
   }
+
   .el-select-v2__placeholder {
     width: 100%;
   }
+
   .el-virtual-scrollbar {
-    width: 2px !important;
     right: 0 !important;
+    width: 2px !important;
   }
 }

package/lib/dialog/src/dialog.vue2.js

@@ -39,7 +39,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const toggleFull = () => {
       isFullscreen.value = !vue.unref(isFullscreen);
     };
-    const dialogHeight = vue.ref(utils.isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight);
+    const dialogHeight = vue.ref(
+      utils.isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
+    );
     vue.watch(
       () => isFullscreen.value,
       async (val) => {

package/lib/dialog/src/dialog.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.vue2.js","sources":["../../../src/dialog/src/dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkDialog',\n});\n</script>\n<template>\n  <ElDialog\n    v-bind=\"getBindValue\"\n    :fullscreen=\"isFullscreen\"\n    destroy-on-close\n    append-to-body\n    lock-scroll\n    :draggable=\"draggable\"\n    :close-on-click-modal=\"false\"\n    :show-close=\"false\"\n    class=\"dk-dialog\"\n    :z-index=\"props.zIndex\"\n  >\n    <template #header=\"{ close }\">\n      <slot name=\"header\">\n        <div class=\"flex justify-between items-center relative\">\n          <span>{{ props.title }}</span>\n          <div class=\"flex justify-between items-center absolute top-[50%] right-0 translate-y-[-50%]\">\n            <dk-icon\n              v-if=\"fullscreen\"\n              class=\"cursor-pointer is-hover mr-10px\"\n              :icon=\"isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'\"\n              color=\"var(--el-color-info)\"\n              hover-color=\"var(--el-color-primary)\"\n              @click=\"toggleFull\"\n            />\n            <dk-icon\n              class=\"cursor-pointer is-hover\"\n              icon=\"ep:close\"\n              hover-color=\"var(--el-color-primary)\"\n              color=\"var(--el-color-info)\"\n              @click=\"close\"\n            />\n          </div>\n        </div>\n      </slot>\n    </template>\n\n    <ElScrollbar :style=\"dialogStyle\">\n      <slot></slot>\n    </ElScrollbar>\n\n    <template v-if=\"slots.footer\" #footer>\n      <slot name=\"footer\"></slot>\n    </template>\n  </ElDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace, isNumber } from '@vipl520/utils'\nimport { dialogProps } from './props'\nimport { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'\n\nconst [_, bem] = createNamespace('dialog')\n\n\nconst slots = useSlots()\n\nconst props = defineProps(dialogProps)\n\nconst getBindValue = computed(() => {\n  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']\n  const attrs = useAttrs()\n  const obj: { [key: string]: any } = { ...attrs, ...props }\n  for (const key in obj) {\n    if (delArr.indexOf(key) !== -1) {\n      delete obj[key] as any\n    }\n  }\n  return obj\n})\nconst isFullscreen = ref(props.defaultFullscreen)\n\nwatch(\n  () => props.defaultFullscreen,\n  () => {\n    isFullscreen.value = props.defaultFullscreen\n  }\n)\n\nconst toggleFull = () => {\n  isFullscreen.value = !unref(isFullscreen)\n}\n\nconst dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)\n\nwatch(\n  () => isFullscreen.value,\n  async (val: boolean) => {\n    await nextTick()\n    if (val) {\n      const windowHeight = document.documentElement.offsetHeight\n      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`\n    } else {\n      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight\n    }\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst dialogStyle = computed(() => {\n  return {\n    maxHeight: unref(dialogHeight),\n  }\n})\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","useSlots","computed","useAttrs","ref","watch","unref","isNumber","nextTick"],"mappings":";;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,UAAA;AACR,CAAC,CAAA,CAAA;;;;;;AAuDD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,QAAQ,CAAA,CAAA;AAGzC,IAAA,MAAM,QAAQC,YAAS,EAAA,CAAA;AAIvB,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,MAAM,MAAmB,GAAA,CAAC,YAAc,EAAA,OAAA,EAAS,WAAW,CAAA,CAAA;AAC5D,MAAA,MAAM,QAAQC,YAAS,EAAA,CAAA;AACvB,MAAA,MAAM,GAA8B,GAAA,EAAE,GAAG,KAAA,EAAO,GAAG,KAAM,EAAA,CAAA;AACzD,MAAA,KAAA,MAAW,OAAO,GAAK,EAAA;AACrB,QAAA,IAAI,MAAO,CAAA,OAAA,CAAQ,GAAG,CAAA,KAAM,CAAI,CAAA,EAAA;AAC9B,UAAA,OAAO,IAAI,GAAG,CAAA,CAAA;AAAA,SAChB;AAAA,OACF;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACR,CAAA,CAAA;AACD,IAAM,MAAA,YAAA,GAAeC,OAAI,CAAA,KAAA,CAAM,iBAAiB,CAAA,CAAA;AAEhD,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,iBAAA;AAAA,MACZ,MAAM;AACJ,QAAA,YAAA,CAAa,QAAQ,KAAM,CAAA,iBAAA,CAAA;AAAA,OAC7B;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAa,YAAA,CAAA,KAAA,GAAQ,CAACC,SAAA,CAAM,YAAY,CAAA,CAAA;AAAA,KAC1C,CAAA;AAEA,IAAM,MAAA,YAAA,GAAeF,OAAI,CAAAG,cAAA,CAAS,KAAM,CAAA,SAAS,CAAI,GAAA,CAAA,EAAG,KAAM,CAAA,SAAS,CAAO,EAAA,CAAA,GAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AAE7F,IAAAF,SAAA;AAAA,MACE,MAAM,YAAa,CAAA,KAAA;AAAA,MACnB,OAAO,GAAiB,KAAA;AACtB,QAAA,MAAMG,YAAS,EAAA,CAAA;AACf,QAAA,IAAI,GAAK,EAAA;AACP,UAAM,MAAA,YAAA,GAAe,SAAS,eAAgB,CAAA,YAAA,CAAA;AAC9C,UAAa,YAAA,CAAA,KAAA,GAAQ,GAAG,YAAe,GAAA,EAAA,GAAK,MAAM,KAAM,CAAA,MAAA,GAAS,KAAK,CAAE,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,SACnE,MAAA;AACL,UAAa,YAAA,CAAA,KAAA,GAAQD,eAAS,KAAM,CAAA,SAAS,IAAI,CAAG,EAAA,KAAA,CAAM,SAAS,CAAA,EAAA,CAAA,GAAO,KAAM,CAAA,SAAA,CAAA;AAAA,SAClF;AAAA,OACF;AAAA,MACA;AAAA,QACE,SAAW,EAAA,IAAA;AAAA,OACb;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcL,aAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,SAAA,EAAWI,UAAM,YAAY,CAAA;AAAA,OAC/B,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog.vue2.js","sources":["../../../src/dialog/src/dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkDialog',\n});\n</script>\n<template>\n  <ElDialog\n    v-bind=\"getBindValue\"\n    :fullscreen=\"isFullscreen\"\n    destroy-on-close\n    append-to-body\n    lock-scroll\n    :draggable=\"draggable\"\n    :close-on-click-modal=\"false\"\n    :show-close=\"false\"\n    class=\"dk-dialog\"\n    :z-index=\"props.zIndex\"\n  >\n    <template #header=\"{ close }\">\n      <slot name=\"header\">\n        <div class=\"flex justify-between items-center relative\">\n          <span>{{ props.title }}</span>\n          <div\n            class=\"flex justify-between items-center absolute top-[50%] right-0 translate-y-[-50%]\"\n          >\n            <dk-icon\n              v-if=\"fullscreen\"\n              class=\"cursor-pointer is-hover mr-10px\"\n              :icon=\"\n                isFullscreen\n                  ? 'radix-icons:exit-full-screen'\n                  : 'radix-icons:enter-full-screen'\n              \"\n              color=\"var(--el-color-info)\"\n              hover-color=\"var(--el-color-primary)\"\n              @click=\"toggleFull\"\n            />\n            <dk-icon\n              class=\"cursor-pointer is-hover\"\n              icon=\"ep:close\"\n              hover-color=\"var(--el-color-primary)\"\n              color=\"var(--el-color-info)\"\n              @click=\"close\"\n            />\n          </div>\n        </div>\n      </slot>\n    </template>\n\n    <ElScrollbar :style=\"dialogStyle\">\n      <slot></slot>\n    </ElScrollbar>\n\n    <template v-if=\"slots.footer\" #footer>\n      <slot name=\"footer\"></slot>\n    </template>\n  </ElDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace, isNumber } from '@vipl520/utils'\nimport { dialogProps } from './props'\nimport { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'\n\nconst [_, bem] = createNamespace('dialog')\n\n\nconst slots = useSlots()\n\nconst props = defineProps(dialogProps)\n\nconst getBindValue = computed(() => {\n  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']\n  const attrs = useAttrs()\n  const obj: { [key: string]: any } = { ...attrs, ...props }\n  for (const key in obj) {\n    if (delArr.indexOf(key) !== -1) {\n      delete obj[key] as any\n    }\n  }\n  return obj\n})\nconst isFullscreen = ref(props.defaultFullscreen)\n\nwatch(\n  () => props.defaultFullscreen,\n  () => {\n    isFullscreen.value = props.defaultFullscreen\n  }\n)\n\nconst toggleFull = () => {\n  isFullscreen.value = !unref(isFullscreen)\n}\n\nconst dialogHeight = ref(\n  isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight\n)\n\nwatch(\n  () => isFullscreen.value,\n  async (val: boolean) => {\n    await nextTick()\n    if (val) {\n      const windowHeight = document.documentElement.offsetHeight\n      dialogHeight.value = `${\n        windowHeight - 55 - 60 - (slots.footer ? 63 : 0)\n      }px`\n    } else {\n      dialogHeight.value = isNumber(props.maxHeight)\n        ? `${props.maxHeight}px`\n        : props.maxHeight\n    }\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst dialogStyle = computed(() => {\n  return {\n    maxHeight: unref(dialogHeight),\n  }\n})\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","useSlots","computed","useAttrs","ref","watch","unref","isNumber","nextTick"],"mappings":";;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,UAAA;AACR,CAAC,CAAA,CAAA;;;;;;AA6DD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,QAAQ,CAAA,CAAA;AAGzC,IAAA,MAAM,QAAQC,YAAS,EAAA,CAAA;AAIvB,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,MAAM,MAAmB,GAAA,CAAC,YAAc,EAAA,OAAA,EAAS,WAAW,CAAA,CAAA;AAC5D,MAAA,MAAM,QAAQC,YAAS,EAAA,CAAA;AACvB,MAAA,MAAM,GAA8B,GAAA,EAAE,GAAG,KAAA,EAAO,GAAG,KAAM,EAAA,CAAA;AACzD,MAAA,KAAA,MAAW,OAAO,GAAK,EAAA;AACrB,QAAA,IAAI,MAAO,CAAA,OAAA,CAAQ,GAAG,CAAA,KAAM,CAAI,CAAA,EAAA;AAC9B,UAAA,OAAO,IAAI,GAAG,CAAA,CAAA;AAAA,SAChB;AAAA,OACF;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACR,CAAA,CAAA;AACD,IAAM,MAAA,YAAA,GAAeC,OAAI,CAAA,KAAA,CAAM,iBAAiB,CAAA,CAAA;AAEhD,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,iBAAA;AAAA,MACZ,MAAM;AACJ,QAAA,YAAA,CAAa,QAAQ,KAAM,CAAA,iBAAA,CAAA;AAAA,OAC7B;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAa,YAAA,CAAA,KAAA,GAAQ,CAACC,SAAA,CAAM,YAAY,CAAA,CAAA;AAAA,KAC1C,CAAA;AAEA,IAAA,MAAM,YAAe,GAAAF,OAAA;AAAA,MACnBG,cAAA,CAAS,MAAM,SAAS,CAAA,GAAI,GAAG,KAAM,CAAA,SAAS,OAAO,KAAM,CAAA,SAAA;AAAA,KAC7D,CAAA;AAEA,IAAAF,SAAA;AAAA,MACE,MAAM,YAAa,CAAA,KAAA;AAAA,MACnB,OAAO,GAAiB,KAAA;AACtB,QAAA,MAAMG,YAAS,EAAA,CAAA;AACf,QAAA,IAAI,GAAK,EAAA;AACP,UAAM,MAAA,YAAA,GAAe,SAAS,eAAgB,CAAA,YAAA,CAAA;AAC9C,UAAa,YAAA,CAAA,KAAA,GAAQ,GACnB,YAAe,GAAA,EAAA,GAAK,MAAM,KAAM,CAAA,MAAA,GAAS,KAAK,CAChD,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,SACK,MAAA;AACL,UAAa,YAAA,CAAA,KAAA,GAAQD,eAAS,KAAM,CAAA,SAAS,IACzC,CAAG,EAAA,KAAA,CAAM,SAAS,CAAA,EAAA,CAAA,GAClB,KAAM,CAAA,SAAA,CAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA;AAAA,QACE,SAAW,EAAA,IAAA;AAAA,OACb;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcL,aAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,SAAA,EAAWI,UAAM,YAAY,CAAA;AAAA,OAC/B,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/dialog/style/index.scss

@@ -2,6 +2,7 @@
   .el-dialog__header {
     margin-right: 0;
   }
+
   .el-dialog__body {
     padding: 10px 20px;
   }

package/lib/file-input/src/file-input.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.vue2.js","sources":["../../../src/file-input/src/file-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkFileInput',\n});\n</script>\n<template>\n  <div :class=\"bem()\">\n    <!--↓↓↓↓显示input框↓↓↓↓-->\n    <template v-if=\"showInput\">\n      <el-input v-model=\"input\" :placeholder=\"placeholder\" clearable>\n        <template #append>\n          <el-button @click=\"onClick\">选择</el-button>\n        </template>\n      </el-input>\n      <!--选择的是图片-->\n      <div class=\"show m-t-5px\">\n        <el-image v-if=\"type === 1\" :src=\"input\" alt=\"\" fit=\"contain\" class=\"file rd-4px\" :preview-src-list=\"[input]\">\n          <template #error>\n            <div class=\"image-error\">\n              <dk-icon icon=\"Picture\"></dk-icon>\n            </div>\n          </template>\n        </el-image>\n        <dk-file-icon v-else :file-url=\"input\" class=\"file rd-4px\" :type=\"type\" />\n        <em @click=\"input = ''\">\n          <dk-icon icon=\"Close\"></dk-icon>\n        </em>\n      </div>\n    </template>\n    <!--↓↓↓↓不显示input框↓↓↓↓-->\n    <template v-else>\n      <div\n        class=\"only-img flex justify-center items-center\"\n        style=\"position: relative\"\n        :style=\"{ width: imgSize + 'px', height: imgSize + 'px' }\"\n        @click=\"onClick\"\n      >\n        <template v-if=\"input\">\n          <!--图片附件-->\n          <el-image v-if=\"type === 1\" :src=\"input\" alt=\"\" fit=\"contain\" style=\"width: 100%; height: 100%\">\n            <template #error>\n              <div class=\"image-slot\">\n                <div class=\"no-image\">\n                  <el-icon><Picture /></el-icon>\n                </div>\n              </div>\n            </template>\n          </el-image>\n          <!--其他附件-->\n          <template v-if=\"type !== 1 && input\">\n            <dk-file-icon :file-url=\"input\" class=\"file rd-4px\" :type=\"type\" />\n          </template>\n          <div class=\"close\" @click.stop=\"onClear()\">\n            <el-icon><Close /></el-icon>\n          </div>\n        </template>\n        <!--没有上传的时候-->\n        <template v-else>\n          <div\n            class=\"media\"\n            :style=\"{\n              lineHeight: imgSize + 'px',\n              fontSize: imgSize / 2 + 'px',\n            }\"\n          >\n            <el-icon><Plus /></el-icon>\n          </div>\n        </template>\n      </div>\n    </template>\n    <dk-attachment-dialog ref=\"attachmentDialog\" :type=\"type\" @confirm=\"onConfirm\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { fileInputProps } from './props'\nimport { ref, watch } from 'vue'\nimport DkFileIcon from '../../attachment/src/file-icon.vue'\n\nconst [_, bem] = createNamespace('file-input')\n\n\n\nconst props = defineProps(fileInputProps)\nconst input = ref(props.modelValue)\nconst attachmentDialog = ref()\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n\nconst onClear = () => {\n  input.value = ''\n}\n\nconst onClick = () => {\n  attachmentDialog.value.open()\n}\n// 确认选中附件\nconst onConfirm = (chooseFileList: any) => {\n  input.value = chooseFileList[0].url\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,aAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AA6ED,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,YAAY,CAAA,CAAA;AAK7C,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAClC,IAAA,MAAM,mBAAmBA,OAAI,EAAA,CAAA;AAG7B,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,KAAA,CAAM,KAAQ,GAAA,EAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,gBAAA,CAAiB,MAAM,IAAK,EAAA,CAAA;AAAA,KAC9B,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,CAAC,cAAwB,KAAA;AACzC,MAAM,KAAA,CAAA,KAAA,GAAQ,cAAe,CAAA,CAAC,CAAE,CAAA,GAAA,CAAA;AAAA,KAClC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"file-input.vue2.js","sources":["../../../src/file-input/src/file-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkFileInput',\n});\n</script>\n<template>\n  <div :class=\"bem()\">\n    <!--↓↓↓↓显示input框↓↓↓↓-->\n    <template v-if=\"showInput\">\n      <el-input v-model=\"input\" :placeholder=\"placeholder\" clearable>\n        <template #append>\n          <el-button @click=\"onClick\">选择</el-button>\n        </template>\n      </el-input>\n      <!--选择的是图片-->\n      <div class=\"show m-t-5px\">\n        <el-image\n          v-if=\"type === 1\"\n          :src=\"input\"\n          alt=\"\"\n          fit=\"contain\"\n          class=\"file rd-4px\"\n          :preview-src-list=\"[input]\"\n        >\n          <template #error>\n            <div class=\"image-error\">\n              <dk-icon icon=\"Picture\"></dk-icon>\n            </div>\n          </template>\n        </el-image>\n        <dk-file-icon\n          v-else\n          :file-url=\"input\"\n          class=\"file rd-4px\"\n          :type=\"type\"\n        />\n        <em @click=\"input = ''\">\n          <dk-icon icon=\"Close\"></dk-icon>\n        </em>\n      </div>\n    </template>\n    <!--↓↓↓↓不显示input框↓↓↓↓-->\n    <template v-else>\n      <div\n        class=\"only-img flex justify-center items-center\"\n        style=\"position: relative\"\n        :style=\"{ width: imgSize + 'px', height: imgSize + 'px' }\"\n        @click=\"onClick\"\n      >\n        <template v-if=\"input\">\n          <!--图片附件-->\n          <el-image\n            v-if=\"type === 1\"\n            :src=\"input\"\n            alt=\"\"\n            fit=\"contain\"\n            style=\"width: 100%; height: 100%\"\n          >\n            <template #error>\n              <div class=\"image-slot\">\n                <div class=\"no-image\">\n                  <el-icon><Picture /></el-icon>\n                </div>\n              </div>\n            </template>\n          </el-image>\n          <!--其他附件-->\n          <template v-if=\"type !== 1 && input\">\n            <dk-file-icon :file-url=\"input\" class=\"file rd-4px\" :type=\"type\" />\n          </template>\n          <div class=\"close\" @click.stop=\"onClear()\">\n            <el-icon><Close /></el-icon>\n          </div>\n        </template>\n        <!--没有上传的时候-->\n        <template v-else>\n          <div\n            class=\"media\"\n            :style=\"{\n              lineHeight: imgSize + 'px',\n              fontSize: imgSize / 2 + 'px',\n            }\"\n          >\n            <el-icon><Plus /></el-icon>\n          </div>\n        </template>\n      </div>\n    </template>\n    <dk-attachment-dialog\n      ref=\"attachmentDialog\"\n      :type=\"type\"\n      @confirm=\"onConfirm\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { fileInputProps } from './props'\nimport { ref, watch } from 'vue'\nimport DkFileIcon from '../../attachment/src/file-icon.vue'\n\nconst [_, bem] = createNamespace('file-input')\n\n\n\nconst props = defineProps(fileInputProps)\nconst input = ref(props.modelValue)\nconst attachmentDialog = ref()\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n\nconst onClear = () => {\n  input.value = ''\n}\n\nconst onClick = () => {\n  attachmentDialog.value.open()\n}\n// 确认选中附件\nconst onConfirm = (chooseFileList: any) => {\n  input.value = chooseFileList[0].url\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,aAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAmGD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,YAAY,CAAA,CAAA;AAK7C,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAClC,IAAA,MAAM,mBAAmBA,OAAI,EAAA,CAAA;AAG7B,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,KAAA,CAAM,KAAQ,GAAA,EAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,gBAAA,CAAiB,MAAM,IAAK,EAAA,CAAA;AAAA,KAC9B,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,CAAC,cAAwB,KAAA;AACzC,MAAM,KAAA,CAAA,KAAA,GAAQ,cAAe,CAAA,CAAC,CAAE,CAAA,GAAA,CAAA;AAAA,KAClC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/file-list-input/src/file-list-input.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-input.vue2.js","sources":["../../../src/file-list-input/src/file-list-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkFileListInput',\n});\n</script>\n<template>\n  <div :class=\"bem()\">\n    <div class=\"dk-image-list\">\n      <ul>\n        <li v-for=\"(item, key) in input\" :key=\"key\">\n          <div class=\"file\" :style=\"_style\">\n            <el-image v-if=\"type === 1\" :src=\"item\" fit=\"contain\" :style=\"_style\" />\n            <dk-file-icon v-else :file-url=\"item\" class=\"file rd-4px\" :type=\"type\" />\n            <div v-if=\"!disabled\" class=\"close\" @click=\"deleteFile(key)\">\n              <el-icon><Close /></el-icon>\n            </div>\n          </div>\n        </li>\n        <li v-if=\"limit > input.length && !disabled\">\n          <div class=\"chooseImage\" :style=\"_style\" @click=\"onClick()\">\n            <el-icon><Plus /></el-icon>\n          </div>\n        </li>\n      </ul>\n    </div>\n    <dk-attachment-dialog ref=\"attachment\" :type=\"type\" @confirm=\"onConfirm\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { fileListInputProps } from './props'\nimport { computed, ref, watch } from 'vue'\nimport DkFileIcon from '../../attachment/src/file-icon.vue'\n\nconst [_, bem] = createNamespace('file-list-input')\n\n\n\nconst props = defineProps(fileListInputProps)\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nconst input: any = ref(props.modelValue)\nconst _style = computed(() => {\n  return {\n    width: props.imgSize + 'px',\n    height: props.imgSize + 'px',\n    lineHeight: props.imgSize + 'px',\n  }\n})\n\nconst attachment = ref()\n\nconst onClick = () => {\n  attachment.value.open()\n}\nconst onConfirm = (chooseFileList: any) => {\n  chooseFileList.forEach((item: any) => {\n    if (input.value.length < props.limit) {\n      input.value.push(item.url)\n      handleInput(input.value)\n    }\n  })\n}\nconst deleteFile = (index: number) => {\n  input.value.splice(index, 1)\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","computed","watch"],"mappings":";;;;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,iBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAgCD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,iBAAiB,CAAA,CAAA;AAMlD,IAAM,MAAA,KAAA,GAAaC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AACvC,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAO,OAAA;AAAA,QACL,KAAA,EAAO,MAAM,OAAU,GAAA,IAAA;AAAA,QACvB,MAAA,EAAQ,MAAM,OAAU,GAAA,IAAA;AAAA,QACxB,UAAA,EAAY,MAAM,OAAU,GAAA,IAAA;AAAA,OAC9B,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,aAAaD,OAAI,EAAA,CAAA;AAEvB,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,UAAA,CAAW,MAAM,IAAK,EAAA,CAAA;AAAA,KACxB,CAAA;AACA,IAAM,MAAA,SAAA,GAAY,CAAC,cAAwB,KAAA;AACzC,MAAe,cAAA,CAAA,OAAA,CAAQ,CAAC,IAAc,KAAA;AACpC,QAAA,IAAI,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,KAAA,CAAM,KAAO,EAAA;AACpC,UAAM,KAAA,CAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AACzB,UAAA,WAAA,CAAY,MAAM,KAAK,CAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAM,MAAA,UAAA,GAAa,CAAC,KAAkB,KAAA;AACpC,MAAM,KAAA,CAAA,KAAA,CAAM,MAAO,CAAA,KAAA,EAAO,CAAC,CAAA,CAAA;AAAA,KAC7B,CAAA;AAEA,IAAAE,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"file-list-input.vue2.js","sources":["../../../src/file-list-input/src/file-list-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkFileListInput',\n});\n</script>\n<template>\n  <div :class=\"bem()\">\n    <div class=\"dk-image-list\">\n      <ul>\n        <li v-for=\"(item, key) in input\" :key=\"key\">\n          <div class=\"file\" :style=\"_style\">\n            <el-image\n              v-if=\"type === 1\"\n              :src=\"item\"\n              fit=\"contain\"\n              :style=\"_style\"\n            />\n            <dk-file-icon\n              v-else\n              :file-url=\"item\"\n              class=\"file rd-4px\"\n              :type=\"type\"\n            />\n            <div v-if=\"!disabled\" class=\"close\" @click=\"deleteFile(key)\">\n              <el-icon><Close /></el-icon>\n            </div>\n          </div>\n        </li>\n        <li v-if=\"limit > input.length && !disabled\">\n          <div class=\"chooseImage\" :style=\"_style\" @click=\"onClick()\">\n            <el-icon><Plus /></el-icon>\n          </div>\n        </li>\n      </ul>\n    </div>\n    <dk-attachment-dialog ref=\"attachment\" :type=\"type\" @confirm=\"onConfirm\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { fileListInputProps } from './props'\nimport { computed, ref, watch } from 'vue'\nimport DkFileIcon from '../../attachment/src/file-icon.vue'\n\nconst [_, bem] = createNamespace('file-list-input')\n\n\n\nconst props = defineProps(fileListInputProps)\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nconst input: any = ref(props.modelValue)\nconst _style = computed(() => {\n  return {\n    width: props.imgSize + 'px',\n    height: props.imgSize + 'px',\n    lineHeight: props.imgSize + 'px',\n  }\n})\n\nconst attachment = ref()\n\nconst onClick = () => {\n  attachment.value.open()\n}\nconst onConfirm = (chooseFileList: any) => {\n  chooseFileList.forEach((item: any) => {\n    if (input.value.length < props.limit) {\n      input.value.push(item.url)\n      handleInput(input.value)\n    }\n  })\n}\nconst deleteFile = (index: number) => {\n  input.value.splice(index, 1)\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","computed","watch"],"mappings":";;;;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,iBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AA0CD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,iBAAiB,CAAA,CAAA;AAMlD,IAAM,MAAA,KAAA,GAAaC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AACvC,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAO,OAAA;AAAA,QACL,KAAA,EAAO,MAAM,OAAU,GAAA,IAAA;AAAA,QACvB,MAAA,EAAQ,MAAM,OAAU,GAAA,IAAA;AAAA,QACxB,UAAA,EAAY,MAAM,OAAU,GAAA,IAAA;AAAA,OAC9B,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,aAAaD,OAAI,EAAA,CAAA;AAEvB,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,UAAA,CAAW,MAAM,IAAK,EAAA,CAAA;AAAA,KACxB,CAAA;AACA,IAAM,MAAA,SAAA,GAAY,CAAC,cAAwB,KAAA;AACzC,MAAe,cAAA,CAAA,OAAA,CAAQ,CAAC,IAAc,KAAA;AACpC,QAAA,IAAI,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,KAAA,CAAM,KAAO,EAAA;AACpC,UAAM,KAAA,CAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AACzB,UAAA,WAAA,CAAY,MAAM,KAAK,CAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAM,MAAA,UAAA,GAAa,CAAC,KAAkB,KAAA;AACpC,MAAM,KAAA,CAAA,KAAA,CAAM,MAAO,CAAA,KAAA,EAAO,CAAC,CAAA,CAAA;AAAA,KAC7B,CAAA;AAEA,IAAAE,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/file-list-input/style/index.css

@@ -1 +1 @@
-.dk-file-list-input{width:100%}.dk-file-list-input .button{text-align:center;border-top:1px solid #f5f5f5;padding-top:10px}.dk-file-list-input .dk-image-list ul:after{content:"";display:block;clear:both}.dk-file-list-input .dk-image-list ul li{float:left;margin-right:10px;margin-bottom:10px;border:1px solid var(--el-border-color);border-radius:4px}.dk-file-list-input .dk-image-list ul li .file{position:relative;width:100px;height:100px;text-align:center}.dk-file-list-input .dk-image-list ul li .file div{position:relative}.dk-file-list-input .dk-image-list ul li .file div .other-file{font-size:80px;color:#aaa;line-height:100px}.dk-file-list-input .dk-image-list ul li .file div .el-icon-video-play{display:none;position:absolute;bottom:2px;right:2px;font-size:20px;cursor:pointer}.dk-file-list-input .dk-image-list ul li .file div:hover .el-icon-video-play{color:#409eff;display:block}.dk-file-list-input .dk-image-list ul li .file .close{display:none;cursor:pointer;position:absolute;top:0;line-height:20px;right:0;width:20px;height:20px;text-align:center;background:rgba(0,0,0,.4);border-radius:100%;color:#fff;align-items:center;justify-content:center}.dk-file-list-input .dk-image-list ul li .file:hover .close{display:flex}.dk-file-list-input .dk-image-list ul li .chooseImage{width:100px;height:100px;line-height:100px;text-align:center;font-size:40px;color:#999;cursor:pointer}.dk-file-list-input .dk-image-list ul li .chooseImage:hover{color:#409eff}
+.dk-file-list-input{width:100%}.dk-file-list-input .button{padding-top:10px;text-align:center;border-top:1px solid #f5f5f5}.dk-file-list-input .dk-image-list ul::after{display:block;clear:both;content:""}.dk-file-list-input .dk-image-list ul li{float:left;margin-right:10px;margin-bottom:10px;border:1px solid var(--el-border-color);border-radius:4px}.dk-file-list-input .dk-image-list ul li .file{position:relative;width:100px;height:100px;text-align:center}.dk-file-list-input .dk-image-list ul li .file div{position:relative}.dk-file-list-input .dk-image-list ul li .file div .other-file{font-size:80px;line-height:100px;color:#aaa}.dk-file-list-input .dk-image-list ul li .file div .el-icon-video-play{position:absolute;right:2px;bottom:2px;display:none;font-size:20px;cursor:pointer}.dk-file-list-input .dk-image-list ul li .file div:hover .el-icon-video-play{display:block;color:#409eff}.dk-file-list-input .dk-image-list ul li .file .close{position:absolute;top:0;right:0;display:none;align-items:center;justify-content:center;width:20px;height:20px;line-height:20px;color:#fff;text-align:center;cursor:pointer;background:rgba(0,0,0,.4);border-radius:100%}.dk-file-list-input .dk-image-list ul li .file:hover .close{display:flex}.dk-file-list-input .dk-image-list ul li .chooseImage{width:100px;height:100px;font-size:40px;line-height:100px;color:#999;text-align:center;cursor:pointer}.dk-file-list-input .dk-image-list ul li .chooseImage:hover{color:#409eff}

package/lib/file-list-input/style/index.scss

@@ -1,19 +1,21 @@
 .dk-file-list-input {
   width: 100%;
+
   .button {
+    padding-top: 10px;
     text-align: center;
     border-top: 1px solid #f5f5f5;
-    padding-top: 10px;
   }
 
   .dk-image-list {
     ul {
       // 清除浮动
-      &:after {
-        content: '';
+      &::after {
         display: block;
         clear: both;
+        content: '';
       }
+
       li {
         float: left;
         margin-right: 10px;
@@ -32,38 +34,40 @@
 
             .other-file {
               font-size: 80px;
-              color: #aaa;
               line-height: 100px;
+              color: #aaa;
             }
+
             .el-icon-video-play {
-              display: none;
               position: absolute;
-              bottom: 2px;
               right: 2px;
+              bottom: 2px;
+              display: none;
               font-size: 20px;
               cursor: pointer;
             }
+
             &:hover .el-icon-video-play {
-              color: #409eff;
               display: block;
+              color: #409eff;
             }
           }
 
           .close {
-            display: none;
-            cursor: pointer;
             position: absolute;
             top: 0;
-            line-height: 20px;
             right: 0;
+            display: none;
+            align-items: center;
+            justify-content: center;
             width: 20px;
             height: 20px;
+            line-height: 20px;
+            color: #fff;
             text-align: center;
-            background: rgba(0, 0, 0, 0.4);
+            cursor: pointer;
+            background: rgb(0 0 0 / 40%);
             border-radius: 100%;
-            color: #fff;
-            align-items: center;
-            justify-content: center;
           }
 
           &:hover .close {
@@ -74,10 +78,10 @@
         .chooseImage {
           width: 100px;
           height: 100px;
-          line-height: 100px;
-          text-align: center;
           font-size: 40px;
+          line-height: 100px;
           color: #999;
+          text-align: center;
           cursor: pointer;
 
           &:hover {