@vipl520/dk-ui 1.0.1

package/lib/packages/dk-ui/src/style-box-input/src/style-box-input.vue2.js

@@ -0,0 +1,616 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var props = require('./props.js');
+var html = require('./html.js');
+var utils = require('@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__ */ vue.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__ */ vue.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__ */ vue.createElementVNode(
+  "span",
+  { class: "title" },
+  " \u5185\u8FB9\u8DDD ",
+  -1
+  /* HOISTED */
+);
+const _hoisted_22 = { class: "title" };
+const _hoisted_23 = /* @__PURE__ */ vue.createElementVNode(
+  "span",
+  null,
+  " x ",
+  -1
+  /* HOISTED */
+);
+const __default__ = vue.defineComponent({
+  name: "DkStyleBoxInput"
+});
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: props.styleBoxInputProps,
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const moves = vue.reactive({
+      margin: false,
+      padding: false,
+      widthHeight: false
+    });
+    const inputField = vue.ref();
+    const inputWidth = vue.ref();
+    const inputHeight = vue.ref();
+    const styles = vue.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 = vue.ref(props.height);
+    vue.watch(
+      () => props.height,
+      () => {
+        console.log("height", props.height);
+      }
+    );
+    vue.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 }
+    );
+    vue.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 = vue.reactive({
+      marginLeft: false,
+      marginRight: false,
+      marginTop: false,
+      marginBottom: false,
+      paddingLeft: false,
+      paddingRight: false,
+      paddingTop: false,
+      paddingBottom: false,
+      width: false,
+      height: false
+    });
+    const dragging = vue.ref(false);
+    const startPosition = vue.reactive({
+      x: 0,
+      y: 0
+    });
+    const trackMouseBound = vue.ref(null);
+    const stopChangeBound = vue.ref(null);
+    const dragPosition = vue.reactive({
+      type: "",
+      position: ""
+    });
+    const positionStyle = vue.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 + utils.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;
+      vue.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 = vue.resolveComponent("dk-icon");
+      const _component_el_popover = vue.resolveComponent("el-popover");
+      const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode(
+          "div",
+          {
+            class: "position-line",
+            style: vue.normalizeStyle(positionStyle)
+          },
+          null,
+          4
+          /* STYLE */
+        ),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("label", _hoisted_3, [
+            vue.createTextVNode(" \u5185\u5916\u8FB9\u8DDD | \u9AD8\u5BBD "),
+            vue.createVNode(_component_el_popover, {
+              ref: "popover",
+              placement: "bottom",
+              title: "\u8BF4\u660E",
+              width: 280,
+              trigger: "hover",
+              content: props.help
+            }, {
+              reference: vue.withCtx(() => [
+                vue.createVNode(_component_dk_icon, {
+                  icon: "QuestionFilled",
+                  class: "m-l-5px vertical-text-top"
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["content"])
+          ]),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createVNode(_component_el_tooltip, {
+                class: "box-item",
+                effect: "dark",
+                content: "\u91CD\u7F6E\u9AD8\u5BBD",
+                placement: "top-start"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_dk_icon, {
+                    icon: "Refresh",
+                    color: "var(--el-color-primary)",
+                    onClick: _cache[0] || (_cache[0] = ($event) => onRefresh("widthHeight"))
+                  })
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(_component_el_tooltip, {
+                class: "box-item",
+                effect: "dark",
+                content: "\u91CD\u7F6E\u5185\u8FB9\u8DDD",
+                placement: "top-start"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_dk_icon, {
+                    icon: "Refresh",
+                    color: "var(--el-color-success)",
+                    onClick: _cache[1] || (_cache[1] = ($event) => onRefresh("padding"))
+                  })
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createVNode(_component_el_tooltip, {
+                class: "box-item",
+                effect: "dark",
+                content: "\u91CD\u7F6E\u5916\u8FB9\u8DDD",
+                placement: "top-start"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_dk_icon, {
+                    icon: "Refresh",
+                    color: "var(--el-color-warning)",
+                    onClick: _cache[2] || (_cache[2] = ($event) => onRefresh("margin"))
+                  })
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ]),
+          vue.createElementVNode(
+            "div",
+            {
+              tabindex: "0",
+              class: "wrapper",
+              style: vue.normalizeStyle([{ "margin-top": "10px" }, { height: props.height + "px" }])
+            },
+            [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.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))
+                },
+                [
+                  vue.createCommentVNode("\u5916\u8FB9\u8DDD Margin"),
+                  vue.createElementVNode("div", null, [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(vue.unref(html.margins), (item, key) => {
+                        return vue.openBlock(), vue.createElementBlock("div", { key }, [
+                          vue.createElementVNode("span", {
+                            title: item.title,
+                            class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                            onDblclick: ($event) => onDblclick(item.value, key)
+                          }, vue.toDisplayString(getValue(styles[item.value])), 43, _hoisted_8),
+                          vue.withDirectives(vue.createElementVNode("input", {
+                            ref_for: true,
+                            ref_key: "inputField",
+                            ref: inputField,
+                            "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_9), [
+                            [vue.vModelText, styles[item.value]]
+                          ]),
+                          (vue.openBlock(), vue.createElementBlock("svg", {
+                            width: item.svg.width,
+                            height: item.svg.height,
+                            viewBox: item.svg.viewBox,
+                            preserveAspectRatio: "none",
+                            "data-link-anchor": item.value,
+                            style: vue.normalizeStyle(item.svg.style),
+                            class: "esm-modal-svg",
+                            innerHTML: item.svg.content
+                          }, null, 12, _hoisted_10))
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _hoisted_11,
+                  vue.createElementVNode("div", _hoisted_12, [
+                    (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(["left", "right", "top", "bottom"], (item, key) => {
+                        return vue.createElementVNode("div", {
+                          key,
+                          class: vue.normalizeClass(["anchor", "anchor-" + item]),
+                          onMousemove: handleMouseMove,
+                          onMousedown: ($event) => handleMouseDown("margin", item, $event),
+                          onMouseup: handleMouseUp
+                        }, null, 42, _hoisted_13);
+                      }),
+                      64
+                      /* STABLE_FRAGMENT */
+                    ))
+                  ]),
+                  _hoisted_14,
+                  vue.createCommentVNode("\u5916\u8FB9\u8DDD Margin END"),
+                  vue.createCommentVNode("\u5185\u8FB9\u8DDD Padding"),
+                  vue.createElementVNode("div", _hoisted_15, [
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        class: vue.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))
+                      },
+                      [
+                        vue.createElementVNode("div", null, [
+                          (vue.openBlock(true), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList(vue.unref(html.paddings), (item, key) => {
+                              return vue.openBlock(), vue.createElementBlock("div", { key }, [
+                                vue.createElementVNode("span", {
+                                  title: item.title,
+                                  class: vue.normalizeClass(`anchor-tip-${item.position} value-indicator`),
+                                  onDblclick: ($event) => onDblclick(item.value, key + 4)
+                                }, vue.toDisplayString(getValue(styles[item.value])), 43, _hoisted_16),
+                                vue.withDirectives(vue.createElementVNode("input", {
+                                  ref_for: true,
+                                  ref_key: "inputField",
+                                  ref: inputField,
+                                  "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_17), [
+                                  [vue.vModelText, styles[item.value]]
+                                ]),
+                                (vue.openBlock(), vue.createElementBlock("svg", {
+                                  width: item.svg.width,
+                                  height: item.svg.height,
+                                  viewBox: item.svg.viewBox,
+                                  preserveAspectRatio: "none",
+                                  "data-link-anchor": item.value,
+                                  style: vue.normalizeStyle(item.svg.style),
+                                  class: "esm-modal-svg",
+                                  innerHTML: item.svg.content
+                                }, null, 12, _hoisted_18))
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        vue.createElementVNode("div", _hoisted_19, [
+                          (vue.openBlock(), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList(["left", "right", "top", "bottom"], (item, key) => {
+                              return vue.createElementVNode("div", {
+                                key,
+                                class: vue.normalizeClass(["anchor", "anchor-" + item]),
+                                onMousemove: handleMouseMove,
+                                onMousedown: ($event) => handleMouseDown("padding", item, $event),
+                                onMouseup: handleMouseUp
+                              }, null, 42, _hoisted_20);
+                            }),
+                            64
+                            /* STABLE_FRAGMENT */
+                          ))
+                        ]),
+                        _hoisted_21,
+                        vue.createCommentVNode("\u5185\u8FB9\u8DDD END"),
+                        vue.createElementVNode(
+                          "div",
+                          {
+                            class: vue.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))
+                          },
+                          [
+                            vue.createElementVNode("span", _hoisted_22, [
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: "content-unit left-0",
+                                  onDblclick: _cache[3] || (_cache[3] = ($event) => onDblclick("width", 9))
+                                },
+                                vue.toDisplayString(getValue(styles["width"])),
+                                33
+                                /* TEXT, HYDRATE_EVENTS */
+                              ),
+                              vue.withDirectives(vue.createElementVNode(
+                                "input",
+                                {
+                                  ref_key: "inputWidth",
+                                  ref: inputWidth,
+                                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => styles.width = $event),
+                                  class: vue.normalizeClass(["input-box absolute left-5% top-10px", showStyles["width"] ? " show" : ""]),
+                                  onBlur: _cache[5] || (_cache[5] = ($event) => onBlur("width"))
+                                },
+                                null,
+                                34
+                                /* CLASS, HYDRATE_EVENTS */
+                              ), [
+                                [vue.vModelText, styles.width]
+                              ]),
+                              _hoisted_23,
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: "content-unit right-0",
+                                  onDblclick: _cache[6] || (_cache[6] = ($event) => onDblclick("height", 9))
+                                },
+                                vue.toDisplayString(getValue(styles["height"])),
+                                33
+                                /* TEXT, HYDRATE_EVENTS */
+                              ),
+                              vue.withDirectives(vue.createElementVNode(
+                                "input",
+                                {
+                                  ref_key: "inputHeight",
+                                  ref: inputHeight,
+                                  "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => styles.height = $event),
+                                  class: vue.normalizeClass(["input-box absolute right-5% top-10px", showStyles["height"] ? " show" : ""]),
+                                  onBlur: _cache[8] || (_cache[8] = ($event) => onBlur("height"))
+                                },
+                                null,
+                                34
+                                /* CLASS, HYDRATE_EVENTS */
+                              ), [
+                                [vue.vModelText, styles.height]
+                              ])
+                            ])
+                          ],
+                          34
+                          /* CLASS, HYDRATE_EVENTS */
+                        )
+                      ],
+                      34
+                      /* CLASS, HYDRATE_EVENTS */
+                    )
+                  ])
+                ],
+                34
+                /* CLASS, HYDRATE_EVENTS */
+              )
+            ],
+            4
+            /* STYLE */
+          )
+        ])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=style-box-input.vue2.js.map