@nmorph/nmorph-ui-kit 2.2.12 → 2.2.15

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

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

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

@@ -1 +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)}
+.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;background:var(--nmorph-main-color);border-radius:var(--border-radius-40);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{margin-left:var(--indentation-03);font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.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;width:var(--nmorph-progress-circle-size);height:var(--nmorph-progress-circle-size);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);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{position:absolute;top:50%;left:50%;width:92%;height:92%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color);transform:translate(-50%,-50%);content:""}.nmorph-progress .nmorph-progress__circle-inner-part{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke:var(--nmorph-progress-color);stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-progress-percentage);background:var(--nmorph-progress-color);animation:var(--nmorph-progress-animation)}

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

@@ -1 +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)}
+.nmorph-skeleton-item{position:relative;width:var(--nmorph-skeleton-item-width);height:var(--nmorph-skeleton-item-height);margin-bottom:var(--indentation-02);overflow:hidden;background:var(--nmorph-text-color)}.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)}

package/dist/components/data/nmorph-table/NmorphTable.css

@@ -1 +1 @@
-.nmorph-table{--border-color: var(--nmorph-info-text-color);--table-cell-height: auto;--table-background-row-hover: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__table-data-row--row-hover:hover{background:var(--table-background-row-hover)}.nmorph-table--nmorph{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);overflow:hidden;border-radius:var(--default-border-radius);--border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{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-table{--border-color: var(--nmorph-info-text-color);--table-cell-height: auto;--table-background-row-hover: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover{background:var(--table-background-row-hover)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);--border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{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)}

package/dist/components/data/nmorph-table/NmorphTable.vue.js

@@ -1,67 +1,67 @@
 import './NmorphTable.css';
-import h from "./NmorphTable.vue2.js";
-import { openBlock as t, createElementBlock as o, normalizeClass as i, createElementVNode as e, Fragment as a, renderList as d, normalizeStyle as s, toDisplayString as p, createBlock as b, createCommentVNode as m, renderSlot as y } from "vue";
+import m from "./NmorphTable.vue2.js";
+import { openBlock as t, createElementBlock as e, normalizeClass as _, createElementVNode as o, Fragment as n, renderList as i, normalizeStyle as d, toDisplayString as b, createBlock as y, createCommentVNode as u, renderSlot as p } from "vue";
 /* empty css                 */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, k = ["data-src"], v = { class: "nmorph-table__table-row" }, g = { class: "nmorph-table__cell" }, S = { class: "nmorph-table__body" }, x = ["id"], N = { class: "nmorph-table__slot-columns" };
-function B(c, W, T, l, j, z) {
-  return t(), o("div", null, [
-    (t(), o(
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const w = { class: "nmorph-table__wrapper" }, f = { class: "nmorph-table__header" }, k = ["data-src"], g = { class: "nmorph-table__table-row" }, S = { class: "nmorph-table__cell" }, x = ["id"], W = { class: "nmorph-table__slot-columns" }, B = ["id"], N = { class: "nmorph-table__slot-columns" };
+function E(c, h, H, l, L, C) {
+  return t(), e("div", null, [
+    (t(), e(
       "div",
       {
         ref: "nmorphDOMTable",
         key: l.key,
-        class: i(l.modifiers)
+        class: _(l.modifiers)
       },
       [
-        e("div", f, [
-          e("table", w, [
-            e("colgroup", null, [
-              (t(!0), o(
-                a,
+        o("div", w, [
+          o("table", f, [
+            o("colgroup", null, [
+              (t(!0), e(
+                n,
                 null,
-                d(l.columns, (r) => (t(), o("col", {
+                i(l.columns, (r) => (t(), e("col", {
                   key: r.prop,
-                  style: s({ width: `${l.getWidth(r.width)}px` }),
+                  style: d({ width: `${l.getWidth(r.width)}px` }),
                   "data-src": `${l.getWidth(r.width)}px`
                 }, null, 12, k))),
                 128
                 /* KEYED_FRAGMENT */
               ))
             ]),
-            e("thead", null, [
-              e("tr", v, [
-                (t(!0), o(
-                  a,
+            o("thead", null, [
+              o("tr", g, [
+                (t(!0), e(
+                  n,
                   null,
-                  d(l.columns, (r, _) => (t(), o(
+                  i(l.columns, (r, s) => (t(), e(
                     "th",
                     {
-                      key: _,
-                      class: i(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": l.props.bordered }])
+                      key: s,
+                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": l.props.bordered }])
                     },
                     [
-                      e("div", g, [
-                        e(
+                      o("div", S, [
+                        o(
                           "div",
                           {
-                            style: s({ "justify-content": r.alignment }),
+                            style: d({ "justify-content": r.alignment }),
                             class: "nmorph-table__cell-content"
                           },
                           [
-                            e(
+                            o(
                               "span",
                               null,
-                              p(r.label),
+                              b(r.label),
                               1
                               /* TEXT */
                             ),
-                            l.sortData && l.sortData[r.prop] ? (t(), b(l.NmorphSortButton, {
+                            l.sortData && l.sortData[r.prop] ? (t(), y(l.NmorphSortButton, {
                               key: 0,
                               class: "nmorph-table__button-wrapper",
                               value: l.sortData[r.prop],
-                              onSort: (n) => l.onSort(n, r.prop)
-                            }, null, 8, ["value", "onSort"])) : m("v-if", !0)
+                              onSort: (a) => l.onSort(a, r.prop)
+                            }, null, 8, ["value", "onSort"])) : u("v-if", !0)
                           ],
                           4
                           /* STYLE */
@@ -77,52 +77,177 @@ function B(c, W, T, l, j, z) {
               ])
             ])
           ]),
-          e("div", S, [
-            e("table", null, [
-              e("colgroup", null, [
-                (t(!0), o(
-                  a,
-                  null,
-                  d(l.columns, (r) => (t(), o(
-                    "col",
+          o(
+            "div",
+            {
+              ref: l.virtualList.containerRef,
+              class: _(["nmorph-table__body", { "nmorph-table__body--virtual": l.virtualEnabled }]),
+              style: d(l.tableBodyStyle),
+              onScroll: h[0] || (h[0] = (...r) => l.virtualList.scrollHandler && l.virtualList.scrollHandler(...r))
+            },
+            [
+              l.virtualEnabled ? (t(), e(
+                "div",
+                {
+                  key: 0,
+                  class: "nmorph-table__virtual-spacer",
+                  style: d(l.virtualSpacerStyle)
+                },
+                [
+                  o(
+                    "div",
                     {
-                      key: r.prop,
-                      style: s({ width: `${l.getWidth(r.width)}px` })
+                      class: "nmorph-table__virtual-content",
+                      style: d(l.virtualContentStyle)
                     },
-                    null,
+                    [
+                      o("table", null, [
+                        o("colgroup", null, [
+                          (t(!0), e(
+                            n,
+                            null,
+                            i(l.columns, (r) => (t(), e(
+                              "col",
+                              {
+                                key: r.prop,
+                                style: d({ width: `${l.getWidth(r.width)}px` })
+                              },
+                              null,
+                              4
+                              /* STYLE */
+                            ))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        o("tbody", null, [
+                          (t(!0), e(
+                            n,
+                            null,
+                            i(l.tableRows, (r, s) => (t(), e(
+                              "tr",
+                              {
+                                key: s,
+                                class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
+                              },
+                              [
+                                (t(!0), e(
+                                  n,
+                                  null,
+                                  i(l.columns, (a) => (t(), e(
+                                    "td",
+                                    {
+                                      key: a.prop,
+                                      class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
+                                    },
+                                    [
+                                      o("div", {
+                                        id: `table-cell-${l.tableIdentifier}-${s}-${a.prop}`,
+                                        style: d({ "text-align": a.alignment }),
+                                        class: "nmorph-table__cell nmorph-table__cell--data"
+                                      }, b(l.tableData(r[a.prop])), 13, x)
+                                    ],
+                                    2
+                                    /* CLASS */
+                                  ))),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ],
+                              2
+                              /* CLASS */
+                            ))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])
+                      ]),
+                      o("table", null, [
+                        o("colgroup", null, [
+                          (t(!0), e(
+                            n,
+                            null,
+                            i(l.columns, (r) => (t(), e(
+                              "col",
+                              {
+                                key: r.prop,
+                                style: d({ width: `${l.getWidth(r.width)}px` })
+                              },
+                              null,
+                              4
+                              /* STYLE */
+                            ))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        o("tbody", W, [
+                          p(c.$slots, "default")
+                        ])
+                      ])
+                    ],
                     4
                     /* STYLE */
-                  ))),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ]),
-              e("tbody", null, [
-                (t(!0), o(
-                  a,
-                  null,
-                  d(l.rows, (r, _) => (t(), o(
-                    "tr",
-                    {
-                      key: _,
-                      class: i(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
-                    },
-                    [
-                      (t(!0), o(
-                        a,
+                  )
+                ],
+                4
+                /* STYLE */
+              )) : (t(), e(
+                n,
+                { key: 1 },
+                [
+                  o("table", null, [
+                    o("colgroup", null, [
+                      (t(!0), e(
+                        n,
                         null,
-                        d(l.columns, (n) => (t(), o(
-                          "td",
+                        i(l.columns, (r) => (t(), e(
+                          "col",
                           {
-                            key: n.prop,
-                            class: i([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
+                            key: r.prop,
+                            style: d({ width: `${l.getWidth(r.width)}px` })
+                          },
+                          null,
+                          4
+                          /* STYLE */
+                        ))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    o("tbody", null, [
+                      (t(!0), e(
+                        n,
+                        null,
+                        i(l.tableRows, (r, s) => (t(), e(
+                          "tr",
+                          {
+                            key: s,
+                            class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
                           },
                           [
-                            e("div", {
-                              id: `table-cell-${l.tableIdentifier}-${_}-${n.prop}`,
-                              style: s({ "text-align": n.alignment }),
-                              class: "nmorph-table__cell nmorph-table__cell--data"
-                            }, p(l.tableData(r[n.prop])), 13, x)
+                            (t(!0), e(
+                              n,
+                              null,
+                              i(l.columns, (a) => (t(), e(
+                                "td",
+                                {
+                                  key: a.prop,
+                                  class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
+                                },
+                                [
+                                  o("div", {
+                                    id: `table-cell-${l.tableIdentifier}-${s}-${a.prop}`,
+                                    style: d({ "text-align": a.alignment }),
+                                    class: "nmorph-table__cell nmorph-table__cell--data"
+                                  }, b(l.tableData(r[a.prop])), 13, B)
+                                ],
+                                2
+                                /* CLASS */
+                              ))),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
                           ],
                           2
                           /* CLASS */
@@ -130,39 +255,39 @@ function B(c, W, T, l, j, z) {
                         128
                         /* KEYED_FRAGMENT */
                       ))
-                    ],
-                    2
-                    /* CLASS */
-                  ))),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ])
-            ]),
-            e("table", null, [
-              e("colgroup", null, [
-                (t(!0), o(
-                  a,
-                  null,
-                  d(l.columns, (r) => (t(), o(
-                    "col",
-                    {
-                      key: r.prop,
-                      style: s({ width: `${l.getWidth(r.width)}px` })
-                    },
-                    null,
-                    4
-                    /* STYLE */
-                  ))),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ]),
-              e("tbody", N, [
-                y(c.$slots, "default")
-              ])
-            ])
-          ])
+                    ])
+                  ]),
+                  o("table", null, [
+                    o("colgroup", null, [
+                      (t(!0), e(
+                        n,
+                        null,
+                        i(l.columns, (r) => (t(), e(
+                          "col",
+                          {
+                            key: r.prop,
+                            style: d({ width: `${l.getWidth(r.width)}px` })
+                          },
+                          null,
+                          4
+                          /* STYLE */
+                        ))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    o("tbody", N, [
+                      p(c.$slots, "default")
+                    ])
+                  ])
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
+            ],
+            38
+            /* CLASS, STYLE, NEED_HYDRATION */
+          )
         ])
       ],
       2
@@ -170,7 +295,7 @@ function B(c, W, T, l, j, z) {
     ))
   ]);
 }
-const H = /* @__PURE__ */ u(h, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
+const I = /* @__PURE__ */ v(m, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
 export {
-  H as default
+  I as default
 };