maz-ui 3.46.1-beta.5 → 3.46.1-beta.6

package/components/chunks/MazTable-QwG-Kh88.mjs

@@ -0,0 +1,692 @@
+import { defineComponent as Ie, useCssVars as Oe, defineAsyncComponent as b, computed as d, toRefs as Me, provide as Ne, ref as k, watch as R, useSlots as Le, onBeforeMount as Te, openBlock as n, createElementBlock as v, normalizeClass as g, renderSlot as p, createElementVNode as z, toDisplayString as h, createCommentVNode as s, createBlock as S, unref as t, createVNode as u, normalizeStyle as oe, createTextVNode as I, withCtx as c, Fragment as _, renderList as G } from "vue";
+import '../assets/MazTable.css';const Ee = {
+  key: 0,
+  class: "m-table-header"
+}, Re = {
+  key: 0,
+  class: "m-table-spacer"
+}, je = { class: "m-table-header-title" }, De = {
+  key: 1,
+  class: "m-table-header-search"
+}, Fe = { key: 0 }, Ke = { key: 1 }, He = {
+  key: 0,
+  class: "m-table-sort-icon-wrapper"
+}, Ue = { class: "maz-text-center maz-text-muted" }, Qe = {
+  key: 1,
+  class: "m-table-footer"
+}, qe = {
+  key: 0,
+  class: "m-table-footer-pagination"
+}, Ye = { class: "m-table-footer-pagination-items-per-page" }, _e = { class: "maz-hidden maz-text-sm tab-s:maz-block" }, Ge = {
+  key: 0,
+  class: "maz-whitespace-nowrap maz-text-sm"
+}, Je = { class: "m-table-footer-pagination-buttons" }, We = /* @__PURE__ */ Ie({
+  __name: "MazTable",
+  props: {
+    tableClass: { default: void 0 },
+    tableStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    modelValue: { default: void 0 },
+    size: { default: "md" },
+    inputSize: {},
+    title: { default: void 0 },
+    headers: { default: void 0 },
+    sortable: { type: Boolean },
+    headersAlign: { default: "left" },
+    rows: { default: void 0 },
+    hoverable: { type: Boolean },
+    search: { type: Boolean },
+    noSearchInRow: { type: Boolean },
+    searchPlaceholder: { default: "Search" },
+    noSearchBy: { type: Boolean },
+    searchByPlaceholder: { default: "Search by" },
+    searchByAllLabel: { default: "All" },
+    searchQuery: { default: void 0 },
+    backgroundOdd: { type: Boolean },
+    backgroundEven: { type: Boolean },
+    elevation: { type: Boolean },
+    divider: { type: Boolean },
+    caption: { default: void 0 },
+    captionSide: { default: "bottom" },
+    pagination: { type: Boolean },
+    page: { default: 1 },
+    pageSize: { default: 20 },
+    totalPages: { default: void 0 },
+    paginationAllLabel: { default: "All" },
+    noPaginateRows: { type: Boolean },
+    totalItems: { default: void 0 },
+    loading: { type: Boolean },
+    selectable: { type: Boolean },
+    selectedKey: { default: void 0 },
+    tableLayout: { default: void 0 },
+    color: { default: "primary" },
+    translations: {},
+    roundedSize: { default: "lg" }
+  },
+  emits: ["update:model-value", "update:search-query", "update:page", "update:page-size"],
+  setup(O, { emit: j }) {
+    Oe((e) => ({
+      "107c4344": a.tableLayout,
+      cfe789ee: a.captionSide
+    }));
+    const a = O, P = j, D = b(() => import("./arrow-up-DjSlktWl.mjs")), J = b(() => import("./chevron-double-left-D4-NpyrF.mjs")), W = b(() => import("./chevron-left-BqVOLRdC.mjs")), se = b(() => import("./magnifying-glass--nBiyXot.mjs")), M = b(() => import("./MazBtn-BXvObcWn.mjs")), X = b(() => import("./MazCheckbox-CeVxgVY8.mjs")), ne = b(() => import("./MazInput-AcA93-8Q.mjs")), re = b(() => import("./MazLoadingBar-By1umvdC.mjs")), Z = b(() => import("./MazSelect-CGsMRdr7.mjs")), N = b(() => import("./MazTableCell-BSNyqTSX.mjs")), F = b(() => import("./MazTableRow-CgubMdrX.mjs")), K = b(() => import("./MazTableTitle-h4dattYD.mjs")), ie = {
+      noResults: "No results",
+      actionHeader: "Actions",
+      searchByAllLabel: "All",
+      searchByPlaceholder: "Search by",
+      searchPlaceholder: "Search",
+      paginationAllLabel: "All",
+      paginationRowsPerPage: "Rows per page",
+      paginationOf: "of"
+    }, B = d(() => {
+      const { translations: e, searchByAllLabel: o, searchByPlaceholder: l, searchPlaceholder: r, paginationAllLabel: i } = a;
+      return {
+        ...ie,
+        ...e,
+        searchByAllLabel: o,
+        searchByPlaceholder: l,
+        searchPlaceholder: r,
+        paginationAllLabel: i
+      };
+    }), ue = d(
+      () => a.divider && !a.backgroundEven && !a.backgroundOdd
+    ), { size: m, hoverable: de, backgroundEven: ce, backgroundOdd: ve } = Me(a);
+    Ne("maz-table", {
+      size: m,
+      hoverable: de,
+      backgroundEven: ce,
+      backgroundOdd: ve
+    });
+    const H = k(le()), U = d(() => a.selectable || !!a.selectedKey), L = k(a.page);
+    R(
+      () => a.page,
+      (e) => {
+        L.value = e;
+      }
+    );
+    const f = d({
+      get: () => L.value,
+      set: (e) => {
+        L.value = e, P("update:page", e);
+      }
+    }), pe = d(() => [
+      { label: B.value.paginationAllLabel, value: Number.POSITIVE_INFINITY },
+      { label: 5, value: 5 },
+      { label: 10, value: 10 },
+      { label: 20, value: 20 },
+      { label: 50, value: 50 },
+      { label: 100, value: 100 },
+      { label: 200, value: 200 }
+    ]), Q = k(a.pageSize);
+    R(
+      () => a.pageSize,
+      (e) => {
+        Q.value = e;
+      }
+    );
+    const C = d({
+      get: () => Q.value,
+      set: (e) => {
+        Q.value = e, P("update:page-size", e);
+      }
+    }), A = d(() => {
+      var e;
+      return a.totalPages ?? (C.value === Number.POSITIVE_INFINITY || !((e = a.rows) != null && e.length)) ? 1 : Math.ceil(a.rows.length / C.value);
+    });
+    function be() {
+      f.value = 1;
+    }
+    function me() {
+      f.value = A.value;
+    }
+    function fe() {
+      f.value = f.value - 1;
+    }
+    function ge() {
+      f.value = f.value + 1;
+    }
+    const x = d(() => {
+      if (!a.pagination || a.noPaginateRows || C.value === Number.POSITIVE_INFINITY)
+        return H.value;
+      const e = (L.value - 1) * C.value, o = e + C.value;
+      return H.value.slice(e, o);
+    });
+    R(
+      () => [a.rows, a.modelValue],
+      () => {
+        H.value = le();
+      }
+    );
+    const $ = k(), y = k(), V = k(Be()), T = k(), he = d(() => [
+      { label: a.searchByAllLabel, value: null },
+      ...V.value.map((e) => ({
+        label: e.label,
+        value: e.key
+      }))
+    ]), q = k(a.searchQuery);
+    R(
+      () => a.searchQuery,
+      (e) => {
+        q.value = e;
+      }
+    );
+    const E = d({
+      get: () => q.value,
+      set: (e) => {
+        q.value = e, P("update:search-query", e);
+      }
+    });
+    function ye(e) {
+      return [...e].sort((o, l) => {
+        if ($.value === void 0 || y.value === void 0)
+          return 0;
+        const r = o[V.value[$.value].key], i = l[V.value[$.value].key];
+        return typeof r == "string" && typeof i == "string" ? y.value === "ASC" ? r.localeCompare(i) : i.localeCompare(r) : y.value === "ASC" ? r - i : i - r;
+      });
+    }
+    function ze(e) {
+      if (a.noSearchInRow || typeof E.value != "string")
+        return x.value;
+      const o = E.value.toLowerCase();
+      return [...e].filter((l) => T.value ? String(l[T.value]).toLowerCase().includes(o) : Object.values(l).some((r) => typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? String(r).toLowerCase().includes(o) : !1));
+    }
+    const w = d(() => {
+      const e = ze(x.value);
+      return ye(e);
+    }), Se = Le(), ee = d(() => a.search || !!a.title || !!Se.title), ke = d(() => a.pagination);
+    function Be() {
+      var e;
+      return ((e = a.headers) == null ? void 0 : e.map(
+        (o) => typeof o == "string" ? { label: o, align: a.headersAlign } : { align: a.headersAlign, thHeaders: o.headers, ...o }
+      )) ?? [];
+    }
+    function le() {
+      var e;
+      return ((e = a.rows) == null ? void 0 : e.map((o) => {
+        var l;
+        return {
+          selected: (l = a.modelValue) == null ? void 0 : l.includes(a.selectedKey ? o[a.selectedKey] : o),
+          ...o
+        };
+      })) ?? [];
+    }
+    function Ce(e) {
+      e === $.value ? y.value = y.value === void 0 ? "DESC" : y.value === "DESC" ? "ASC" : void 0 : y.value = "DESC", $.value = y.value === void 0 ? void 0 : e;
+    }
+    const ae = d({
+      get: () => w.value.every((e) => e.selected) ?? !1,
+      set: Ve
+    });
+    function Ve(e) {
+      for (const o of w.value)
+        o.selected = e;
+      Y();
+    }
+    function we(e, o) {
+      w.value[o].selected = e, Y();
+    }
+    function Y(e) {
+      e = e ?? te();
+      const o = e != null && e.length ? e : void 0;
+      P("update:model-value", o);
+    }
+    function te() {
+      return w.value.filter((e) => e.selected).map((e) => a.selectedKey ? e[a.selectedKey] : e);
+    }
+    return Te(() => {
+      const e = te();
+      e != null && e.length && Y(e);
+    }), (e, o) => (n(), v(
+      "div",
+      {
+        class: g(["m-table", { "--has-header": ee.value }])
+      },
+      [
+        ee.value ? (n(), v("div", Ee, [
+          e.title || e.$slots.title ? (n(), v("div", Re, [
+            p(e.$slots, "title", {}, () => [
+              z(
+                "span",
+                je,
+                h(e.title),
+                1
+                /* TEXT */
+              )
+            ], !0)
+          ])) : s("v-if", !0),
+          e.search ? (n(), v("div", De, [
+            e.noSearchBy ? s("v-if", !0) : (n(), S(t(Z), {
+              key: 0,
+              modelValue: T.value,
+              "onUpdate:modelValue": o[0] || (o[0] = (l) => T.value = l),
+              "rounded-size": e.roundedSize,
+              color: e.color,
+              style: { width: "8rem" },
+              placeholder: B.value.searchByPlaceholder,
+              size: e.inputSize ?? t(m),
+              options: he.value
+            }, null, 8, ["modelValue", "rounded-size", "color", "placeholder", "size", "options"])),
+            u(t(ne), {
+              modelValue: E.value,
+              "onUpdate:modelValue": o[1] || (o[1] = (l) => E.value = l),
+              size: e.inputSize ?? t(m),
+              "rounded-size": e.roundedSize,
+              color: e.color,
+              debounce: 300,
+              placeholder: B.value.searchPlaceholder,
+              "left-icon": t(se)
+            }, null, 8, ["modelValue", "size", "rounded-size", "color", "placeholder", "left-icon"])
+          ])) : s("v-if", !0)
+        ])) : s("v-if", !0),
+        z(
+          "div",
+          {
+            class: g(["m-table-wrapper", [`--rounded-${e.roundedSize}`]])
+          },
+          [
+            z(
+              "table",
+              {
+                class: g([{ "--elevation": e.elevation, "--has-layout": e.tableLayout }, e.tableClass]),
+                style: oe(e.tableStyle)
+              },
+              [
+                e.caption || e.$slots.caption ? (n(), v("caption", Fe, [
+                  s(`
+            @slot caption - add caption on top or bottom of the table
+          `),
+                  p(e.$slots, "caption", {}, () => [
+                    I(
+                      h(e.caption),
+                      1
+                      /* TEXT */
+                    )
+                  ], !0)
+                ])) : s("v-if", !0),
+                V.value ? (n(), v("thead", Ke, [
+                  s(`
+            @slot thead - content in thead element
+          `),
+                  p(e.$slots, "thead", {}, () => [
+                    u(t(F), { "no-hoverable": "" }, {
+                      default: c(() => [
+                        U.value ? (n(), S(t(K), {
+                          key: 0,
+                          align: "left",
+                          class: g([`--${t(m)}`, "m-table-select-column"])
+                        }, {
+                          default: c(() => [
+                            u(t(X), {
+                              modelValue: ae.value,
+                              "onUpdate:modelValue": o[2] || (o[2] = (l) => ae.value = l),
+                              size: "sm"
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["class"])) : s("v-if", !0),
+                        (n(!0), v(
+                          _,
+                          null,
+                          G(V.value, (l, r) => (n(), S(t(K), {
+                            key: r,
+                            scope: l.scope,
+                            align: l.align,
+                            rowspan: l.rowspan,
+                            colspan: l.colspan,
+                            headers: l.thHeaders,
+                            style: oe({ width: l.width, textAlign: l.align }),
+                            class: g(["maz-group", [
+                              { "--hidden": l.hidden, "--sortable": l.sortable ?? e.sortable },
+                              l.classes,
+                              `--${t(m)}`
+                            ]]),
+                            onClick: (i) => (l.sortable ?? e.sortable) && Ce(r)
+                          }, {
+                            default: c(() => [
+                              z(
+                                "span",
+                                {
+                                  class: g({ "maz-sr-only": l.srOnly })
+                                },
+                                [
+                                  s(`
+                  @slot header - replace column header
+                    @binding {Object} header - header data
+                    @binding {String} label - header label
+                `),
+                                  p(e.$slots, "header", {
+                                    header: l,
+                                    label: l.label
+                                  }, () => [
+                                    s(`
+                      @slot header-label-{key} - replace column header label
+                        @binding {Object} header - header data
+                        @binding {String} label - header label
+                    `),
+                                    p(e.$slots, `header-label-${l.key}`, {
+                                      header: l,
+                                      label: l.label
+                                    }, () => [
+                                      I(
+                                        h(l.label),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ], !0),
+                                    l.sortable ?? e.sortable ? (n(), v("div", He, [
+                                      u(t(D), {
+                                        class: g(["m-table-sort-icon maz-hidden group-hover:maz-block", {
+                                          "--sorted": r === $.value,
+                                          "--up": y.value === "DESC",
+                                          "--down": y.value === "ASC"
+                                        }])
+                                      }, null, 8, ["class"])
+                                    ])) : s("v-if", !0)
+                                  ], !0)
+                                ],
+                                2
+                                /* CLASS */
+                              )
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["scope", "align", "rowspan", "colspan", "headers", "style", "class", "onClick"]))),
+                          128
+                          /* KEYED_FRAGMENT */
+                        )),
+                        e.$slots.actions ? (n(), S(t(K), {
+                          key: 1,
+                          align: "left",
+                          class: g(`--${t(m)}`)
+                        }, {
+                          default: c(() => [
+                            s(`
+                  @slot actions-header - replace text of actions header
+                `),
+                            p(e.$slots, "actions-header", {}, () => [
+                              I(
+                                h(B.value.actionHeader),
+                                1
+                                /* TEXT */
+                              )
+                            ], !0)
+                          ]),
+                          _: 3
+                          /* FORWARDED */
+                        }, 8, ["class"])) : s("v-if", !0)
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    })
+                  ], !0)
+                ])) : s("v-if", !0),
+                e.loading ? (n(), S(t(re), {
+                  key: 2,
+                  color: e.color,
+                  class: "!maz-absolute"
+                }, null, 8, ["color"])) : s("v-if", !0),
+                z(
+                  "tbody",
+                  {
+                    class: g({ "--divider": ue.value })
+                  },
+                  [
+                    p(e.$slots, "default", {}, () => [
+                      w.value.length > 0 ? (n(!0), v(
+                        _,
+                        { key: 0 },
+                        G(w.value, (l, r) => (n(), S(t(F), {
+                          key: r,
+                          class: g(l.classes),
+                          onClick: (i) => l.action && l.action(l)
+                        }, {
+                          default: c(() => [
+                            U.value ? (n(), S(
+                              t(N),
+                              {
+                                key: 0,
+                                class: "m-table-select-column"
+                              },
+                              {
+                                default: c(() => [
+                                  s(`
+                    @slot select - replace checkbox component
+                      @binding {Object} row - row data
+                      @binding {Boolean} selected - if selected or not
+                  `),
+                                  p(e.$slots, "select", {
+                                    row: l,
+                                    selected: l.selected
+                                  }, () => [
+                                    u(t(X), {
+                                      size: "sm",
+                                      "model-value": l.selected,
+                                      "onUpdate:modelValue": (i) => we(i, r)
+                                    }, null, 8, ["model-value", "onUpdate:modelValue"])
+                                  ], !0)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              },
+                              1024
+                              /* DYNAMIC_SLOTS */
+                            )) : s("v-if", !0),
+                            (n(!0), v(
+                              _,
+                              null,
+                              G(V.value, ({ key: i, align: Pe, classes: $e }, Ae) => (n(), S(t(N), {
+                                key: Ae,
+                                align: Pe,
+                                class: g($e)
+                              }, {
+                                default: c(() => [
+                                  s(`
+                    @slot cell - replace all row cells
+                      @binding {Object} row - row data
+                      @binding {Boolean} value - cell value
+                  `),
+                                  i ? p(e.$slots, "cell", {
+                                    key: 0,
+                                    row: l,
+                                    value: l[i]
+                                  }, () => [
+                                    s(`
+                      @slot cell-{key} - replace row cells of column
+                        @binding {Object} row - row data
+                        @binding {Boolean} value - cell value
+                    `),
+                                    p(e.$slots, `cell-${i}`, {
+                                      row: l,
+                                      value: l[i]
+                                    }, () => [
+                                      I(
+                                        h(l[i]),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ], !0)
+                                  ], !0) : s("v-if", !0)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["align", "class"]))),
+                              128
+                              /* KEYED_FRAGMENT */
+                            )),
+                            e.$slots.actions ? (n(), S(
+                              t(N),
+                              { key: 1 },
+                              {
+                                default: c(() => [
+                                  s(`
+                    @slot actions - will add actions column
+                      @binding {Object} row - row data
+                  `),
+                                  p(e.$slots, "actions", { row: l }, void 0, !0)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              },
+                              1024
+                              /* DYNAMIC_SLOTS */
+                            )) : s("v-if", !0)
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1032, ["class", "onClick"]))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      )) : (n(), S(t(F), { key: 1 }, {
+                        default: c(() => [
+                          u(t(N), {
+                            colspan: V.value.length + (U.value ? 1 : 0) + (e.$slots.actions ? 1 : 0)
+                          }, {
+                            default: c(() => [
+                              s(`
+                    @slot no-results - replace no results
+                  `),
+                              p(e.$slots, "no-results", {}, () => [
+                                z("p", Ue, [
+                                  s(`
+                        @slot no-results-text - replace no results test only
+                      `),
+                                  p(e.$slots, "no-results-text", {}, () => [
+                                    I(
+                                      h(B.value.noResults),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ], !0)
+                                ])
+                              ], !0)
+                            ]),
+                            _: 3
+                            /* FORWARDED */
+                          }, 8, ["colspan"])
+                        ]),
+                        _: 3
+                        /* FORWARDED */
+                      }))
+                    ], !0)
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ],
+              6
+              /* CLASS, STYLE */
+            )
+          ],
+          2
+          /* CLASS */
+        ),
+        ke.value ? (n(), v("div", Qe, [
+          o[4] || (o[4] = z(
+            "div",
+            { class: "m-table-spacer" },
+            null,
+            -1
+            /* HOISTED */
+          )),
+          e.pagination ? (n(), v("div", qe, [
+            z("div", Ye, [
+              z(
+                "span",
+                _e,
+                h(B.value.paginationRowsPerPage),
+                1
+                /* TEXT */
+              ),
+              u(t(Z), {
+                modelValue: C.value,
+                "onUpdate:modelValue": o[3] || (o[3] = (l) => C.value = l),
+                options: pe.value,
+                "rounded-size": e.roundedSize,
+                size: e.inputSize ?? t(m),
+                color: e.color,
+                "list-position": "top",
+                style: { width: "5rem" }
+              }, null, 8, ["modelValue", "options", "rounded-size", "size", "color"])
+            ]),
+            A.value ? (n(), v(
+              "span",
+              Ge,
+              h(f.value) + " - " + h(w.value.length) + " " + h(B.value.paginationOf) + " " + h(A.value),
+              1
+              /* TEXT */
+            )) : s("v-if", !0),
+            z("div", Je, [
+              u(t(M), {
+                disabled: f.value === 1,
+                size: t(m),
+                color: "transparent",
+                "rounded-size": e.roundedSize,
+                "no-elevation": "",
+                onClick: be
+              }, {
+                default: c(() => [
+                  u(t(J), { class: "maz-text-base" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "size", "rounded-size"]),
+              u(t(M), {
+                disabled: f.value === 1,
+                size: t(m),
+                color: "transparent",
+                "rounded-size": e.roundedSize,
+                "no-elevation": "",
+                onClick: fe
+              }, {
+                default: c(() => [
+                  u(t(W), { class: "maz-text-base" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "size", "rounded-size"]),
+              u(t(M), {
+                disabled: f.value === A.value,
+                size: t(m),
+                color: "transparent",
+                "rounded-size": e.roundedSize,
+                "no-elevation": "",
+                onClick: ge
+              }, {
+                default: c(() => [
+                  u(t(W), { class: "maz-rotate-180 maz-text-base" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "size", "rounded-size"]),
+              u(t(M), {
+                disabled: f.value === A.value,
+                size: t(m),
+                color: "transparent",
+                "rounded-size": e.roundedSize,
+                "no-elevation": "",
+                onClick: me
+              }, {
+                default: c(() => [
+                  u(t(J), { class: "maz-rotate-180 maz-text-base" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "size", "rounded-size"])
+            ])
+          ])) : s("v-if", !0)
+        ])) : s("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), Xe = (O, j) => {
+  const a = O.__vccOpts || O;
+  for (const [P, D] of j)
+    a[P] = D;
+  return a;
+}, xe = /* @__PURE__ */ Xe(We, [["__scopeId", "data-v-4237bd40"]]);
+export {
+  xe as M,
+  Xe as _
+};