@nmorph/nmorph-ui-kit 3.0.6 → 3.0.8

package/dist/assets/icons/hand.svg.js

@@ -1,7 +1,7 @@
 import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 1024 1024"
+  viewBox: "0 0 1024 1088"
 };
 function c(l, e) {
   return t(), o("svg", n, [...e[0] || (e[0] = [
@@ -9,7 +9,7 @@ function c(l, e) {
       "path",
       {
         fill: "currentColor",
-        d: "M360 140c0-36.45 29.55-66 66-66s66 29.55 66 66v420h32V86c0-36.45 29.55-66 66-66s66 29.55 66 66v474h32V160c0-36.45 29.55-66 66-66s66 29.55 66 66v424h30V256c0-36.45 29.55-66 66-66s66 29.55 66 66v444c0 167.9-136.1 304-304 304h-82c-98.69 0-190.2-51.5-241.34-135.92l-244.93-233.2a70 70 0 0 1 120.06-71.76L360 780z"
+        d: "M360 131.2c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28v453.6h32V72.88c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28V584.8h32v-432c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28v457.92h30V256.48c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28V736c0 181.332-136.1 328.32-304 328.32h-82c-98.69 0-190.2-55.62-241.34-146.794L109.73 665.67a70 75.6 0 0 1 120.06-77.5L360 822.4z"
       },
       null,
       -1

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

@@ -1 +1 @@
-.nmorph-icon,.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color)}.nmorph-icon path[stroke],.nmorph-icon path[stroke-width],.nmorph-icon path[fill=none],.nmorph-icon rect[stroke],.nmorph-icon rect[stroke-width],.nmorph-icon rect[fill=none],.nmorph-icon line[stroke],.nmorph-icon line[stroke-width],.nmorph-icon polyline[stroke],.nmorph-icon polyline[stroke-width],.nmorph-icon polygon[stroke],.nmorph-icon polygon[stroke-width]{stroke:var(--nmorph-private-icon-color)}.nmorph-icon.nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-icon.nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-icon.nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}
+.nmorph-icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height);color:var(--nmorph-private-icon-color)}.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color)}.nmorph-icon svg,.nmorph-icon svg *{color:var(--nmorph-private-icon-color)}.nmorph-icon path[stroke],.nmorph-icon path[stroke-width],.nmorph-icon path[fill=none],.nmorph-icon rect[stroke],.nmorph-icon rect[stroke-width],.nmorph-icon rect[fill=none],.nmorph-icon line[stroke],.nmorph-icon line[stroke-width],.nmorph-icon polyline[stroke],.nmorph-icon polyline[stroke-width],.nmorph-icon polygon[stroke],.nmorph-icon polygon[stroke-width]{stroke:var(--nmorph-private-icon-color)}.nmorph-icon.nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-icon.nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-icon.nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue.js

@@ -1,18 +1,18 @@
 import './NmorphCalendar.css';
 import f from "./NmorphCalendar.vue2.js";
-import { openBlock as o, createElementBlock as n, normalizeStyle as k, normalizeClass as h, renderSlot as r, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
+import { openBlock as o, createElementBlock as r, normalizeStyle as k, normalizeClass as i, renderSlot as n, createVNode as s, mergeProps as C, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as m, createTextVNode as _, toDisplayString as v } from "vue";
 /* empty css                    */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
+import T from "../../../_virtual/_plugin-vue_export-helper.js";
 const g = ["data-date", "onClick"];
-function T(d, p, B, a, M, w) {
-  return o(), n(
+function p(d, B, M, a, w, x) {
+  return o(), r(
     "div",
     {
-      class: h(a.modifiers),
+      class: i(a.modifiers),
       style: k(a.styles)
     },
     [
-      r(d.$slots, "header", {}, () => [
+      n(d.$slots, "header", {}, () => [
         s(a.NmorphCalendarHeader, {
           year: a.initialDate.getFullYear(),
           month: a.initialDate.getMonth(),
@@ -25,54 +25,52 @@ function T(d, p, B, a, M, w) {
           onClickToday: a.setTodayMonth
         }, null, 8, ["year", "month", "design", "show-previous-month-button", "show-today-button", "show-next-month-button"])
       ]),
-      r(d.$slots, "content", {}, () => [
-        s(a.NmorphTable, {
+      n(d.$slots, "content", {}, () => [
+        s(a.NmorphTable, C({
           data: a.calendar,
-          bordered: "",
-          "row-hover": !1,
-          design: a.props.design
-        }, {
+          "row-hover": !1
+        }, a.tableDesignProps), {
           default: l(() => [
-            (o(!0), n(
+            (o(!0), r(
               c,
               null,
-              y(a.days, (e) => (o(), D(a.NmorphTableColumn, {
-                key: `${e}`,
-                prop: e,
-                label: e.toUpperCase()
+              y(a.days, (t) => (o(), D(a.NmorphTableColumn, {
+                key: `${t}`,
+                prop: t,
+                label: t.toUpperCase()
               }, {
                 default: l(({ scope: b }) => [
-                  (o(!0), n(
+                  (o(!0), r(
                     c,
                     null,
-                    y(b.rows, (t, i) => (o(), D(a.NmorphTableCell, {
-                      key: i,
-                      row: i
+                    y(b.rows, (e, h) => (o(), D(a.NmorphTableCell, {
+                      key: h,
+                      row: h
                     }, {
                       default: l(() => [
-                        C("div", {
-                          "data-date": `${a.dateData(t[e]).date}`,
-                          class: h([
+                        m("div", {
+                          "data-date": `${a.dateData(e[t]).date}`,
+                          class: i([
                             "nmorph-calendar-date",
-                            `nmorph-calendar-date--${a.dateData(t[e]).monthType}`,
+                            `nmorph-calendar-date--${a.dateData(e[t]).monthType}`,
                             {
-                              "nmorph-calendar-date--today": a.dateData(t[e]).isToday && !a.dateData(t[e]).hidden && a.props.markToday
+                              "nmorph-calendar-date--today": a.dateData(e[t]).isToday && !a.dateData(e[t]).hidden && a.props.markToday
                             },
-                            { "nmorph-calendar-date--hidden": a.dateData(t[e]).hidden },
+                            { "nmorph-calendar-date--hidden": a.dateData(e[t]).hidden },
                             {
-                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(t[e]).date)
+                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(e[t]).date)
                             }
                           ]),
-                          onClick: (x) => a.clickDate(a.dateData(t[e]))
+                          onClick: (P) => a.clickDate(a.dateData(e[t]))
                         }, [
-                          r(d.$slots, "date-cell", {
+                          n(d.$slots, "date-cell", {
                             scope: {
-                              ...a.dateData(t[e]),
-                              selected: a.isValueSelected(a.dateData(t[e]).date)
+                              ...a.dateData(e[t]),
+                              selected: a.isValueSelected(a.dateData(e[t]).date)
                             }
                           }, () => [
                             _(
-                              m(a.dateData(t[e]).hidden ? "-" : a.dateData(t[e]).value),
+                              v(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
                               1
                               /* TEXT */
                             )
@@ -95,14 +93,14 @@ function T(d, p, B, a, M, w) {
           ]),
           _: 3
           /* FORWARDED */
-        }, 8, ["data", "design"])
+        }, 16, ["data"])
       ])
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ v(f, [["render", T], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
+const E = /* @__PURE__ */ T(f, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
 export {
-  z as default
+  E as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphCalendar.css';
-import { defineComponent as R, ref as x, onMounted as O, reactive as k, watch as v, computed as s } from "vue";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as z } from "../../../utils/common.js";
-import W from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
-import { useCalendarTexts as Z } from "./hooks/use-calendar-texts.js";
-import { hasAnyRangeDateInPrevMonth as F, hasAnyRangeDateInNextMonth as G, isTodayInMonthRange as J, resetTimeToZero as d, getMonthDaysByWeek as K } from "./utils.js";
-import L from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
-import Q from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
-import U from "../nmorph-table/NmorphTable.vue.js";
-const ue = /* @__PURE__ */ R({
+import { defineComponent as O, ref as x, onMounted as k, reactive as j, watch as h, computed as u } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as W } from "../../../utils/common.js";
+import Z from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
+import { useCalendarTexts as F } from "./hooks/use-calendar-texts.js";
+import { hasAnyRangeDateInPrevMonth as G, hasAnyRangeDateInNextMonth as J, isTodayInMonthRange as K, resetTimeToZero as d, getMonthDaysByWeek as L } from "./utils.js";
+import Q from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
+import U from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
+import X from "../nmorph-table/NmorphTable.vue.js";
+const se = /* @__PURE__ */ O({
   __name: "NmorphCalendar",
   props: {
     markToday: { type: Boolean, required: !1, default: !0 },
@@ -22,119 +22,121 @@ const ue = /* @__PURE__ */ R({
   emits: ["update:model-value", "update-initial-date"],
   setup(N, { expose: b, emit: _ }) {
     b();
-    const r = N, i = _, { days: h } = Z(), y = () => {
-      l.value = M.value;
+    const a = N, s = _, { days: v } = F(), y = () => {
+      o.value = M.value;
     }, C = () => {
-      l.value = /* @__PURE__ */ new Date();
+      o.value = /* @__PURE__ */ new Date();
     }, g = () => {
-      l.value = A.value;
-    }, u = () => {
+      o.value = A.value;
+    }, i = () => {
       throw new Error("model value and type prop not matched");
     }, c = (e) => {
       if (e === null) return null;
-      if (r.type === "date") {
+      if (a.type === "date") {
         if (e instanceof Date)
           return d(e);
-        u();
+        i();
       }
-      const o = Array.isArray(e) && e.every((a) => a instanceof Date);
-      if (r.type === "dates") {
-        if (o)
-          return e.map((a) => d(a));
-        u();
+      const l = Array.isArray(e) && e.every((r) => r instanceof Date);
+      if (a.type === "dates") {
+        if (l)
+          return e.map((r) => d(r));
+        i();
       }
-      if (r.type === "daterange") {
-        if (o)
-          return e.map((a) => d(a)).slice(0, 2);
-        u();
+      if (a.type === "daterange") {
+        if (l)
+          return e.map((r) => d(r)).slice(0, 2);
+        i();
       }
     }, q = (e) => {
       if (t.value === null) return;
-      const { monthType: o, hidden: a } = e;
-      if (a) return;
-      o === "next" && g(), o === "previous" && y();
+      const { monthType: l, hidden: r } = e;
+      if (r) return;
+      l === "next" && g(), l === "previous" && y();
       const { date: n } = e;
-      if (r.type === "date" && (t.value = n, i("update:model-value", t.value)), r.type === "dates") {
-        if (!Array.isArray(t.value)) return u();
-        const m = n.toDateString(), w = t.value.map((P) => P.toDateString()).indexOf(m);
-        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), i("update:model-value", t.value);
+      if (a.type === "date" && (t.value = n, s("update:model-value", t.value)), a.type === "dates") {
+        if (!Array.isArray(t.value)) return i();
+        const m = n.toDateString(), w = t.value.map((R) => R.toDateString()).indexOf(m);
+        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), s("update:model-value", t.value);
       }
-      if (r.type === "daterange") {
-        if (!Array.isArray(t.value)) return u();
-        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], i("update:model-value", t.value.slice(0, 2));
+      if (a.type === "daterange") {
+        if (!Array.isArray(t.value)) return i();
+        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], s("update:model-value", t.value.slice(0, 2));
       }
-    }, D = (e, o) => {
-      const [a, n] = o;
-      return o.length === 1 ? e.toDateString() === a.toDateString() : a && n ? e >= d(a) && e <= d(n) : !1;
+    }, D = (e, l) => {
+      const [r, n] = l;
+      return l.length === 1 ? e.toDateString() === r.toDateString() : r && n ? e >= d(r) && e <= d(n) : !1;
     }, B = (e) => {
       if (t.value === null) return !1;
-      if (r.type === "date")
-        return Array.isArray(t.value) ? u() : t.value.toDateString() === e.toDateString();
-      if (r.type === "dates")
-        return Array.isArray(t.value) ? !!t.value.find((a) => a.toDateString() === e.toDateString()) : u();
-      if (r.type === "daterange")
-        return Array.isArray(t.value) ? D(e, t.value) : u();
-    }, l = x(r.initialDate), t = x(c(r.modelValue));
-    O(() => {
-      i("update:model-value", t.value);
+      if (a.type === "date")
+        return Array.isArray(t.value) ? i() : t.value.toDateString() === e.toDateString();
+      if (a.type === "dates")
+        return Array.isArray(t.value) ? !!t.value.find((r) => r.toDateString() === e.toDateString()) : i();
+      if (a.type === "daterange")
+        return Array.isArray(t.value) ? D(e, t.value) : i();
+    }, o = x(a.initialDate), t = x(c(a.modelValue));
+    k(() => {
+      s("update:model-value", t.value);
     });
-    let p = k([]);
+    let p = j([]);
     const f = () => {
-      p = [], K(l, r.range).forEach((o) => {
-        const a = {};
-        o.forEach((n, m) => {
-          const T = h[m];
-          a[T] = n;
-        }), p.push(a);
+      p = [], L(o, a.range).forEach((l) => {
+        const r = {};
+        l.forEach((n, m) => {
+          const T = v[m];
+          r[T] = n;
+        }), p.push(r);
       });
     };
-    v(
-      () => r.initialDate,
+    h(
+      () => a.initialDate,
       (e) => {
-        l.value = e;
+        o.value = e;
       },
       {
         deep: !0
       }
-    ), v(l, () => {
-      f(), i("update-initial-date", l.value);
-    }), v(
-      () => r.modelValue,
+    ), h(o, () => {
+      f(), s("update-initial-date", o.value);
+    }), h(
+      () => a.modelValue,
       (e) => {
         t.value = c(e);
       }
     );
-    const M = s(() => new Date(l.value.setMonth(l.value.getMonth() - 1))), A = s(() => new Date(l.value.setMonth(l.value.getMonth() + 1))), V = s(() => {
-      const { range: e } = r, o = e ? F(l.value, e[0]) : !0, a = e ? G(l.value, e[1]) : !0, n = J(e);
+    const M = u(() => new Date(o.value.setMonth(o.value.getMonth() - 1))), A = u(() => new Date(o.value.setMonth(o.value.getMonth() + 1))), V = u(() => {
+      const { range: e } = a, l = e ? G(o.value, e[0]) : !0, r = e ? J(o.value, e[1]) : !0, n = K(e);
       return {
-        showPreviousMonthButton: o,
-        showNextMonthButton: a,
+        showPreviousMonthButton: l,
+        showNextMonthButton: r,
         showTodayButton: n
       };
-    }), E = s(
-      () => j({
+    }), E = u(
+      () => z({
         "nmorph-calendar": []
       })
-    ), H = s(
-      () => z({
-        "--nmorph-private-calendar-cell-height": r.cellHeight
+    ), P = u(
+      () => W({
+        "--nmorph-private-calendar-cell-height": a.cellHeight
       })
+    ), H = u(
+      () => a.design === "plain" ? { design: "plain", bordered: !0 } : { design: "nmorph" }
     ), I = (e) => e;
     f();
-    const S = { props: r, emit: i, days: h, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: u, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: B, initialDate: l, selectedValue: t, get calendar() {
+    const S = { props: a, emit: s, days: v, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: i, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: B, initialDate: o, selectedValue: t, get calendar() {
       return p;
     }, set calendar(e) {
       p = e;
-    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: H, dateData: I, get NmorphTable() {
-      return U;
+    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: P, tableDesignProps: H, dateData: I, get NmorphTable() {
+      return X;
     }, get NmorphTableColumn() {
-      return Q;
+      return U;
     }, get NmorphTableCell() {
-      return L;
-    }, NmorphCalendarHeader: W };
+      return Q;
+    }, NmorphCalendarHeader: Z };
     return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  ue as default
+  se as default
 };

package/dist/components/data/nmorph-carousel/NmorphCarousel.css

@@ -1 +1 @@
-.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;--nmorph-private-carousel-action-size: 36px;--nmorph-private-carousel-action-offset: var(--indentation-02);position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-carousel-action-size);height:var(--nmorph-private-carousel-action-size);padding:0;background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{right:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__next{left:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}
+.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;--nmorph-private-carousel-action-size: 36px;--nmorph-private-carousel-action-offset: var(--indentation-02);position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-carousel-action-size);height:var(--nmorph-private-carousel-action-size);padding:0;background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{left:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__next{right:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue.js

@@ -1,51 +1,53 @@
 import './NmorphCarousel.css';
-import d from "./NmorphCarousel.vue2.js";
-import { openBlock as e, createElementBlock as o, normalizeClass as c, createElementVNode as n, normalizeStyle as h, Fragment as i, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
+import _ from "./NmorphCarousel.vue2.js";
+import { openBlock as e, createElementBlock as o, normalizeClass as i, createElementVNode as n, normalizeStyle as h, Fragment as c, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
 /* empty css                    */
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["id"], f = { class: "nmorph-carousel__elements-indicator" }, C = ["onClick"];
-function k(_, N, I, r, b, y) {
+const f = ["id"], v = { class: "nmorph-carousel__elements-indicator" }, C = ["onClick"];
+function k(d, N, b, r, y, I) {
   return e(), o(
     "div",
     {
-      class: c(r.modifiers)
+      class: i(r.modifiers)
     },
     [
       n(
         "div",
         {
-          class: "nmorph-carousel__wrapper transition-enabled",
-          style: h({ transform: r.translateX })
+          ref: "wrapperRef",
+          class: i(["nmorph-carousel__wrapper", { "transition-enabled": r.transitionEnabled }]),
+          style: h({ transform: r.translateX }),
+          onTransitionend: r.wrapperTransitionEndHandler
         },
         [
           (e(!0), o(
-            i,
+            c,
             null,
-            s(r.carouselData, (a) => (e(), o("div", {
-              id: `nmorph-carousel-item-${r.carouselId}-${a}`,
-              key: a,
+            s(r.renderedCarouselItems, (a) => (e(), o("div", {
+              id: a.id,
+              key: a.key,
               class: "nmorph-carousel__item"
-            }, null, 8, v))),
+            }, null, 8, f))),
             128
             /* KEYED_FRAGMENT */
           ))
         ],
-        4
-        /* STYLE */
+        38
+        /* CLASS, STYLE, NEED_HYDRATION */
       ),
-      n("div", f, [
+      n("div", v, [
         (e(!0), o(
-          i,
+          c,
           null,
           s(r.carouselData, (a, t) => (e(), o("div", {
             key: t,
             class: "nmorph-carousel__element-indicator-wrapper",
-            onClick: (S) => r.elementIndicator(t)
+            onClick: (w) => r.elementIndicator(t)
           }, [
             n(
               "div",
               {
-                class: c(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(t) }])
+                class: i(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(t) }])
               },
               null,
               2
@@ -58,11 +60,11 @@ function k(_, N, I, r, b, y) {
       ]),
       n("div", {
         class: "nmorph-carousel__action-btn nmorph-carousel__prev",
-        onClick: r.nextSlide
+        onClick: r.prevSlide
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronRight)
+            l(r.NmorphIconChevronLeft)
           ]),
           _: 1
           /* STABLE */
@@ -70,23 +72,23 @@ function k(_, N, I, r, b, y) {
       ]),
       n("div", {
         class: "nmorph-carousel__action-btn nmorph-carousel__next",
-        onClick: r.prevSlide
+        onClick: r.nextSlide
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronLeft)
+            l(r.NmorphIconChevronRight)
           ]),
           _: 1
           /* STABLE */
         })
       ]),
-      p(_.$slots, "default")
+      p(d.$slots, "default")
     ],
     2
     /* CLASS */
   );
 }
-const z = /* @__PURE__ */ u(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
+const z = /* @__PURE__ */ u(_, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
 export {
   z as default
 };

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue2.js

@@ -1,47 +1,97 @@
 import './NmorphCarousel.css';
-import { defineComponent as x, ref as p, computed as u, provide as M, watch as d } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { generateUUID as b } from "../../../utils/common.js";
-import q from "../../../assets/icons/chevron-right.svg.js";
-import w from "../../../assets/icons/chevron-left.svg.js";
-import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const A = /* @__PURE__ */ x({
+import { defineComponent as j, ref as i, computed as m, provide as F, watch as y, nextTick as U } from "vue";
+import { useModifiers as X } from "../../../utils/create-modifiers.js";
+import { generateUUID as z } from "../../../utils/common.js";
+import B from "../../../assets/icons/chevron-right.svg.js";
+import H from "../../../assets/icons/chevron-left.svg.js";
+import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const V = /* @__PURE__ */ j({
   __name: "NmorphCarousel",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
     loop: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["change"],
-  setup(h, { expose: f, emit: v }) {
-    f();
-    const e = p(0), o = h, l = v, g = u(
-      () => y({
-        nmorph: [o.design === "nmorph" ? "shadow-outset" : ""],
-        "nmorph-carousel": [o.design]
+  setup(N, { expose: $, emit: b }) {
+    $();
+    const r = i(0), a = i(0), c = i(!0), o = i(null), C = i(null), l = N, S = b, w = m(
+      () => X({
+        nmorph: [l.design === "nmorph" ? "shadow-outset" : ""],
+        "nmorph-carousel": [l.design]
       })
-    ), a = p([]), s = b();
-    M("carousel-data", { data: a, carouselId: s });
-    const r = u(() => a.value.length), i = (t) => r.value ? o.loop ? (t + r.value) % r.value : Math.min(Math.max(t, 0), r.value - 1) : 0, n = (t) => {
-      const c = i(t);
-      c !== e.value && (e.value = c);
-    }, I = () => n(e.value - 1), _ = () => n(e.value + 1), C = u(() => `translateX(-${e.value * 100}%)`), S = (t) => t === e.value, N = (t) => {
-      n(t);
+    ), u = i([]), f = z(), n = m(() => u.value.length), v = m(() => l.loop && n.value > 1);
+    F("carousel-data", { data: u, carouselId: f, hasLoopClones: v });
+    const p = (e, t) => `nmorph-carousel-item-${f}-${e}${t ? `-${t}` : ""}`, h = (e) => n.value ? l.loop ? (e + n.value) % n.value : Math.min(Math.max(e, 0), n.value - 1) : 0, d = (e) => v.value ? e + 1 : e, T = async () => {
+      await U(), C.value?.offsetWidth;
+      const e = typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(Date.now()), 0);
+      e(() => {
+        e(() => {
+          c.value = !0;
+        });
+      });
+    }, I = (e) => {
+      c.value = !1, a.value = e, T();
+    }, g = (e) => {
+      const t = h(e);
+      t !== r.value && (r.value = t, o.value = null, c.value = !0, a.value = d(t));
+    }, x = (e) => {
+      if (!n.value) return;
+      if (!l.loop || !v.value) {
+        g(r.value + e);
+        return;
+      }
+      const t = r.value, s = h(t + e);
+      if (s !== t) {
+        if (r.value = s, c.value = !0, e > 0 && t === n.value - 1) {
+          a.value = n.value + 1, o.value = 1;
+          return;
+        }
+        if (e < 0 && t === 0) {
+          a.value = 0, o.value = n.value;
+          return;
+        }
+        o.value = null, a.value = d(s);
+      }
+    }, R = () => x(-1), q = () => x(1), A = m(() => `translateX(-${a.value * 100}%)`), M = m(() => {
+      const e = u.value.map((k) => ({
+        id: p(k),
+        key: k
+      }));
+      if (!v.value || !e.length) return e;
+      const t = u.value[0], s = u.value[u.value.length - 1];
+      return [
+        {
+          id: p(s, "before"),
+          key: `${s}-loop-before`
+        },
+        ...e,
+        {
+          id: p(t, "after"),
+          key: `${t}-loop-after`
+        }
+      ];
+    }), D = (e) => e === r.value, E = (e) => {
+      g(e);
+    }, L = (e) => {
+      if (e.target !== e.currentTarget || o.value === null) return;
+      const t = o.value;
+      o.value = null, I(t);
     };
-    d(r, (t) => {
-      e.value > t - 1 && (e.value = Math.max(t - 1, 0));
-    }), d(e, () => {
-      l("change", e.value);
+    y([n, () => l.loop], ([e]) => {
+      r.value > e - 1 && (r.value = Math.max(e - 1, 0)), o.value = null, I(d(r.value));
+    }), y(r, () => {
+      S("change", r.value);
     });
-    const m = { currentSlide: e, props: o, emit: l, modifiers: g, carouselData: a, carouselId: s, slideCount: r, normalizeSlideIndex: i, goToSlide: n, prevSlide: I, nextSlide: _, translateX: C, isCurrentElementActive: S, elementIndicator: N, get NmorphIcon() {
-      return D;
+    const _ = { currentSlide: r, trackIndex: a, transitionEnabled: c, loopResetTrackIndex: o, wrapperRef: C, props: l, emit: S, modifiers: w, carouselData: u, carouselId: f, slideCount: n, hasLoopClones: v, getCarouselItemId: p, normalizeSlideIndex: h, getRealTrackIndex: d, enableTransitionAfterJump: T, jumpToTrackIndex: I, goToSlide: g, moveSlide: x, prevSlide: R, nextSlide: q, translateX: A, renderedCarouselItems: M, isCurrentElementActive: D, elementIndicator: E, wrapperTransitionEndHandler: L, get NmorphIcon() {
+      return J;
     }, get NmorphIconChevronLeft() {
-      return w;
+      return H;
     }, get NmorphIconChevronRight() {
-      return q;
+      return B;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  A as default
+  V as default
 };