@nmorph/nmorph-ui-kit 2.2.9 → 2.2.10

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

@@ -0,0 +1,158 @@
+import './NmorphImagePreview.css';
+import s from "./NmorphImagePreview.vue2.js";
+import { openBlock as n, createElementBlock as i, Fragment as t, createElementVNode as l, normalizeClass as m, createVNode as o, createBlock as a, Teleport as v, withCtx as r, normalizeStyle as f, createCommentVNode as d, renderList as p, resolveDynamicComponent as _ } from "vue";
+/* empty css                        */
+import g from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = { class: "nmorph-image-preview__content" }, N = {
+  key: 0,
+  class: "nmorph-image-preview__left"
+}, w = {
+  key: 1,
+  class: "nmorph-image-preview__right"
+}, C = { class: "nmorph-image-preview__actions" }, I = { class: "nmorph-image-preview__action-element" };
+function y(x, B, S, e, b, u) {
+  return n(), i(
+    t,
+    null,
+    [
+      l(
+        "div",
+        {
+          class: m(e.modifiers)
+        },
+        [
+          l("div", {
+            class: "nmorph-image-preview__trigger",
+            onClick: e.clickHandler
+          }, [
+            o(e.NmorphImage, {
+              src: e.triggerSource,
+              alt: e.props.alt,
+              fit: "cover"
+            }, null, 8, ["src", "alt"])
+          ])
+        ],
+        2
+        /* CLASS */
+      ),
+      (n(), a(v, { to: "body" }, [
+        l(
+          "div",
+          {
+            class: m(["nmorph-image-preview__portal", e.modifiers])
+          },
+          [
+            o(e.NmorphOverlay, {
+              show: e.open,
+              "z-index": e.props.zIndex,
+              onOnOutsideClick: e.closeHandler
+            }, {
+              default: r(() => [
+                l("div", k, [
+                  o(e.NmorphImage, {
+                    src: e.triggerSource,
+                    alt: e.props.alt,
+                    fit: "cover",
+                    style: f({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
+                  }, null, 8, ["src", "alt", "style"])
+                ]),
+                e.multipleSources ? (n(), i("div", N, [
+                  o(e.NmorphButton, { onClick: e.previousHandler }, {
+                    default: r(() => [
+                      o(e.NmorphIcon, null, {
+                        default: r(() => [
+                          o(e.NmorphIconChevronDown)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      })
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])) : d("v-if", !0),
+                e.multipleSources ? (n(), i("div", w, [
+                  o(e.NmorphButton, { onClick: e.nextHandler }, {
+                    default: r(() => [
+                      o(e.NmorphIcon, null, {
+                        default: r(() => [
+                          o(e.NmorphIconChevronDown)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      })
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])) : d("v-if", !0),
+                l("div", C, [
+                  (n(), i(
+                    t,
+                    null,
+                    p(e.actions, (c, h) => l("div", {
+                      key: h,
+                      class: "nmorph-image-preview__action-element"
+                    }, [
+                      o(e.NmorphButton, {
+                        onClick: c.handler
+                      }, {
+                        default: r(() => [
+                          o(
+                            e.NmorphIcon,
+                            null,
+                            {
+                              default: r(() => [
+                                (n(), a(_(c.icon)))
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            },
+                            1024
+                            /* DYNAMIC_SLOTS */
+                          )
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["onClick"])
+                    ])),
+                    64
+                    /* STABLE_FRAGMENT */
+                  )),
+                  l("div", I, [
+                    o(e.NmorphButton, {
+                      disabled: e.scaleLevel === 1,
+                      onClick: e.enlargeShrinkActionData.handler
+                    }, {
+                      default: r(() => [
+                        o(e.NmorphIcon, null, {
+                          default: r(() => [
+                            (n(), a(_(e.enlargeShrinkActionData.icon)))
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["disabled", "onClick"])
+                  ])
+                ])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["show", "z-index"])
+          ],
+          2
+          /* CLASS */
+        )
+      ]))
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const O = /* @__PURE__ */ g(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+export {
+  O as default
+};

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

@@ -0,0 +1,103 @@
+import './NmorphImagePreview.css';
+import { defineComponent as A, ref as m, watch as C, computed as u } 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 z from "../../../assets/icons/rotate-left.svg.js";
+import B from "../../../assets/icons/zoom-in.svg.js";
+import D from "../../../assets/icons/zoom-out.svg.js";
+import T from "../../../assets/icons/enlarge.svg.js";
+import V from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import P from "../../basic/nmorph-button/NmorphButton.vue.js";
+import Z from "../nmorph-image/NmorphImage.vue.js";
+import j from "../../../assets/icons/chevron-down.svg.js";
+const te = /* @__PURE__ */ A({
+  __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 }
+  },
+  emits: ["update:model-value"],
+  setup(N, { expose: I, emit: y }) {
+    I();
+    const e = N, l = m(e.modelValue);
+    C(
+      () => e.modelValue,
+      (a) => l.value = a
+    );
+    const S = u(
+      () => F({
+        "nmorph-image-preview": [`${l.value && "opened"}`]
+      })
+    ), t = m(e.initialIndex), x = u(() => typeof e.src == "string" ? e.src : e.src[t.value]), r = m(1), _ = () => {
+      l.value = !0, i("update:model-value", l.value);
+    }, L = () => {
+      l.value = !1, i("update:model-value", l.value);
+    }, s = () => {
+      o.value = o.value + 90, o.value >= 360 && (o.value = 0);
+    }, c = () => {
+      o.value = o.value - 90, o.value <= -360 && (o.value = 0);
+    }, p = () => {
+      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 = () => {
+      r.value = 1;
+    }, h = () => {
+      r.value = 1;
+    }, o = m(0), q = () => {
+      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: H,
+        handler: h
+      };
+      return d.value && (a = {
+        icon: T,
+        handler: f
+      }), a;
+    }), O = [
+      {
+        icon: R,
+        handler: s
+      },
+      {
+        icon: z,
+        handler: c
+      },
+      {
+        icon: B,
+        handler: p
+      },
+      {
+        icon: D,
+        handler: v
+      }
+    ], i = 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: L, rotateRight: s, rotateLeft: c, zoomIn: p, zoomOut: v, isLevelChangedToMin: d, enlargeToNormal: f, shrinkToNormal: h, rotateLevel: o, previousHandler: q, nextHandler: b, enlargeShrinkActionData: w, actions: O, emit: i, multipleSources: k, get NmorphImage() {
+      return Z;
+    }, get NmorphButton() {
+      return P;
+    }, get NmorphIcon() {
+      return M;
+    }, get NmorphOverlay() {
+      return V;
+    }, get NmorphIconChevronDown() {
+      return j;
+    } };
+    return Object.defineProperty(g, "__isScriptSetup", { enumerable: !1, value: !0 }), g;
+  }
+});
+export {
+  te as default
+};

package/dist/components/data/nmorph-pagination/NmorphPagination.css

@@ -0,0 +1 @@
+.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;justify-content:center;gap:8px}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-bottom:0;margin-right:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{width:40px;height:40px}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -0,0 +1,91 @@
+import './NmorphPagination.css';
+import d from "./NmorphPagination.vue2.js";
+import { openBlock as e, createElementBlock as i, normalizeClass as l, createVNode as a, withCtx as r, Fragment as p, renderList as c, createBlock as t, mergeProps as m, createCommentVNode as _ } from "vue";
+/* empty css                      */
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+function b(h, v, f, o, g, k) {
+  return o.show ? (e(), i(
+    "div",
+    {
+      key: 0,
+      class: l(o.modifiers)
+    },
+    [
+      a(o.NmorphButton, {
+        class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
+        disabled: o.blockPrevButton || o.props.disabled,
+        onClick: o.prevClick
+      }, {
+        default: r(() => [
+          a(o.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
+            default: r(() => [
+              a(o.NmorphIconChevronDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["disabled"]),
+      a(o.NmorphRadioGroup, {
+        "model-value": o.selectedPage,
+        class: "nmorph-pagination__page-group",
+        disabled: o.props.disabled,
+        "onUpdate:modelValue": o.updateSelectedValue
+      }, {
+        default: r(() => [
+          (e(!0), i(
+            p,
+            null,
+            c(o.visiblePages, (n) => (e(), i("div", {
+              key: n.value,
+              class: "nmorph-pagination__page-btn-wrapper"
+            }, [
+              n.value === "prev" || n.value === "next" ? (e(), t(o.NmorphButton, {
+                key: 0,
+                class: l(`nmorph-pagination__page-btn nmorph-pagination__${n.value}`),
+                text: n.label,
+                disabled: o.props.disabled,
+                onClick: (N) => o.bigStepUpdate(n.value)
+              }, null, 8, ["class", "text", "disabled", "onClick"])) : (e(), t(o.NmorphRadio, m({
+                key: 1,
+                ref_for: !0
+              }, n, {
+                class: "nmorph-pagination__page-btn",
+                disabled: o.props.disabled
+              }), null, 16, ["disabled"]))
+            ]))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["model-value", "disabled"]),
+      a(o.NmorphButton, {
+        class: "nmorph-pagination__btn nmorph-pagination__next-btn",
+        disabled: o.blockNextButton || o.props.disabled,
+        onClick: o.nextClick
+      }, {
+        default: r(() => [
+          a(o.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
+            default: r(() => [
+              a(o.NmorphIconChevronDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["disabled"])
+    ],
+    2
+    /* CLASS */
+  )) : _("v-if", !0);
+}
+const P = /* @__PURE__ */ s(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+export {
+  P as default
+};

package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js

@@ -0,0 +1,72 @@
+import './NmorphPagination.css';
+import { defineComponent as P, computed as u, ref as _, watch as x } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import w from "../../form/nmorph-radio/NmorphRadio.vue.js";
+import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import O from "../../basic/nmorph-button/NmorphButton.vue.js";
+import Q from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+import R from "../../../assets/icons/chevron-down.svg.js";
+const M = /* @__PURE__ */ P({
+  __name: "NmorphPagination",
+  props: {
+    totalElementsQuantity: { type: Number, required: !0 },
+    modelValue: { type: Number, required: !1, default: 1 },
+    elementsQuantityOnPage: { type: Number, required: !1, default: 2 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    hideOnSinglePage: { type: Boolean, required: !1, default: !0 },
+    maxVisiblePages: { type: Number, required: !1, default: 9 },
+    fastForwardStep: { type: Number, required: !1, default: 5 }
+  },
+  emits: ["update:model-value"],
+  setup(p, { expose: d, emit: c }) {
+    d();
+    const a = p, s = c, f = u(
+      () => q({
+        "nmorph-pagination": [`${a.disabled && "disabled"}`]
+      })
+    ), v = () => {
+      r.value = String(Number(r.value) - 1);
+    }, g = () => {
+      r.value = String(Number(r.value) + 1);
+    }, r = _(String(a.modelValue)), t = u(() => {
+      const e = a.totalElementsQuantity / a.elementsQuantityOnPage + 1, o = e % 1 === 0 ? -1 : 0;
+      return Array.from({ length: e + o }, (n, m) => ({ value: String(m + 1), label: String(m + 1) }));
+    }), b = u(() => a.hideOnSinglePage || a.totalElementsQuantity / a.elementsQuantityOnPage > 1);
+    x(r, (e) => {
+      s("update:model-value", Number(e));
+    });
+    const h = (e) => {
+      r.value = e;
+    }, N = u(() => Number(r.value) === 1), S = u(() => t.value.length === Number(r.value)), y = u(() => {
+      const e = t.value.length, o = Number(r.value), l = a.maxVisiblePages;
+      if (e <= l)
+        return t.value;
+      const n = Math.floor(l / 2);
+      return o <= n ? [...t.value.slice(0, l - 2), { value: "next", label: "..." }, t.value[e - 1]] : o >= e - n ? [t.value[0], { value: "prev", label: "..." }, ...t.value.slice(e - (l - 2))] : [
+        t.value[0],
+        { value: "prev", label: "..." },
+        ...t.value.slice(o - n, o + n - 1),
+        { value: "next", label: "..." },
+        t.value[e - 1]
+      ];
+    }), i = { props: a, emit: s, modifiers: f, prevClick: v, nextClick: g, selectedPage: r, pages: t, show: b, updateSelectedValue: h, blockPrevButton: N, blockNextButton: S, visiblePages: y, bigStepUpdate: (e) => {
+      const o = Number(r.value);
+      let l = e === "prev" ? o - a.fastForwardStep : o + a.fastForwardStep;
+      l <= 0 && (l = 1), l >= t.value.length && (l = t.value.length), r.value = String(l);
+    }, get NmorphRadioGroup() {
+      return Q;
+    }, get NmorphButton() {
+      return O;
+    }, get NmorphIcon() {
+      return B;
+    }, get NmorphRadio() {
+      return w;
+    }, get NmorphIconChevronDown() {
+      return R;
+    } };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+export {
+  M as default
+};

package/dist/components/data/nmorph-progress/NmorphProgress.css

@@ -0,0 +1 @@
+.nmorph-progress{--height: 8px;--width-transition: .4s ease-in-out width;--animation: slide 2s linear infinite;display:inline}.nmorph-progress .nmorph-progress__linear{display:flex;align-items:center;height:100%;height:var(--height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__outer{width:100%;height:100%;overflow:hidden;border-radius:var(--border-radius-40);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner{position:relative;height:100%;border-radius:var(--border-radius-40);transition:var(--width-transition)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__percentage,.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);margin-left:var(--indentation-03)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{position:absolute;top:50%;right:var(--indentation-02);color:var(--nmorph-light-shade-color);transform:translateY(-50%)}.nmorph-progress .nmorph-progress__circle{position:relative;border-radius:var(--border-radius-circular);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__circle:after{width:92%;height:92%;border-radius:var(--border-radius-circular);content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--nmorph-main-color);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color)}.nmorph-progress .nmorph-progress__circle-inner-part{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-progress-percentage);background:var(--nmorph-progress-color);animation:var(--nmorph-progress-animation)}.nmorph-progress .nmorph-progress__circle{width:var(--nmorph-progress-circle-size);height:var(--nmorph-progress-circle-size)}.nmorph-progress .nmorph-progress__circle-ring{stroke:var(--nmorph-progress-color)}

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

@@ -0,0 +1,89 @@
+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";
+/* empty css                    */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  key: 0,
+  class: "nmorph-progress__linear"
+}, g = { class: "nmorph-progress__outer" }, f = { class: "nmorph-progress__inner" }, y = {
+  key: 0,
+  class: "nmorph-progress__inner-text"
+}, v = {
+  key: 0,
+  class: "nmorph-progress__percentage"
+}, 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(
+    "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
+      })
+    },
+    [
+      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(
+                  a(r.displayPercentage),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])) : i("v-if", !0)
+          ])
+        ]),
+        l.valueRightSide ? (e(), o("div", v, [
+          n(c.$slots, "right-side", {}, () => [
+            t(
+              a(r.displayPercentage),
+              1
+              /* TEXT */
+            )
+          ])
+        ])) : 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(
+              a(r.displayPercentage),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        (e(), o("svg", {
+          width: r.props.circleSize,
+          height: r.props.circleSize
+        }, [
+          s("circle", {
+            ref: "circle",
+            class: "nmorph-progress__circle-ring",
+            cx: r.props.circleSize / 2,
+            cy: r.props.circleSize / 2,
+            r: r.props.circleSize / 2 - 2,
+            "stroke-dasharray": r.strokeDasharray,
+            "stroke-dashoffset": r.strokeDashoffset
+          }, null, 8, P)
+        ], 8, z))
+      ])) : i("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const E = /* @__PURE__ */ h(p, [["render", x], ["__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

@@ -0,0 +1,31 @@
+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({
+  __name: "NmorphProgress",
+  props: {
+    type: { type: String, required: !1, default: "linear" },
+    color: { type: [String, Array, Function], required: !1, default: "var(--nmorph-accent-color)" },
+    percentage: { type: Number, required: !0 },
+    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 }
+  },
+  setup(i, { expose: l }) {
+    l();
+    const e = i, c = r(
+      () => _({
+        "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);
+    });
+    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;
+  }
+});
+export {
+  q as default
+};

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.css

@@ -0,0 +1 @@
+.nmorph-skeleton.nmorph-skeleton--loading{--loading-gradient: linear-gradient( 90deg, var(--nmorph-text-color) 25%, var(--nmorph-white-color) 37%, var(--nmorph-text-color) 63% )}.nmorph-skeleton.nmorph-skeleton--loading .nmorph-skeleton-item:before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--loading-gradient);background-size:400% 100%;opacity:.3;animation:nmorph-skeleton-loading-animation 2.4s ease infinite;content:"";pointer-events:none}

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

@@ -0,0 +1,61 @@
+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";
+/* empty css                    */
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = {
+  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(
+    "div",
+    {
+      class: p(o.modifiers)
+    },
+    [
+      o.props.rows && o.props.loading ? (e(), r("div", k, [
+        (e(!0), r(
+          c,
+          null,
+          d(o.props.rows, (a) => (e(), _(o.NmorphSkeletonItem, {
+            key: a,
+            width: "100%",
+            height: "14px",
+            variant: "rect"
+          }))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])) : h("v-if", !0),
+      s(n(
+        "div",
+        v,
+        [
+          l(t.$slots, "template")
+        ],
+        512
+        /* NEED_PATCH */
+      ), [
+        [i, !o.props.rows && o.props.loading]
+      ]),
+      s(n(
+        "div",
+        w,
+        [
+          l(t.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      ), [
+        [i, !o.props.loading]
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const E = /* @__PURE__ */ f(m, [["render", g], ["__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

@@ -0,0 +1,26 @@
+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({
+  __name: "NmorphSkeleton",
+  props: {
+    animated: { type: Boolean, required: !1, default: !0 },
+    loading: { type: Boolean, required: !1, default: !0 },
+    rows: { type: Number, required: !1, default: 0 }
+  },
+  setup(o, { expose: r }) {
+    r();
+    const e = o, n = p(
+      () => m({
+        "nmorph-skeleton": [`${e.animated && e.loading && "loading"}`]
+      })
+    ), t = { props: e, modifiers: n, get NmorphSkeletonItem() {
+      return i;
+    } };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+  }
+});
+export {
+  d as default
+};

package/dist/components/data/nmorph-skeleton/components/NmorphSkeletonItem.css

@@ -0,0 +1 @@
+.nmorph-skeleton-item{position:relative;margin-bottom:var(--indentation-02);overflow:hidden;background:var(--nmorph-text-color);width:var(--nmorph-skeleton-item-width);height:var(--nmorph-skeleton-item-height)}.nmorph-skeleton-item.nmorph-skeleton-item--image{background:none}.nmorph-skeleton-item.nmorph-skeleton-item--image .nmorph-skeleton-item__element .nmorph-icon{--color: var(--nmorph-text-color)}.nmorph-skeleton-item.nmorph-skeleton-item--circle{border-radius:var(--border-radius-circular)}.nmorph-skeleton-item.nmorph-skeleton-item--nmorph-design{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}