@nmorph/nmorph-ui-kit 3.0.6 → 3.0.8

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -1,16 +1,18 @@
 import './NmorphMediaTile.css';
-import { defineComponent as E, ref as p, computed as t, watch as q } from "vue";
-import { useModifiers as L } from "../../../utils/create-modifiers.js";
-import M from "../../../assets/icons/video-camera-off.svg.js";
+import { defineComponent as _, ref as m, computed as t, watch as I } from "vue";
+import { useModifiers as E } from "../../../utils/create-modifiers.js";
+import L from "../../../assets/icons/video-camera-off.svg.js";
 import A from "../../../assets/icons/share.svg.js";
 import C from "../../../assets/icons/mute.svg.js";
 import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import w from "../../basic/nmorph-button/NmorphButton.vue.js";
-import D from "../nmorph-avatar/NmorphAvatar.vue.js";
-import R from "../../../assets/icons/loader.svg.js";
-const W = /* @__PURE__ */ E({
+import R from "../nmorph-avatar/NmorphAvatar.vue.js";
+import D from "../../../assets/icons/loader.svg.js";
+const W = /* @__PURE__ */ _({
   __name: "NmorphMediaTile",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
+    aspect: { type: String, required: !1, default: "video" },
     src: { type: String, required: !1, default: "" },
     srcObject: { type: null, required: !1, default: null },
     sinkId: { type: String, required: !1, default: void 0 },
@@ -32,24 +34,24 @@ const W = /* @__PURE__ */ E({
     error: { type: Boolean, required: !1, default: !1 },
     errorText: { type: String, required: !1, default: "" }
   },
-  setup(B, { expose: I }) {
-    const e = B, o = p(null), a = p(null), u = p({
+  setup(j, { expose: N }) {
+    const e = j, o = m(null), i = m(null), u = m({
       audio: 0,
       video: 0
-    }), v = t(() => !!(e.src || e.srcObject)), m = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), y = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
+    }), y = t(() => !!(e.src || e.srcObject)), h = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), g = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
       u.value = {
-        audio: m(r).length,
-        video: y(r).length
+        audio: h(r).length,
+        video: g(r).length
       };
-    }, h = t(() => typeof e.srcObject?.getVideoTracks == "function"), g = t(() => u.value.audio > 0), k = t(() => u.value.video > 0), S = t(
-      () => !!(e.src || e.srcObject && (!h.value || k.value))
-    ), n = t(() => v.value && S.value && !e.videoOff && !e.error), i = t(
-      () => !!(e.srcObject && !e.muted && !e.error && g.value)
-    ), j = t(() => e.muted || i.value), N = t(() => n.value && e.src ? e.src : void 0), O = t(
+    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), S = t(() => u.value.video > 0), O = t(
+      () => !!(e.src || e.srcObject && (!k.value || S.value))
+    ), s = t(() => y.value && O.value && !e.videoOff && !e.error), n = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || n.value), T = t(() => s.value && e.src ? e.src : void 0), q = t(
       () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
-    ), T = t(() => O.value || e.name || "?"), V = t(
-      () => L({
+    ), M = t(() => q.value || e.name || "?"), V = t(
+      () => E({
         "nmorph-media-tile": [
+          e.design,
+          e.aspect,
           e.fit,
           e.mirrored && "mirrored",
           e.selected && "selected",
@@ -60,64 +62,76 @@ const W = /* @__PURE__ */ E({
           e.loading && "loading"
         ]
       })
-    ), s = (r) => {
+    ), c = (r) => {
       if (!r || e.sinkId === void 0) return;
-      const f = r;
-      typeof f.setSinkId == "function" && f.setSinkId(e.sinkId).catch(() => {
-      });
-    }, c = (r) => {
-      !r || !e.autoplay || r.play().catch(() => {
+      const a = r;
+      typeof a.setSinkId == "function" && a.setSinkId(e.sinkId).catch(() => {
       });
+    }, f = (r) => {
+      console.warn("[NmorphMediaTile] media autoplay failed", r);
+    }, p = (r) => {
+      if (!r || !e.autoplay) return;
+      let a;
+      try {
+        a = r.play();
+      } catch (v) {
+        f(v);
+        return;
+      }
+      a && typeof a.catch == "function" && a.catch(f);
     };
-    q(
+    I(
       () => e.srcObject,
-      (r, f, _) => {
+      (r, a, v) => {
         if (d(r), !r || typeof r.addEventListener != "function" || typeof r.removeEventListener != "function")
           return;
         const l = () => d(r);
-        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), _(() => {
+        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), v(() => {
           r.removeEventListener("addtrack", l), r.removeEventListener("removetrack", l);
         });
       },
       { immediate: !0 }
-    ), q(
+    ), I(
       () => [
         e.srcObject,
         e.sinkId,
         e.autoplay,
+        e.videoOff,
+        e.error,
+        s.value,
         n.value,
-        i.value,
+        b.value,
         o.value,
-        a.value
+        i.value
       ],
       () => {
         if (o.value) {
-          const r = n.value ? e.srcObject : null;
-          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && n.value && r && c(o.value);
+          const r = e.srcObject;
+          o.value.srcObject !== r && (o.value.srcObject = r), c(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
         }
-        if (a.value) {
-          const r = i.value ? e.srcObject : null;
-          a.value.srcObject !== r && (a.value.srcObject = r), s(a.value), e.autoplay && i.value && c(a.value);
+        if (i.value) {
+          const r = n.value ? e.srcObject : null;
+          i.value.srcObject !== r && (i.value.srcObject = r), c(i.value), e.autoplay && n.value && p(i.value);
         }
       },
       { immediate: !0, flush: "post" }
-    ), I({ videoRef: o });
-    const b = { props: e, videoRef: o, audioRef: a, srcObjectTrackCount: u, hasMediaSource: v, getAudioTracks: m, getVideoTracks: y, updateSrcObjectTrackCount: d, canInspectVideoTracks: h, hasAudioTracks: g, hasVideoTracks: k, hasVideoSource: S, videoVisible: n, needsSeparateAudioOutput: i, videoMuted: j, videoSrc: N, initials: O, fallbackLabel: T, modifiers: V, setMediaElementSinkId: s, playMediaElement: c, get NmorphAvatar() {
-      return D;
+    ), N({ videoRef: o });
+    const B = { props: e, videoRef: o, audioRef: i, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: S, hasVideoSource: O, videoVisible: s, needsSeparateAudioOutput: n, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: c, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
+      return R;
     }, get NmorphButton() {
       return w;
     }, get NmorphIcon() {
       return x;
     }, get NmorphIconLoaderDots() {
-      return R;
+      return D;
     }, get NmorphIconMute() {
       return C;
     }, get NmorphIconShare() {
       return A;
     }, get NmorphIconVideoCameraOff() {
-      return M;
+      return L;
     } };
-    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
+    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
   }
 });
 export {

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

@@ -1 +1 @@
-.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom: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{--nmorph-private-control-height: var(--nmorph-private-pagination-height);--nmorph-private-selection-control-size: var(--nmorph-private-pagination-height);width:40px;min-width:40px;height:var(--nmorph-private-pagination-height);min-height:var(--nmorph-private-pagination-height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{padding:0}.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}
+.nmorph-pagination{display:flex;justify-content:center;box-sizing:border-box;width:var(--nmorph-private-pagination-width, 100%);min-width:min(100%,var(--nmorph-private-pagination-min-width, 0px));max-width:100%;margin-top:var(--indentation-04);margin-right:auto;margin-left:auto}.nmorph-pagination.nmorph-pagination--fixed-container{width:var(--nmorph-private-pagination-width, var(--nmorph-private-pagination-fixed-width))}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom: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{--nmorph-private-control-height: var(--nmorph-private-pagination-height);--nmorph-private-selection-control-size: var(--nmorph-private-pagination-height);width:40px;min-width:40px;height:var(--nmorph-private-pagination-height);min-height:var(--nmorph-private-pagination-height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{padding:0}.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

@@ -17,7 +17,7 @@ function k(v, r, g, n, f, N) {
       disabled: n.blockPrevButton || n.interactionDisabled,
       onClick: n.prevClick
     }, {
-      default: e(() => [
+      "icon-only": e(() => [
         i(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
           default: e(() => [
             i(n.NmorphIconChevronDown)
@@ -50,7 +50,7 @@ function k(v, r, g, n, f, N) {
               text: o.label,
               thickness: n.props.thickness,
               disabled: n.interactionDisabled,
-              onClick: (x) => n.bigStepUpdate(o.value)
+              onClick: (y) => n.bigStepUpdate(o.value)
             }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (a(), s(n.NmorphRadio, {
               key: 1,
               value: o.value,
@@ -73,7 +73,7 @@ function k(v, r, g, n, f, N) {
       disabled: n.blockNextButton || n.interactionDisabled,
       onClick: n.nextClick
     }, {
-      default: e(() => [
+      "icon-only": e(() => [
         i(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
           default: e(() => [
             i(n.NmorphIconChevronDown)
@@ -87,7 +87,7 @@ function k(v, r, g, n, f, N) {
     }, 8, ["thickness", "disabled"])
   ], 14, b)) : p("v-if", !0);
 }
-const u = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const P = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  u as default
+  P as default
 };

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

@@ -1,12 +1,13 @@
 import './NmorphPagination.css';
-import { defineComponent as O, computed as n, ref as g, watch as c } from "vue";
-import { useModifiers as Q } from "../../../utils/create-modifiers.js";
-import V from "../../form/nmorph-radio/NmorphRadio.vue.js";
+import { defineComponent as V, computed as i, ref as b, watch as d } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Q } from "../../../utils/common.js";
+import W from "../../form/nmorph-radio/NmorphRadio.vue.js";
 import F from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import M from "../../basic/nmorph-button/NmorphButton.vue.js";
-import I from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
-import R from "../../../assets/icons/chevron-down.svg.js";
-const z = /* @__PURE__ */ O({
+import I from "../../basic/nmorph-button/NmorphButton.vue.js";
+import R from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+import D from "../../../assets/icons/chevron-down.svg.js";
+const K = /* @__PURE__ */ V({
   __name: "NmorphPagination",
   props: {
     totalElementsQuantity: { type: Number, required: !0 },
@@ -17,88 +18,111 @@ const z = /* @__PURE__ */ O({
     hideOnSinglePage: { type: Boolean, required: !1, default: !0 },
     maxVisiblePages: { type: Number, required: !1, default: 9 },
     fastForwardStep: { type: Number, required: !1, default: 5 },
-    thickness: { type: null, required: !1, default: "basic" }
+    thickness: { type: null, required: !1, default: "basic" },
+    fixedContainer: { type: Boolean, required: !1, default: !1 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    minWidth: { type: [Number, String], required: !1, default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(b, { expose: h, emit: N }) {
-    h();
-    const t = b, p = N, S = n(
-      () => Q({
-        "nmorph-pagination": [t.disabled && "disabled", t.loading && "loading"]
+  setup(N, { expose: S, emit: x }) {
+    S();
+    const t = N, c = x, y = i(
+      () => O({
+        "nmorph-pagination": [
+          t.disabled && "disabled",
+          t.loading && "loading",
+          t.fixedContainer && "fixed-container"
+        ]
       })
-    ), d = {
+    ), g = {
       thick: "var(--thick-component)",
       basic: "var(--basic-component)",
       thin: "var(--thin-component)"
-    }, y = n(() => ({
-      "--nmorph-private-pagination-height": d[t.thickness]
-    })), P = n(() => t.disabled || t.loading), k = () => {
-      r.value = String(Number(r.value) - 1);
-    }, _ = () => {
-      r.value = String(Number(r.value) + 1);
-    }, r = g(String(t.modelValue)), u = n(() => {
+    }, o = i(() => Math.max(1, Math.floor(t.maxVisiblePages))), v = i(() => {
+      const e = o.value * 40, a = Math.max(0, o.value - 1) * 8;
+      return [
+        "calc(",
+        "var(--nmorph-private-pagination-height) + ",
+        "var(--nmorph-private-pagination-height) + ",
+        "16px + var(--indentation-01) + var(--indentation-01) + ",
+        `${e + a}px`,
+        ")"
+      ].join("");
+    }), P = i(() => ({
+      "--nmorph-private-pagination-height": g[t.thickness],
+      "--nmorph-private-pagination-fixed-pages": o.value,
+      "--nmorph-private-pagination-fixed-width": v.value,
+      ...Q({
+        "--nmorph-private-pagination-width": t.width,
+        "--nmorph-private-pagination-min-width": t.minWidth
+      })
+    })), q = i(() => t.disabled || t.loading), k = () => {
+      n.value = String(Number(n.value) - 1);
+    }, w = () => {
+      n.value = String(Number(n.value) + 1);
+    }, n = b(String(t.modelValue)), u = i(() => {
       const e = Number(t.totalElementsQuantity), a = Number(t.elementsQuantityOnPage);
       return !Number.isFinite(e) || !Number.isFinite(a) || e <= 0 || a <= 0 ? 0 : Math.ceil(e / a);
-    }), i = n(
+    }), s = i(
       () => Array.from({ length: u.value }, (e, a) => ({ value: String(a + 1), label: String(a + 1) }))
-    ), s = g([]), v = n(() => {
-      const e = String(Math.max(1, Number(r.value) || 1));
+    ), p = b([]), f = i(() => {
+      const e = String(Math.max(1, Number(n.value) || 1));
       return [{ value: e, label: e }];
-    }), l = n(() => t.loading && s.value.length ? s.value : i.value.length ? i.value : v.value), q = n(() => t.loading || !t.hideOnSinglePage || u.value > 1);
-    c(r, (e) => {
-      p("update:model-value", Number(e));
-    }), c(
-      [i, () => t.loading],
+    }), r = i(() => t.loading && p.value.length ? p.value : s.value.length ? s.value : f.value), _ = i(() => t.loading || !t.hideOnSinglePage || u.value > 1);
+    d(n, (e) => {
+      c("update:model-value", Number(e));
+    }), d(
+      [s, () => t.loading],
       ([e, a]) => {
-        (e.length || !a) && (s.value = e);
+        (e.length || !a) && (p.value = e);
       },
       { immediate: !0 }
-    ), c(
+    ), d(
       () => t.modelValue,
       (e) => {
-        r.value = String(e);
+        n.value = String(e);
       }
-    ), c([u, () => t.loading], ([e, a]) => {
-      a || e <= 0 || Number(r.value) > e && (r.value = String(e));
+    ), d([u, () => t.loading], ([e, a]) => {
+      a || e <= 0 || Number(n.value) > e && (n.value = String(e));
     });
-    const x = n(() => Number(r.value) === 1), B = n(() => Number(r.value) >= l.value.length), w = n(() => {
-      const e = l.value.length, a = Number(r.value), o = t.maxVisiblePages;
-      if (e <= o)
-        return l.value;
-      const m = Math.floor(o / 2);
+    const B = i(() => Number(n.value) === 1), C = i(() => Number(n.value) >= r.value.length), M = i(() => {
+      const e = r.value.length, a = Number(n.value), l = t.maxVisiblePages;
+      if (e <= l)
+        return r.value;
+      const m = Math.floor(l / 2);
       return a <= m ? [
-        ...l.value.slice(0, o - 2),
+        ...r.value.slice(0, l - 2),
         { value: "next", label: "..." },
-        l.value[e - 1]
+        r.value[e - 1]
       ] : a >= e - m ? [
-        l.value[0],
+        r.value[0],
         { value: "prev", label: "..." },
-        ...l.value.slice(e - (o - 2))
+        ...r.value.slice(e - (l - 2))
       ] : [
-        l.value[0],
+        r.value[0],
         { value: "prev", label: "..." },
-        ...l.value.slice(a - m, a + m - 1),
+        ...r.value.slice(a - m, a + m - 1),
         { value: "next", label: "..." },
-        l.value[e - 1]
+        r.value[e - 1]
       ];
-    }), f = { props: t, emit: p, modifiers: S, thicknessHeightMap: d, paginationStyle: y, interactionDisabled: P, prevClick: k, nextClick: _, selectedPage: r, totalPages: u, pages: i, retainedPages: s, fallbackPages: v, effectivePages: l, show: q, blockPrevButton: x, blockNextButton: B, visiblePages: w, bigStepUpdate: (e) => {
-      const a = Number(r.value);
-      let o = e === "prev" ? a - t.fastForwardStep : a + t.fastForwardStep;
-      o <= 0 && (o = 1), o >= l.value.length && (o = l.value.length), r.value = String(o);
+    }), h = { props: t, emit: c, modifiers: y, thicknessHeightMap: g, fixedPagesCount: o, fixedContainerWidth: v, paginationStyle: P, interactionDisabled: q, prevClick: k, nextClick: w, selectedPage: n, totalPages: u, pages: s, retainedPages: p, fallbackPages: f, effectivePages: r, show: _, blockPrevButton: B, blockNextButton: C, visiblePages: M, bigStepUpdate: (e) => {
+      const a = Number(n.value);
+      let l = e === "prev" ? a - t.fastForwardStep : a + t.fastForwardStep;
+      l <= 0 && (l = 1), l >= r.value.length && (l = r.value.length), n.value = String(l);
     }, get NmorphRadioGroup() {
-      return I;
+      return R;
     }, get NmorphButton() {
-      return M;
+      return I;
     }, get NmorphIcon() {
       return F;
     }, get NmorphRadio() {
-      return V;
+      return W;
     }, get NmorphIconChevronDown() {
-      return R;
+      return D;
     } };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {
-  z as default
+  K as default
 };

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

@@ -1 +1 @@
-.nmorph-table{--nmorph-private-table-border-color: var(--nmorph-info-text-color);--nmorph-private-table-cell-height: auto;--nmorph-private-table-row-hover-background: 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(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--nmorph-private-table-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(--nmorph-private-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(--nmorph-private-table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.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,.nmorph-table .nmorph-table__table-data-row--active{background:var(--nmorph-private-table-row-hover-background)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-table-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:var(--nmorph-shadow-inset)}.nmorph-table--plain{overflow:hidden;background:var(--nmorph-main-color);border:var(--nmorph-plain-border);border-radius:var(--default-border-radius)}
+.nmorph-table{--nmorph-private-table-border-color: var(--nmorph-info-text-color);--nmorph-private-table-cell-height: auto;--nmorph-private-table-row-hover-background: 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;table-layout:fixed;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--nmorph-private-table-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(--nmorph-private-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(--nmorph-private-table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.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,.nmorph-table .nmorph-table__table-data-row--active{background:var(--nmorph-private-table-row-hover-background)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-table-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:var(--nmorph-shadow-inset)}.nmorph-table--plain{overflow:hidden;background:var(--nmorph-main-color);border:var(--nmorph-plain-border);border-radius:var(--default-border-radius)}.nmorph-table--plain.nmorph-table--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered table{width:100%;margin-left:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered{border:0;border-right:1px solid var(--nmorph-private-table-border-color);border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered:last-child{border-right:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__body:not(.nmorph-table__body--virtual) .nmorph-table__table-data-row:last-child .nmorph-table__table-data--bordered{border-bottom:0}

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

@@ -1,6 +1,6 @@
 import './NmorphTable.css';
 import h from "./NmorphTable.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeStyle as n, normalizeClass as _, createElementVNode as o, renderSlot as p, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y } from "vue";
+import { openBlock as r, createElementBlock as t, normalizeStyle as n, normalizeClass as _, createElementVNode as o, renderSlot as m, Fragment as d, renderList as i, toDisplayString as s, createBlock as p, createCommentVNode as y } from "vue";
 /* empty css                 */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
 const w = { class: "nmorph-table__wrapper" }, f = {
@@ -20,7 +20,7 @@ function H(c, N, W, e, C, I) {
       [
         o("div", w, [
           o("div", f, [
-            p(c.$slots, "default")
+            m(c.$slots, "default")
           ]),
           o("table", k, [
             o("colgroup", null, [
@@ -45,7 +45,7 @@ function H(c, N, W, e, C, I) {
                     "th",
                     {
                       key: b,
-                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": e.props.bordered }])
+                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": e.bordered }])
                     },
                     [
                       o("div", x, [
@@ -63,7 +63,7 @@ function H(c, N, W, e, C, I) {
                               1
                               /* TEXT */
                             ),
-                            e.sortData && e.sortData[l.prop] ? (r(), m(e.NmorphSortButton, {
+                            e.sortData && e.sortData[l.prop] ? (r(), p(e.NmorphSortButton, {
                               key: 0,
                               class: "nmorph-table__button-wrapper",
                               value: e.sortData[l.prop],
@@ -154,7 +154,7 @@ function H(c, N, W, e, C, I) {
                                   "td",
                                   {
                                     key: a.prop,
-                                    class: _([{ "nmorph-table__table-data--bordered": e.props.bordered }, "nmorph-table__table-data"])
+                                    class: _([{ "nmorph-table__table-data--bordered": e.bordered }, "nmorph-table__table-data"])
                                   },
                                   [
                                     o("div", {
@@ -222,7 +222,7 @@ function H(c, N, W, e, C, I) {
                           "td",
                           {
                             key: a.prop,
-                            class: _([{ "nmorph-table__table-data--bordered": e.props.bordered }, "nmorph-table__table-data"])
+                            class: _([{ "nmorph-table__table-data--bordered": e.bordered }, "nmorph-table__table-data"])
                           },
                           [
                             o("div", {

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

@@ -1,17 +1,15 @@
 import './NmorphTable.css';
-import { defineComponent as j, computed as l, ref as n, provide as M, watch as P, nextTick as z } from "vue";
-import { useModifiers as K } from "../../../utils/create-modifiers.js";
-import { generateUUID as Q, toCssSize as Y, createCssSizeVariables as $, createCssVariables as F, resolveDomElement as G } from "../../../utils/common.js";
-import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
-import X from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-const oe = /* @__PURE__ */ j({
+import { defineComponent as P, computed as l, ref as n, provide as _, watch as z, nextTick as K } from "vue";
+import { useModifiers as Q } from "../../../utils/create-modifiers.js";
+import { generateUUID as Y, toCssSize as $, createCssSizeVariables as F, createCssVariables as G, resolveDomElement as J } from "../../../utils/common.js";
+import { useVirtualList as X } from "../../../hooks/use-virtual-list.js";
+import Z from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+const ie = /* @__PURE__ */ P({
   __name: "NmorphTable",
   props: {
     data: { type: Array, required: !1, default: () => [] },
     rowHover: { type: Boolean, required: !1, default: !0 },
-    bordered: { type: Boolean, required: !1, default: !1 },
     sort: { type: Object, required: !1, default: void 0 },
-    design: { type: null, required: !1, default: "nmorph" },
     virtual: { type: Boolean, required: !1, default: !1 },
     virtualHeight: { type: [Number, String], required: !1, default: "320px" },
     virtualOverscan: { type: Number, required: !1, default: 5 },
@@ -19,22 +17,27 @@ const oe = /* @__PURE__ */ j({
     virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
     borderColor: { type: String, required: !1, default: void 0 },
     cellHeight: { type: [Number, String], required: !1, default: void 0 },
-    rowHoverBackground: { type: String, required: !1, default: void 0 }
+    rowHoverBackground: { type: String, required: !1, default: void 0 },
+    design: { type: null, required: !1, default: "nmorph" },
+    bordered: { type: Boolean, required: !1, skipCheck: !0 }
   },
-  setup(_, { expose: B }) {
-    B();
-    const t = _, T = l(
-      () => K({
-        "nmorph-table": [t.design]
+  setup(B, { expose: T }) {
+    T();
+    const t = B, w = l(() => t.design === "plain" && t.bordered === !0), I = l(
+      () => Q({
+        "nmorph-table": {
+          [t.design]: !0,
+          bordered: w.value
+        }
       })
-    ), o = n([...t.data]), u = l(() => t.virtual), w = l(() => t.virtualRowHeight), H = l(() => t.virtualOverscan), S = l(() => t.virtualDynamicHeight), r = J(o, {
+    ), o = n([...t.data]), u = l(() => t.virtual), H = l(() => t.virtualRowHeight), S = l(() => t.virtualOverscan), C = l(() => t.virtualDynamicHeight), r = X(o, {
       enabled: u,
-      itemHeight: w,
-      overscan: H,
-      dynamic: S
-    }), C = l(
+      itemHeight: H,
+      overscan: S,
+      dynamic: C
+    }), x = l(
       () => u.value ? r.virtualItems.value : o.value.map((e, a) => ({ item: e, index: a }))
-    ), x = l(() => C.value.map((e) => e.item)), s = n(-1), p = n(0), d = n(t.sort), I = (e, a) => {
+    ), D = l(() => x.value.map((e) => e.item)), s = n(-1), p = n(0), d = n(t.sort), W = (e, a) => {
       d.value && (d.value[a] = e, o.value.sort((g, y) => {
         const b = String(g[a]).toLowerCase(), i = String(y[a]).toLowerCase();
         if (!d.value)
@@ -43,15 +46,15 @@ const oe = /* @__PURE__ */ j({
         return f === "ascending" ? b.localeCompare(i) : f === "descending" ? i.localeCompare(b) : 0;
       }));
     }, h = n(null), c = n([]);
-    M("table-data", { rows: x, columns: c });
-    const D = l(() => {
+    _("table-data", { rows: D, columns: c });
+    const R = l(() => {
       const e = c.value.map((i) => i.width).filter((i) => !!i), a = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - a;
       return h.value?.clientWidth ? (h.value?.clientWidth - g) / y : 0;
-    }), W = (e) => e !== "" ? e : D.value, m = n(0);
-    P(
+    }), N = (e) => e || R.value, m = n(0);
+    z(
       () => t.data,
       async () => {
-        m.value = m.value + 1, o.value = [...t.data], c.value = [], await z();
+        m.value = m.value + 1, o.value = [...t.data], c.value = [], await K();
         const e = r.containerRef.value;
         e && (e.scrollTop = Math.min(
           p.value,
@@ -62,38 +65,38 @@ const oe = /* @__PURE__ */ j({
         immediate: !0
       }
     );
-    const N = (e) => typeof e == "object" ? "" : e, R = Q();
-    M("table-identifier", R);
-    const q = l(() => Y(t.virtualHeight)), O = l(() => ({
-      ...F({
+    const O = (e) => typeof e == "object" ? "" : e, k = Y();
+    _("table-identifier", k);
+    const q = l(() => $(t.virtualHeight)), A = l(() => ({
+      ...G({
         "--nmorph-private-table-border-color": t.borderColor,
         "--nmorph-private-table-row-hover-background": t.rowHoverBackground
       }),
-      ...$({
+      ...F({
         "--nmorph-private-table-cell-height": t.cellHeight
       })
-    })), A = l(() => ({
+    })), E = l(() => ({
       "--nmorph-private-table-virtual-row-height": `${t.virtualRowHeight}px`,
       height: u.value ? q.value : void 0,
       overflowY: u.value ? "auto" : void 0
-    })), E = r.spacerStyle, L = r.contentStyle, U = (e, a) => {
-      r.measureElement(a, G(e));
-    }, V = () => {
+    })), L = r.spacerStyle, U = r.contentStyle, V = (e, a) => {
+      r.measureElement(a, J(e));
+    }, j = () => {
       r.scrollHandler(), p.value = r.containerRef.value?.scrollTop || 0;
     }, v = (e) => {
       if (!o.value.length) return;
       const a = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
       s.value = a, r.scrollToIndex(a);
-    }, k = { props: t, modifiers: T, rows: o, virtualEnabled: u, virtualRowHeight: w, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: x, activeRowIndex: s, lastScrollTop: p, sortData: d, onSort: I, nmorphDOMTable: h, columns: c, defaultColWidth: D, getWidth: W, key: m, tableData: N, tableIdentifier: R, virtualHeight: q, tableStyle: O, tableBodyStyle: A, virtualSpacerStyle: E, virtualContentStyle: L, setVirtualRowRef: U, scrollHandler: V, moveActiveRow: v, tableKeydownHandler: (e) => {
+    }, M = { props: t, bordered: w, modifiers: I, rows: o, virtualEnabled: u, virtualRowHeight: H, virtualOverscan: S, virtualDynamicHeight: C, virtualList: r, renderedRows: x, tableRows: D, activeRowIndex: s, lastScrollTop: p, sortData: d, onSort: W, nmorphDOMTable: h, columns: c, defaultColWidth: R, getWidth: N, key: m, tableData: O, tableIdentifier: k, virtualHeight: q, tableStyle: A, tableBodyStyle: E, virtualSpacerStyle: L, virtualContentStyle: U, setVirtualRowRef: V, scrollHandler: j, moveActiveRow: v, tableKeydownHandler: (e) => {
       u.value && (e.key === "ArrowDown" ? (e.preventDefault(), v(1)) : e.key === "ArrowUp" ? (e.preventDefault(), v(-1)) : e.key === "Home" ? (e.preventDefault(), s.value = 0, r.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), s.value = o.value.length - 1, r.scrollToIndex(o.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), v(
         Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )) : e.key === "PageUp" && (e.preventDefault(), v(
         -Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )));
-    }, NmorphSortButton: X };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+    }, NmorphSortButton: Z };
+    return Object.defineProperty(M, "__isScriptSetup", { enumerable: !1, value: !0 }), M;
   }
 });
 export {
-  oe as default
+  ie as default
 };