@nmorph/nmorph-ui-kit 2.2.56 → 2.2.57

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js

@@ -0,0 +1,152 @@
+import './NmorphImagePreview.css';
+import { defineComponent as $, ref as g, watch as h, computed as t, onBeforeUnmount as Z } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as U } from "../../../utils/common.js";
+import J from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import Q from "../../../assets/icons/shrink.svg.js";
+import W from "../../../assets/icons/rotate-right.svg.js";
+import X from "../../../assets/icons/rotate-left.svg.js";
+import Y from "../../../assets/icons/zoom-in.svg.js";
+import ee from "../../../assets/icons/zoom-out.svg.js";
+import re from "../../../assets/icons/enlarge.svg.js";
+import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ae from "../../basic/nmorph-button/NmorphButton.vue.js";
+import oe from "../nmorph-image/NmorphImage.vue.js";
+const Ne = /* @__PURE__ */ $({
+  __name: "NmorphImagePreview",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    alt: { type: String, required: !1, default: "" },
+    initialIndex: { type: Number, required: !1, default: 0 },
+    src: { type: [String, Array], required: !0 },
+    scaleStep: { type: Number, required: !1, default: 0.2 },
+    minScaleLevel: { type: Number, required: !1, default: 0.2 },
+    maxScaleLevel: { type: Number, required: !1, default: 4 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    showTrigger: { type: Boolean, required: !1, default: !0 },
+    showNavigationButtons: { type: Boolean, required: !1, default: !0 },
+    showActionBar: { type: Boolean, required: !1, default: !0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    radius: { type: [Number, String], required: !1, default: void 0 },
+    fit: { type: String, required: !1, default: "cover" },
+    navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 },
+    triggerView: { type: String, required: !1, default: "single" },
+    triggerLimit: { type: Number, required: !1, default: void 0 },
+    triggerGap: { type: [Number, String], required: !1, default: 8 }
+  },
+  emits: ["update:model-value"],
+  setup(V, { expose: C, emit: K }) {
+    C();
+    const r = V, i = g(r.modelValue);
+    h(
+      () => r.modelValue,
+      (e) => i.value = e
+    );
+    const a = t(() => Array.isArray(r.src) ? r.src : [r.src]), s = (e) => {
+      const l = a.value.length - 1;
+      return l < 0 || e < 0 ? 0 : e > l ? l : e;
+    }, u = g(s(r.initialIndex)), d = t(() => s(u.value)), H = t(() => a.value[d.value] || ""), c = t(() => r.triggerView === "gallery" && a.value.length > 1), y = t(() => !r.triggerLimit || r.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(r.triggerLimit), a.value.length)), m = t(
+      () => a.value.slice(0, y.value).map((e, l) => ({
+        index: l,
+        src: e
+      }))
+    ), M = t(() => a.value.length - m.value.length), P = t(() => m.value[m.value.length - 1]?.index ?? -1), R = t(
+      () => j({
+        "nmorph-image-preview": [i.value && "opened", c.value && "gallery-trigger"]
+      })
+    ), o = g(1);
+    h(
+      () => [r.initialIndex, a.value.length],
+      () => {
+        u.value = s(r.initialIndex);
+      }
+    );
+    const N = (e) => {
+      u.value = s(e), i.value = !0, p("update:model-value", i.value);
+    }, z = () => {
+      c.value || N(d.value);
+    }, F = () => {
+      i.value = !1, p("update:model-value", i.value);
+    }, S = () => {
+      n.value = n.value + 90, n.value >= 360 && (n.value = 0);
+    }, I = () => {
+      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
+    }, w = () => {
+      o.value < r.maxScaleLevel && (o.value += r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, L = () => {
+      o.value > r.minScaleLevel && (o.value -= r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, b = t(() => o.value < 1), q = () => {
+      o.value = 1;
+    }, x = () => {
+      o.value = 1;
+    }, n = g(0), B = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value - 1;
+      u.value = l < 0 ? e - 1 : l;
+    }, _ = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value + 1;
+      u.value = l > e - 1 ? 0 : l;
+    }, f = (e) => {
+      !i.value || a.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), B()), e.key === "ArrowRight" && (e.preventDefault(), _()));
+    }, k = () => {
+      typeof document > "u" || document.addEventListener("keydown", f);
+    }, v = () => {
+      typeof document > "u" || document.removeEventListener("keydown", f);
+    };
+    h(
+      i,
+      (e) => {
+        e ? k() : v();
+      },
+      { immediate: !0 }
+    ), Z(v);
+    const D = t(() => {
+      let e = {
+        icon: Q,
+        handler: x
+      };
+      return b.value && (e = {
+        icon: re,
+        handler: q
+      }), e;
+    }), E = [
+      {
+        icon: W,
+        handler: S
+      },
+      {
+        icon: X,
+        handler: I
+      },
+      {
+        icon: Y,
+        handler: w
+      },
+      {
+        icon: ee,
+        handler: L
+      }
+    ], p = K, T = t(() => a.value.length > 1), G = t(() => r.showNavigationButtons && T.value), O = t(
+      () => U({
+        "--width": r.width,
+        "--height": r.height,
+        "--nmorph-image-preview-radius": r.radius,
+        "--nmorph-image-preview-trigger-gap": r.triggerGap
+      })
+    ), A = { props: r, open: i, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: d, triggerSource: H, showGalleryTrigger: c, triggerSourceLimit: y, triggerSources: m, hiddenTriggerCount: M, lastVisibleTriggerIndex: P, modifiers: R, scaleLevel: o, openPreviewAt: N, clickHandler: z, closeHandler: F, rotateRight: S, rotateLeft: I, zoomIn: w, zoomOut: L, isLevelChangedToMin: b, enlargeToNormal: q, shrinkToNormal: x, rotateLevel: n, previousHandler: B, nextHandler: _, keyboardNavigationHandler: f, addKeyboardNavigationListener: k, removeKeyboardNavigationListener: v, enlargeShrinkActionData: D, actions: E, emit: p, multipleSources: T, showNavigation: G, triggerStyle: O, getTriggerLabel: (e) => r.alt ? `${r.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
+      return oe;
+    }, get NmorphButton() {
+      return ae;
+    }, get NmorphIcon() {
+      return te;
+    }, NmorphPreviewPortal: J };
+    return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
+  }
+});
+export {
+  Ne as default
+};