@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

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

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

@@ -1,52 +1,71 @@
 import './NmorphTable.css';
-import { defineComponent as w, computed as b, ref as l, provide as g, watch as B } from "vue";
-import { useModifiers as D } from "../../../utils/create-modifiers.js";
-import { generateUUID as j } from "../../../utils/common.js";
-import x from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-const M = /* @__PURE__ */ w({
+import { defineComponent as j, computed as r, ref as s, provide as q, watch as I } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { generateUUID as M } from "../../../utils/common.js";
+import Q from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+import { useVirtualList as U } from "../../../hooks/use-virtual-list.js";
+const P = /* @__PURE__ */ j({
   __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: String, required: !1, default: "nmorph" }
+    design: { type: String, 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 },
+    virtualRowHeight: { type: Number, required: !1, default: 42 }
   },
-  setup(y, { expose: C }) {
-    C();
-    const r = y, _ = b(
-      () => D({
-        "nmorph-table": [`${r.design}`]
+  setup(x, { expose: W }) {
+    W();
+    const t = x, B = r(
+      () => T({
+        "nmorph-table": [`${t.design}`]
       })
-    ), u = l(r.data), n = l(r.sort), W = (e, o) => {
-      n.value && (n.value[o] = e, u.value.sort((c, f) => {
-        const m = String(c[o]).toLowerCase(), t = String(f[o]).toLowerCase();
+    ), l = s([...t.data]), i = r(() => t.virtual), g = r(() => t.virtualRowHeight), b = r(() => t.virtualOverscan), d = U(l, {
+      enabled: i,
+      itemHeight: g,
+      overscan: b
+    }), y = r(
+      () => i.value ? d.virtualItems.value.map((e) => e.item) : l.value
+    ), n = s(t.sort), N = (e, o) => {
+      n.value && (n.value[o] = e, l.value.sort((m, p) => {
+        const h = String(m[o]).toLowerCase(), a = String(p[o]).toLowerCase();
         if (!n.value)
           return 0;
-        const i = n.value[o];
-        return i === "ascending" ? m.localeCompare(t) : i === "descending" ? t.localeCompare(m) : 0;
+        const c = n.value[o];
+        return c === "ascending" ? h.localeCompare(a) : c === "descending" ? a.localeCompare(h) : 0;
       }));
-    }, s = l(null), a = l([]);
-    g("table-data", { rows: u, columns: a });
-    const p = b(() => {
-      const e = a.value.map((t) => t.width).filter((t) => !!t), o = e.length, c = e.reduce((t, i) => (t += Number(i), t), 0), f = a.value.length - o;
-      return s.value?.clientWidth ? (s.value?.clientWidth - c) / f : 0;
-    }), S = (e) => e !== "" ? e : p.value, d = l(0);
-    B(
-      () => r.data,
+    }, f = s(null), u = s([]);
+    q("table-data", { rows: y, columns: u });
+    const w = r(() => {
+      const e = u.value.map((a) => a.width).filter((a) => !!a), o = e.length, m = e.reduce((a, c) => (a += Number(c), a), 0), p = u.value.length - o;
+      return f.value?.clientWidth ? (f.value?.clientWidth - m) / p : 0;
+    }), O = (e) => e !== "" ? e : w.value, v = s(0);
+    I(
+      () => t.data,
       () => {
-        d.value = d.value + 1, u.value = r.data, a.value = [];
+        v.value = v.value + 1, l.value = [...t.data], u.value = [];
       },
       {
         immediate: !0
       }
     );
-    const q = (e) => typeof e == "object" ? "" : e, v = j();
-    g("table-identifier", v);
-    const h = { props: r, modifiers: _, rows: u, sortData: n, onSort: W, nmorphDOMTable: s, columns: a, defaultColWidth: p, getWidth: S, key: d, tableData: q, tableIdentifier: v, NmorphSortButton: x };
-    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
+    const R = (e) => typeof e == "object" ? "" : e, C = M();
+    q("table-identifier", C);
+    const S = (e) => typeof e == "number" ? `${e}px` : e, H = r(() => S(t.virtualHeight)), $ = r(() => ({
+      "--table-virtual-row-height": `${t.virtualRowHeight}px`,
+      height: i.value ? H.value : void 0,
+      overflowY: i.value ? "auto" : void 0
+    })), D = r(() => ({
+      height: `${d.totalHeight.value}px`
+    })), L = r(() => ({
+      transform: `translateY(${d.offsetTop.value}px)`
+    })), _ = { props: t, modifiers: B, rows: l, virtualEnabled: i, virtualRowHeight: g, virtualOverscan: b, virtualList: d, tableRows: y, sortData: n, onSort: N, nmorphDOMTable: f, columns: u, defaultColWidth: w, getWidth: O, key: v, tableData: R, tableIdentifier: C, getCssSize: S, virtualHeight: H, tableBodyStyle: $, virtualSpacerStyle: D, virtualContentStyle: L, NmorphSortButton: Q };
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  M as default
+  P as default
 };

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-left-radius:var(--indentation-02);border-bottom-right-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;align-items:center;justify-content:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}
+.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-left-radius:var(--indentation-02);border-bottom-right-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;align-items:center;justify-content:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}