@vipl520/dk-ui 1.0.49 → 1.0.51

package/dist/index.mjs

@@ -955,7 +955,7 @@ const groupProps = {
 
 const _hoisted_1$V = { key: 1 };
 const _hoisted_2$I = { class: "collapse-title" };
-const _hoisted_3$v = { class: "_dk-group-handle" };
+const _hoisted_3$w = { class: "_dk-group-handle" };
 const __default__$N = defineComponent({
   name: "DkGroup"
 });
@@ -1259,7 +1259,7 @@ var _sfc_main$1c = /* @__PURE__ */ defineComponent({
                       onEmitEvent: (name, ...args) => emitEvent(name, args, index),
                       "onUpdate:api": ($f) => add$f(index, $f)
                     }, null, 8, ["model-value", "rule", "option", "onUpdate:modelValue", "onEmitEvent", "onUpdate:api"])),
-                    createElementVNode("div", _hoisted_3$v, [
+                    createElementVNode("div", _hoisted_3$w, [
                       createVNode(
                         _component_el_button_group,
                         null,
@@ -1426,7 +1426,7 @@ const tinyEditorProps = {
 
 const _hoisted_1$U = { key: 0 };
 const _hoisted_2$H = { key: 1 };
-const _hoisted_3$u = { class: "text-center" };
+const _hoisted_3$v = { class: "text-center" };
 const __default__$M = defineComponent({
   name: "DkTinyEditor"
 });
@@ -1559,7 +1559,7 @@ var _sfc_main$1b = /* @__PURE__ */ defineComponent({
               "z-index": 1298
             }, {
               footer: withCtx(() => [
-                createElementVNode("div", _hoisted_3$u, [
+                createElementVNode("div", _hoisted_3$v, [
                   createVNode(_component_el_button, {
                     type: "primary",
                     style: { "width": "200px" },
@@ -1765,6 +1765,7 @@ var _sfc_main$19 = /* @__PURE__ */ defineComponent({
         createVNode(_component_el_color_picker, {
           modelValue: data.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => data.value = $event),
+          teleported: false,
           "show-alpha": _ctx.showAlpha,
           "color-format": _ctx.colorFormat
         }, null, 8, ["modelValue", "show-alpha", "color-format"])
@@ -1788,7 +1789,7 @@ const hotAreaInputProps = {
 
 const _hoisted_1$S = { class: "hot-area-content" };
 const _hoisted_2$G = { class: "hot-area-draggable" };
-const _hoisted_3$t = {
+const _hoisted_3$u = {
   class: "hot-item-content",
   style: { "position": "relative", "width": "100%", "height": "100%", "background": "#0003" }
 };
@@ -1946,7 +1947,7 @@ var _sfc_main$18 = /* @__PURE__ */ defineComponent({
                     default: withCtx(() => [
                       createElementVNode(
                         "div",
-                        _hoisted_3$t,
+                        _hoisted_3$u,
                         toDisplayString(key + 1),
                         1
                         /* TEXT */
@@ -2676,7 +2677,7 @@ const _hoisted_2$D = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$s = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$t = /* @__PURE__ */ createElementVNode(
   "path",
   {
     fill: "#B0B7BD",
@@ -2813,7 +2814,7 @@ var _sfc_main$14 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("svg", _hoisted_1$O, [
         createElementVNode("g", null, [
           _hoisted_2$D,
-          _hoisted_3$s,
+          _hoisted_3$t,
           _hoisted_4$l,
           createElementVNode(
             "path",
@@ -2861,7 +2862,7 @@ const attachmentProps = {
 
 const _hoisted_1$N = { class: "dk-attachment attachment" };
 const _hoisted_2$C = { class: "attachment-header flex justify-between pt-5px pb-5px" };
-const _hoisted_3$r = { class: "header-form z" };
+const _hoisted_3$s = { class: "header-form z" };
 const _hoisted_4$k = { class: "header-button y" };
 const _hoisted_5$e = /* @__PURE__ */ createElementVNode(
   "i",
@@ -3117,7 +3118,7 @@ var _sfc_main$13 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$N, [
         createCommentVNode(" \u9876\u90E8"),
         createElementVNode("div", _hoisted_2$C, [
-          createElementVNode("div", _hoisted_3$r, [
+          createElementVNode("div", _hoisted_3$s, [
             createVNode(_component_el_input, {
               modelValue: searchFileName.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchFileName.value = $event),
@@ -3544,7 +3545,7 @@ const fileInputProps = {
 
 const _hoisted_1$L = { class: "show m-t-5px" };
 const _hoisted_2$B = { class: "image-error" };
-const _hoisted_3$q = { class: "image-slot" };
+const _hoisted_3$r = { class: "image-slot" };
 const _hoisted_4$j = { class: "no-image" };
 const __default__$C = defineComponent({
   name: "DkFileInput"
@@ -3681,7 +3682,7 @@ var _sfc_main$11 = /* @__PURE__ */ defineComponent({
                         style: { "width": "100%", "height": "100%" }
                       }, {
                         error: withCtx(() => [
-                          createElementVNode("div", _hoisted_3$q, [
+                          createElementVNode("div", _hoisted_3$r, [
                             createElementVNode("div", _hoisted_4$j, [
                               createVNode(_component_el_icon, null, {
                                 default: withCtx(() => [
@@ -3941,7 +3942,7 @@ const fileListInputProps = {
 
 const _hoisted_1$K = { class: "dk-image-list" };
 const _hoisted_2$A = ["onClick"];
-const _hoisted_3$p = { key: 0 };
+const _hoisted_3$q = { key: 0 };
 const __default__$y = defineComponent({
   name: "DkFileListInput"
 });
@@ -4051,7 +4052,7 @@ var _sfc_main$Z = /* @__PURE__ */ defineComponent({
                 128
                 /* KEYED_FRAGMENT */
               )),
-              _ctx.limit > input.value.length && !_ctx.disabled ? (openBlock(), createElementBlock("li", _hoisted_3$p, [
+              _ctx.limit > input.value.length && !_ctx.disabled ? (openBlock(), createElementBlock("li", _hoisted_3$q, [
                 createElementVNode(
                   "div",
                   {
@@ -4313,7 +4314,7 @@ const _hoisted_2$z = {
   class: "text-center",
   style: { "font-size": "12px", "color": "#999" }
 };
-const _hoisted_3$o = { class: "search-icon" };
+const _hoisted_3$p = { class: "search-icon" };
 const __default__$u = defineComponent({
   name: "DkIconContent"
 });
@@ -4527,7 +4528,7 @@ var _sfc_main$V = /* @__PURE__ */ defineComponent({
           _: 1
           /* STABLE */
         }, 8, ["modelValue"]),
-        createElementVNode("div", _hoisted_3$o, [
+        createElementVNode("div", _hoisted_3$p, [
           createVNode(_component_el_input, {
             modelValue: searchIcon.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchIcon.value = $event),
@@ -4850,6 +4851,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
   }
 };
 
@@ -4858,6 +4877,7 @@ const _hoisted_2$y = {
   key: 0,
   class: "p-5px"
 };
+const _hoisted_3$o = { key: 1 };
 const __default__$r = defineComponent({
   name: "DkStyleInput"
 });
@@ -4867,6 +4887,7 @@ var _sfc_main$S = /* @__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);
@@ -4882,7 +4903,6 @@ var _sfc_main$S = /* @__PURE__ */ defineComponent({
     const _components = ref([]);
     const init = () => {
       _components.value = props.components.filter((item) => {
-        console.log("item.name", item.name);
         return !props.hideComponents.includes(item.name);
       });
       const obj = {};
@@ -4915,9 +4935,12 @@ var _sfc_main$S = /* @__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$G, [
         !loading.value ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
-          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)
           }, {
@@ -4955,7 +4978,72 @@ var _sfc_main$S = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["modelValue"])
+          }, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
+            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/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "dk",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

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

@@ -45,6 +45,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         createVNode(_component_el_color_picker, {
           modelValue: data.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => data.value = $event),
+          teleported: false,
           "show-alpha": _ctx.showAlpha,
           "color-format": _ctx.colorFormat
         }, null, 8, ["modelValue", "show-alpha", "color-format"])

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

@@ -1 +1 @@
-{"version":3,"file":"color-input.vue2.mjs","sources":["../../../src/color-input/src/color-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkColorInput',\n});\n</script>\n<template>\n  <div style=\"display: flex\" class=\"dk-color-input\">\n    <el-input\n      v-model=\"data\"\n      :placeholder=\"placeholder\"\n      clearable\n      style=\"width: 100%\"\n    />\n    <el-color-picker\n      v-model=\"data\"\n      :show-alpha=\"showAlpha\"\n      :color-format=\"colorFormat\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\nimport { createNamespace } from '@vipl520/utils'\nimport { colorInputProps } from './props'\n\nconst [_, bem] = createNamespace('color-input')\n\n\n\nconst props = defineProps(colorInputProps)\n\nconst data = ref(props.modelValue || '')\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    data.value = val\n  }\n)\nwatch(\n  () => data.value,\n  (val) => {\n    emit('change', val)\n    emit('update:modelValue', val)\n    emit('input', val)\n  }\n)\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,eAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAuBD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAI,gBAAgB,aAAa,CAAA,CAAA;AAM9C,IAAA,MAAM,IAAO,GAAA,GAAA,CAAI,KAAM,CAAA,UAAA,IAAc,EAAE,CAAA,CAAA;AAGvC,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,IAAA,CAAK,KAAQ,GAAA,GAAA,CAAA;AAAA,OACf;AAAA,KACF,CAAA;AACA,IAAA,KAAA;AAAA,MACE,MAAM,IAAK,CAAA,KAAA;AAAA,MACX,CAAC,GAAQ,KAAA;AACP,QAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAClB,QAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,QAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"color-input.vue2.mjs","sources":["../../../src/color-input/src/color-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkColorInput',\n});\n</script>\n<template>\n  <div style=\"display: flex\" class=\"dk-color-input\">\n    <el-input v-model=\"data\" :placeholder=\"placeholder\" clearable style=\"width: 100%\" />\n    <el-color-picker v-model=\"data\" :teleported=\"false\" :show-alpha=\"showAlpha\" :color-format=\"colorFormat\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\nimport { createNamespace } from '@vipl520/utils'\nimport { colorInputProps } from './props'\n\nconst [_, bem] = createNamespace('color-input')\n\n\n\nconst props = defineProps(colorInputProps)\n\nconst data = ref(props.modelValue || '')\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    data.value = val\n  }\n)\nwatch(\n  () => data.value,\n  (val) => {\n    emit('change', val)\n    emit('update:modelValue', val)\n    emit('input', val)\n  }\n)\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,eAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAcD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAI,gBAAgB,aAAa,CAAA,CAAA;AAM9C,IAAA,MAAM,IAAO,GAAA,GAAA,CAAI,KAAM,CAAA,UAAA,IAAc,EAAE,CAAA,CAAA;AAGvC,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,IAAA,CAAK,KAAQ,GAAA,GAAA,CAAA;AAAA,OACf;AAAA,KACF,CAAA;AACA,IAAA,KAAA;AAAA,MACE,MAAM,IAAK,CAAA,KAAA;AAAA,MACX,CAAC,GAAQ,KAAA;AACP,QAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAClB,QAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,QAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/style-box-input/style/index.scss

@@ -204,7 +204,7 @@
               cursor: pointer;
               display: inline-block;
               width: 40%;
-              em{
+              em {
                 font-style: normal;
                 font-size: 12px;
               }

package/es/style-input/index.d.ts

@@ -11,6 +11,22 @@ export declare const StyleInput: import("@vipl520/utils").WithInstall<import("vu
         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("./src/default").StyleInputConfig;
@@ -24,12 +40,31 @@ export declare const StyleInput: import("@vipl520/utils").WithInstall<import("vu
         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("./src/default").StyleInputConfig;
     hideComponents: string[];
+    isDrawer: boolean;
+    drawerProps: Record<string, any>;
+    drawerText: string;
 }, {}>>;
 export default StyleInput;
 export * from './src/props';

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

@@ -19,5 +19,21 @@ export declare const styleInputProps: {
         default: () => {};
         type: ObjectConstructor;
     };
+    isDrawer: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    drawerProps: {
+        default: () => {
+            title: string;
+            direction: string;
+            size: string;
+        };
+        type: ObjectConstructor;
+    };
+    drawerText: {
+        default: string;
+        type: StringConstructor;
+    };
 };
 export type StyleInputProps = ExtractPropTypes<typeof styleInputProps>;

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);
@@ -30,7 +32,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const _components = ref([]);
     const init = () => {
       _components.value = props.components.filter((item) => {
-        console.log("item.name", item.name);
         return !props.hideComponents.includes(item.name);
       });
       const obj = {};
@@ -63,9 +64,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 +107,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    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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}