@vipl520/dk-ui 1.0.48 → 1.0.50

package/es/style-input/src/props.mjs

@@ -24,6 +24,24 @@ const styleInputProps = {
       return {};
     },
     type: Object
+  },
+  isDrawer: {
+    default: false,
+    type: Boolean
+  },
+  drawerProps: {
+    default: () => {
+      return {
+        title: "\u7F16\u8F91\u6837\u5F0F",
+        direction: "rtl",
+        size: "400px"
+      };
+    },
+    type: Object
+  },
+  drawerText: {
+    default: "\u7F16\u8F91\u6837\u5F0F",
+    type: String
   }
 };
 

package/es/style-input/src/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","sources":["../../../src/style-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\nimport { defaultConfig, type StyleInputConfig } from './default'\n\nexport const styleInputProps = {\n  /**\n   * 引入组件\n   */\n  components: {\n    default: () => {\n      return defaultConfig\n    },\n    type: Array as () => StyleInputConfig,\n  },\n  /**\n   * 需要隐藏组件\n   */\n  hideComponents: {\n    default: () => {\n      return []\n    },\n    type: Array as () => string[],\n  },\n  modelValue: {\n    default: () => {\n      return {}\n    },\n    type: Object,\n  },\n}\n\nexport type StyleInputProps = ExtractPropTypes<typeof styleInputProps>\n"],"names":[],"mappings":";;AAGO,MAAM,eAAkB,GAAA;AAAA;AAAA;AAAA;AAAA,EAI7B,UAAY,EAAA;AAAA,IACV,SAAS,MAAM;AACb,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GACR;AAAA;AAAA;AAAA;AAAA,EAIA,cAAgB,EAAA;AAAA,IACd,SAAS,MAAM;AACb,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GACR;AAAA,EACA,UAAY,EAAA;AAAA,IACV,SAAS,MAAM;AACb,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA,MAAA;AAAA,GACR;AACF;;;;"}
+{"version":3,"file":"props.mjs","sources":["../../../src/style-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\nimport { defaultConfig, type StyleInputConfig } from './default'\n\nexport const styleInputProps = {\n  /**\n   * 引入组件\n   */\n  components: {\n    default: () => {\n      return defaultConfig\n    },\n    type: Array as () => StyleInputConfig,\n  },\n  /**\n   * 需要隐藏组件\n   */\n  hideComponents: {\n    default: () => {\n      return []\n    },\n    type: Array as () => string[],\n  },\n  modelValue: {\n    default: () => {\n      return {}\n    },\n    type: Object,\n  },\n  isDrawer: {\n    default: false,\n    type: Boolean,\n  },\n  drawerProps: {\n    default: () => {\n      return {\n        title: '编辑样式',\n        direction: 'rtl',\n        size: '400px',\n      }\n    },\n    type: Object,\n  },\n  drawerText: {\n    default: '编辑样式',\n    type: String,\n  },\n}\n\nexport type StyleInputProps = ExtractPropTypes<typeof styleInputProps>\n"],"names":[],"mappings":";;AAGO,MAAM,eAAkB,GAAA;AAAA;AAAA;AAAA;AAAA,EAI7B,UAAY,EAAA;AAAA,IACV,SAAS,MAAM;AACb,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GACR;AAAA;AAAA;AAAA;AAAA,EAIA,cAAgB,EAAA;AAAA,IACd,SAAS,MAAM;AACb,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GACR;AAAA,EACA,UAAY,EAAA;AAAA,IACV,SAAS,MAAM;AACb,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA,MAAA;AAAA,GACR;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,GACR;AAAA,EACA,WAAa,EAAA;AAAA,IACX,SAAS,MAAM;AACb,MAAO,OAAA;AAAA,QACL,KAAO,EAAA,0BAAA;AAAA,QACP,SAAW,EAAA,KAAA;AAAA,QACX,IAAM,EAAA,OAAA;AAAA,OACR,CAAA;AAAA,KACF;AAAA,IACA,IAAM,EAAA,MAAA;AAAA,GACR;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA,0BAAA;AAAA,IACT,IAAM,EAAA,MAAA;AAAA,GACR;AACF;;;;"}

package/es/style-input/src/style-input.vue.d.ts

@@ -11,6 +11,22 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
         type: ObjectConstructor;
     };
+    isDrawer: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    drawerProps: {
+        default: () => {
+            title: string;
+            direction: string;
+            size: string;
+        };
+        type: ObjectConstructor;
+    };
+    drawerText: {
+        default: string;
+        type: StringConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     components: {
         default: () => import("./default").StyleInputConfig;
@@ -24,11 +40,30 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
         type: ObjectConstructor;
     };
+    isDrawer: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    drawerProps: {
+        default: () => {
+            title: string;
+            direction: string;
+            size: string;
+        };
+        type: ObjectConstructor;
+    };
+    drawerText: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
     components: import("./default").StyleInputConfig;
     hideComponents: string[];
+    isDrawer: boolean;
+    drawerProps: Record<string, any>;
+    drawerText: string;
 }, {}>;
 export default _default;

package/es/style-input/src/style-input.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, resolveDynamicComponent, mergeProps, createCommentVNode } from 'vue';
+import { defineComponent, ref, watch, onMounted, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, Fragment, renderList, createTextVNode, toDisplayString, resolveDynamicComponent, mergeProps, createCommentVNode, createVNode } from 'vue';
 import { styleInputProps } from './props.mjs';
 
 const _hoisted_1 = { class: "dk-style-input" };
@@ -6,6 +6,7 @@ const _hoisted_2 = {
   key: 0,
   class: "p-5px"
 };
+const _hoisted_3 = { key: 1 };
 const __default__ = defineComponent({
   name: "DkStyleInput"
 });
@@ -15,6 +16,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
+    const drawer = ref(false);
     const activeNames = ref([0]);
     const values = ref({});
     const loading = ref(true);
@@ -63,9 +65,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_el_collapse_item = resolveComponent("el-collapse-item");
       const _component_el_collapse = resolveComponent("el-collapse");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_drawer = resolveComponent("el-drawer");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         !loading.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_component_el_collapse, {
+          !props.isDrawer ? (openBlock(), createBlock(_component_el_collapse, {
+            key: 0,
             modelValue: activeNames.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeNames.value = $event)
           }, {
@@ -103,7 +108,72 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["modelValue"])
+          }, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(_component_el_button, {
+              type: "primary",
+              plain: "",
+              style: { "width": "100%" },
+              onClick: _cache[1] || (_cache[1] = ($event) => drawer.value = true)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(props.drawerText),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            createVNode(_component_el_drawer, mergeProps({
+              modelValue: drawer.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => drawer.value = $event)
+            }, props.drawerProps), {
+              default: withCtx(() => [
+                createVNode(_component_el_collapse, {
+                  modelValue: activeNames.value,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => activeNames.value = $event)
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(_components.value, (item, key) => {
+                        return openBlock(), createBlock(_component_el_collapse_item, {
+                          key,
+                          title: "",
+                          name: key
+                        }, {
+                          title: withCtx(() => [
+                            createTextVNode(
+                              toDisplayString(item.title),
+                              1
+                              /* TEXT */
+                            )
+                          ]),
+                          default: withCtx(() => [
+                            activeNames.value.includes(key) ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({
+                              key: 0,
+                              modelValue: values.value[item.name],
+                              "onUpdate:modelValue": ($event) => values.value[item.name] = $event
+                            }, item.props, { onChange }), null, 16, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("v-if", true)
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1032, ["name"]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["modelValue"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 16, ["modelValue"])
+          ]))
         ])) : createCommentVNode("v-if", true)
       ]);
     };

package/es/style-input/src/style-input.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style-input.vue2.mjs","sources":["../../../src/style-input/src/style-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkStyleInput',\n});\n</script>\n<template>\n  <div class=\"dk-style-input\">\n    <div v-if=\"!loading\" class=\"p-5px\">\n      <el-collapse v-model=\"activeNames\">\n        <el-collapse-item v-for=\"(item, key) in _components\" :key=\"key\" title=\"\" :name=\"key\">\n          <template #title>\n            {{ item.title }}\n          </template>\n          <component\n            :is=\"item.name\"\n            v-if=\"activeNames.includes(key)\"\n            v-model=\"values[item.name]\"\n            v-bind=\"item.props\"\n            @change=\"onChange\"\n          />\n        </el-collapse-item>\n      </el-collapse>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { styleInputProps } from './props'\nimport { onMounted, ref, watch } from 'vue'\n\n\nconst props = defineProps(styleInputProps)\nconst activeNames = ref([0])\nconst values: any = ref({})\nconst loading = ref(true)\n\nconst emit = defineEmits(['update:modelValue'])\nconst onChange = () => {\n  const obj: any = {}\n  Object.keys(values.value).forEach((key) => {\n    Object.keys(values.value[key]).forEach((k) => {\n      obj[k] = values.value[key][k]\n    })\n  })\n  emit('update:modelValue', obj)\n}\n\nconst _components: any = ref([])\nconst init = () => {\n  _components.value = props.components.filter((item: any) => {\n    console.log('item.name', item.name)\n    return !props.hideComponents.includes(item.name)\n  })\n  const obj: any = {}\n  _components.value.forEach((item: any) => {\n    const params = item.params\n    const paramsObj: any = {}\n    Object.keys(params).forEach((key) => {\n      const param = params[key]\n      if (props.modelValue[param]) {\n        paramsObj[param] = props.modelValue[param]\n      }\n    })\n    obj[item.name] = paramsObj\n  })\n  values.value = obj\n  loading.value = false\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    init()\n  },\n  {\n    deep: true,\n  }\n)\n\nonMounted(() => {\n  init()\n})\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,eAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AA6BD,IAAA,MAAM,WAAc,GAAA,GAAA,CAAI,CAAC,CAAC,CAAC,CAAA,CAAA;AAC3B,IAAM,MAAA,MAAA,GAAc,GAAI,CAAA,EAAE,CAAA,CAAA;AAC1B,IAAM,MAAA,OAAA,GAAU,IAAI,IAAI,CAAA,CAAA;AAGxB,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,MAAM,MAAW,EAAC,CAAA;AAClB,MAAA,MAAA,CAAO,KAAK,MAAO,CAAA,KAAK,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACzC,QAAO,MAAA,CAAA,IAAA,CAAK,OAAO,KAAM,CAAA,GAAG,CAAC,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAM,KAAA;AAC5C,UAAA,GAAA,CAAI,CAAC,CAAI,GAAA,MAAA,CAAO,KAAM,CAAA,GAAG,EAAE,CAAC,CAAA,CAAA;AAAA,SAC7B,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AACD,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAM,MAAA,WAAA,GAAmB,GAAI,CAAA,EAAE,CAAA,CAAA;AAC/B,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,WAAA,CAAY,KAAQ,GAAA,KAAA,CAAM,UAAW,CAAA,MAAA,CAAO,CAAC,IAAc,KAAA;AACzD,QAAQ,OAAA,CAAA,GAAA,CAAI,WAAa,EAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,QAAA,OAAO,CAAC,KAAA,CAAM,cAAe,CAAA,QAAA,CAAS,KAAK,IAAI,CAAA,CAAA;AAAA,OAChD,CAAA,CAAA;AACD,MAAA,MAAM,MAAW,EAAC,CAAA;AAClB,MAAY,WAAA,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,IAAc,KAAA;AACvC,QAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AACpB,QAAA,MAAM,YAAiB,EAAC,CAAA;AACxB,QAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,UAAM,MAAA,KAAA,GAAQ,OAAO,GAAG,CAAA,CAAA;AACxB,UAAI,IAAA,KAAA,CAAM,UAAW,CAAA,KAAK,CAAG,EAAA;AAC3B,YAAA,SAAA,CAAU,KAAK,CAAA,GAAI,KAAM,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,WAC3C;AAAA,SACD,CAAA,CAAA;AACD,QAAI,GAAA,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,SAAA,CAAA;AAAA,OAClB,CAAA,CAAA;AACD,MAAA,MAAA,CAAO,KAAQ,GAAA,GAAA,CAAA;AACf,MAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;AACJ,QAAK,IAAA,EAAA,CAAA;AAAA,OACP;AAAA,MACA;AAAA,QACE,IAAM,EAAA,IAAA;AAAA,OACR;AAAA,KACF,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAK,IAAA,EAAA,CAAA;AAAA,KACN,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"style-input.vue2.mjs","sources":["../../../src/style-input/src/style-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkStyleInput',\n});\n</script>\n<template>\n  <div class=\"dk-style-input\">\n    <div v-if=\"!loading\" class=\"p-5px\">\n      <el-collapse v-if=\"!props.isDrawer\" v-model=\"activeNames\">\n        <el-collapse-item v-for=\"(item, key) in _components\" :key=\"key\" title=\"\" :name=\"key\">\n          <template #title>\n            {{ item.title }}\n          </template>\n          <component\n            :is=\"item.name\"\n            v-if=\"activeNames.includes(key)\"\n            v-model=\"values[item.name]\"\n            v-bind=\"item.props\"\n            @change=\"onChange\"\n          />\n        </el-collapse-item>\n      </el-collapse>\n      <div v-else>\n        <el-button type=\"primary\" plain style=\"width: 100%\" @click=\"drawer = true\">{{ props.drawerText }}</el-button>\n        <el-drawer v-model=\"drawer\" v-bind=\"props.drawerProps\">\n          <el-collapse v-model=\"activeNames\">\n            <el-collapse-item v-for=\"(item, key) in _components\" :key=\"key\" title=\"\" :name=\"key\">\n              <template #title>\n                {{ item.title }}\n              </template>\n              <component\n                :is=\"item.name\"\n                v-if=\"activeNames.includes(key)\"\n                v-model=\"values[item.name]\"\n                v-bind=\"item.props\"\n                @change=\"onChange\"\n              />\n            </el-collapse-item>\n          </el-collapse>\n        </el-drawer>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { styleInputProps } from './props'\nimport { onMounted, ref, watch } from 'vue'\n\n\nconst props = defineProps(styleInputProps)\nconst drawer = ref(false)\nconst activeNames = ref([0])\nconst values: any = ref({})\nconst loading = ref(true)\n\nconst emit = defineEmits(['update:modelValue'])\nconst onChange = () => {\n  const obj: any = {}\n  Object.keys(values.value).forEach((key) => {\n    Object.keys(values.value[key]).forEach((k) => {\n      obj[k] = values.value[key][k]\n    })\n  })\n  emit('update:modelValue', obj)\n}\n\nconst _components: any = ref([])\nconst init = () => {\n  _components.value = props.components.filter((item: any) => {\n    console.log('item.name', item.name)\n    return !props.hideComponents.includes(item.name)\n  })\n  const obj: any = {}\n  _components.value.forEach((item: any) => {\n    const params = item.params\n    const paramsObj: any = {}\n    Object.keys(params).forEach((key) => {\n      const param = params[key]\n      if (props.modelValue[param]) {\n        paramsObj[param] = props.modelValue[param]\n      }\n    })\n    obj[item.name] = paramsObj\n  })\n  values.value = obj\n  loading.value = false\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    init()\n  },\n  {\n    deep: true,\n  }\n)\n\nonMounted(() => {\n  init()\n})\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;;;;;AAEA,MAA6B,cAAAA,eAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAgDD,IAAM,MAAA,MAAA,GAAS,IAAI,KAAK,CAAA,CAAA;AACxB,IAAA,MAAM,WAAc,GAAA,GAAA,CAAI,CAAC,CAAC,CAAC,CAAA,CAAA;AAC3B,IAAM,MAAA,MAAA,GAAc,GAAI,CAAA,EAAE,CAAA,CAAA;AAC1B,IAAM,MAAA,OAAA,GAAU,IAAI,IAAI,CAAA,CAAA;AAGxB,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,MAAM,MAAW,EAAC,CAAA;AAClB,MAAA,MAAA,CAAO,KAAK,MAAO,CAAA,KAAK,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACzC,QAAO,MAAA,CAAA,IAAA,CAAK,OAAO,KAAM,CAAA,GAAG,CAAC,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAM,KAAA;AAC5C,UAAA,GAAA,CAAI,CAAC,CAAI,GAAA,MAAA,CAAO,KAAM,CAAA,GAAG,EAAE,CAAC,CAAA,CAAA;AAAA,SAC7B,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AACD,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAM,MAAA,WAAA,GAAmB,GAAI,CAAA,EAAE,CAAA,CAAA;AAC/B,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,WAAA,CAAY,KAAQ,GAAA,KAAA,CAAM,UAAW,CAAA,MAAA,CAAO,CAAC,IAAc,KAAA;AACzD,QAAQ,OAAA,CAAA,GAAA,CAAI,WAAa,EAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,QAAA,OAAO,CAAC,KAAA,CAAM,cAAe,CAAA,QAAA,CAAS,KAAK,IAAI,CAAA,CAAA;AAAA,OAChD,CAAA,CAAA;AACD,MAAA,MAAM,MAAW,EAAC,CAAA;AAClB,MAAY,WAAA,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,IAAc,KAAA;AACvC,QAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AACpB,QAAA,MAAM,YAAiB,EAAC,CAAA;AACxB,QAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,UAAM,MAAA,KAAA,GAAQ,OAAO,GAAG,CAAA,CAAA;AACxB,UAAI,IAAA,KAAA,CAAM,UAAW,CAAA,KAAK,CAAG,EAAA;AAC3B,YAAA,SAAA,CAAU,KAAK,CAAA,GAAI,KAAM,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,WAC3C;AAAA,SACD,CAAA,CAAA;AACD,QAAI,GAAA,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,SAAA,CAAA;AAAA,OAClB,CAAA,CAAA;AACD,MAAA,MAAA,CAAO,KAAQ,GAAA,GAAA,CAAA;AACf,MAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;AACJ,QAAK,IAAA,EAAA,CAAA;AAAA,OACP;AAAA,MACA;AAAA,QACE,IAAM,EAAA,IAAA;AAAA,OACR;AAAA,KACF,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAK,IAAA,EAAA,CAAA;AAAA,KACN,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/style-box-input/index.d.ts

@@ -4,8 +4,8 @@ export declare const StyleBoxInput: import("@vipl520/utils").WithInstall<import(
         default: () => {};
     };
     height: {
-        type: NumberConstructor;
-        default: number;
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
     };
     help: {
         type: StringConstructor;
@@ -17,8 +17,8 @@ export declare const StyleBoxInput: import("@vipl520/utils").WithInstall<import(
         default: () => {};
     };
     height: {
-        type: NumberConstructor;
-        default: number;
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
     };
     help: {
         type: StringConstructor;
@@ -29,7 +29,7 @@ export declare const StyleBoxInput: import("@vipl520/utils").WithInstall<import(
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
-    height: number;
+    height: string | number;
     help: string;
 }, {}>>;
 export default StyleBoxInput;

package/lib/style-box-input/src/props.d.ts

@@ -5,8 +5,8 @@ export declare const styleBoxInputProps: {
         default: () => {};
     };
     height: {
-        type: NumberConstructor;
-        default: number;
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
     };
     help: {
         type: StringConstructor;

package/lib/style-box-input/src/props.js

@@ -6,8 +6,8 @@ const styleBoxInputProps = {
     default: () => ({})
   },
   height: {
-    type: Number,
-    default: 180
+    type: [Number, String],
+    default: "auto"
   },
   help: {
     type: String,

package/lib/style-box-input/src/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../src/style-box-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\n\nexport const styleBoxInputProps = {\n  modelValue: {\n    type: Object,\n    default: () => ({}),\n  },\n  height: {\n    type: Number,\n    default: 180,\n  },\n  help: {\n    type: String,\n    default:\n      '可以双击对应位置来配置内外边距和宽度高度，也支持通过描点拖拽增加，支持单位（px、rem、%、auto)',\n  },\n}\n\nexport type StyleBoxInputProps = ExtractPropTypes<typeof styleBoxInputProps>\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAqB,GAAA;AAAA,EAChC,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,MAAA;AAAA,IACN,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,GAAA;AAAA,GACX;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,MAAA;AAAA,IACN,OACE,EAAA,mQAAA;AAAA,GACJ;AACF;;;;"}
+{"version":3,"file":"props.js","sources":["../../../src/style-box-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\n\nexport const styleBoxInputProps = {\n  modelValue: {\n    type: Object,\n    default: () => ({}),\n  },\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n  help: {\n    type: String,\n    default: '可以双击对应位置来配置内外边距和宽度高度，也支持通过描点拖拽增加，支持单位（px、rem、%、auto)',\n  },\n}\n\nexport type StyleBoxInputProps = ExtractPropTypes<typeof styleBoxInputProps>\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAqB,GAAA;AAAA,EAChC,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,MAAA;AAAA,IACN,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,MAAA;AAAA,GACX;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,mQAAA;AAAA,GACX;AACF;;;;"}

package/lib/style-box-input/src/style-box-input.vue.d.ts

@@ -4,8 +4,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     height: {
-        type: NumberConstructor;
-        default: number;
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
     };
     help: {
         type: StringConstructor;
@@ -17,8 +17,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     height: {
-        type: NumberConstructor;
-        default: number;
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
     };
     help: {
         type: StringConstructor;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
-    height: number;
+    height: string | number;
     help: string;
 }, {}>;
 export default _default;

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

@@ -6,6 +6,7 @@ var vue = require('vue');
 var props = require('./props.js');
 var html = require('./html.js');
 var utils = require('@vipl520/utils');
+var core = require('@vueuse/core');
 
 const _hoisted_1 = { class: "dk-style-box-input" };
 const _hoisted_2 = { class: "header" };
@@ -14,50 +15,46 @@ const _hoisted_4 = { class: "float-right cursor-pointer" };
 const _hoisted_5 = { class: "name-header-operations" };
 const _hoisted_6 = { class: "name-header-operations" };
 const _hoisted_7 = { class: "name-header-operations" };
-const _hoisted_8 = ["title"];
-const _hoisted_9 = ["onMouseenter"];
-const _hoisted_10 = ["onUpdate:modelValue", "onBlur"];
-const _hoisted_11 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
-const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_8 = ["title", "onClick"];
+const _hoisted_9 = ["onUpdate:modelValue", "onBlur"];
+const _hoisted_10 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
+const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode(
   "div",
   { style: { "position": "absolute", "display": "none", "width": "100%", "height": "100%" } },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_13 = { class: "anchor-wrapper" };
-const _hoisted_14 = ["onMousedown"];
-const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_12 = { class: "anchor-wrapper" };
+const _hoisted_13 = ["onMousedown"];
+const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode(
   "span",
   { class: "title" },
   " \u5916\u8FB9\u8DDD ",
   -1
   /* HOISTED */
 );
-const _hoisted_16 = { class: "thumnail border" };
-const _hoisted_17 = ["title"];
-const _hoisted_18 = ["onMouseenter"];
-const _hoisted_19 = ["onUpdate:modelValue", "onBlur"];
-const _hoisted_20 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
-const _hoisted_21 = { class: "anchor-wrapper" };
-const _hoisted_22 = ["onMousedown"];
-const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_15 = { class: "thumnail border" };
+const _hoisted_16 = ["title", "onClick"];
+const _hoisted_17 = ["onUpdate:modelValue", "onBlur"];
+const _hoisted_18 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
+const _hoisted_19 = { class: "anchor-wrapper" };
+const _hoisted_20 = ["onMousedown"];
+const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode(
   "span",
   { class: "title" },
   " \u5185\u8FB9\u8DDD ",
   -1
   /* HOISTED */
 );
-const _hoisted_24 = { class: "title" };
-const _hoisted_25 = { class: "content-unit left-0" };
-const _hoisted_26 = /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_22 = { class: "title" };
+const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode(
   "span",
   null,
   " x ",
   -1
   /* HOISTED */
 );
-const _hoisted_27 = { class: "content-unit right-0" };
 const __default__ = vue.defineComponent({
   name: "DkStyleBoxInput"
 });
@@ -87,13 +84,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       width: props.modelValue.width || "",
       height: props.modelValue.height || ""
     });
-    const height = vue.ref(props.height);
-    vue.watch(
-      () => props.height,
-      () => {
-        console.log("height", props.height);
+    const box = vue.ref(null);
+    const { width } = core.useElementSize(box);
+    const height = vue.computed(() => {
+      console.log("props.height", props.height);
+      if (props.height === "auto") {
+        const h = width.value / 1.8;
+        return h > 300 ? 300 : h;
+      } else {
+        return props.height;
       }
-    );
+    });
     vue.watch(
       () => props.modelValue,
       (newVal, oldVal) => {
@@ -186,17 +187,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       stopChangeBound.value = handleMouseUp.bind(event);
       document.addEventListener("mouseup", stopChangeBound.value);
       dragging.value = true;
-      const height2 = props.height;
       const wrapperElement = document.querySelector(".wrapper");
-      const width = wrapperElement ? wrapperElement.offsetWidth : 0;
+      const width2 = wrapperElement ? wrapperElement.offsetWidth : 0;
       const multiples = {
         margin: 0.9,
         padding: 0.9 * 0.7
       };
       const { clientX, clientY } = event;
-      const setCursorAndDimensions = (cursor, left, top, width2, height3) => {
+      const setCursorAndDimensions = (cursor, left, top, width3, height2) => {
         document.body.style.cursor = cursor;
-        Object.assign(positionStyle, { left, top, width: width2, height: height3, display: "block" });
+        Object.assign(positionStyle, { left, top, width: width3, height: height2, display: "block" });
       };
       startPosition.x = clientX;
       startPosition.y = clientY;
@@ -204,16 +204,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         setCursorAndDimensions(
           "ew-resize",
           clientX + "px",
-          clientY - height2 * 0.5 * multiples[type] + "px",
+          clientY - height.value * 0.5 * multiples[type] + "px",
           "0.1px",
-          height2 * multiples[type] + "px"
+          height.value * multiples[type] + "px"
         );
       } else {
         setCursorAndDimensions(
           "ns-resize",
-          clientX - width * 0.5 * multiples[type] + "px",
+          clientX - width2 * 0.5 * multiples[type] + "px",
           clientY + "px",
-          width * multiples[type] + "px",
+          width2 * multiples[type] + "px",
           "0.1px"
         );
       }
@@ -392,9 +392,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode(
             "div",
             {
+              ref_key: "box",
+              ref: box,
               tabindex: "0",
               class: "wrapper",
-              style: vue.normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+              style: vue.normalizeStyle([{ "margin-top": "10px" }, { height: height.value + "px" }])
             },
             [
               vue.createElementVNode(
@@ -414,11 +416,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         return vue.openBlock(), vue.createElementBlock("div", { key }, [
                           vue.createElementVNode("span", {
                             title: item.title,
-                            class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`)
+                            class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                            onClick: ($event) => onDblclick(item.value, key)
                           }, [
-                            vue.createElementVNode("span", {
-                              onMouseenter: ($event) => onDblclick(item.value, key)
-                            }, vue.toDisplayString(getValue(styles[item.value])), 41, _hoisted_9)
+                            vue.createElementVNode(
+                              "span",
+                              null,
+                              vue.toDisplayString(getValue(styles[item.value])),
+                              1
+                              /* TEXT */
+                            )
                           ], 10, _hoisted_8),
                           vue.withDirectives(vue.createElementVNode("input", {
                             ref_for: true,
@@ -427,7 +434,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                             class: vue.normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                             onBlur: ($event) => onBlur(item.value)
-                          }, null, 42, _hoisted_10), [
+                          }, null, 42, _hoisted_9), [
                             [vue.vModelText, styles[item.value]]
                           ]),
                           (vue.openBlock(), vue.createElementBlock("svg", {
@@ -439,15 +446,15 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             style: vue.normalizeStyle(item.svg.style),
                             class: "esm-modal-svg",
                             innerHTML: item.svg.content
-                          }, null, 12, _hoisted_11))
+                          }, null, 12, _hoisted_10))
                         ]);
                       }),
                       128
                       /* KEYED_FRAGMENT */
                     ))
                   ]),
-                  _hoisted_12,
-                  vue.createElementVNode("div", _hoisted_13, [
+                  _hoisted_11,
+                  vue.createElementVNode("div", _hoisted_12, [
                     (vue.openBlock(), vue.createElementBlock(
                       vue.Fragment,
                       null,
@@ -458,16 +465,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           onMousemove: handleMouseMove,
                           onMousedown: ($event) => handleMouseDown("margin", item, $event),
                           onMouseup: handleMouseUp
-                        }, null, 42, _hoisted_14);
+                        }, null, 42, _hoisted_13);
                       }),
                       64
                       /* STABLE_FRAGMENT */
                     ))
                   ]),
-                  _hoisted_15,
+                  _hoisted_14,
                   vue.createCommentVNode("\u5916\u8FB9\u8DDD Margin END"),
                   vue.createCommentVNode("\u5185\u8FB9\u8DDD Padding"),
-                  vue.createElementVNode("div", _hoisted_16, [
+                  vue.createElementVNode("div", _hoisted_15, [
                     vue.createElementVNode(
                       "div",
                       {
@@ -484,12 +491,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               return vue.openBlock(), vue.createElementBlock("div", { key }, [
                                 vue.createElementVNode("span", {
                                   title: item.title,
-                                  class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`)
+                                  class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                                  onClick: ($event) => onDblclick(item.value, key + 4)
                                 }, [
-                                  vue.createElementVNode("span", {
-                                    onMouseenter: ($event) => onDblclick(item.value, key + 4)
-                                  }, vue.toDisplayString(getValue(styles[item.value])), 41, _hoisted_18)
-                                ], 10, _hoisted_17),
+                                  vue.createElementVNode(
+                                    "span",
+                                    null,
+                                    vue.toDisplayString(getValue(styles[item.value])),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ], 10, _hoisted_16),
                                 vue.withDirectives(vue.createElementVNode("input", {
                                   ref_for: true,
                                   ref_key: "inputField",
@@ -497,7 +509,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                                   class: vue.normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                                   onBlur: ($event) => onBlur(item.value)
-                                }, null, 42, _hoisted_19), [
+                                }, null, 42, _hoisted_17), [
                                   [vue.vModelText, styles[item.value]]
                                 ]),
                                 (vue.openBlock(), vue.createElementBlock("svg", {
@@ -509,14 +521,14 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   style: vue.normalizeStyle(item.svg.style),
                                   class: "esm-modal-svg",
                                   innerHTML: item.svg.content
-                                }, null, 12, _hoisted_20))
+                                }, null, 12, _hoisted_18))
                               ]);
                             }),
                             128
                             /* KEYED_FRAGMENT */
                           ))
                         ]),
-                        vue.createElementVNode("div", _hoisted_21, [
+                        vue.createElementVNode("div", _hoisted_19, [
                           (vue.openBlock(), vue.createElementBlock(
                             vue.Fragment,
                             null,
@@ -527,13 +539,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 onMousemove: handleMouseMove,
                                 onMousedown: ($event) => handleMouseDown("padding", item, $event),
                                 onMouseup: handleMouseUp
-                              }, null, 42, _hoisted_22);
+                              }, null, 42, _hoisted_20);
                             }),
                             64
                             /* STABLE_FRAGMENT */
                           ))
                         ]),
-                        _hoisted_23,
+                        _hoisted_21,
                         vue.createCommentVNode("\u5185\u8FB9\u8DDD END"),
                         vue.createElementVNode(
                           "div",
@@ -543,16 +555,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             onMouseleave: _cache[10] || (_cache[10] = ($event) => onMouseMove("widthHeight", "leave", $event))
                           },
                           [
-                            vue.createElementVNode("span", _hoisted_24, [
-                              vue.createElementVNode("span", _hoisted_25, [
+                            vue.createElementVNode("span", _hoisted_22, [
+                              vue.createElementVNode("span", {
+                                class: "content-unit left-0",
+                                onClick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
+                              }, [
                                 vue.createElementVNode(
                                   "em",
-                                  {
-                                    onMouseenter: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
-                                  },
+                                  null,
                                   vue.toDisplayString(getValue(styles["width"])),
-                                  33
-                                  /* TEXT, HYDRATE_EVENTS */
+                                  1
+                                  /* TEXT */
                                 )
                               ]),
                               vue.withDirectives(vue.createElementVNode(
@@ -570,16 +583,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               ), [
                                 [vue.vModelText, styles.width]
                               ]),
-                              _hoisted_26,
-                              vue.createElementVNode("span", _hoisted_27, [
+                              _hoisted_23,
+                              vue.createElementVNode("span", {
+                                class: "content-unit right-0",
+                                onClick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
+                              }, [
                                 vue.createElementVNode(
                                   "em",
-                                  {
-                                    onMouseenter: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
-                                  },
+                                  null,
                                   vue.toDisplayString(getValue(styles["height"])),
-                                  33
-                                  /* TEXT, HYDRATE_EVENTS */
+                                  1
+                                  /* TEXT */
                                 )
                               ]),
                               vue.withDirectives(vue.createElementVNode(