@vipl520/dk-ui 1.0.47 → 1.0.49

package/dist/index.mjs

@@ -4828,7 +4828,7 @@ const defaultConfig = [
 
 const styleInputProps = {
   /**
-   * 类型定义
+   * 引入组件
    */
   components: {
     default: () => {
@@ -4836,6 +4836,15 @@ const styleInputProps = {
     },
     type: Array
   },
+  /**
+   * 需要隐藏组件
+   */
+  hideComponents: {
+    default: () => {
+      return [];
+    },
+    type: Array
+  },
   modelValue: {
     default: () => {
       return {};
@@ -4870,10 +4879,14 @@ var _sfc_main$S = /* @__PURE__ */ defineComponent({
       });
       emit("update:modelValue", obj);
     };
+    const _components = ref([]);
     const init = () => {
-      const components = props.components;
+      _components.value = props.components.filter((item) => {
+        console.log("item.name", item.name);
+        return !props.hideComponents.includes(item.name);
+      });
       const obj = {};
-      components.forEach((item) => {
+      _components.value.forEach((item) => {
         const params = item.params;
         const paramsObj = {};
         Object.keys(params).forEach((key) => {
@@ -4912,7 +4925,7 @@ var _sfc_main$S = /* @__PURE__ */ defineComponent({
               (openBlock(true), createElementBlock(
                 Fragment,
                 null,
-                renderList(props.components, (item, key) => {
+                renderList(_components.value, (item, key) => {
                   return openBlock(), createBlock(_component_el_collapse_item, {
                     key,
                     title: "",
@@ -5340,8 +5353,8 @@ const styleBoxInputProps = {
     default: () => ({})
   },
   height: {
-    type: Number,
-    default: 180
+    type: [Number, String],
+    default: "auto"
   },
   help: {
     type: String,
@@ -5465,7 +5478,7 @@ const _hoisted_4$i = { class: "float-right cursor-pointer" };
 const _hoisted_5$d = { class: "name-header-operations" };
 const _hoisted_6$b = { class: "name-header-operations" };
 const _hoisted_7$b = { class: "name-header-operations" };
-const _hoisted_8$9 = ["title", "onDblclick"];
+const _hoisted_8$9 = ["title", "onClick"];
 const _hoisted_9$7 = ["onUpdate:modelValue", "onBlur"];
 const _hoisted_10$5 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
 const _hoisted_11$5 = /* @__PURE__ */ createElementVNode(
@@ -5485,7 +5498,7 @@ const _hoisted_14$3 = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_15$2 = { class: "thumnail border" };
-const _hoisted_16$2 = ["title", "onDblclick"];
+const _hoisted_16$2 = ["title", "onClick"];
 const _hoisted_17$1 = ["onUpdate:modelValue", "onBlur"];
 const _hoisted_18 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
 const _hoisted_19 = { class: "anchor-wrapper" };
@@ -5534,13 +5547,17 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
       width: props.modelValue.width || "",
       height: props.modelValue.height || ""
     });
-    ref(props.height);
-    watch(
-      () => props.height,
-      () => {
-        console.log("height", props.height);
+    const box = ref(null);
+    const { width } = useElementSize(box);
+    const height = 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;
       }
-    );
+    });
     watch(
       () => props.modelValue,
       (newVal, oldVal) => {
@@ -5633,17 +5650,16 @@ var _sfc_main$Q = /* @__PURE__ */ 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;
@@ -5651,16 +5667,16 @@ var _sfc_main$Q = /* @__PURE__ */ 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"
         );
       }
@@ -5839,9 +5855,11 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
           createElementVNode(
             "div",
             {
+              ref_key: "box",
+              ref: box,
               tabindex: "0",
               class: "wrapper",
-              style: normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+              style: normalizeStyle([{ "margin-top": "10px" }, { height: height.value + "px" }])
             },
             [
               createElementVNode(
@@ -5862,8 +5880,16 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
                           createElementVNode("span", {
                             title: item.title,
                             class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                            onDblclick: ($event) => onDblclick(item.value, key)
-                          }, toDisplayString(getValue(styles[item.value])), 43, _hoisted_8$9),
+                            onClick: ($event) => onDblclick(item.value, key)
+                          }, [
+                            createElementVNode(
+                              "span",
+                              null,
+                              toDisplayString(getValue(styles[item.value])),
+                              1
+                              /* TEXT */
+                            )
+                          ], 10, _hoisted_8$9),
                           withDirectives(createElementVNode("input", {
                             ref_for: true,
                             ref_key: "inputField",
@@ -5929,8 +5955,16 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
                                 createElementVNode("span", {
                                   title: item.title,
                                   class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                                  onDblclick: ($event) => onDblclick(item.value, key + 4)
-                                }, toDisplayString(getValue(styles[item.value])), 43, _hoisted_16$2),
+                                  onClick: ($event) => onDblclick(item.value, key + 4)
+                                }, [
+                                  createElementVNode(
+                                    "span",
+                                    null,
+                                    toDisplayString(getValue(styles[item.value])),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ], 10, _hoisted_16$2),
                                 withDirectives(createElementVNode("input", {
                                   ref_for: true,
                                   ref_key: "inputField",
@@ -5985,16 +6019,18 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
                           },
                           [
                             createElementVNode("span", _hoisted_22, [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: "content-unit left-0",
-                                  onDblclick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
-                                },
-                                toDisplayString(getValue(styles["width"])),
-                                33
-                                /* TEXT, HYDRATE_EVENTS */
-                              ),
+                              createElementVNode("span", {
+                                class: "content-unit left-0",
+                                onClick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
+                              }, [
+                                createElementVNode(
+                                  "em",
+                                  null,
+                                  toDisplayString(getValue(styles["width"])),
+                                  1
+                                  /* TEXT */
+                                )
+                              ]),
                               withDirectives(createElementVNode(
                                 "input",
                                 {
@@ -6011,16 +6047,18 @@ var _sfc_main$Q = /* @__PURE__ */ defineComponent({
                                 [vModelText, styles.width]
                               ]),
                               _hoisted_23,
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: "content-unit right-0",
-                                  onDblclick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
-                                },
-                                toDisplayString(getValue(styles["height"])),
-                                33
-                                /* TEXT, HYDRATE_EVENTS */
-                              ),
+                              createElementVNode("span", {
+                                class: "content-unit right-0",
+                                onClick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
+                              }, [
+                                createElementVNode(
+                                  "em",
+                                  null,
+                                  toDisplayString(getValue(styles["height"])),
+                                  1
+                                  /* TEXT */
+                                )
+                              ]),
                               withDirectives(createElementVNode(
                                 "input",
                                 {

package/dist/web-types.json

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

package/es/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/es/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/es/style-box-input/src/props.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","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.mjs","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/es/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/es/style-box-input/src/style-box-input.vue2.mjs

@@ -1,7 +1,8 @@
-import { createElementVNode, defineComponent, reactive, ref, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeStyle, createTextVNode, createVNode, withCtx, normalizeClass, createCommentVNode, Fragment, renderList, unref, toDisplayString, withDirectives, vModelText } from 'vue';
+import { createElementVNode, defineComponent, reactive, ref, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeStyle, createTextVNode, createVNode, withCtx, normalizeClass, createCommentVNode, Fragment, renderList, unref, toDisplayString, withDirectives, vModelText } from 'vue';
 import { styleBoxInputProps } from './props.mjs';
 import { margins, paddings } from './html.mjs';
 import { upper } from '@vipl520/utils';
+import { useElementSize } from '@vueuse/core';
 
 const _hoisted_1 = { class: "dk-style-box-input" };
 const _hoisted_2 = { class: "header" };
@@ -10,7 +11,7 @@ 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", "onDblclick"];
+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__ */ createElementVNode(
@@ -30,7 +31,7 @@ const _hoisted_14 = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_15 = { class: "thumnail border" };
-const _hoisted_16 = ["title", "onDblclick"];
+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" };
@@ -79,13 +80,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       width: props.modelValue.width || "",
       height: props.modelValue.height || ""
     });
-    const height = ref(props.height);
-    watch(
-      () => props.height,
-      () => {
-        console.log("height", props.height);
+    const box = ref(null);
+    const { width } = useElementSize(box);
+    const height = 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;
       }
-    );
+    });
     watch(
       () => props.modelValue,
       (newVal, oldVal) => {
@@ -178,17 +183,16 @@ var _sfc_main = /* @__PURE__ */ 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;
@@ -196,16 +200,16 @@ var _sfc_main = /* @__PURE__ */ 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"
         );
       }
@@ -384,9 +388,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode(
             "div",
             {
+              ref_key: "box",
+              ref: box,
               tabindex: "0",
               class: "wrapper",
-              style: normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+              style: normalizeStyle([{ "margin-top": "10px" }, { height: height.value + "px" }])
             },
             [
               createElementVNode(
@@ -407,8 +413,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("span", {
                             title: item.title,
                             class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                            onDblclick: ($event) => onDblclick(item.value, key)
-                          }, toDisplayString(getValue(styles[item.value])), 43, _hoisted_8),
+                            onClick: ($event) => onDblclick(item.value, key)
+                          }, [
+                            createElementVNode(
+                              "span",
+                              null,
+                              toDisplayString(getValue(styles[item.value])),
+                              1
+                              /* TEXT */
+                            )
+                          ], 10, _hoisted_8),
                           withDirectives(createElementVNode("input", {
                             ref_for: true,
                             ref_key: "inputField",
@@ -474,8 +488,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                 createElementVNode("span", {
                                   title: item.title,
                                   class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                                  onDblclick: ($event) => onDblclick(item.value, key + 4)
-                                }, toDisplayString(getValue(styles[item.value])), 43, _hoisted_16),
+                                  onClick: ($event) => onDblclick(item.value, key + 4)
+                                }, [
+                                  createElementVNode(
+                                    "span",
+                                    null,
+                                    toDisplayString(getValue(styles[item.value])),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ], 10, _hoisted_16),
                                 withDirectives(createElementVNode("input", {
                                   ref_for: true,
                                   ref_key: "inputField",
@@ -530,16 +552,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                           },
                           [
                             createElementVNode("span", _hoisted_22, [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: "content-unit left-0",
-                                  onDblclick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
-                                },
-                                toDisplayString(getValue(styles["width"])),
-                                33
-                                /* TEXT, HYDRATE_EVENTS */
-                              ),
+                              createElementVNode("span", {
+                                class: "content-unit left-0",
+                                onClick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
+                              }, [
+                                createElementVNode(
+                                  "em",
+                                  null,
+                                  toDisplayString(getValue(styles["width"])),
+                                  1
+                                  /* TEXT */
+                                )
+                              ]),
                               withDirectives(createElementVNode(
                                 "input",
                                 {
@@ -556,16 +580,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                 [vModelText, styles.width]
                               ]),
                               _hoisted_23,
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: "content-unit right-0",
-                                  onDblclick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
-                                },
-                                toDisplayString(getValue(styles["height"])),
-                                33
-                                /* TEXT, HYDRATE_EVENTS */
-                              ),
+                              createElementVNode("span", {
+                                class: "content-unit right-0",
+                                onClick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
+                              }, [
+                                createElementVNode(
+                                  "em",
+                                  null,
+                                  toDisplayString(getValue(styles["height"])),
+                                  1
+                                  /* TEXT */
+                                )
+                              ]),
                               withDirectives(createElementVNode(
                                 "input",
                                 {