@vipl520/dk-ui 1.0.52 → 1.0.54

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

@@ -1,4 +1,4 @@
-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 { createElementVNode, defineComponent, reactive, ref, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeStyle, createTextVNode, createVNode, withCtx, createCommentVNode, normalizeClass, Fragment, renderList, unref, toDisplayString, withDirectives, vModelText } from 'vue';
 import { styleBoxInputProps } from './props.mjs';
 import { margins, paddings } from './html.mjs';
 import { upper } from '@vipl520/utils';
@@ -7,44 +7,42 @@ import { useElementSize } from '@vueuse/core';
 const _hoisted_1 = { class: "dk-style-box-input" };
 const _hoisted_2 = { class: "header" };
 const _hoisted_3 = { class: "items-center" };
-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", "onClick"];
-const _hoisted_9 = ["onUpdate:modelValue", "onBlur"];
-const _hoisted_10 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
-const _hoisted_11 = /* @__PURE__ */ createElementVNode(
+const _hoisted_4 = ["title", "onDblclick"];
+const _hoisted_5 = ["onUpdate:modelValue", "onBlur"];
+const _hoisted_6 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
+const _hoisted_7 = /* @__PURE__ */ createElementVNode(
   "div",
   { style: { "position": "absolute", "display": "none", "width": "100%", "height": "100%" } },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_12 = { class: "anchor-wrapper" };
-const _hoisted_13 = ["onMousedown"];
-const _hoisted_14 = /* @__PURE__ */ createElementVNode(
+const _hoisted_8 = { class: "anchor-wrapper" };
+const _hoisted_9 = ["onMousedown"];
+const _hoisted_10 = /* @__PURE__ */ createElementVNode(
   "span",
   { class: "title" },
   " \u5916\u8FB9\u8DDD ",
   -1
   /* HOISTED */
 );
-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__ */ createElementVNode(
+const _hoisted_11 = { class: "tools" };
+const _hoisted_12 = { class: "thumnail border" };
+const _hoisted_13 = ["title", "onDblclick"];
+const _hoisted_14 = ["onUpdate:modelValue", "onBlur"];
+const _hoisted_15 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
+const _hoisted_16 = { class: "anchor-wrapper" };
+const _hoisted_17 = ["onMousedown"];
+const _hoisted_18 = /* @__PURE__ */ createElementVNode(
   "span",
   { class: "title" },
   " \u5185\u8FB9\u8DDD ",
   -1
   /* HOISTED */
 );
-const _hoisted_22 = { class: "title" };
-const _hoisted_23 = /* @__PURE__ */ createElementVNode(
+const _hoisted_19 = { class: "tools" };
+const _hoisted_20 = { class: "title" };
+const _hoisted_21 = /* @__PURE__ */ createElementVNode(
   "span",
   null,
   " x ",
@@ -82,8 +80,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const box = ref(null);
     const { width } = useElementSize(box);
+    const bind = reactive({
+      padding: false,
+      margin: false,
+      size: false
+    });
     const height = computed(() => {
-      console.log("props.height", props.height);
       if (props.height === "auto") {
         const h = width.value / 1.8;
         return h > 300 ? 300 : h;
@@ -168,6 +170,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           difference = -difference;
         }
         styles[value] = (parseInt(styles[value]) || 0) + difference + "px";
+        if (bind[type]) {
+          styles[type + "Top"] = styles[value];
+          styles[type + "Bottom"] = styles[value];
+          styles[type + "Left"] = styles[value];
+          styles[type + "Right"] = styles[value];
+        }
         startPosition[axis] = event[clientAxis];
       };
       if (p === "left" || p === "right") {
@@ -274,6 +282,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           styles[value] = "";
         } else {
           styles[value] = number + "px";
+          if (value.indexOf("padding") == 0 && bind.padding) {
+            styles.paddingTop = styles[value];
+            styles.paddingRight = styles[value];
+            styles.paddingBottom = styles[value];
+            styles.paddingLeft = styles[value];
+          }
+          if (value.indexOf("margin") == 0 && bind.padding) {
+            styles.marginTop = styles[value];
+            styles.marginRight = styles[value];
+            styles.marginBottom = styles[value];
+            styles.marginLeft = styles[value];
+          }
         }
       }
     };
@@ -293,6 +313,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         styles.paddingBottom = "";
       }
     };
+    const onBind = (type) => {
+      bind[type] = !bind[type];
+    };
     return (_ctx, _cache) => {
       const _component_dk_icon = resolveComponent("dk-icon");
       const _component_el_popover = resolveComponent("el-popover");
@@ -329,62 +352,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               /* STABLE */
             }, 8, ["content"])
           ]),
-          createElementVNode("div", _hoisted_4, [
-            createElementVNode("div", _hoisted_5, [
-              createVNode(_component_el_tooltip, {
-                class: "box-item",
-                effect: "dark",
-                content: "\u91CD\u7F6E\u9AD8\u5BBD",
-                placement: "top-start"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_dk_icon, {
-                    icon: "Refresh",
-                    color: "var(--el-color-primary)",
-                    onClick: _cache[0] || (_cache[0] = ($event) => onRefresh("widthHeight"))
-                  })
-                ]),
-                _: 1
-                /* STABLE */
-              })
-            ]),
-            createElementVNode("div", _hoisted_6, [
-              createVNode(_component_el_tooltip, {
-                class: "box-item",
-                effect: "dark",
-                content: "\u91CD\u7F6E\u5185\u8FB9\u8DDD",
-                placement: "top-start"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_dk_icon, {
-                    icon: "Refresh",
-                    color: "var(--el-color-success)",
-                    onClick: _cache[1] || (_cache[1] = ($event) => onRefresh("padding"))
-                  })
-                ]),
-                _: 1
-                /* STABLE */
-              })
-            ]),
-            createElementVNode("div", _hoisted_7, [
-              createVNode(_component_el_tooltip, {
-                class: "box-item",
-                effect: "dark",
-                content: "\u91CD\u7F6E\u5916\u8FB9\u8DDD",
-                placement: "top-start"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_dk_icon, {
-                    icon: "Refresh",
-                    color: "var(--el-color-warning)",
-                    onClick: _cache[2] || (_cache[2] = ($event) => onRefresh("margin"))
-                  })
-                ]),
-                _: 1
-                /* STABLE */
-              })
-            ])
-          ]),
+          createCommentVNode('      <div class="float-right cursor-pointer">'),
+          createCommentVNode('        <div class="name-header-operations">'),
+          createCommentVNode('          <el-tooltip class="box-item" effect="dark" content="\u91CD\u7F6E\u9AD8\u5BBD" placement="top-start">'),
+          createCommentVNode(`            <dk-icon icon="Refresh" color="#303133" @click="onRefresh('widthHeight')"></dk-icon>`),
+          createCommentVNode("          </el-tooltip>"),
+          createCommentVNode("        </div>"),
+          createCommentVNode('        <div class="name-header-operations">'),
+          createCommentVNode('          <el-tooltip class="box-item" effect="dark" content="\u91CD\u7F6E\u5185\u8FB9\u8DDD" placement="top-start">'),
+          createCommentVNode(`            <dk-icon icon="Refresh" color="var(&#45;&#45;el-color-success)" @click="onRefresh('padding')"></dk-icon>`),
+          createCommentVNode("          </el-tooltip>"),
+          createCommentVNode("        </div>"),
+          createCommentVNode('        <div class="name-header-operations">'),
+          createCommentVNode('          <el-tooltip class="box-item" effect="dark" content="\u91CD\u7F6E\u5916\u8FB9\u8DDD" placement="top-start">'),
+          createCommentVNode(`            <dk-icon icon="Refresh" color="var(&#45;&#45;el-color-warning)" @click="onRefresh('margin')"></dk-icon>`),
+          createCommentVNode("          </el-tooltip>"),
+          createCommentVNode("        </div>"),
+          createCommentVNode("      </div>"),
           createElementVNode(
             "div",
             {
@@ -399,8 +383,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 "div",
                 {
                   class: normalizeClass(["thumnail margin", moves.margin ? "thumnail-heightlight" : ""]),
-                  onMousemove: _cache[13] || (_cache[13] = ($event) => onMouseMove("margin", "move", $event)),
-                  onMouseleave: _cache[14] || (_cache[14] = ($event) => onMouseMove("margin", "leave", $event))
+                  onMousemove: _cache[14] || (_cache[14] = ($event) => onMouseMove("margin", "move", $event)),
+                  onMouseleave: _cache[15] || (_cache[15] = ($event) => onMouseMove("margin", "leave", $event))
                 },
                 [
                   createCommentVNode("\u5916\u8FB9\u8DDD Margin"),
@@ -413,7 +397,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("span", {
                             title: item.title,
                             class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                            onClick: ($event) => onDblclick(item.value, key)
+                            onDblclick: ($event) => onDblclick(item.value, key)
                           }, [
                             createElementVNode(
                               "span",
@@ -422,7 +406,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                               1
                               /* TEXT */
                             )
-                          ], 10, _hoisted_8),
+                          ], 42, _hoisted_4),
                           withDirectives(createElementVNode("input", {
                             ref_for: true,
                             ref_key: "inputField",
@@ -430,7 +414,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                             "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                             class: normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                             onBlur: ($event) => onBlur(item.value)
-                          }, null, 42, _hoisted_9), [
+                          }, null, 42, _hoisted_5), [
                             [vModelText, styles[item.value]]
                           ]),
                           (openBlock(), createElementBlock("svg", {
@@ -442,15 +426,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                             style: normalizeStyle(item.svg.style),
                             class: "esm-modal-svg",
                             innerHTML: item.svg.content
-                          }, null, 12, _hoisted_10))
+                          }, null, 12, _hoisted_6))
                         ]);
                       }),
                       128
                       /* KEYED_FRAGMENT */
                     ))
                   ]),
-                  _hoisted_11,
-                  createElementVNode("div", _hoisted_12, [
+                  _hoisted_7,
+                  createElementVNode("div", _hoisted_8, [
                     (openBlock(), createElementBlock(
                       Fragment,
                       null,
@@ -461,22 +445,59 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                           onMousemove: handleMouseMove,
                           onMousedown: ($event) => handleMouseDown("margin", item, $event),
                           onMouseup: handleMouseUp
-                        }, null, 42, _hoisted_13);
+                        }, null, 42, _hoisted_9);
                       }),
                       64
                       /* STABLE_FRAGMENT */
                     ))
                   ]),
-                  _hoisted_14,
+                  _hoisted_10,
+                  createElementVNode("div", _hoisted_11, [
+                    createVNode(_component_el_tooltip, {
+                      "show-after": 1e3,
+                      class: "box-item",
+                      effect: "dark",
+                      content: "\u8054\u52A8",
+                      placement: "top-start"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_dk_icon, {
+                          style: { "margin-right": "5px" },
+                          icon: "Connection",
+                          color: bind.margin ? "#f00" : "#303133",
+                          onClick: _cache[0] || (_cache[0] = ($event) => onBind("margin"))
+                        }, null, 8, ["color"])
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }),
+                    createVNode(_component_el_tooltip, {
+                      "show-after": 1e3,
+                      class: "box-item",
+                      effect: "dark",
+                      content: "\u91CD\u7F6E\u5916\u8FB9\u8DDD",
+                      placement: "top-start"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_dk_icon, {
+                          icon: "Refresh",
+                          color: "#303133",
+                          onClick: _cache[1] || (_cache[1] = ($event) => onRefresh("margin"))
+                        })
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ]),
                   createCommentVNode("\u5916\u8FB9\u8DDD Margin END"),
                   createCommentVNode("\u5185\u8FB9\u8DDD Padding"),
-                  createElementVNode("div", _hoisted_15, [
+                  createElementVNode("div", _hoisted_12, [
                     createElementVNode(
                       "div",
                       {
                         class: normalizeClass(["thumnail padding", moves.padding ? "thumnail-heightlight" : ""]),
-                        onMousemove: _cache[11] || (_cache[11] = ($event) => onMouseMove("padding", "move", $event)),
-                        onMouseleave: _cache[12] || (_cache[12] = ($event) => onMouseMove("padding", "leave", $event))
+                        onMousemove: _cache[12] || (_cache[12] = ($event) => onMouseMove("padding", "move", $event)),
+                        onMouseleave: _cache[13] || (_cache[13] = ($event) => onMouseMove("padding", "leave", $event))
                       },
                       [
                         createElementVNode("div", null, [
@@ -488,7 +509,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                 createElementVNode("span", {
                                   title: item.title,
                                   class: normalizeClass(`anchor-tip-${item.position} value-indicator`),
-                                  onClick: ($event) => onDblclick(item.value, key + 4)
+                                  onDblclick: ($event) => onDblclick(item.value, key + 4)
                                 }, [
                                   createElementVNode(
                                     "span",
@@ -497,7 +518,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                     1
                                     /* TEXT */
                                   )
-                                ], 10, _hoisted_16),
+                                ], 42, _hoisted_13),
                                 withDirectives(createElementVNode("input", {
                                   ref_for: true,
                                   ref_key: "inputField",
@@ -505,7 +526,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                                   class: normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                                   onBlur: ($event) => onBlur(item.value)
-                                }, null, 42, _hoisted_17), [
+                                }, null, 42, _hoisted_14), [
                                   [vModelText, styles[item.value]]
                                 ]),
                                 (openBlock(), createElementBlock("svg", {
@@ -517,14 +538,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   style: normalizeStyle(item.svg.style),
                                   class: "esm-modal-svg",
                                   innerHTML: item.svg.content
-                                }, null, 12, _hoisted_18))
+                                }, null, 12, _hoisted_15))
                               ]);
                             }),
                             128
                             /* KEYED_FRAGMENT */
                           ))
                         ]),
-                        createElementVNode("div", _hoisted_19, [
+                        createElementVNode("div", _hoisted_16, [
                           (openBlock(), createElementBlock(
                             Fragment,
                             null,
@@ -535,43 +556,86 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                 onMousemove: handleMouseMove,
                                 onMousedown: ($event) => handleMouseDown("padding", item, $event),
                                 onMouseup: handleMouseUp
-                              }, null, 42, _hoisted_20);
+                              }, null, 42, _hoisted_17);
                             }),
                             64
                             /* STABLE_FRAGMENT */
                           ))
                         ]),
-                        _hoisted_21,
+                        _hoisted_18,
+                        createElementVNode("div", _hoisted_19, [
+                          createVNode(_component_el_tooltip, {
+                            "show-after": 1e3,
+                            class: "box-item",
+                            effect: "dark",
+                            content: "\u8054\u52A8",
+                            placement: "top-start"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_dk_icon, {
+                                style: { "margin-right": "5px" },
+                                icon: "Connection",
+                                color: bind.padding ? "#f00" : "#303133",
+                                onClick: _cache[2] || (_cache[2] = ($event) => onBind("padding"))
+                              }, null, 8, ["color"])
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          }),
+                          createVNode(_component_el_tooltip, {
+                            "show-after": 1e3,
+                            class: "box-item",
+                            effect: "dark",
+                            content: "\u91CD\u7F6E\u5185\u8FB9\u8DDD",
+                            placement: "top-start"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_dk_icon, {
+                                icon: "Refresh",
+                                color: "#303133",
+                                onClick: _cache[3] || (_cache[3] = ($event) => onRefresh("padding"))
+                              })
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })
+                        ]),
                         createCommentVNode("\u5185\u8FB9\u8DDD END"),
                         createElementVNode(
                           "div",
                           {
                             class: normalizeClass(["thumnail width-height", moves.widthHeight ? "thumnail-heightlight" : ""]),
-                            onMousemove: _cache[9] || (_cache[9] = ($event) => onMouseMove("widthHeight", "move", $event)),
-                            onMouseleave: _cache[10] || (_cache[10] = ($event) => onMouseMove("widthHeight", "leave", $event))
+                            onMousemove: _cache[10] || (_cache[10] = ($event) => onMouseMove("widthHeight", "move", $event)),
+                            onMouseleave: _cache[11] || (_cache[11] = ($event) => onMouseMove("widthHeight", "leave", $event))
                           },
                           [
-                            createElementVNode("span", _hoisted_22, [
-                              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 */
-                                )
-                              ]),
+                            createElementVNode("span", _hoisted_20, [
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: "content-unit left-0",
+                                  onDblclick: _cache[4] || (_cache[4] = ($event) => onDblclick("width", 9))
+                                },
+                                [
+                                  createElementVNode(
+                                    "em",
+                                    null,
+                                    toDisplayString(getValue(styles["width"])),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ],
+                                32
+                                /* HYDRATE_EVENTS */
+                              ),
                               withDirectives(createElementVNode(
                                 "input",
                                 {
                                   ref_key: "inputWidth",
                                   ref: inputWidth,
-                                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => styles.width = $event),
+                                  "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => styles.width = $event),
                                   class: normalizeClass(["input-box absolute left-5% top-10px", showStyles["width"] ? " show" : ""]),
-                                  onBlur: _cache[5] || (_cache[5] = ($event) => onBlur("width"))
+                                  onBlur: _cache[6] || (_cache[6] = ($event) => onBlur("width"))
                                 },
                                 null,
                                 34
@@ -579,27 +643,33 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                               ), [
                                 [vModelText, styles.width]
                               ]),
-                              _hoisted_23,
-                              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 */
-                                )
-                              ]),
+                              _hoisted_21,
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: "content-unit right-0",
+                                  onDblclick: _cache[7] || (_cache[7] = ($event) => onDblclick("height", 9))
+                                },
+                                [
+                                  createElementVNode(
+                                    "em",
+                                    null,
+                                    toDisplayString(getValue(styles["height"])),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ],
+                                32
+                                /* HYDRATE_EVENTS */
+                              ),
                               withDirectives(createElementVNode(
                                 "input",
                                 {
                                   ref_key: "inputHeight",
                                   ref: inputHeight,
-                                  "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => styles.height = $event),
+                                  "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => styles.height = $event),
                                   class: normalizeClass(["input-box absolute right-5% top-10px", showStyles["height"] ? " show" : ""]),
-                                  onBlur: _cache[8] || (_cache[8] = ($event) => onBlur("height"))
+                                  onBlur: _cache[9] || (_cache[9] = ($event) => onBlur("height"))
                                 },
                                 null,
                                 34