ninemoon-ui 0.0.26 → 0.1.0

package/dist/js/image/image.js

@@ -1,259 +0,0 @@
-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" };
-const _hoisted_2 = ["src"];
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("svg", {
-  viewBox: "64 64 896 896",
-  focusable: "false",
-  "data-icon": "eye",
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true"
-}, [
-  /* @__PURE__ */ 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);
-const _hoisted_4 = [
-  _hoisted_3
-];
-const _hoisted_5 = { key: 0 };
-const _hoisted_6 = { 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_7 = { 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_8 = /* @__PURE__ */ createElementVNode("svg", {
-  viewBox: "64 64 896 896",
-  focusable: "false",
-  "data-icon": "close",
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true"
-}, [
-  /* @__PURE__ */ 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);
-const _hoisted_9 = [
-  _hoisted_8
-];
-const _hoisted_10 = ["onClick"];
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("svg", {
-  viewBox: "64 64 896 896",
-  focusable: "false",
-  "data-icon": "rotate-left",
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true"
-}, [
-  /* @__PURE__ */ 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" }),
-  /* @__PURE__ */ 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);
-const _hoisted_12 = [
-  _hoisted_11
-];
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("svg", {
-  viewBox: "64 64 896 896",
-  focusable: "false",
-  "data-icon": "rotate-right",
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true"
-}, [
-  /* @__PURE__ */ 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" }),
-  /* @__PURE__ */ 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);
-const _hoisted_15 = [
-  _hoisted_14
-];
-const _hoisted_16 = ["src"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "image",
-  props: {
-    src: {},
-    width: {},
-    preview: { type: Boolean, default: true }
-  },
-  emits: ["openPreview", "closePreview"],
-  setup(__props, { 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_);
-      },
-      beforeUnmount(el) {
-        document.removeEventListener("wheel", el._vueWheel_);
-        delete el._vueWheel_;
-      }
-    };
-    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 showBig = ref(false);
-    watch(showBig, (val) => {
-      if (val === true) {
-        document.body.classList.add("tdd-overflow-hidden");
-      } else {
-        document.body.classList.remove("tdd-overflow-hidden");
-      }
-    });
-    const showPreview = () => {
-      emit("openPreview");
-      showBig.value = true;
-    };
-    const hidenPreview = () => {
-      emit("closePreview");
-      showBig.value = false;
-      scaleNumber.value = 1;
-      transX.value = 0;
-      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 leftRotate = () => {
-      rotateNumber.value -= 90;
-    };
-    const rightRotate = () => {
-      rotateNumber.value += 90;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("img", {
-            class: "tdd-w-full tdd-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"
-          }, _hoisted_4)) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(Transition, { name: "opacity" }, {
-            default: withCtx(() => [
-              showBig.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                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",
-                  key: "1",
-                  onClick: hidenPreview
-                }),
-                withDirectives((openBlock(), createElementBlock("div", _hoisted_6, [
-                  createElementVNode("div", _hoisted_7, [
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
-                      onClick: hidenPreview
-                    }, _hoisted_9),
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
-                      onClick: withModifiers(leftRotate, ["stop"])
-                    }, _hoisted_12, 8, _hoisted_10),
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "tdd-flex tdd-h-10 tdd-w-10 tdd-items-center tdd-justify-center tdd-text-white",
-                      onClick: withModifiers(rightRotate, ["stop"])
-                    }, _hoisted_15, 8, _hoisted_13)
-                  ]),
-                  withDirectives((openBlock(), createElementBlock("div", {
-                    class: "Eimage-content tdd-absolute tdd-top-0 tdd-right-0 tdd-left-0 tdd-bottom-0 tdd-transition-transform",
-                    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"]),
-                      style: normalizeStyle({
-                        transform: `scale3d(${scaleNumber.value}, ${scaleNumber.value}, 1) rotate(${rotateNumber.value}deg)`
-                      })
-                    }, null, 14, _hoisted_16)
-                  ], 4)), [
-                    [vMove, moveHandle]
-                  ])
-                ])), [
-                  [vWheel, wheelHandle]
-                ])
-              ])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })
-        ]))
-      ], 64);
-    };
-  }
-});
-const image_vue_vue_type_style_index_0_lang = "";
-export {
-  _sfc_main as default
-};