@nmorph/nmorph-ui-kit 3.0.6 → 3.0.7

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
 };

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue.js

@@ -1,6 +1,6 @@
 import './NmorphDrawer.css';
 import c from "./NmorphDrawer.vue2.js";
-import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as d, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as i, createCommentVNode as s } from "vue";
+import { openBlock as e, createBlock as p, withCtx as i, createElementVNode as l, normalizeStyle as m, normalizeClass as n, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as d, createCommentVNode as s } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], w = {
@@ -12,7 +12,7 @@ const f = ["aria-label"], w = {
 };
 function v(r, C, N, o, z, O) {
   return e(), p(o.NmorphOverlay, {
-    show: o.props.modelValue,
+    show: o.isVisible,
     "z-index": o.props.zIndex,
     "teleport-to": o.props.teleportTo,
     "disabled-teleport": o.props.disabledTeleport,
@@ -21,9 +21,9 @@ function v(r, C, N, o, z, O) {
     onOnOutsideClick: o.overlayClickHandler,
     onOnEscapeKeydown: o.closeHandler
   }, {
-    default: n(() => [
+    default: i(() => [
       l("aside", {
-        class: d(o.modifiers),
+        class: n(o.modifiers),
         style: m(o.drawerStyle),
         role: "dialog",
         "aria-modal": "true",
@@ -45,9 +45,9 @@ function v(r, C, N, o, z, O) {
               "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
               onClick: o.closeHandler
             }, [
-              i(o.NmorphIcon, null, {
-                default: n(() => [
-                  i(o.NmorphIconCross)
+              d(o.NmorphIcon, null, {
+                default: i(() => [
+                  d(o.NmorphIconCross)
                 ]),
                 _: 1
                 /* STABLE */
@@ -58,7 +58,7 @@ function v(r, C, N, o, z, O) {
         l(
           "div",
           {
-            class: d(["nmorph-drawer__content", o.props.contentClass])
+            class: n(["nmorph-drawer__content", o.props.contentClass])
           },
           [
             t(r.$slots, "default")

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphDrawer.css';
-import { defineComponent as m, useSlots as c, computed as t } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as h } from "../../../utils/common.js";
-import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import _ from "../../../assets/icons/cross.svg.js";
-const w = /* @__PURE__ */ m({
+import { defineComponent as C, useSlots as N, ref as y, computed as i, watch as S, onBeforeUnmount as b, nextTick as B } from "vue";
+import { useModifiers as A } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as F } from "../../../utils/common.js";
+import V from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import z from "../../../assets/icons/cross.svg.js";
+const v = 220, M = /* @__PURE__ */ C({
   __name: "NmorphDrawer",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -21,30 +21,70 @@ const w = /* @__PURE__ */ m({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(s, { expose: n, emit: u }) {
-    n();
-    const e = s, r = u, o = c(), p = t(
-      () => y({
-        "nmorph-drawer": [e.placement, e.modelValue && "open"]
+  setup(h, { expose: w, emit: q }) {
+    w();
+    const e = h, u = q, m = N(), n = y(e.modelValue), o = y(e.modelValue);
+    let r = null, t = null;
+    const g = i(
+      () => A({
+        "nmorph-drawer": [e.placement, o.value && "open"]
       })
-    ), d = t(
-      () => h({
+    ), O = i(
+      () => F({
         "--nmorph-private-drawer-size": e.size
       })
-    ), l = () => {
-      r("on-close"), r("update:model-value", !1);
-    }, i = () => {
-      e.closeOnOverlay && l();
-    }, f = t(() => !!(o.header || e.title || e.showClose)), a = { props: e, emit: r, slots: o, modifiers: p, drawerStyle: d, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
-      return v;
+    ), d = () => {
+      u("on-close"), u("update:model-value", !1);
+    }, T = () => {
+      e.closeOnOverlay && d();
+    }, _ = i(() => !!(m.header || e.title || e.showClose)), a = () => {
+      r === null || typeof window > "u" || (cancelAnimationFrame(r), r = null);
+    }, s = () => {
+      t !== null && (clearTimeout(t), t = null);
+    }, p = async () => {
+      if (s(), n.value = !0, typeof window > "u") {
+        o.value = !0;
+        return;
+      }
+      await B(), a(), r = requestAnimationFrame(() => {
+        o.value = !0, r = null;
+      });
+    }, f = () => {
+      a(), o.value = !1, n.value && (s(), t = setTimeout(() => {
+        n.value = !1, t = null;
+      }, v));
+    };
+    S(
+      () => e.modelValue,
+      (l) => {
+        if (l) {
+          p();
+          return;
+        }
+        f();
+      },
+      { immediate: !0 }
+    ), b(() => {
+      a(), s();
+    });
+    const c = { props: e, emit: u, slots: m, drawerTransitionDuration: v, isVisible: n, isOpen: o, get openAnimationFrame() {
+      return r;
+    }, set openAnimationFrame(l) {
+      r = l;
+    }, get closeTimeout() {
+      return t;
+    }, set closeTimeout(l) {
+      t = l;
+    }, modifiers: g, drawerStyle: O, closeHandler: d, overlayClickHandler: T, hasHeader: _, clearOpenAnimationFrame: a, clearCloseTimeout: s, openDrawer: p, closeDrawer: f, get NmorphIcon() {
+      return x;
     }, get NmorphIconCross() {
-      return _;
+      return z;
     }, get NmorphOverlay() {
-      return q;
+      return V;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  w as default
+  M as default
 };