@nmorph/nmorph-ui-kit 2.2.42 → 2.2.43

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -1 +1 @@
-.nmorph-icon{display:flex;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-icon{--color: var(--nmorph-icon-color, var(--nmorph-text-color))}
+.nmorph-icon,.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-icon{--color: var(--nmorph-icon-color, var(--nmorph-text-color))}

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

@@ -1,35 +1,35 @@
 import './NmorphImagePreview.css';
-import { defineComponent as de, ref as k, watch as H, computed as a, openBlock as n, createElementBlock as m, Fragment as L, normalizeStyle as N, normalizeClass as R, createElementVNode as h, renderList as G, withModifiers as ve, createVNode as i, unref as o, createSlots as b, withCtx as l, renderSlot as g, toDisplayString as me, createCommentVNode as p, createBlock as $, Teleport as ce, resolveDynamicComponent as P } from "vue";
-import { useModifiers as ge } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Z } from "../../../utils/common.js";
-import pe from "../../../assets/icons/shrink.svg.js";
-import B from "../nmorph-image/NmorphImage.vue.js";
+import { defineComponent as ce, ref as k, watch as S, computed as o, onBeforeUnmount as ge, openBlock as n, createElementBlock as c, Fragment as N, normalizeStyle as b, normalizeClass as Z, createElementVNode as h, renderList as U, withModifiers as fe, createVNode as i, unref as a, createSlots as B, withCtx as r, renderSlot as g, toDisplayString as pe, createCommentVNode as f, createBlock as $, Teleport as he, resolveDynamicComponent as j } from "vue";
+import { useModifiers as ye } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as q } from "../../../utils/common.js";
+import _e from "../../../assets/icons/shrink.svg.js";
+import x from "../nmorph-image/NmorphImage.vue.js";
 /* empty css                               */
-import fe from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import we from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 /* empty css                                             */
 import I from "../../basic/nmorph-button/NmorphButton.vue.js";
 /* empty css                                          */
-import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import K from "../../../assets/icons/chevron-down.svg.js";
-import he from "../../../assets/icons/rotate-right.svg.js";
-import _e from "../../../assets/icons/rotate-left.svg.js";
-import ye from "../../../assets/icons/zoom-in.svg.js";
-import we from "../../../assets/icons/zoom-out.svg.js";
-import ke from "../../../assets/icons/enlarge.svg.js";
-const $e = ["aria-label", "onClick"], Ie = {
+import J from "../../../assets/icons/chevron-down.svg.js";
+import ke from "../../../assets/icons/rotate-right.svg.js";
+import $e from "../../../assets/icons/rotate-left.svg.js";
+import Ie from "../../../assets/icons/zoom-in.svg.js";
+import Le from "../../../assets/icons/zoom-out.svg.js";
+import Ce from "../../../assets/icons/enlarge.svg.js";
+const Se = ["aria-label", "onClick"], Ne = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
-}, Ce = { class: "nmorph-image-preview__content" }, Se = {
+}, be = { class: "nmorph-image-preview__content" }, Be = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, Le = {
+}, xe = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, Ne = {
+}, Te = {
   key: 2,
   class: "nmorph-image-preview__actions"
-}, be = { class: "nmorph-image-preview__action-element" }, qe = /* @__PURE__ */ de({
+}, Ve = { class: "nmorph-image-preview__action-element" }, We = /* @__PURE__ */ ce({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -53,238 +53,252 @@ const $e = ["aria-label", "onClick"], Ie = {
     triggerGap: { default: 8 }
   },
   emits: ["update:model-value"],
-  setup(j, { emit: q }) {
-    const t = j, c = k(t.modelValue);
-    H(
+  setup(Q, { emit: W }) {
+    const t = Q, d = k(t.modelValue);
+    S(
       () => t.modelValue,
-      (e) => c.value = e
+      (e) => d.value = e
     );
-    const u = a(() => Array.isArray(t.src) ? t.src : [t.src]), _ = (e) => {
-      const s = u.value.length - 1;
-      return s < 0 || e < 0 ? 0 : e > s ? s : e;
-    }, f = k(_(t.initialIndex)), y = a(() => _(f.value)), x = a(() => u.value[y.value] || ""), S = a(() => t.triggerView === "gallery" && u.value.length > 1), J = a(() => !t.triggerLimit || t.triggerLimit < 1 ? u.value.length : Math.min(Math.floor(t.triggerLimit), u.value.length)), w = a(
-      () => u.value.slice(0, J.value).map((e, s) => ({
-        index: s,
+    const s = o(() => Array.isArray(t.src) ? t.src : [t.src]), y = (e) => {
+      const u = s.value.length - 1;
+      return u < 0 || e < 0 ? 0 : e > u ? u : e;
+    }, p = k(y(t.initialIndex)), _ = o(() => y(p.value)), T = o(() => s.value[_.value] || ""), C = o(() => t.triggerView === "gallery" && s.value.length > 1), X = o(() => !t.triggerLimit || t.triggerLimit < 1 ? s.value.length : Math.min(Math.floor(t.triggerLimit), s.value.length)), w = o(
+      () => s.value.slice(0, X.value).map((e, u) => ({
+        index: u,
         src: e
       }))
-    ), T = a(() => u.value.length - w.value.length), Q = a(() => w.value[w.value.length - 1]?.index ?? -1), V = a(
-      () => ge({
-        "nmorph-image-preview": [c.value && "opened", S.value && "gallery-trigger"]
+    ), V = o(() => s.value.length - w.value.length), Y = o(() => w.value[w.value.length - 1]?.index ?? -1), z = o(
+      () => ye({
+        "nmorph-image-preview": [d.value && "opened", C.value && "gallery-trigger"]
       })
-    ), r = k(1);
-    H(
-      () => [t.initialIndex, u.value.length],
+    ), l = k(1);
+    S(
+      () => [t.initialIndex, s.value.length],
       () => {
-        f.value = _(t.initialIndex);
+        p.value = y(t.initialIndex);
       }
     );
-    const z = (e) => {
-      f.value = _(e), c.value = !0, F("update:model-value", c.value);
-    }, U = () => {
-      S.value || z(y.value);
-    }, M = () => {
-      c.value = !1, F("update:model-value", c.value);
-    }, W = () => {
+    const A = (e) => {
+      p.value = y(e), d.value = !0, O("update:model-value", d.value);
+    }, ee = () => {
+      C.value || A(_.value);
+    }, K = () => {
+      d.value = !1, O("update:model-value", d.value);
+    }, te = () => {
       v.value = v.value + 90, v.value >= 360 && (v.value = 0);
-    }, X = () => {
+    }, oe = () => {
       v.value = v.value - 90, v.value <= -360 && (v.value = 0);
-    }, Y = () => {
-      r.value < t.maxScaleLevel && (r.value += t.scaleStep), r.value = parseFloat(r.value.toFixed(3));
-    }, ee = () => {
-      r.value > t.minScaleLevel && (r.value -= t.scaleStep), r.value = parseFloat(r.value.toFixed(3));
-    }, te = a(() => r.value < 1), ae = () => {
-      r.value = 1;
-    }, le = () => {
-      r.value = 1;
-    }, v = k(0), oe = () => {
-      const e = u.value.length;
-      if (!e) return;
-      const s = y.value - 1;
-      f.value = s < 0 ? e - 1 : s;
     }, re = () => {
-      const e = u.value.length;
+      l.value < t.maxScaleLevel && (l.value += t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
+    }, ae = () => {
+      l.value > t.minScaleLevel && (l.value -= t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
+    }, le = o(() => l.value < 1), ne = () => {
+      l.value = 1;
+    }, ie = () => {
+      l.value = 1;
+    }, v = k(0), M = () => {
+      const e = s.value.length;
       if (!e) return;
-      const s = y.value + 1;
-      f.value = s > e - 1 ? 0 : s;
-    }, A = a(() => {
+      const u = _.value - 1;
+      p.value = u < 0 ? e - 1 : u;
+    }, D = () => {
+      const e = s.value.length;
+      if (!e) return;
+      const u = _.value + 1;
+      p.value = u > e - 1 ? 0 : u;
+    }, E = (e) => {
+      !d.value || s.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), M()), e.key === "ArrowRight" && (e.preventDefault(), D()));
+    }, se = () => {
+      typeof document > "u" || document.addEventListener("keydown", E);
+    }, F = () => {
+      typeof document > "u" || document.removeEventListener("keydown", E);
+    };
+    S(
+      d,
+      (e) => {
+        e ? se() : F();
+      },
+      { immediate: !0 }
+    ), ge(F);
+    const H = o(() => {
       let e = {
-        icon: pe,
-        handler: le
+        icon: _e,
+        handler: ie
       };
-      return te.value && (e = {
-        icon: ke,
-        handler: ae
+      return le.value && (e = {
+        icon: Ce,
+        handler: ne
       }), e;
-    }), ne = [
+    }), ue = [
       {
-        icon: he,
-        handler: W
+        icon: ke,
+        handler: te
       },
       {
-        icon: _e,
-        handler: X
+        icon: $e,
+        handler: oe
       },
       {
-        icon: ye,
-        handler: Y
+        icon: Ie,
+        handler: re
       },
       {
-        icon: we,
-        handler: ee
+        icon: Le,
+        handler: ae
       }
-    ], F = q, ie = a(() => u.value.length > 1), O = a(() => t.showNavigationButtons && ie.value), se = a(
-      () => Z({
+    ], O = W, de = o(() => s.value.length > 1), R = o(() => t.showNavigationButtons && de.value), me = o(
+      () => q({
         "--width": t.width,
         "--height": t.height,
         "--nmorph-image-preview-radius": t.radius,
         "--nmorph-image-preview-trigger-gap": t.triggerGap
       })
-    ), ue = a(
-      () => Z({
+    ), ve = o(
+      () => q({
         "--nmorph-image-preview-btn-margin": t.navigationButtonMargin
       })
-    ), D = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
-    return (e, s) => (n(), m(L, null, [
-      t.showTrigger ? (n(), m("div", {
+    ), G = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
+    return (e, u) => (n(), c(N, null, [
+      t.showTrigger ? (n(), c("div", {
         key: 0,
-        class: R(V.value),
-        style: N(se.value)
+        class: Z(z.value),
+        style: b(me.value)
       }, [
         h("div", {
           class: "nmorph-image-preview__trigger",
-          onClick: U
+          onClick: ee
         }, [
-          S.value ? (n(!0), m(L, { key: 0 }, G(w.value, (d) => (n(), m("button", {
-            key: `${d.src}-${d.index}`,
+          C.value ? (n(!0), c(N, { key: 0 }, U(w.value, (m) => (n(), c("button", {
+            key: `${m.src}-${m.index}`,
             type: "button",
             class: "nmorph-image-preview__trigger-item",
-            "aria-label": D(d.index),
-            onClick: ve((E) => z(d.index), ["stop"])
+            "aria-label": G(m.index),
+            onClick: fe((P) => A(m.index), ["stop"])
           }, [
-            i(o(B), {
-              src: d.src,
-              alt: D(d.index),
+            i(a(x), {
+              src: m.src,
+              alt: G(m.index),
               fit: t.fit,
               "frame-border": 0
-            }, b({ _: 2 }, [
+            }, B({ _: 2 }, [
               e.$slots.loading ? {
                 name: "loading",
-                fn: l(() => [
+                fn: r(() => [
                   g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: l(() => [
+                fn: r(() => [
                   g(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
             ]), 1032, ["src", "alt", "fit"]),
-            d.index === Q.value && T.value > 0 ? (n(), m("span", Ie, " +" + me(T.value), 1)) : p("", !0)
-          ], 8, $e))), 128)) : (n(), $(o(B), {
+            m.index === Y.value && V.value > 0 ? (n(), c("span", Ne, " +" + pe(V.value), 1)) : f("", !0)
+          ], 8, Se))), 128)) : (n(), $(a(x), {
             key: 1,
-            src: x.value,
+            src: T.value,
             alt: t.alt,
             fit: t.fit,
             "frame-border": 0
-          }, b({ _: 2 }, [
+          }, B({ _: 2 }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: l(() => [
+              fn: r(() => [
                 g(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: l(() => [
+              fn: r(() => [
                 g(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["src", "alt", "fit"]))
         ])
-      ], 6)) : p("", !0),
-      c.value ? (n(), $(ce, {
+      ], 6)) : f("", !0),
+      d.value ? (n(), $(he, {
         key: 1,
         to: "body"
       }, [
         h("div", {
-          class: R(["nmorph-image-preview__portal", V.value]),
-          style: N(ue.value)
+          class: Z(["nmorph-image-preview__portal", z.value]),
+          style: b(ve.value)
         }, [
-          i(o(fe), {
-            show: c.value,
+          i(a(we), {
+            show: d.value,
             "z-index": t.zIndex,
             "disabled-teleport": "",
-            onOnOutsideClick: M,
-            onOnEscapeKeydown: M
+            onOnOutsideClick: K,
+            onOnEscapeKeydown: K
           }, {
-            default: l(() => [
-              h("div", Ce, [
-                i(o(B), {
-                  src: x.value,
+            default: r(() => [
+              h("div", be, [
+                i(a(x), {
+                  src: T.value,
                   alt: t.alt,
                   fit: "contain",
                   "frame-border": 0,
-                  style: N({ transform: `rotate(${v.value}deg) scale(${r.value})` })
-                }, b({ _: 2 }, [
+                  style: b({ transform: `rotate(${v.value}deg) scale(${l.value})` })
+                }, B({ _: 2 }, [
                   e.$slots.loading ? {
                     name: "loading",
-                    fn: l(() => [
+                    fn: r(() => [
                       g(e.$slots, "loading")
                     ]),
                     key: "0"
                   } : void 0,
                   e.$slots.error ? {
                     name: "error",
-                    fn: l(() => [
+                    fn: r(() => [
                       g(e.$slots, "error")
                     ]),
                     key: "1"
                   } : void 0
                 ]), 1032, ["src", "alt", "style"])
               ]),
-              O.value ? (n(), m("div", Se, [
-                i(o(I), { onClick: oe }, {
-                  default: l(() => [
-                    i(o(C), null, {
-                      default: l(() => [
-                        i(o(K))
+              R.value ? (n(), c("div", Be, [
+                i(a(I), { onClick: M }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
                       _: 1
                     })
                   ]),
                   _: 1
                 })
-              ])) : p("", !0),
-              O.value ? (n(), m("div", Le, [
-                i(o(I), { onClick: re }, {
-                  default: l(() => [
-                    i(o(C), null, {
-                      default: l(() => [
-                        i(o(K))
+              ])) : f("", !0),
+              R.value ? (n(), c("div", xe, [
+                i(a(I), { onClick: D }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
                       _: 1
                     })
                   ]),
                   _: 1
                 })
-              ])) : p("", !0),
-              t.showActionBar ? (n(), m("div", Ne, [
-                (n(), m(L, null, G(ne, (d, E) => h("div", {
-                  key: E,
+              ])) : f("", !0),
+              t.showActionBar ? (n(), c("div", Te, [
+                (n(), c(N, null, U(ue, (m, P) => h("div", {
+                  key: P,
                   class: "nmorph-image-preview__action-element"
                 }, [
-                  i(o(I), {
-                    onClick: d.handler
+                  i(a(I), {
+                    onClick: m.handler
                   }, {
-                    default: l(() => [
-                      i(o(C), null, {
-                        default: l(() => [
-                          (n(), $(P(d.icon)))
+                    default: r(() => [
+                      i(a(L), null, {
+                        default: r(() => [
+                          (n(), $(j(m.icon)))
                         ]),
                         _: 2
                       }, 1024)
@@ -292,15 +306,15 @@ const $e = ["aria-label", "onClick"], Ie = {
                     _: 2
                   }, 1032, ["onClick"])
                 ])), 64)),
-                h("div", be, [
-                  i(o(I), {
-                    disabled: r.value === 1,
-                    onClick: A.value.handler
+                h("div", Ve, [
+                  i(a(I), {
+                    disabled: l.value === 1,
+                    onClick: H.value.handler
                   }, {
-                    default: l(() => [
-                      i(o(C), null, {
-                        default: l(() => [
-                          (n(), $(P(A.value.icon)))
+                    default: r(() => [
+                      i(a(L), null, {
+                        default: r(() => [
+                          (n(), $(j(H.value.icon)))
                         ]),
                         _: 1
                       })
@@ -308,15 +322,15 @@ const $e = ["aria-label", "onClick"], Ie = {
                     _: 1
                   }, 8, ["disabled", "onClick"])
                 ])
-              ])) : p("", !0)
+              ])) : f("", !0)
             ]),
             _: 3
           }, 8, ["show", "z-index"])
         ], 6)
-      ])) : p("", !0)
+      ])) : f("", !0)
     ], 64));
   }
 });
 export {
-  qe as default
+  We as default
 };

package/dist/hooks/use-common-styles.js

@@ -1,18 +1,18 @@
-import { nmorphCombined as i, nmorphInset as s, nmorphOutset as h, title1 as d, title2 as l, title3 as p, title4 as c, body1 as e, body2 as b, body3 as r, body4 as m } from "../utils/theme-style.js";
-const v = {
+import { nmorphCombined as s, nmorphInset as t, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as a, body2 as p, body3 as e, body4 as m } from "../utils/theme-style.js";
+const u = {
   "nmorph-body-4": m,
-  "nmorph-body-3": r,
-  "nmorph-body-2": b,
-  "nmorph-body-1": e,
-  "nmorph-title-4": c,
-  "nmorph-title-3": p,
-  "nmorph-title-2": l,
-  "nmorph-title-1": d,
+  "nmorph-body-3": e,
+  "nmorph-body-2": p,
+  "nmorph-body-1": a,
+  "nmorph-title-4": b,
+  "nmorph-title-3": c,
+  "nmorph-title-2": d,
+  "nmorph-title-1": l,
   "nmorph--shadow-outset": h,
-  "nmorph--shadow-inset": s,
-  "nmorph--shadow-combined": i
-}, u = () => {
-  let t = `
+  "nmorph--shadow-inset": t,
+  "nmorph--shadow-combined": s
+}, w = () => {
+  let r = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -112,7 +112,7 @@ const v = {
       width: auto;
       font-family: Helvetica, Roboto, Arial, sans-serif;
 
-      ${e()}
+      ${a()}
     }
 
     h1 {
@@ -259,6 +259,57 @@ const v = {
       --nmorph-scroll-color-scheme: dark;
     }
 
+    .nmorph-scroll {
+      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
+
+      color-scheme: var(--nmorph-scroll-color-scheme, light);
+      scrollbar-color: var(--thumb-color) transparent;
+      scrollbar-width: thin;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar {
+      width: var(--bar-width);
+      height: var(--bar-height);
+      background-color: transparent;
+      cursor: pointer;
+      transition: width ease-in-out 0.2s;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-button,
+    .nmorph-scroll::-webkit-scrollbar-button:single-button,
+    .nmorph-scroll::-webkit-scrollbar-button:double-button,
+    .nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,
+    .nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,
+    .nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
+    .nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment {
+      display: none !important;
+      width: 0 !important;
+      min-width: 0 !important;
+      max-width: 0 !important;
+      height: 0 !important;
+      min-height: 0 !important;
+      max-height: 0 !important;
+      border: 0 !important;
+      background: transparent !important;
+      background-image: none !important;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-track {
+      border-radius: var(--border-radius-40);
+      ${t()}
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-thumb {
+      background-color: var(--thumb-color);
+      border-radius: var(--border-radius-40);
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
     .nmorph--basic-component {
       --height: var(--default-thickness-component);
 
@@ -284,7 +335,7 @@ const v = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${r()}
+      ${e()}
     }
 
     .nmorph-native-input:focus {
@@ -358,19 +409,19 @@ const v = {
     }
 
   `;
-  for (const [a, n] of Object.entries(v))
-    t += `
-.${a} {
-  ${n()}
+  for (const [n, i] of Object.entries(u))
+    r += `
+.${n} {
+  ${i()}
 }
 `;
-  return t;
+  return r;
 }, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");
-  o.id = "nmorph-common-styles", o.innerHTML = u(), document.head.appendChild(o);
+  o.id = "nmorph-common-styles", o.innerHTML = w(), document.head.appendChild(o);
 };
 export {
-  u as getCommonStyles,
+  w as getCommonStyles,
   g as useCommonStyles
 };