ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/image/image.js

@@ -1,10 +1,158 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, createCommentVNode, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, withModifiers, normalizeStyle, normalizeClass, nextTick } from "vue";
-import { t as throttle } from "../index/index.js";
-const _hoisted_1 = { class: "tdd-relative tdd-inline-block tdd-h-full tdd-w-full" };
+import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, watch, Fragment, createVNode, createCommentVNode, renderSlot, createBlock, Teleport, Transition, withCtx, withDirectives, withModifiers, normalizeStyle, normalizeClass, unref } from "vue";
+import { _ as _export_sfc, t as throttle } from "../index/index.js";
+import { d as delIcon } from "../delete/delete.js";
+const _sfc_main$3 = {};
+const _hoisted_1$3 = {
+  viewBox: "64 64 896 896",
+  focusable: "false",
+  "data-icon": "eye",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true"
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }, null, -1)
+  ]));
+}
+const EyeIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+const _sfc_main$2 = {};
+const _hoisted_1$2 = {
+  viewBox: "64 64 896 896",
+  focusable: "false",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" }, null, -1),
+    createElementVNode("path", { d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" }, null, -1)
+  ]));
+}
+const turnLeftIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
+const _sfc_main$1 = {};
+const _hoisted_1$1 = {
+  viewBox: "64 64 896 896",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" }, null, -1),
+    createElementVNode("path", { d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" }, null, -1)
+  ]));
+}
+const turnRightIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const DEFAULT_THROTTLE_WAIT = 60;
+const createDraggableDirective = (options) => {
+  const config = {
+    throttleWait: DEFAULT_THROTTLE_WAIT,
+    resetOnEnd: false,
+    onDrag: () => {
+    },
+    // default implementation
+    ...options
+  };
+  const bindEvents = (el, binding) => {
+    if (el.__draggable_handlers__)
+      return;
+    let startX = 0;
+    let startY = 0;
+    let initialX = 0;
+    let initialY = 0;
+    const handleMove = throttle((e) => {
+      e.preventDefault();
+      const deltaX = e.pageX - startX;
+      const deltaY = e.pageY - startY;
+      config.onDrag({
+        x: deltaX + initialX,
+        y: deltaY + initialY
+      });
+    }, config.throttleWait);
+    const handleDown = (e) => {
+      var _a;
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      initialX = rect.left + window.scrollX;
+      initialY = rect.top + window.scrollY;
+      startX = e.pageX;
+      startY = e.pageY;
+      (_a = config.onDragStart) == null ? void 0 : _a.call(config, { x: initialX, y: initialY });
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    };
+    const handleUp = () => {
+      var _a;
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      if (config.resetOnEnd) {
+        config.onDrag({ x: initialX, y: initialY });
+      }
+      (_a = config.onDragEnd) == null ? void 0 : _a.call(config, { x: initialX, y: initialY });
+    };
+    el.__draggable_handlers__ = {
+      move: handleMove,
+      up: handleUp
+    };
+    el.addEventListener("mousedown", handleDown);
+  };
+  const unbindEvents = (el) => {
+    if (el.__draggable_handlers__) {
+      window.removeEventListener("mousemove", el.__draggable_handlers__.move);
+      window.removeEventListener("mouseup", el.__draggable_handlers__.up);
+      delete el.__draggable_handlers__;
+    }
+  };
+  return {
+    mounted(el, binding) {
+      bindEvents(el);
+    },
+    beforeUnmount(el) {
+      unbindEvents(el);
+    }
+  };
+};
+const createWheelDirective = (options) => {
+  const config = {
+    onWheel: () => {
+    },
+    ...options
+  };
+  const bindEvents = (el, binding) => {
+    const wheelHandler = (e) => {
+      e.preventDefault();
+      config.onWheel(e);
+    };
+    el._wheel_handlers_ = {
+      wheel: wheelHandler
+    };
+    el.addEventListener("wheel", wheelHandler);
+  };
+  const unbindEvents = (el) => {
+    if (el._wheel_handlers_) {
+      el.removeEventListener("wheel", el._wheel_handlers_.wheel);
+      delete el._wheel_handlers_;
+    }
+  };
+  return {
+    mounted(el, binding) {
+      bindEvents(el);
+    },
+    beforeUnmount(el) {
+      unbindEvents(el);
+    }
+  };
+};
+const _hoisted_1 = { class: "relative inline-block h-full w-full" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { key: 0 };
-const _hoisted_4 = { class: "tdd-pointer-events-none tdd-fixed tdd-top-0 tdd-right-0 tdd-left-0 tdd-bottom-0 tdd-z-1000 tdd-text-center" };
-const _hoisted_5 = { class: "tdd-pointer-events-auto tdd-absolute tdd-top-0 tdd-left-0 tdd-z-10 tdd-flex tdd-w-full tdd-items-center tdd-bg-black tdd-bg-opacity-10" };
+const _hoisted_4 = { class: "pointer-events-none fixed top-0 right-0 left-0 bottom-0 z-1000 text-center" };
+const _hoisted_5 = { class: "pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center bg-black bg-opacity-10" };
 const _hoisted_6 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "image",
@@ -15,80 +163,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["openPreview", "closePreview"],
   setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const vWheel = {
-      mounted(el, binding) {
-        function documentHandler(e) {
-          if (el.contains(e.target)) {
-            binding.value && binding.value(e);
-          } else {
-            return false;
-          }
-        }
-        el._vueWheel_ = documentHandler;
-        document.addEventListener("wheel", el._vueWheel_);
+    const draggableConfig = {
+      throttleWait: 16,
+      onDrag: (pos) => {
+        transX.value = pos.x;
+        transY.value = pos.y;
+        ImgIsMoving.value = true;
       },
-      beforeUnmount(el) {
-        document.removeEventListener("wheel", el._vueWheel_);
-        delete el._vueWheel_;
+      onDragEnd: () => {
+        ImgIsMoving.value = false;
       }
     };
-    const ImgIsMoving = ref(false);
-    const vMove = {
-      mounted(el, binding) {
-        let mouseX = 0, mouseY = 0, originBoxX = 0, originBoxY = 0;
-        function setMoveHandle(e) {
-          e.preventDefault();
-          const distanceX = e.pageX - mouseX;
-          const distanceY = e.pageY - mouseY;
-          binding.value && binding.value(distanceX + originBoxX, distanceY + originBoxY);
-        }
-        function downHandle(e) {
-          e.preventDefault();
-          originBoxX = el.offsetLeft + transX.value;
-          originBoxY = el.offsetTop + transY.value;
-          mouseX = e.pageX;
-          mouseY = e.pageY;
-          ImgIsMoving.value = true;
-          el._vueMove_ = throttle(setMoveHandle, 60);
-          window.addEventListener("mousemove", el._vueMove_);
-        }
-        function upHandle() {
-          ImgIsMoving.value = false;
-          if (el._vueMove_) {
-            window.removeEventListener("mousemove", el._vueMove_);
-          }
-          nextTick(() => {
-            if (scaleNumber.value === 1) {
-              transX.value = 0;
-              transY.value = 0;
-            }
-          });
-        }
-        el._vueDown_ = downHandle;
-        el._vueUp_ = upHandle;
-        el.addEventListener("mousedown", el._vueDown_);
-        el.addEventListener("mouseup", el._vueUp_);
-        window.addEventListener("mouseup", el._vueUp_);
-      },
-      beforeUnmount(el) {
-        if (el._vueDown_) {
-          document.removeEventListener("mousedown", el._vueDown_);
-          delete el._vueDown_;
-        }
-        if (el._vueUp_) {
-          document.removeEventListener("mouseup", el._vueUp_);
-          window.removeEventListener("mouseup", el._vueUp_);
-          delete el._vueUp_;
+    const wheelConfig = {
+      onWheel: (e) => {
+        if (e.deltaY > 0) {
+          scaleNumber.value = scaleNumber.value > 1 ? scaleNumber.value - 1 : 1;
+        } else {
+          scaleNumber.value += 1;
         }
       }
     };
+    const vMove = createDraggableDirective(draggableConfig);
+    const vWheel = createWheelDirective(wheelConfig);
+    const emit = __emit;
+    const ImgIsMoving = ref(false);
     const showBig = ref(false);
     watch(showBig, (val) => {
       if (val === true) {
-        document.body.classList.add("tdd-overflow-hidden");
+        document.body.classList.add("overflow-hidden");
       } else {
-        document.body.classList.remove("tdd-overflow-hidden");
+        document.body.classList.remove("overflow-hidden");
       }
     });
     const showPreview = () => {
@@ -103,21 +207,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       transY.value = 0;
       rotateNumber.value = 0;
     };
-    const scaleNumber = ref(1);
-    const rotateNumber = ref(0);
-    const wheelHandle = (e) => {
-      if (e.deltaY > 0) {
-        scaleNumber.value = scaleNumber.value > 1 ? scaleNumber.value - 1 : 1;
-      } else {
-        scaleNumber.value += 1;
-      }
-    };
-    const moveHandle = (x, y) => {
-      transX.value = x;
-      transY.value = y;
-    };
     const transX = ref(0);
     const transY = ref(0);
+    const scaleNumber = ref(1);
+    const rotateNumber = ref(0);
     const leftRotate = () => {
       rotateNumber.value -= 90;
     };
@@ -128,26 +221,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", _hoisted_1, [
           createElementVNode("img", {
-            class: "tdd-w-full tdd-align-middle",
+            class: "w-full align-middle",
             src: _ctx.src
           }, null, 8, _hoisted_2),
           _ctx.preview ? (openBlock(), createElementBlock("div", {
             key: 0,
             onClick: showPreview,
-            class: "tdd-absolute tdd-top-0 tdd-right-0 tdd-left-0 tdd-bottom-0 tdd-flex tdd-cursor-pointer tdd-items-center tdd-justify-center tdd-bg-black tdd-bg-opacity-50 tdd-text-white tdd-opacity-0 tdd-transition-opacity hover:tdd-opacity-100"
-          }, _cache[0] || (_cache[0] = [
-            createElementVNode("svg", {
-              viewBox: "64 64 896 896",
-              focusable: "false",
-              "data-icon": "eye",
-              width: "1em",
-              height: "1em",
-              fill: "currentColor",
-              "aria-hidden": "true"
-            }, [
-              createElementVNode("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" })
-            ], -1)
-          ]))) : createCommentVNode("", true),
+            class: "absolute top-0 right-0 left-0 bottom-0 flex cursor-pointer items-center justify-center bg-black bg-opacity-50 text-white opacity-0 transition-opacity hover:opacity-100"
+          }, [
+            createVNode(EyeIcon)
+          ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
@@ -155,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               showBig.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
                 createElementVNode("div", {
-                  class: "tdd-pointer-events-auto tdd-fixed tdd-top-0 tdd-right-0 tdd-left-0 tdd-bottom-0 tdd-z-1000 tdd-bg-black tdd-bg-opacity-30",
+                  class: "pointer-events-auto fixed top-0 right-0 left-0 bottom-0 z-1000 bg-black bg-opacity-30",
                   key: "1",
                   onClick: hidenPreview
                 }),
@@ -163,77 +246,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", _hoisted_5, [
                     createElementVNode("button", {
                       type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
+                      class: "flex h-10 w-10 items-center justify-center text-white",
                       onClick: hidenPreview
-                    }, _cache[1] || (_cache[1] = [
-                      createElementVNode("svg", {
-                        viewBox: "64 64 896 896",
-                        focusable: "false",
-                        "data-icon": "close",
-                        width: "1em",
-                        height: "1em",
-                        fill: "currentColor",
-                        "aria-hidden": "true"
-                      }, [
-                        createElementVNode("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
-                      ], -1)
-                    ])),
+                    }, [
+                      createVNode(delIcon)
+                    ]),
                     createElementVNode("button", {
                       type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
+                      class: "flex h-10 w-10 items-center justify-center text-white",
                       onClick: withModifiers(leftRotate, ["stop"])
-                    }, _cache[2] || (_cache[2] = [
-                      createElementVNode("svg", {
-                        viewBox: "64 64 896 896",
-                        focusable: "false",
-                        "data-icon": "rotate-left",
-                        width: "1em",
-                        height: "1em",
-                        fill: "currentColor",
-                        "aria-hidden": "true"
-                      }, [
-                        createElementVNode("path", { d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" }),
-                        createElementVNode("path", { d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" })
-                      ], -1)
-                    ])),
+                    }, [
+                      createVNode(turnLeftIcon)
+                    ]),
                     createElementVNode("button", {
                       type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
+                      class: "flex h-10 w-10 items-center justify-center text-white",
                       onClick: withModifiers(rightRotate, ["stop"])
-                    }, _cache[3] || (_cache[3] = [
-                      createElementVNode("svg", {
-                        viewBox: "64 64 896 896",
-                        focusable: "false",
-                        "data-icon": "rotate-right",
-                        width: "1em",
-                        height: "1em",
-                        fill: "currentColor",
-                        "aria-hidden": "true"
-                      }, [
-                        createElementVNode("path", { d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" }),
-                        createElementVNode("path", { d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" })
-                      ], -1)
-                    ]))
+                    }, [
+                      createVNode(turnRightIcon)
+                    ])
                   ]),
                   withDirectives((openBlock(), createElementBlock("div", {
-                    class: "Eimage-content tdd-absolute tdd-top-0 tdd-right-0 tdd-left-0 tdd-bottom-0 tdd-transition-transform",
+                    class: "absolute top-0 right-0 left-0 bottom-0 transition-transform before:inline-block before:w-[1px] before:h-1/2 before:-mr-px before:content-['']",
                     style: normalizeStyle({ transform: `translate3d(${transX.value}px, ${transY.value}px, 0px)` })
                   }, [
                     createElementVNode("img", {
                       src: _ctx.src,
                       class: normalizeClass([{
-                        "tdd-cursor-grab": !ImgIsMoving.value,
-                        "tdd-cursor-grabbing": ImgIsMoving.value
-                      }, "tdd-pointer-events-auto tdd-inline tdd-max-h-full tdd-max-w-full tdd-select-none tdd-transition-transform tdd-duration-300"]),
+                        "cursor-grab": !ImgIsMoving.value,
+                        "cursor-grabbing": ImgIsMoving.value
+                      }, "pointer-events-auto inline max-h-full max-w-full select-none transition-transform duration-300"]),
                       style: normalizeStyle({
                         transform: `scale3d(${scaleNumber.value}, ${scaleNumber.value}, 1) rotate(${rotateNumber.value}deg)`
                       })
                     }, null, 14, _hoisted_6)
                   ], 4)), [
-                    [vMove, moveHandle]
+                    [unref(vMove)]
                   ])
                 ])), [
-                  [vWheel, wheelHandle]
+                  [unref(vWheel)]
                 ])
               ])) : createCommentVNode("", true)
             ]),
@@ -244,7 +295,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const image_vue_vue_type_style_index_0_lang = "";
 export {
   _sfc_main as default
 };