@nmorph/nmorph-ui-kit 2.2.19 → 2.2.20

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

@@ -1,18 +1,18 @@
 import './NmorphImagePreview.css';
-import { defineComponent as A, ref as i, watch as B, computed as u } from "vue";
-import { useModifiers as C } from "../../../utils/create-modifiers.js";
-import F from "../../../assets/icons/shrink.svg.js";
-import H from "../../../assets/icons/rotate-right.svg.js";
-import R from "../../../assets/icons/rotate-left.svg.js";
-import T from "../../../assets/icons/zoom-in.svg.js";
-import z from "../../../assets/icons/zoom-out.svg.js";
-import D from "../../../assets/icons/enlarge.svg.js";
-import V from "../../../assets/icons/chevron-down.svg.js";
-import M from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import P from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import Z from "../../basic/nmorph-button/NmorphButton.vue.js";
-import j from "../nmorph-image/NmorphImage.vue.js";
-const te = /* @__PURE__ */ A({
+import { defineComponent as z, ref as m, watch as A, computed as l } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import H from "../../../assets/icons/shrink.svg.js";
+import R from "../../../assets/icons/rotate-right.svg.js";
+import T from "../../../assets/icons/rotate-left.svg.js";
+import D from "../../../assets/icons/zoom-in.svg.js";
+import V from "../../../assets/icons/zoom-out.svg.js";
+import P from "../../../assets/icons/enlarge.svg.js";
+import Z from "../../../assets/icons/chevron-down.svg.js";
+import $ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import j from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import E from "../../basic/nmorph-button/NmorphButton.vue.js";
+import G from "../nmorph-image/NmorphImage.vue.js";
+const le = /* @__PURE__ */ z({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -23,56 +23,55 @@ const te = /* @__PURE__ */ A({
     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 }
+    showTrigger: { type: Boolean, required: !1, default: !0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(N, { expose: I, emit: y }) {
-    I();
-    const e = N, l = i(e.modelValue);
-    B(
+  setup(y, { expose: S, emit: I }) {
+    S();
+    const e = y, n = m(e.modelValue);
+    A(
       () => e.modelValue,
-      (a) => l.value = a
+      (t) => n.value = t
     );
-    const S = u(
-      () => C({
-        "nmorph-image-preview": [`${l.value && "opened"}`]
+    const b = l(
+      () => F({
+        "nmorph-image-preview": [`${n.value && "opened"}`]
       })
-    ), t = i(e.initialIndex), x = u(() => typeof e.src == "string" ? e.src : e.src[t.value]), r = i(1), _ = () => {
-      l.value = !0, m("update:model-value", l.value);
-    }, q = () => {
-      l.value = !1, m("update:model-value", l.value);
-    }, s = () => {
-      o.value = o.value + 90, o.value >= 360 && (o.value = 0);
+    ), a = m(e.initialIndex), q = l(() => typeof e.src == "string" ? e.src : e.src[a.value]), r = m(1), x = () => {
+      n.value = !0, s("update:model-value", n.value);
+    }, w = () => {
+      n.value = !1, s("update:model-value", n.value);
     }, c = () => {
-      o.value = o.value - 90, o.value <= -360 && (o.value = 0);
+      o.value = o.value + 90, o.value >= 360 && (o.value = 0);
     }, p = () => {
+      o.value = o.value - 90, o.value <= -360 && (o.value = 0);
+    }, d = () => {
       r.value < e.maxScaleLevel && (r.value += e.scaleStep), r.value = parseFloat(r.value.toFixed(3));
     }, v = () => {
       r.value > e.minScaleLevel && (r.value -= e.scaleStep), r.value = parseFloat(r.value.toFixed(3));
-    }, d = u(() => r.value < 1), f = () => {
+    }, f = l(() => r.value < 1), h = () => {
       r.value = 1;
-    }, h = () => {
+    }, g = () => {
       r.value = 1;
-    }, o = i(0), L = () => {
-      const a = e.src.length - 1, n = t.value - 1;
-      n < 0 ? t.value = a : t.value = n;
-    }, b = () => {
-      const a = e.src.length - 1, n = t.value + 1;
-      n > a ? t.value = 0 : t.value = n;
-    }, w = u(() => {
-      let a = {
-        icon: F,
-        handler: h
-      };
-      return d.value && (a = {
-        icon: D,
-        handler: f
-      }), a;
-    }), O = [
-      {
+    }, o = m(0), _ = () => {
+      const t = e.src.length - 1, i = a.value - 1;
+      i < 0 ? a.value = t : a.value = i;
+    }, L = () => {
+      const t = e.src.length - 1, i = a.value + 1;
+      i > t ? a.value = 0 : a.value = i;
+    }, B = l(() => {
+      let t = {
         icon: H,
-        handler: s
-      },
+        handler: g
+      };
+      return f.value && (t = {
+        icon: P,
+        handler: h
+      }), t;
+    }), C = [
       {
         icon: R,
         handler: c
@@ -82,23 +81,34 @@ const te = /* @__PURE__ */ A({
         handler: p
       },
       {
-        icon: z,
+        icon: D,
+        handler: d
+      },
+      {
+        icon: V,
         handler: v
       }
-    ], m = y, k = u(() => Array.isArray(e.src) && e.src.length > 0), g = { props: e, open: l, modifiers: S, currentIndex: t, triggerSource: x, scaleLevel: r, clickHandler: _, closeHandler: q, rotateRight: s, rotateLeft: c, zoomIn: p, zoomOut: v, isLevelChangedToMin: d, enlargeToNormal: f, shrinkToNormal: h, rotateLevel: o, previousHandler: L, nextHandler: b, enlargeShrinkActionData: w, actions: O, emit: m, multipleSources: k, get NmorphImage() {
-      return j;
+    ], s = I, M = l(() => Array.isArray(e.src) && e.src.length > 0), u = (t) => typeof t == "number" ? `${t}px` : t, O = l(() => ({
+      ...e.width !== void 0 && { "--width": u(e.width) },
+      ...e.height !== void 0 && { "--height": u(e.height) }
+    })), k = l(() => ({
+      ...e.navigationButtonMargin !== void 0 && {
+        "--nmorph-image-preview-btn-margin": u(e.navigationButtonMargin)
+      }
+    })), N = { props: e, open: n, modifiers: b, currentIndex: a, triggerSource: q, scaleLevel: r, clickHandler: x, closeHandler: w, rotateRight: c, rotateLeft: p, zoomIn: d, zoomOut: v, isLevelChangedToMin: f, enlargeToNormal: h, shrinkToNormal: g, rotateLevel: o, previousHandler: _, nextHandler: L, enlargeShrinkActionData: B, actions: C, emit: s, multipleSources: M, getCssSize: u, triggerStyle: O, portalStyle: k, get NmorphImage() {
+      return G;
     }, get NmorphButton() {
-      return Z;
+      return E;
     }, get NmorphIcon() {
-      return P;
+      return j;
     }, get NmorphOverlay() {
-      return M;
+      return $;
     }, get NmorphIconChevronDown() {
-      return V;
+      return Z;
     } };
-    return Object.defineProperty(g, "__isScriptSetup", { enumerable: !1, value: !0 }), g;
+    return Object.defineProperty(N, "__isScriptSetup", { enumerable: !1, value: !0 }), N;
   }
 });
 export {
-  te as default
+  le as default
 };

package/dist/components/data/nmorph-progress/NmorphProgress.vue.js

@@ -1,6 +1,6 @@
 import './NmorphProgress.css';
-import p from "./NmorphProgress.vue2.js";
-import { openBlock as e, createElementBlock as o, normalizeStyle as d, normalizeClass as _, createElementVNode as s, renderSlot as n, createTextVNode as t, toDisplayString as a, createCommentVNode as i } from "vue";
+import _ from "./NmorphProgress.vue2.js";
+import { openBlock as e, createElementBlock as s, normalizeStyle as d, normalizeClass as p, createElementVNode as o, renderSlot as c, createTextVNode as n, toDisplayString as a, createCommentVNode as i } from "vue";
 /* empty css                    */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const m = {
@@ -15,26 +15,21 @@ const m = {
 }, k = {
   key: 1,
   class: "nmorph-progress__circle"
-}, S = { class: "nmorph-progress__circle-inner-part" }, z = ["width", "height"], P = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset"];
-function x(c, N, l, r, C, D) {
-  return e(), o(
+}, S = { class: "nmorph-progress__circle-inner-part" }, z = ["width", "height"], x = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset"];
+function N(t, P, l, r, D, V) {
+  return e(), s(
     "div",
     {
-      class: _(r.modifiers),
-      style: d({
-        "--nmorph-progress-percentage": r.displayPercentage,
-        "--nmorph-progress-color": r.color,
-        "--nmorph-progress-animation": r.animation,
-        "--nmorph-progress-circle-size": r.circleContainerSize
-      })
+      class: p(r.modifiers),
+      style: d(r.styles)
     },
     [
-      r.props.type === "linear" ? (e(), o("div", m, [
-        s("div", g, [
-          s("div", f, [
-            l.valueInside ? (e(), o("div", y, [
-              n(c.$slots, "inner-text", {}, () => [
-                t(
+      r.props.type === "linear" ? (e(), s("div", m, [
+        o("div", g, [
+          o("div", f, [
+            l.valueInside ? (e(), s("div", y, [
+              c(t.$slots, "inner-text", {}, () => [
+                n(
                   a(r.displayPercentage),
                   1
                   /* TEXT */
@@ -43,9 +38,9 @@ function x(c, N, l, r, C, D) {
             ])) : i("v-if", !0)
           ])
         ]),
-        l.valueRightSide ? (e(), o("div", v, [
-          n(c.$slots, "right-side", {}, () => [
-            t(
+        l.valueRightSide ? (e(), s("div", v, [
+          c(t.$slots, "right-side", {}, () => [
+            n(
               a(r.displayPercentage),
               1
               /* TEXT */
@@ -53,21 +48,21 @@ function x(c, N, l, r, C, D) {
           ])
         ])) : i("v-if", !0)
       ])) : i("v-if", !0),
-      r.props.type === "circle" ? (e(), o("div", k, [
-        s("div", S, [
-          n(c.$slots, "circle-inner-part", {}, () => [
-            t(
+      r.props.type === "circle" ? (e(), s("div", k, [
+        o("div", S, [
+          c(t.$slots, "circle-inner-part", {}, () => [
+            n(
               a(r.displayPercentage),
               1
               /* TEXT */
             )
           ])
         ]),
-        (e(), o("svg", {
+        (e(), s("svg", {
           width: r.props.circleSize,
           height: r.props.circleSize
         }, [
-          s("circle", {
+          o("circle", {
             ref: "circle",
             class: "nmorph-progress__circle-ring",
             cx: r.props.circleSize / 2,
@@ -75,7 +70,7 @@ function x(c, N, l, r, C, D) {
             r: r.props.circleSize / 2 - 2,
             "stroke-dasharray": r.strokeDasharray,
             "stroke-dashoffset": r.strokeDashoffset
-          }, null, 8, P)
+          }, null, 8, x)
         ], 8, z))
       ])) : i("v-if", !0)
     ],
@@ -83,7 +78,7 @@ function x(c, N, l, r, C, D) {
     /* CLASS, STYLE */
   );
 }
-const E = /* @__PURE__ */ h(p, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-progress/NmorphProgress.vue"]]);
+const E = /* @__PURE__ */ h(_, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-progress/NmorphProgress.vue"]]);
 export {
   E as default
 };

package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphProgress.css';
-import { defineComponent as v, computed as r, ref as a, onMounted as g } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-const q = /* @__PURE__ */ v({
+import { defineComponent as y, computed as r, ref as p, onMounted as S } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+const A = /* @__PURE__ */ y({
   __name: "NmorphProgress",
   props: {
     type: { type: String, required: !1, default: "linear" },
@@ -10,22 +10,33 @@ const q = /* @__PURE__ */ v({
     valueInside: { type: Boolean, required: !1, default: !1 },
     valueRightSide: { type: Boolean, required: !1, default: !0 },
     indeterminate: { type: Boolean, required: !1, default: !1 },
-    circleSize: { type: Number, required: !1, default: 120 }
+    circleSize: { type: Number, required: !1, default: 120 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    widthTransition: { type: String, required: !1, default: void 0 },
+    indeterminateAnimation: { type: String, required: !1, default: void 0 }
   },
-  setup(i, { expose: l }) {
-    l();
-    const e = i, c = r(
-      () => _({
+  setup(d, { expose: f }) {
+    f();
+    const e = d, m = r(
+      () => q({
         "nmorph-progress": []
       })
-    ), u = r(() => Array.isArray(e.color) ? e.color.find((y) => y.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), s = r(() => e.indeterminate ? "var(--animation)" : "none"), o = a(null), t = a(1), p = r(() => `${t.value} ${t.value}`), f = r(() => t.value - e.percentage / 100 * t.value);
-    g(() => {
-      o.value && (t.value = 2 * Math.PI * o.value.r.baseVal.value);
+    ), o = r(() => Array.isArray(e.color) ? e.color.find((n) => n.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), a = r(() => e.indeterminate ? "var(--animation)" : "none"), i = p(null), t = p(1), g = r(() => `${t.value} ${t.value}`), h = r(() => t.value - e.percentage / 100 * t.value);
+    S(() => {
+      i.value && (t.value = 2 * Math.PI * i.value.r.baseVal.value);
     });
-    const d = r(() => `${e.circleSize}px`), m = r(() => `${e.percentage}%`), n = { props: e, modifiers: c, color: u, animation: s, circle: o, circumference: t, strokeDasharray: p, strokeDashoffset: f, circleContainerSize: d, displayPercentage: m };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    const s = r(() => `${e.circleSize}px`), l = r(() => `${e.percentage}%`), u = (n) => typeof n == "number" ? `${n}px` : n, v = r(() => ({
+      "--nmorph-progress-percentage": l.value,
+      "--nmorph-progress-color": o.value,
+      "--nmorph-progress-animation": a.value,
+      "--nmorph-progress-circle-size": s.value,
+      ...e.height !== void 0 && { "--height": u(e.height) },
+      ...e.widthTransition !== void 0 && { "--width-transition": e.widthTransition },
+      ...e.indeterminateAnimation !== void 0 && { "--animation": e.indeterminateAnimation }
+    })), c = { props: e, modifiers: m, color: o, animation: a, circle: i, circumference: t, strokeDasharray: g, strokeDashoffset: h, circleContainerSize: s, displayPercentage: l, getCssSize: u, styles: v };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  q as default
+  A as default
 };

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue.js

@@ -1,24 +1,25 @@
 import './NmorphSkeleton.css';
 import m from "./NmorphSkeleton.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as p, Fragment as c, renderList as d, createBlock as _, createCommentVNode as h, withDirectives as s, createElementVNode as n, renderSlot as l, vShow as i } from "vue";
+import { openBlock as o, createElementBlock as r, normalizeStyle as p, normalizeClass as c, Fragment as d, renderList as _, createBlock as h, createCommentVNode as f, withDirectives as s, createElementVNode as n, renderSlot as l, vShow as i } from "vue";
 /* empty css                    */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = {
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = {
   key: 0,
   class: "nmorph-skeleton__rows"
-}, v = { class: "nmorph-skeleton__template" }, w = { class: "nmorph-skeleton__default" };
-function g(t, N, S, o, u, y) {
-  return e(), r(
+}, w = { class: "nmorph-skeleton__template" }, y = { class: "nmorph-skeleton__default" };
+function S(t, g, N, e, u, B) {
+  return o(), r(
     "div",
     {
-      class: p(o.modifiers)
+      class: c(e.modifiers),
+      style: p(e.styles)
     },
     [
-      o.props.rows && o.props.loading ? (e(), r("div", k, [
-        (e(!0), r(
-          c,
+      e.props.rows && e.props.loading ? (o(), r("div", v, [
+        (o(!0), r(
+          d,
           null,
-          d(o.props.rows, (a) => (e(), _(o.NmorphSkeletonItem, {
+          _(e.props.rows, (a) => (o(), h(e.NmorphSkeletonItem, {
             key: a,
             width: "100%",
             height: "14px",
@@ -27,35 +28,35 @@ function g(t, N, S, o, u, y) {
           128
           /* KEYED_FRAGMENT */
         ))
-      ])) : h("v-if", !0),
+      ])) : f("v-if", !0),
       s(n(
         "div",
-        v,
+        w,
         [
           l(t.$slots, "template")
         ],
         512
         /* NEED_PATCH */
       ), [
-        [i, !o.props.rows && o.props.loading]
+        [i, !e.props.rows && e.props.loading]
       ]),
       s(n(
         "div",
-        w,
+        y,
         [
           l(t.$slots, "default")
         ],
         512
         /* NEED_PATCH */
       ), [
-        [i, !o.props.loading]
+        [i, !e.props.loading]
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const E = /* @__PURE__ */ f(m, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-skeleton/NmorphSkeleton.vue"]]);
+const E = /* @__PURE__ */ k(m, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-skeleton/NmorphSkeleton.vue"]]);
 export {
   E as default
 };

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue2.js

@@ -1,26 +1,29 @@
 import './NmorphSkeleton.css';
-import { defineComponent as a, computed as p } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-import i from "./components/NmorphSkeletonItem.vue.js";
-const d = /* @__PURE__ */ a({
+import { defineComponent as d, computed as o } from "vue";
+import { useModifiers as l } from "../../../utils/create-modifiers.js";
+import s from "./components/NmorphSkeletonItem.vue.js";
+const f = /* @__PURE__ */ d({
   __name: "NmorphSkeleton",
   props: {
     animated: { type: Boolean, required: !1, default: !0 },
     loading: { type: Boolean, required: !1, default: !0 },
-    rows: { type: Number, required: !1, default: 0 }
+    rows: { type: Number, required: !1, default: 0 },
+    loadingGradient: { type: String, required: !1, default: void 0 }
   },
-  setup(o, { expose: r }) {
-    r();
-    const e = o, n = p(
-      () => m({
+  setup(r, { expose: n }) {
+    n();
+    const e = r, a = o(
+      () => l({
         "nmorph-skeleton": [`${e.animated && e.loading && "loading"}`]
       })
-    ), t = { props: e, modifiers: n, get NmorphSkeletonItem() {
-      return i;
+    ), i = o(() => ({
+      ...e.loadingGradient !== void 0 && { "--loading-gradient": e.loadingGradient }
+    })), t = { props: e, modifiers: a, styles: i, get NmorphSkeletonItem() {
+      return s;
     } };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  d as default
+  f as default
 };