@vipl520/dk-ui 1.0.1

package/es/packages/dk-ui/src/style-box-input/src/html.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.mjs","sources":["../../../../../../src/style-box-input/src/html.ts"],"sourcesContent":["export const margins = [\n  {\n    title: '外边距-左',\n    position: 'left',\n    value: 'marginLeft',\n    svg: {\n      width: '15%',\n      height: '100%',\n      style: 'position: absolute',\n      viewBox: '0 0 5 15',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 0, 0 15,5 12.7, 5 2.25\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '外边距-右',\n    position: 'right',\n    value: 'marginRight',\n    svg: {\n      width: '15%',\n      height: '100%',\n      style: 'position: absolute; right: 0px',\n      viewBox: '0 0 5 15',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 2.25, 0 12.7, 5,15, 5,0\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '外边距-上',\n    position: 'top',\n    value: 'marginTop',\n    svg: {\n      width: '100%',\n      height: '15%',\n      style: 'position: absolute',\n      viewBox: '0 0 15 5',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 0, 2.25 5, 12.7 5, 15,0\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '外边距-下',\n    position: 'bottom',\n    value: 'marginBottom',\n    svg: {\n      width: '100%',\n      height: '15%',\n      style: 'position: absolute; bottom: 0px',\n      viewBox: '0 0 15 5',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 5, 2.25 0, 12.7 0, 15,5\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n]\n//\n//   <div class=\"\">\n// <span\n//   title=\"内边距-左\"\n// class=\"anchor-tip-left value-indicator\"\n//   >\n//   -\n//     </span>\n//   <input class=\"input-box anchor-tip-left\" />\n// <svg\n//   width=\"20%\"\n// height=\"100%\"\n// viewBox=\"0 0 5 15\"\n// preserveAspectRatio=\"none\"\n// data-link-anchor=\"paddingLeft\"\n// class=\"esm-modal-svg\"\n// style=\"position: absolute\"\n// >\n// <polygon\n//   points=\"0 0, 0 15,5 11.25, 5 3.68\"\n// style=\"\n// fill: rgba(255, 31, 31, 0.24);\n// pointer-events: visible;\n// \"\n// ></polygon>\n// </svg>\n// </div>\n// <div class=\"\">\n// <span\n//   title=\"内边距-右\"\n// class=\"anchor-tip-right value-indicator\"\n//   >\n//   -\n//     </span>\n//   <input class=\"input-box anchor-tip-right\" />\n// <svg\n//   width=\"20%\"\n// height=\"100%\"\n// viewBox=\"0 0 5 15\"\n// preserveAspectRatio=\"none\"\n// data-link-anchor=\"paddingRight\"\n// class=\"esm-modal-svg\"\n// style=\"position: absolute; right: 0px\"\n// >\n// <polygon\n//   points=\"0 3.68, 0 11.25,5 15, 5 0\"\n// style=\"\n// fill: rgba(255, 31, 31, 0.24);\n// pointer-events: visible;\n// \"\n// ></polygon>\n// </svg>\n// </div>\n// <div class=\"\">\n// <span\n//   title=\"内边距-上\"\n// class=\"anchor-tip-top value-indicator\"\n//   >\n//   -\n//     </span>\n//   <input class=\"input-box anchor-tip-top\" />\n// <svg\n//   width=\"100%\"\n// height=\"25%\"\n// viewBox=\"0 0 15 5\"\n// preserveAspectRatio=\"none\"\n// data-link-anchor=\"paddingTop\"\n// class=\"esm-modal-svg\"\n// style=\"position: absolute\"\n// >\n// <polygon\n//   points=\"0 0, 3 5, 11.9 5, 15,0\"\n// style=\"\n// fill: rgba(255, 31, 31, 0.24);\n// pointer-events: visible;\n// \"\n// ></polygon>\n// </svg>\n// </div>\n// <div class=\"\">\n// <span\n//   title=\"内边距-下\"\n// class=\"anchor-tip-bottom value-indicator\"\n//   >\n//   -\n//     </span>\n//   <input class=\"input-box anchor-tip-bottom\" />\n// <svg\n//   width=\"100%\"\n// height=\"25%\"\n// viewBox=\"0 0 15 5\"\n// preserveAspectRatio=\"none\"\n// data-link-anchor=\"paddingBottom\"\n// class=\"esm-modal-svg\"\n// style=\"position: absolute; bottom: 0px\"\n// >\n// <polygon\n//   points=\"0 5, 3 0, 11.9 0, 15,5\"\n// style=\"\n// fill: rgba(255, 31, 31, 0.24);\n// pointer-events: visible;\n// \"\n// ></polygon>\n// </svg>\n// </div>\n\nexport const paddings = [\n  {\n    title: '内边距-左',\n    position: 'left',\n    value: 'paddingLeft',\n    svg: {\n      width: '20%',\n      height: '100%',\n      style: 'position: absolute',\n      viewBox: '0 0 5 15',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 0, 0 15, 5 11.25, 5 3.68\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '内边距-右',\n    position: 'right',\n    value: 'paddingRight',\n    svg: {\n      width: '20%',\n      height: '100%',\n      style: 'position: absolute; right: 0px',\n      viewBox: '0 0 5 15',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 3.68, 0 11.25, 5 15, 5 0\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '内边距-上',\n    position: 'top',\n    value: 'paddingTop',\n    svg: {\n      width: '100%',\n      height: '25%',\n      style: 'position: absolute',\n      viewBox: '0 0 15 5',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 0, 3 5, 11.9 5, 15 0\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n  {\n    title: '内边距-下',\n    position: 'bottom',\n    value: 'paddingBottom',\n    svg: {\n      width: '100%',\n      height: '25%',\n      style: 'position: absolute; bottom: 0px',\n      viewBox: '0 0 15 5',\n      preserveAspectRatio: 'none',\n      content: `<polygon points=\"0 5, 3 0, 11.9 0, 15 5\" style=\"fill: rgba(255, 31, 31, 0.24); pointer-events: visible\"></polygon>`,\n    },\n  },\n]\n\nexport const widthHeight = [\n  { title: '宽度', value: 'width' },\n  { title: 'x' },\n  { title: '高度', value: 'height' },\n]\n"],"names":[],"mappings":"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"}

package/es/packages/dk-ui/src/style-box-input/src/props.mjs

@@ -0,0 +1,17 @@
+const styleBoxInputProps = {
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  height: {
+    type: Number,
+    default: 180
+  },
+  help: {
+    type: String,
+    default: "\u53EF\u4EE5\u53CC\u51FB\u5BF9\u5E94\u4F4D\u7F6E\u6765\u914D\u7F6E\u5185\u5916\u8FB9\u8DDD\u548C\u5BBD\u5EA6\u9AD8\u5EA6\uFF0C\u4E5F\u652F\u6301\u901A\u8FC7\u63CF\u70B9\u62D6\u62FD\u589E\u52A0\uFF0C\u652F\u6301\u5355\u4F4D\uFF08px\u3001rem\u3001%\u3001auto)"
+  }
+};
+
+export { styleBoxInputProps };
+//# sourceMappingURL=props.mjs.map

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

@@ -0,0 +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;;;;"}

package/es/packages/dk-ui/src/style-box-input/src/style-box-input.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './style-box-input.vue2.mjs';
+import _export_sfc from '../../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+var _StyleBoxInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui_test\\dk-ui-all\\packages\\dk-ui\\src\\style-box-input\\src\\style-box-input.vue"]]);
+
+export { _StyleBoxInput as default };
+//# sourceMappingURL=style-box-input.vue.mjs.map

package/es/packages/dk-ui/src/style-box-input/src/style-box-input.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-box-input.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/packages/dk-ui/src/style-box-input/src/style-box-input.vue2.mjs

@@ -0,0 +1,612 @@
+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 { styleBoxInputProps } from './props.mjs';
+import { margins, paddings } from './html.mjs';
+import { upper } from '@vipl520/utils';
+
+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", "onDblclick"];
+const _hoisted_9 = ["onUpdate:modelValue", "onBlur"];
+const _hoisted_10 = ["width", "height", "viewBox", "data-link-anchor", "innerHTML"];
+const _hoisted_11 = /* @__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(
+  "span",
+  { class: "title" },
+  " \u5916\u8FB9\u8DDD ",
+  -1
+  /* HOISTED */
+);
+const _hoisted_15 = { class: "thumnail border" };
+const _hoisted_16 = ["title", "onDblclick"];
+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(
+  "span",
+  { class: "title" },
+  " \u5185\u8FB9\u8DDD ",
+  -1
+  /* HOISTED */
+);
+const _hoisted_22 = { class: "title" };
+const _hoisted_23 = /* @__PURE__ */ createElementVNode(
+  "span",
+  null,
+  " x ",
+  -1
+  /* HOISTED */
+);
+const __default__ = defineComponent({
+  name: "DkStyleBoxInput"
+});
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: styleBoxInputProps,
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const moves = reactive({
+      margin: false,
+      padding: false,
+      widthHeight: false
+    });
+    const inputField = ref();
+    const inputWidth = ref();
+    const inputHeight = ref();
+    const styles = reactive({
+      marginLeft: props.modelValue.marginLeft || "",
+      marginRight: props.modelValue.marginRight || "",
+      marginTop: props.modelValue.marginTop || "",
+      marginBottom: props.modelValue.marginBottom || "",
+      paddingLeft: props.modelValue.paddingLeft || "",
+      paddingRight: props.modelValue.paddingRight || "",
+      paddingTop: props.modelValue.paddingTop || "",
+      paddingBottom: props.modelValue.paddingBottom || "",
+      width: props.modelValue.width || "",
+      height: props.modelValue.height || ""
+    });
+    const height = ref(props.height);
+    watch(
+      () => props.height,
+      () => {
+        console.log("height", props.height);
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (newVal, oldVal) => {
+        const propertiesToWatch = [
+          "marginLeft",
+          "marginRight",
+          "marginTop",
+          "marginBottom",
+          "paddingLeft",
+          "paddingRight",
+          "paddingTop",
+          "paddingBottom",
+          "width",
+          "height"
+        ];
+        propertiesToWatch.forEach((property) => {
+          if (newVal[property] !== oldVal[property]) {
+            styles[property] = newVal[property] || "";
+          }
+        });
+      },
+      { deep: true }
+    );
+    watch(styles, () => {
+      const _styles = Object.keys(styles).reduce((acc, key) => {
+        if (styles[key] !== "") {
+          acc[key] = styles[key];
+        }
+        return acc;
+      }, {});
+      emit("update:modelValue", _styles);
+    });
+    const showStyles = reactive({
+      marginLeft: false,
+      marginRight: false,
+      marginTop: false,
+      marginBottom: false,
+      paddingLeft: false,
+      paddingRight: false,
+      paddingTop: false,
+      paddingBottom: false,
+      width: false,
+      height: false
+    });
+    const dragging = ref(false);
+    const startPosition = reactive({
+      x: 0,
+      y: 0
+    });
+    const trackMouseBound = ref(null);
+    const stopChangeBound = ref(null);
+    const dragPosition = reactive({
+      type: "",
+      position: ""
+    });
+    const positionStyle = reactive({
+      display: "none",
+      width: "0px",
+      height: "0px",
+      left: "0px",
+      top: "0px"
+    });
+    const handleMouseMove = (event) => {
+      if (!dragging.value)
+        return;
+      const p = dragPosition.position;
+      const type = dragPosition.type;
+      const value = type + upper(p);
+      const updateStyle = (axis, position) => {
+        const clientAxis = axis === "x" ? "clientX" : "clientY";
+        positionStyle[position] = event[clientAxis] + "px";
+        let difference = event[clientAxis] - startPosition[axis];
+        if (p === "top" || p === "left") {
+          difference = -difference;
+        }
+        styles[value] = (parseInt(styles[value]) || 0) + difference + "px";
+        startPosition[axis] = event[clientAxis];
+      };
+      if (p === "left" || p === "right") {
+        updateStyle("x", "left");
+      } else if (p === "top" || p === "bottom") {
+        updateStyle("y", "top");
+      }
+    };
+    const handleMouseDown = (type, position, event) => {
+      Object.assign(dragPosition, { position, type });
+      trackMouseBound.value = handleMouseMove.bind(event);
+      document.addEventListener("mousemove", trackMouseBound.value);
+      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 multiples = {
+        margin: 0.9,
+        padding: 0.9 * 0.7
+      };
+      const { clientX, clientY } = event;
+      const setCursorAndDimensions = (cursor, left, top, width2, height3) => {
+        document.body.style.cursor = cursor;
+        Object.assign(positionStyle, { left, top, width: width2, height: height3, display: "block" });
+      };
+      startPosition.x = clientX;
+      startPosition.y = clientY;
+      if (position === "left" || position === "right") {
+        setCursorAndDimensions(
+          "ew-resize",
+          clientX + "px",
+          clientY - height2 * 0.5 * multiples[type] + "px",
+          "0.1px",
+          height2 * multiples[type] + "px"
+        );
+      } else {
+        setCursorAndDimensions(
+          "ns-resize",
+          clientX - width * 0.5 * multiples[type] + "px",
+          clientY + "px",
+          width * multiples[type] + "px",
+          "0.1px"
+        );
+      }
+    };
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", trackMouseBound.value);
+      document.removeEventListener("mouseup", stopChangeBound.value);
+      dragging.value = false;
+      positionStyle.display = "none";
+      document.body.style.cursor = "default";
+      startPosition.x = null;
+      startPosition.y = null;
+    };
+    const onMouseMove = (value, type = "move", event) => {
+      if (!dragging.value) {
+        event.stopPropagation();
+      }
+      if (type !== "move") {
+        moves[value] = false;
+      } else {
+        Object.keys(moves).forEach((key) => {
+          if (key !== value) {
+            moves[key] = false;
+          }
+        });
+        moves[value] = true;
+      }
+    };
+    const onDblclick = (value, key) => {
+      showStyles[value] = true;
+      nextTick(() => {
+        if (value === "width") {
+          inputWidth.value.focus();
+        } else if (value === "height") {
+          inputHeight.value.focus();
+        } else {
+          inputField.value[key].focus();
+        }
+      });
+    };
+    const getValue = (value) => {
+      if (value === "auto") {
+        return value;
+      }
+      if (value === "0" || value === 0) {
+        return 0;
+      }
+      if (value === "") {
+        return "-";
+      }
+      return value;
+    };
+    const onBlur = (value) => {
+      showStyles[value] = false;
+      if (styles[value] === "" || styles[value] === "auto") {
+        return;
+      }
+      const validValueRegex = /^(\d*\.?\d+)(px|rem|%|vh)$/;
+      if (!validValueRegex.test(styles[value])) {
+        const number = parseInt(styles[value]);
+        if (isNaN(number)) {
+          styles[value] = "";
+        } else {
+          styles[value] = number + "px";
+        }
+      }
+    };
+    const onRefresh = (type) => {
+      if (type === "widthHeight") {
+        styles.width = "";
+        styles.height = "";
+      } else if (type === "margin") {
+        styles.marginLeft = "";
+        styles.marginRight = "";
+        styles.marginTop = "";
+        styles.marginBottom = "";
+      } else if (type === "padding") {
+        styles.paddingLeft = "";
+        styles.paddingRight = "";
+        styles.paddingTop = "";
+        styles.paddingBottom = "";
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_dk_icon = resolveComponent("dk-icon");
+      const _component_el_popover = resolveComponent("el-popover");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode(
+          "div",
+          {
+            class: "position-line",
+            style: normalizeStyle(positionStyle)
+          },
+          null,
+          4
+          /* STYLE */
+        ),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("label", _hoisted_3, [
+            createTextVNode(" \u5185\u5916\u8FB9\u8DDD | \u9AD8\u5BBD "),
+            createVNode(_component_el_popover, {
+              ref: "popover",
+              placement: "bottom",
+              title: "\u8BF4\u660E",
+              width: 280,
+              trigger: "hover",
+              content: props.help
+            }, {
+              reference: withCtx(() => [
+                createVNode(_component_dk_icon, {
+                  icon: "QuestionFilled",
+                  class: "m-l-5px vertical-text-top"
+                })
+              ]),
+              _: 1
+              /* 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 */
+              })
+            ])
+          ]),
+          createElementVNode(
+            "div",
+            {
+              tabindex: "0",
+              class: "wrapper",
+              style: normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+            },
+            [
+              createElementVNode(
+                "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))
+                },
+                [
+                  createCommentVNode("\u5916\u8FB9\u8DDD Margin"),
+                  createElementVNode("div", null, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(unref(margins), (item, key) => {
+                        return openBlock(), createElementBlock("div", { key }, [
+                          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),
+                          withDirectives(createElementVNode("input", {
+                            ref_for: true,
+                            ref_key: "inputField",
+                            ref: inputField,
+                            "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), [
+                            [vModelText, styles[item.value]]
+                          ]),
+                          (openBlock(), createElementBlock("svg", {
+                            width: item.svg.width,
+                            height: item.svg.height,
+                            viewBox: item.svg.viewBox,
+                            preserveAspectRatio: "none",
+                            "data-link-anchor": item.value,
+                            style: normalizeStyle(item.svg.style),
+                            class: "esm-modal-svg",
+                            innerHTML: item.svg.content
+                          }, null, 12, _hoisted_10))
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _hoisted_11,
+                  createElementVNode("div", _hoisted_12, [
+                    (openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(["left", "right", "top", "bottom"], (item, key) => {
+                        return createElementVNode("div", {
+                          key,
+                          class: normalizeClass(["anchor", "anchor-" + item]),
+                          onMousemove: handleMouseMove,
+                          onMousedown: ($event) => handleMouseDown("margin", item, $event),
+                          onMouseup: handleMouseUp
+                        }, null, 42, _hoisted_13);
+                      }),
+                      64
+                      /* STABLE_FRAGMENT */
+                    ))
+                  ]),
+                  _hoisted_14,
+                  createCommentVNode("\u5916\u8FB9\u8DDD Margin END"),
+                  createCommentVNode("\u5185\u8FB9\u8DDD Padding"),
+                  createElementVNode("div", _hoisted_15, [
+                    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))
+                      },
+                      [
+                        createElementVNode("div", null, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(unref(paddings), (item, key) => {
+                              return openBlock(), createElementBlock("div", { key }, [
+                                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),
+                                withDirectives(createElementVNode("input", {
+                                  ref_for: true,
+                                  ref_key: "inputField",
+                                  ref: inputField,
+                                  "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), [
+                                  [vModelText, styles[item.value]]
+                                ]),
+                                (openBlock(), createElementBlock("svg", {
+                                  width: item.svg.width,
+                                  height: item.svg.height,
+                                  viewBox: item.svg.viewBox,
+                                  preserveAspectRatio: "none",
+                                  "data-link-anchor": item.value,
+                                  style: normalizeStyle(item.svg.style),
+                                  class: "esm-modal-svg",
+                                  innerHTML: item.svg.content
+                                }, null, 12, _hoisted_18))
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        createElementVNode("div", _hoisted_19, [
+                          (openBlock(), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(["left", "right", "top", "bottom"], (item, key) => {
+                              return createElementVNode("div", {
+                                key,
+                                class: normalizeClass(["anchor", "anchor-" + item]),
+                                onMousemove: handleMouseMove,
+                                onMousedown: ($event) => handleMouseDown("padding", item, $event),
+                                onMouseup: handleMouseUp
+                              }, null, 42, _hoisted_20);
+                            }),
+                            64
+                            /* STABLE_FRAGMENT */
+                          ))
+                        ]),
+                        _hoisted_21,
+                        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))
+                          },
+                          [
+                            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 */
+                              ),
+                              withDirectives(createElementVNode(
+                                "input",
+                                {
+                                  ref_key: "inputWidth",
+                                  ref: inputWidth,
+                                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => styles.width = $event),
+                                  class: normalizeClass(["input-box absolute left-5% top-10px", showStyles["width"] ? " show" : ""]),
+                                  onBlur: _cache[5] || (_cache[5] = ($event) => onBlur("width"))
+                                },
+                                null,
+                                34
+                                /* CLASS, HYDRATE_EVENTS */
+                              ), [
+                                [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 */
+                              ),
+                              withDirectives(createElementVNode(
+                                "input",
+                                {
+                                  ref_key: "inputHeight",
+                                  ref: inputHeight,
+                                  "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => styles.height = $event),
+                                  class: normalizeClass(["input-box absolute right-5% top-10px", showStyles["height"] ? " show" : ""]),
+                                  onBlur: _cache[8] || (_cache[8] = ($event) => onBlur("height"))
+                                },
+                                null,
+                                34
+                                /* CLASS, HYDRATE_EVENTS */
+                              ), [
+                                [vModelText, styles.height]
+                              ])
+                            ])
+                          ],
+                          34
+                          /* CLASS, HYDRATE_EVENTS */
+                        )
+                      ],
+                      34
+                      /* CLASS, HYDRATE_EVENTS */
+                    )
+                  ])
+                ],
+                34
+                /* CLASS, HYDRATE_EVENTS */
+              )
+            ],
+            4
+            /* STYLE */
+          )
+        ])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=style-box-input.vue2.mjs.map