@vipl520/dk-ui 1.0.48 → 1.0.50

package/dist/index.js

@@ -967,7 +967,7 @@
 
   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 = vue.defineComponent({
     name: "DkGroup"
   });
@@ -1271,7 +1271,7 @@
                         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"])),
-                      vue.createElementVNode("div", _hoisted_3$v, [
+                      vue.createElementVNode("div", _hoisted_3$w, [
                         vue.createVNode(
                           _component_el_button_group,
                           null,
@@ -1438,7 +1438,7 @@
 
   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 = vue.defineComponent({
     name: "DkTinyEditor"
   });
@@ -1571,7 +1571,7 @@
                 "z-index": 1298
               }, {
                 footer: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_3$u, [
+                  vue.createElementVNode("div", _hoisted_3$v, [
                     vue.createVNode(_component_el_button, {
                       type: "primary",
                       style: { "width": "200px" },
@@ -1800,7 +1800,7 @@
 
   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" }
   };
@@ -1958,7 +1958,7 @@
                       default: vue.withCtx(() => [
                         vue.createElementVNode(
                           "div",
-                          _hoisted_3$t,
+                          _hoisted_3$u,
                           vue.toDisplayString(key + 1),
                           1
                           /* TEXT */
@@ -2688,7 +2688,7 @@
     -1
     /* HOISTED */
   );
-  const _hoisted_3$s = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$t = /* @__PURE__ */ vue.createElementVNode(
     "path",
     {
       fill: "#B0B7BD",
@@ -2825,7 +2825,7 @@
         return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$O, [
           vue.createElementVNode("g", null, [
             _hoisted_2$D,
-            _hoisted_3$s,
+            _hoisted_3$t,
             _hoisted_4$l,
             vue.createElementVNode(
               "path",
@@ -2873,7 +2873,7 @@
 
   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__ */ vue.createElementVNode(
     "i",
@@ -2918,7 +2918,7 @@
   const _hoisted_21$1 = { class: "file-name over" };
   const _hoisted_22$1 = { class: "right" };
   const _hoisted_23$1 = { class: "block p-10px" };
-  const _hoisted_24$1 = {
+  const _hoisted_24 = {
     key: 1,
     style: { "display": "flex", "align-items": "center", "justify-content": "center", "height": "340px" }
   };
@@ -3129,7 +3129,7 @@
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
           vue.createCommentVNode(" \u9876\u90E8"),
           vue.createElementVNode("div", _hoisted_2$C, [
-            vue.createElementVNode("div", _hoisted_3$r, [
+            vue.createElementVNode("div", _hoisted_3$s, [
               vue.createVNode(_component_el_input, {
                 modelValue: searchFileName.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchFileName.value = $event),
@@ -3418,7 +3418,7 @@
                 ])
               ])), [
                 [_directive_loading, loading.value]
-              ]) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_24$1, [
+              ]) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, [
                 vue.createVNode(_component_el_empty, { description: "\u6682\u65E0\u6570\u636E" })
               ])),
               (vue.openBlock(), vue.createBlock(_component_dk_form, {
@@ -3556,7 +3556,7 @@
 
   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 = vue.defineComponent({
     name: "DkFileInput"
@@ -3693,7 +3693,7 @@
                           style: { "width": "100%", "height": "100%" }
                         }, {
                           error: vue.withCtx(() => [
-                            vue.createElementVNode("div", _hoisted_3$q, [
+                            vue.createElementVNode("div", _hoisted_3$r, [
                               vue.createElementVNode("div", _hoisted_4$j, [
                                 vue.createVNode(_component_el_icon, null, {
                                   default: vue.withCtx(() => [
@@ -3953,7 +3953,7 @@
 
   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 = vue.defineComponent({
     name: "DkFileListInput"
   });
@@ -4063,7 +4063,7 @@
                   128
                   /* KEYED_FRAGMENT */
                 )),
-                _ctx.limit > input.value.length && !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3$p, [
+                _ctx.limit > input.value.length && !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3$q, [
                   vue.createElementVNode(
                     "div",
                     {
@@ -4325,7 +4325,7 @@
     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 = vue.defineComponent({
     name: "DkIconContent"
   });
@@ -4539,7 +4539,7 @@
             _: 1
             /* STABLE */
           }, 8, ["modelValue"]),
-          vue.createElementVNode("div", _hoisted_3$o, [
+          vue.createElementVNode("div", _hoisted_3$p, [
             vue.createVNode(_component_el_input, {
               modelValue: searchIcon.value,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchIcon.value = $event),
@@ -4862,6 +4862,24 @@
         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
     }
   };
 
@@ -4870,6 +4888,7 @@
     key: 0,
     class: "p-5px"
   };
+  const _hoisted_3$o = { key: 1 };
   const __default__$r = vue.defineComponent({
     name: "DkStyleInput"
   });
@@ -4879,6 +4898,7 @@
     emits: ["update:modelValue"],
     setup(__props, { emit }) {
       const props = __props;
+      const drawer = vue.ref(false);
       const activeNames = vue.ref([0]);
       const values = vue.ref({});
       const loading = vue.ref(true);
@@ -4927,9 +4947,12 @@
       return (_ctx, _cache) => {
         const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
         const _component_el_collapse = vue.resolveComponent("el-collapse");
+        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_drawer = vue.resolveComponent("el-drawer");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
           !loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [
-            vue.createVNode(_component_el_collapse, {
+            !props.isDrawer ? (vue.openBlock(), vue.createBlock(_component_el_collapse, {
+              key: 0,
               modelValue: activeNames.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeNames.value = $event)
             }, {
@@ -4967,7 +4990,72 @@
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["modelValue"])
+            }, 8, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$o, [
+              vue.createVNode(_component_el_button, {
+                type: "primary",
+                plain: "",
+                style: { "width": "100%" },
+                onClick: _cache[1] || (_cache[1] = ($event) => drawer.value = true)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(props.drawerText),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              vue.createVNode(_component_el_drawer, vue.mergeProps({
+                modelValue: drawer.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => drawer.value = $event)
+              }, props.drawerProps), {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_el_collapse, {
+                    modelValue: activeNames.value,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => activeNames.value = $event)
+                  }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(_components.value, (item, key) => {
+                          return vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                            key,
+                            title: "",
+                            name: key
+                          }, {
+                            title: vue.withCtx(() => [
+                              vue.createTextVNode(
+                                vue.toDisplayString(item.title),
+                                1
+                                /* TEXT */
+                              )
+                            ]),
+                            default: vue.withCtx(() => [
+                              activeNames.value.includes(key) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({
+                                key: 0,
+                                modelValue: values.value[item.name],
+                                "onUpdate:modelValue": ($event) => values.value[item.name] = $event
+                              }, item.props, { onChange }), null, 16, ["modelValue", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true)
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["name"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 16, ["modelValue"])
+            ]))
           ])) : vue.createCommentVNode("v-if", true)
         ]);
       };
@@ -5365,8 +5453,8 @@
       default: () => ({})
     },
     height: {
-      type: Number,
-      default: 180
+      type: [Number, String],
+      default: "auto"
     },
     help: {
       type: String,
@@ -5490,50 +5578,46 @@
   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"];
-  const _hoisted_9$7 = ["onMouseenter"];
-  const _hoisted_10$5 = ["onUpdate:modelValue", "onBlur"];
-  const _hoisted_11$5 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
-  const _hoisted_12$4 = /* @__PURE__ */ vue.createElementVNode(
+  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__ */ vue.createElementVNode(
     "div",
     { style: { "position": "absolute", "display": "none", "width": "100%", "height": "100%" } },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_13$3 = { class: "anchor-wrapper" };
-  const _hoisted_14$3 = ["onMousedown"];
-  const _hoisted_15$2 = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_12$4 = { class: "anchor-wrapper" };
+  const _hoisted_13$3 = ["onMousedown"];
+  const _hoisted_14$3 = /* @__PURE__ */ vue.createElementVNode(
     "span",
     { class: "title" },
     " \u5916\u8FB9\u8DDD ",
     -1
     /* HOISTED */
   );
-  const _hoisted_16$2 = { class: "thumnail border" };
-  const _hoisted_17$1 = ["title"];
-  const _hoisted_18 = ["onMouseenter"];
-  const _hoisted_19 = ["onUpdate:modelValue", "onBlur"];
-  const _hoisted_20 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
-  const _hoisted_21 = { class: "anchor-wrapper" };
-  const _hoisted_22 = ["onMousedown"];
-  const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_15$2 = { class: "thumnail border" };
+  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" };
+  const _hoisted_20 = ["onMousedown"];
+  const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode(
     "span",
     { class: "title" },
     " \u5185\u8FB9\u8DDD ",
     -1
     /* HOISTED */
   );
-  const _hoisted_24 = { class: "title" };
-  const _hoisted_25 = { class: "content-unit left-0" };
-  const _hoisted_26 = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_22 = { class: "title" };
+  const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode(
     "span",
     null,
     " x ",
     -1
     /* HOISTED */
   );
-  const _hoisted_27 = { class: "content-unit right-0" };
   const __default__$p = vue.defineComponent({
     name: "DkStyleBoxInput"
   });
@@ -5563,13 +5647,17 @@
         width: props.modelValue.width || "",
         height: props.modelValue.height || ""
       });
-      vue.ref(props.height);
-      vue.watch(
-        () => props.height,
-        () => {
-          console.log("height", props.height);
+      const box = vue.ref(null);
+      const { width } = core.useElementSize(box);
+      const height = vue.computed(() => {
+        console.log("props.height", props.height);
+        if (props.height === "auto") {
+          const h = width.value / 1.8;
+          return h > 300 ? 300 : h;
+        } else {
+          return props.height;
         }
-      );
+      });
       vue.watch(
         () => props.modelValue,
         (newVal, oldVal) => {
@@ -5662,17 +5750,16 @@
         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;
@@ -5680,16 +5767,16 @@
           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"
           );
         }
@@ -5868,9 +5955,11 @@
             vue.createElementVNode(
               "div",
               {
+                ref_key: "box",
+                ref: box,
                 tabindex: "0",
                 class: "wrapper",
-                style: vue.normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+                style: vue.normalizeStyle([{ "margin-top": "10px" }, { height: height.value + "px" }])
               },
               [
                 vue.createElementVNode(
@@ -5890,11 +5979,16 @@
                           return vue.openBlock(), vue.createElementBlock("div", { key }, [
                             vue.createElementVNode("span", {
                               title: item.title,
-                              class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`)
+                              class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                              onClick: ($event) => onDblclick(item.value, key)
                             }, [
-                              vue.createElementVNode("span", {
-                                onMouseenter: ($event) => onDblclick(item.value, key)
-                              }, vue.toDisplayString(getValue(styles[item.value])), 41, _hoisted_9$7)
+                              vue.createElementVNode(
+                                "span",
+                                null,
+                                vue.toDisplayString(getValue(styles[item.value])),
+                                1
+                                /* TEXT */
+                              )
                             ], 10, _hoisted_8$9),
                             vue.withDirectives(vue.createElementVNode("input", {
                               ref_for: true,
@@ -5903,7 +5997,7 @@
                               "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                               class: vue.normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                               onBlur: ($event) => onBlur(item.value)
-                            }, null, 42, _hoisted_10$5), [
+                            }, null, 42, _hoisted_9$7), [
                               [vue.vModelText, styles[item.value]]
                             ]),
                             (vue.openBlock(), vue.createElementBlock("svg", {
@@ -5915,15 +6009,15 @@
                               style: vue.normalizeStyle(item.svg.style),
                               class: "esm-modal-svg",
                               innerHTML: item.svg.content
-                            }, null, 12, _hoisted_11$5))
+                            }, null, 12, _hoisted_10$5))
                           ]);
                         }),
                         128
                         /* KEYED_FRAGMENT */
                       ))
                     ]),
-                    _hoisted_12$4,
-                    vue.createElementVNode("div", _hoisted_13$3, [
+                    _hoisted_11$5,
+                    vue.createElementVNode("div", _hoisted_12$4, [
                       (vue.openBlock(), vue.createElementBlock(
                         vue.Fragment,
                         null,
@@ -5934,16 +6028,16 @@
                             onMousemove: handleMouseMove,
                             onMousedown: ($event) => handleMouseDown("margin", item, $event),
                             onMouseup: handleMouseUp
-                          }, null, 42, _hoisted_14$3);
+                          }, null, 42, _hoisted_13$3);
                         }),
                         64
                         /* STABLE_FRAGMENT */
                       ))
                     ]),
-                    _hoisted_15$2,
+                    _hoisted_14$3,
                     vue.createCommentVNode("\u5916\u8FB9\u8DDD Margin END"),
                     vue.createCommentVNode("\u5185\u8FB9\u8DDD Padding"),
-                    vue.createElementVNode("div", _hoisted_16$2, [
+                    vue.createElementVNode("div", _hoisted_15$2, [
                       vue.createElementVNode(
                         "div",
                         {
@@ -5960,12 +6054,17 @@
                                 return vue.openBlock(), vue.createElementBlock("div", { key }, [
                                   vue.createElementVNode("span", {
                                     title: item.title,
-                                    class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`)
+                                    class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                                    onClick: ($event) => onDblclick(item.value, key + 4)
                                   }, [
-                                    vue.createElementVNode("span", {
-                                      onMouseenter: ($event) => onDblclick(item.value, key + 4)
-                                    }, vue.toDisplayString(getValue(styles[item.value])), 41, _hoisted_18)
-                                  ], 10, _hoisted_17$1),
+                                    vue.createElementVNode(
+                                      "span",
+                                      null,
+                                      vue.toDisplayString(getValue(styles[item.value])),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ], 10, _hoisted_16$2),
                                   vue.withDirectives(vue.createElementVNode("input", {
                                     ref_for: true,
                                     ref_key: "inputField",
@@ -5973,7 +6072,7 @@
                                     "onUpdate:modelValue": ($event) => styles[item.value] = $event,
                                     class: vue.normalizeClass("input-box anchor-tip-" + item.position + (showStyles[item.value] ? " show" : "")),
                                     onBlur: ($event) => onBlur(item.value)
-                                  }, null, 42, _hoisted_19), [
+                                  }, null, 42, _hoisted_17$1), [
                                     [vue.vModelText, styles[item.value]]
                                   ]),
                                   (vue.openBlock(), vue.createElementBlock("svg", {
@@ -5985,14 +6084,14 @@
                                     style: vue.normalizeStyle(item.svg.style),
                                     class: "esm-modal-svg",
                                     innerHTML: item.svg.content
-                                  }, null, 12, _hoisted_20))
+                                  }, null, 12, _hoisted_18))
                                 ]);
                               }),
                               128
                               /* KEYED_FRAGMENT */
                             ))
                           ]),
-                          vue.createElementVNode("div", _hoisted_21, [
+                          vue.createElementVNode("div", _hoisted_19, [
                             (vue.openBlock(), vue.createElementBlock(
                               vue.Fragment,
                               null,
@@ -6003,13 +6102,13 @@
                                   onMousemove: handleMouseMove,
                                   onMousedown: ($event) => handleMouseDown("padding", item, $event),
                                   onMouseup: handleMouseUp
-                                }, null, 42, _hoisted_22);
+                                }, null, 42, _hoisted_20);
                               }),
                               64
                               /* STABLE_FRAGMENT */
                             ))
                           ]),
-                          _hoisted_23,
+                          _hoisted_21,
                           vue.createCommentVNode("\u5185\u8FB9\u8DDD END"),
                           vue.createElementVNode(
                             "div",
@@ -6019,16 +6118,17 @@
                               onMouseleave: _cache[10] || (_cache[10] = ($event) => onMouseMove("widthHeight", "leave", $event))
                             },
                             [
-                              vue.createElementVNode("span", _hoisted_24, [
-                                vue.createElementVNode("span", _hoisted_25, [
+                              vue.createElementVNode("span", _hoisted_22, [
+                                vue.createElementVNode("span", {
+                                  class: "content-unit left-0",
+                                  onClick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
+                                }, [
                                   vue.createElementVNode(
                                     "em",
-                                    {
-                                      onMouseenter: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
-                                    },
+                                    null,
                                     vue.toDisplayString(getValue(styles["width"])),
-                                    33
-                                    /* TEXT, HYDRATE_EVENTS */
+                                    1
+                                    /* TEXT */
                                   )
                                 ]),
                                 vue.withDirectives(vue.createElementVNode(
@@ -6046,16 +6146,17 @@
                                 ), [
                                   [vue.vModelText, styles.width]
                                 ]),
-                                _hoisted_26,
-                                vue.createElementVNode("span", _hoisted_27, [
+                                _hoisted_23,
+                                vue.createElementVNode("span", {
+                                  class: "content-unit right-0",
+                                  onClick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
+                                }, [
                                   vue.createElementVNode(
                                     "em",
-                                    {
-                                      onMouseenter: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
-                                    },
+                                    null,
                                     vue.toDisplayString(getValue(styles["height"])),
-                                    33
-                                    /* TEXT, HYDRATE_EVENTS */
+                                    1
+                                    /* TEXT */
                                   )
                                 ]),
                                 vue.withDirectives(vue.createElementVNode(