@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -0,0 +1,6 @@
+import './NmorphSkeleton.css';
+import o from "./NmorphSkeleton.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

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

@@ -1,36 +1,42 @@
 import './NmorphSkeletonItem.css';
-import t from "./NmorphSkeletonItem.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeStyle as i, normalizeClass as m, createElementVNode as n, createBlock as c, withCtx as h, createVNode as s, createCommentVNode as a } from "vue";
-/* empty css                        */
-import l from "../../../../_virtual/_plugin-vue_export-helper.js";
-const p = { class: "nmorph-skeleton-item__element" };
-function d(_, f, k, e, g, N) {
-  return o(), r(
-    "div",
-    {
-      class: m(e.modifiers),
-      style: i({ "--nmorph-skeleton-item-width": e.cssWidth, "--nmorph-skeleton-item-height": e.cssHeight })
-    },
-    [
-      n("div", p, [
-        e.props.variant === "image" ? (o(), c(e.NmorphIcon, {
+import { defineComponent as s, computed as t, openBlock as o, createElementBlock as h, normalizeStyle as l, normalizeClass as c, createElementVNode as d, createBlock as p, unref as i, withCtx as u, createVNode as f, createCommentVNode as _ } from "vue";
+import { useModifiers as g } from "../../../../utils/create-modifiers.js";
+import k from "../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                         */
+import v from "../../../../assets/icons/image.svg.js";
+const w = { class: "nmorph-skeleton-item__element" }, z = /* @__PURE__ */ s({
+  __name: "NmorphSkeletonItem",
+  props: {
+    variant: { default: "rect" },
+    width: { default: "auto" },
+    height: { default: "auto" },
+    design: { default: "nmorph" }
+  },
+  setup(n) {
+    const e = n, r = t(
+      () => g({
+        "nmorph-skeleton-item": [e.variant, `${e.design === "nmorph" ? "nmorph-design" : ""}`]
+      })
+    ), m = t(() => e.width), a = t(() => e.height);
+    return (N, C) => (o(), h("div", {
+      class: c(r.value),
+      style: l({ "--nmorph-skeleton-item-width": m.value, "--nmorph-skeleton-item-height": a.value })
+    }, [
+      d("div", w, [
+        e.variant === "image" ? (o(), p(i(k), {
           key: 0,
-          width: e.props.width,
-          height: e.props.height
+          width: e.width,
+          height: e.height
         }, {
-          default: h(() => [
-            s(e.NmorphIconImage)
+          default: u(() => [
+            f(i(v))
           ]),
           _: 1
-          /* STABLE */
-        }, 8, ["width", "height"])) : a("v-if", !0)
+        }, 8, ["width", "height"])) : _("", !0)
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const y = /* @__PURE__ */ l(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-skeleton/components/NmorphSkeletonItem.vue"]]);
+    ], 6));
+  }
+});
 export {
-  y as default
+  z as default
 };

package/dist/components/data/nmorph-skeleton/components/NmorphSkeletonItem.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphSkeletonItem.css';
+import o from "./NmorphSkeletonItem.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

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

@@ -1,308 +1,245 @@
 import './NmorphTable.css';
-import p from "./NmorphTable.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeStyle as a, normalizeClass as _, createElementVNode as o, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y, renderSlot as h } from "vue";
-/* empty css                 */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, f = ["data-src"], g = { class: "nmorph-table__table-row" }, k = { class: "nmorph-table__cell" }, x = ["tabindex"], S = ["id"], R = { class: "nmorph-table__slot-columns" }, W = ["id"], B = { class: "nmorph-table__slot-columns" };
-function E(c, H, N, l, C, I) {
-  return r(), t("div", null, [
-    (r(), t(
-      "div",
-      {
-        ref: "nmorphDOMTable",
-        key: l.key,
-        class: _(l.modifiers),
-        style: a(l.tableStyle)
+import { defineComponent as J, computed as c, ref as y, provide as W, watch as X, nextTick as Z, openBlock as l, createElementBlock as a, normalizeStyle as d, normalizeClass as g, createElementVNode as o, Fragment as v, renderList as h, toDisplayString as M, createBlock as ee, createCommentVNode as te, unref as k, renderSlot as E } from "vue";
+import { useModifiers as le } from "../../../utils/create-modifiers.js";
+import { generateUUID as re, toCssSize as ae, createCssSizeVariables as oe, createCssVariables as ne, resolveDomElement as ie } from "../../../utils/common.js";
+import { useVirtualList as ue } from "../../../hooks/use-virtual-list.js";
+import se from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+/* empty css                                                          */
+const de = { class: "nmorph-table__wrapper" }, ce = { class: "nmorph-table__header" }, ve = ["data-src"], pe = { class: "nmorph-table__table-row" }, he = { class: "nmorph-table__cell" }, be = ["tabindex"], _e = ["id"], me = { class: "nmorph-table__slot-columns" }, fe = ["id"], ye = { class: "nmorph-table__slot-columns" }, Se = /* @__PURE__ */ J({
+  __name: "NmorphTable",
+  props: {
+    data: { default: () => [] },
+    rowHover: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !1 },
+    sort: { default: void 0 },
+    design: { default: "nmorph" },
+    virtual: { type: Boolean, default: !1 },
+    virtualHeight: { default: "320px" },
+    virtualOverscan: { default: 5 },
+    virtualRowHeight: { default: 42 },
+    virtualDynamicHeight: { type: Boolean, default: !1 },
+    borderColor: { default: void 0 },
+    cellHeight: { default: void 0 },
+    rowHoverBackground: { default: void 0 }
+  },
+  setup(V) {
+    const r = V, L = c(
+      () => le({
+        "nmorph-table": [r.design]
+      })
+    ), _ = y([...r.data]), m = c(() => r.virtual), O = c(() => r.virtualRowHeight), z = c(() => r.virtualOverscan), N = c(() => r.virtualDynamicHeight), i = ue(_, {
+      enabled: m,
+      itemHeight: O,
+      overscan: z,
+      dynamic: N
+    }), S = c(
+      () => m.value ? i.virtualItems.value : _.value.map((e, u) => ({ item: e, index: u }))
+    ), U = c(() => S.value.map((e) => e.item)), w = y(-1), T = y(0), f = y(r.sort), A = (e, u) => {
+      f.value && (f.value[u] = e, _.value.sort((t, p) => {
+        const n = String(t[u]).toLowerCase(), b = String(p[u]).toLowerCase();
+        if (!f.value)
+          return 0;
+        const C = f.value[u];
+        return C === "ascending" ? n.localeCompare(b) : C === "descending" ? b.localeCompare(n) : 0;
+      }));
+    }, R = y(null), s = y([]);
+    W("table-data", { rows: U, columns: s });
+    const j = c(() => {
+      const e = s.value.map((b) => b.width).filter((b) => !!b), u = e.length, t = e.reduce((b, C) => (b += Number(C), b), 0), p = s.value.length - u;
+      return R.value?.clientWidth ? (R.value?.clientWidth - t) / p : 0;
+    }), H = (e) => e !== "" ? e : j.value, $ = y(0);
+    X(
+      () => r.data,
+      async () => {
+        $.value = $.value + 1, _.value = [...r.data], s.value = [], await Z();
+        const e = i.containerRef.value;
+        e && (e.scrollTop = Math.min(
+          T.value,
+          Math.max(i.totalHeight.value - e.clientHeight, 0)
+        ), i.refresh());
       },
-      [
-        o("div", u, [
-          o("table", w, [
+      {
+        immediate: !0
+      }
+    );
+    const I = (e) => typeof e == "object" ? "" : e, B = re();
+    W("table-identifier", B);
+    const K = c(() => ae(r.virtualHeight)), P = c(() => ({
+      ...ne({
+        "--border-color": r.borderColor,
+        "--table-background-row-hover": r.rowHoverBackground
+      }),
+      ...oe({
+        "--table-cell-height": r.cellHeight
+      })
+    })), Q = c(() => ({
+      "--table-virtual-row-height": `${r.virtualRowHeight}px`,
+      height: m.value ? K.value : void 0,
+      overflowY: m.value ? "auto" : void 0
+    })), F = i.spacerStyle, Y = i.contentStyle, q = (e, u) => {
+      i.measureElement(u, ie(e));
+    }, D = () => {
+      i.scrollHandler(), T.value = i.containerRef.value?.scrollTop || 0;
+    }, x = (e) => {
+      if (!_.value.length) return;
+      const u = w.value < 0 ? 0 : Math.min(Math.max(w.value + e, 0), _.value.length - 1);
+      w.value = u, i.scrollToIndex(u);
+    }, G = (e) => {
+      m.value && (e.key === "ArrowDown" ? (e.preventDefault(), x(1)) : e.key === "ArrowUp" ? (e.preventDefault(), x(-1)) : e.key === "Home" ? (e.preventDefault(), w.value = 0, i.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), w.value = _.value.length - 1, i.scrollToIndex(_.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), x(
+        Math.max(Math.floor((i.viewportHeight.value || r.virtualRowHeight) / r.virtualRowHeight), 1)
+      )) : e.key === "PageUp" && (e.preventDefault(), x(
+        -Math.max(Math.floor((i.viewportHeight.value || r.virtualRowHeight) / r.virtualRowHeight), 1)
+      )));
+    };
+    return (e, u) => (l(), a("div", null, [
+      (l(), a("div", {
+        ref_key: "nmorphDOMTable",
+        ref: R,
+        key: $.value,
+        class: g(L.value),
+        style: d(P.value)
+      }, [
+        o("div", de, [
+          o("table", ce, [
             o("colgroup", null, [
-              (r(!0), t(
-                d,
-                null,
-                i(l.columns, (e) => (r(), t("col", {
-                  key: e.prop,
-                  style: a({ width: `${l.getWidth(e.width)}px` }),
-                  "data-src": `${l.getWidth(e.width)}px`
-                }, null, 12, f))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+              (l(!0), a(v, null, h(s.value, (t) => (l(), a("col", {
+                key: t.prop,
+                style: d({ width: `${H(t.width)}px` }),
+                "data-src": `${H(t.width)}px`
+              }, null, 12, ve))), 128))
             ]),
             o("thead", null, [
-              o("tr", g, [
-                (r(!0), t(
-                  d,
-                  null,
-                  i(l.columns, (e, b) => (r(), t(
-                    "th",
-                    {
-                      key: b,
-                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": l.props.bordered }])
-                    },
-                    [
-                      o("div", k, [
-                        o(
-                          "div",
-                          {
-                            style: a({ "justify-content": e.alignment }),
-                            class: "nmorph-table__cell-content"
-                          },
-                          [
-                            o(
-                              "span",
-                              null,
-                              s(e.label),
-                              1
-                              /* TEXT */
-                            ),
-                            l.sortData && l.sortData[e.prop] ? (r(), m(l.NmorphSortButton, {
-                              key: 0,
-                              class: "nmorph-table__button-wrapper",
-                              value: l.sortData[e.prop],
-                              onSort: (n) => l.onSort(n, e.prop)
-                            }, null, 8, ["value", "onSort"])) : y("v-if", !0)
-                          ],
-                          4
-                          /* STYLE */
-                        )
-                      ])
-                    ],
-                    2
-                    /* CLASS */
-                  ))),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
+              o("tr", pe, [
+                (l(!0), a(v, null, h(s.value, (t, p) => (l(), a("th", {
+                  key: p,
+                  class: g(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": r.bordered }])
+                }, [
+                  o("div", he, [
+                    o("div", {
+                      style: d({ "justify-content": t.alignment }),
+                      class: "nmorph-table__cell-content"
+                    }, [
+                      o("span", null, M(t.label), 1),
+                      f.value && f.value[t.prop] ? (l(), ee(se, {
+                        key: 0,
+                        class: "nmorph-table__button-wrapper",
+                        value: f.value[t.prop],
+                        onSort: (n) => A(n, t.prop)
+                      }, null, 8, ["value", "onSort"])) : te("", !0)
+                    ], 4)
+                  ])
+                ], 2))), 128))
               ])
             ])
           ]),
           o("div", {
-            ref: l.virtualList.containerRef,
-            class: _(["nmorph-table__body", {
-              "nmorph-table__body--virtual": l.virtualEnabled,
-              "nmorph-table__body--dynamic": l.props.virtualDynamicHeight
+            ref: k(i).containerRef,
+            class: g(["nmorph-table__body", {
+              "nmorph-table__body--virtual": m.value,
+              "nmorph-table__body--dynamic": r.virtualDynamicHeight
             }]),
-            style: a(l.tableBodyStyle),
-            tabindex: l.virtualEnabled ? 0 : void 0,
+            style: d(Q.value),
+            tabindex: m.value ? 0 : void 0,
             role: "grid",
-            onKeydown: l.tableKeydownHandler,
-            onScroll: l.scrollHandler
+            onKeydown: G,
+            onScroll: D
           }, [
-            l.virtualEnabled ? (r(), t(
-              "div",
-              {
-                key: 0,
-                class: "nmorph-table__virtual-spacer",
-                style: a(l.virtualSpacerStyle)
-              },
-              [
-                o(
-                  "div",
-                  {
-                    class: "nmorph-table__virtual-content",
-                    style: a(l.virtualContentStyle)
-                  },
-                  [
-                    o("table", null, [
-                      o("colgroup", null, [
-                        (r(!0), t(
-                          d,
-                          null,
-                          i(l.columns, (e) => (r(), t(
-                            "col",
-                            {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
-                            },
-                            null,
-                            4
-                            /* STYLE */
-                          ))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ]),
-                      o("tbody", null, [
-                        (r(!0), t(
-                          d,
-                          null,
-                          i(l.renderedRows, (e, b) => (r(), t(
-                            "tr",
-                            {
-                              key: e.index,
-                              ref_for: !0,
-                              ref: (n) => l.setVirtualRowRef(n, e.index),
-                              class: _(["nmorph-table__table-data-row", {
-                                "nmorph-table__table-data-row--row-hover": l.props.rowHover,
-                                "nmorph-table__table-data-row--active": l.activeRowIndex === e.index
-                              }]),
-                              role: "row"
-                            },
-                            [
-                              (r(!0), t(
-                                d,
-                                null,
-                                i(l.columns, (n) => (r(), t(
-                                  "td",
-                                  {
-                                    key: n.prop,
-                                    class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
-                                  },
-                                  [
-                                    o("div", {
-                                      id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                      style: a({ "text-align": n.alignment }),
-                                      class: "nmorph-table__cell nmorph-table__cell--data"
-                                    }, s(l.tableData(e.item[n.prop])), 13, S)
-                                  ],
-                                  2
-                                  /* CLASS */
-                                ))),
-                                128
-                                /* KEYED_FRAGMENT */
-                              ))
-                            ],
-                            2
-                            /* CLASS */
-                          ))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ])
-                    ]),
-                    o("table", null, [
-                      o("colgroup", null, [
-                        (r(!0), t(
-                          d,
-                          null,
-                          i(l.columns, (e) => (r(), t(
-                            "col",
-                            {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
-                            },
-                            null,
-                            4
-                            /* STYLE */
-                          ))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ]),
-                      o("tbody", R, [
-                        h(c.$slots, "default")
-                      ])
-                    ])
-                  ],
-                  4
-                  /* STYLE */
-                )
-              ],
-              4
-              /* STYLE */
-            )) : (r(), t(
-              d,
-              { key: 1 },
-              [
+            m.value ? (l(), a("div", {
+              key: 0,
+              class: "nmorph-table__virtual-spacer",
+              style: d(k(F))
+            }, [
+              o("div", {
+                class: "nmorph-table__virtual-content",
+                style: d(k(Y))
+              }, [
                 o("table", null, [
                   o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
-                        null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
+                    (l(!0), a(v, null, h(s.value, (t) => (l(), a("col", {
+                      key: t.prop,
+                      style: d({ width: `${H(t.width)}px` })
+                    }, null, 4))), 128))
                   ]),
                   o("tbody", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.renderedRows, (e, b) => (r(), t(
-                        "tr",
-                        {
-                          key: b,
-                          class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
-                        },
-                        [
-                          (r(!0), t(
-                            d,
-                            null,
-                            i(l.columns, (n) => (r(), t(
-                              "td",
-                              {
-                                key: n.prop,
-                                class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
-                              },
-                              [
-                                o("div", {
-                                  id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                  style: a({ "text-align": n.alignment }),
-                                  class: "nmorph-table__cell nmorph-table__cell--data"
-                                }, s(l.tableData(e.item[n.prop])), 13, W)
-                              ],
-                              2
-                              /* CLASS */
-                            ))),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ],
-                        2
-                        /* CLASS */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
+                    (l(!0), a(v, null, h(S.value, (t, p) => (l(), a("tr", {
+                      key: t.index,
+                      ref_for: !0,
+                      ref: (n) => q(n, t.index),
+                      class: g(["nmorph-table__table-data-row", {
+                        "nmorph-table__table-data-row--row-hover": r.rowHover,
+                        "nmorph-table__table-data-row--active": w.value === t.index
+                      }]),
+                      role: "row"
+                    }, [
+                      (l(!0), a(v, null, h(s.value, (n) => (l(), a("td", {
+                        key: n.prop,
+                        class: g([{ "nmorph-table__table-data--bordered": r.bordered }, "nmorph-table__table-data"])
+                      }, [
+                        o("div", {
+                          id: `table-cell-${k(B)}-${p}-${n.prop}`,
+                          style: d({ "text-align": n.alignment }),
+                          class: "nmorph-table__cell nmorph-table__cell--data"
+                        }, M(I(t.item[n.prop])), 13, _e)
+                      ], 2))), 128))
+                    ], 2))), 128))
                   ])
                 ]),
                 o("table", null, [
                   o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
-                        null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
+                    (l(!0), a(v, null, h(s.value, (t) => (l(), a("col", {
+                      key: t.prop,
+                      style: d({ width: `${H(t.width)}px` })
+                    }, null, 4))), 128))
                   ]),
-                  o("tbody", B, [
-                    h(c.$slots, "default")
+                  o("tbody", me, [
+                    E(e.$slots, "default")
                   ])
                 ])
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            ))
-          ], 46, x)
+              ], 4)
+            ], 4)) : (l(), a(v, { key: 1 }, [
+              o("table", null, [
+                o("colgroup", null, [
+                  (l(!0), a(v, null, h(s.value, (t) => (l(), a("col", {
+                    key: t.prop,
+                    style: d({ width: `${H(t.width)}px` })
+                  }, null, 4))), 128))
+                ]),
+                o("tbody", null, [
+                  (l(!0), a(v, null, h(S.value, (t, p) => (l(), a("tr", {
+                    key: p,
+                    class: g(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": r.rowHover }])
+                  }, [
+                    (l(!0), a(v, null, h(s.value, (n) => (l(), a("td", {
+                      key: n.prop,
+                      class: g([{ "nmorph-table__table-data--bordered": r.bordered }, "nmorph-table__table-data"])
+                    }, [
+                      o("div", {
+                        id: `table-cell-${k(B)}-${p}-${n.prop}`,
+                        style: d({ "text-align": n.alignment }),
+                        class: "nmorph-table__cell nmorph-table__cell--data"
+                      }, M(I(t.item[n.prop])), 13, fe)
+                    ], 2))), 128))
+                  ], 2))), 128))
+                ])
+              ]),
+              o("table", null, [
+                o("colgroup", null, [
+                  (l(!0), a(v, null, h(s.value, (t) => (l(), a("col", {
+                    key: t.prop,
+                    style: d({ width: `${H(t.width)}px` })
+                  }, null, 4))), 128))
+                ]),
+                o("tbody", ye, [
+                  E(e.$slots, "default")
+                ])
+              ])
+            ], 64))
+          ], 46, be)
         ])
-      ],
-      6
-      /* CLASS, STYLE */
-    ))
-  ]);
-}
-const K = /* @__PURE__ */ v(p, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
+      ], 6))
+    ]));
+  }
+});
 export {
-  K as default
+  Se as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphTable.css';
+import o from "./NmorphTable.vue.js";
+/* empty css                 */
+export {
+  o as default
+};