golden-logic-ui 1.2.21 → 1.2.23

package/dist/GlDataTableComponent-CSsMcDcX.js

@@ -0,0 +1,366 @@
+import { resolveComponent as p, createElementBlock as d, openBlock as l, createElementVNode as e, createCommentVNode as h, createVNode as w, withDirectives as P, vModelText as _, Fragment as y, renderList as m, createTextVNode as c, toDisplayString as g, normalizeClass as D, createBlock as C, resolveDynamicComponent as j, withModifiers as b } from "vue";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const L = {
+  components: {},
+  props: {
+    data: Array,
+    columns: Array,
+    get_item_url: String,
+    xprops: Object
+  },
+  data() {
+    return {
+      isLoading: !1,
+      itemLists: [],
+      data: [],
+      showNoOfEntries: [1, 2, 3, 10, 20, 30, 40],
+      search: "",
+      sortKey: "",
+      sortOrder: 1,
+      currentPage: 1,
+      itemsPerPage: 10,
+      jumpToPage: "",
+      maxDisplayedPages: 10
+      // Set the maximum number of displayed pagination buttons
+    };
+  },
+  emits: ["editAction", "generalAction", "deleteAction"],
+  computed: {
+    filteredData() {
+      const r = this.search.toLowerCase();
+      return this.sortData(this.itemLists).filter((o) => Object.values(o).some(
+        (u) => u != null && u.toString().toLowerCase().includes(r)
+      ));
+    },
+    totalPages() {
+      return Math.ceil(this.filteredData.length / this.itemsPerPage);
+    },
+    paginatedData() {
+      const r = (this.currentPage - 1) * this.itemsPerPage, t = r + this.itemsPerPage;
+      return this.filteredData.slice(r, t);
+    },
+    displayedPageNumbers() {
+      let r = Math.max(
+        this.currentPage - Math.floor(this.maxDisplayedPages / 2),
+        1
+      ), t = r + this.maxDisplayedPages - 1;
+      return t > this.totalPages && (t = this.totalPages, r = Math.max(t - this.maxDisplayedPages + 1, 1)), Array.from(
+        { length: t - r + 1 },
+        (o, u) => r + u
+      );
+    },
+    firstItemIndex() {
+      return this.itemsPerPage * (this.currentPage - 1) + 1;
+    },
+    lastItemIndex() {
+      const r = this.itemsPerPage * this.currentPage;
+      return r > this.filteredData.length ? this.filteredData.length : r;
+    }
+  },
+  methods: {
+    editAction(r) {
+      this.$emit("editAction", r);
+    },
+    deleteAction() {
+      this.$emit("deleteAction");
+    },
+    generalAction(r) {
+      this.$emit("generalAction", r);
+    },
+    forDynCompIs(r) {
+      return typeof r == "object" ? r : null;
+    },
+    handleItemsPerPageChange(r) {
+      this.itemsPerPage = r;
+    },
+    goToPage(r) {
+      r >= 1 && r <= this.totalPages && (this.currentPage = r);
+    },
+    sort(r) {
+      r === this.sortKey ? this.sortOrder *= -1 : (this.sortKey = r, this.sortOrder = 1);
+    },
+    sortData(r) {
+      return this.sortKey ? r.slice().sort((t, o) => (t[this.sortKey] < o[this.sortKey] ? -1 : 1) * this.sortOrder) : r;
+    },
+    previousPage() {
+      this.currentPage > 1 && this.currentPage--;
+    },
+    nextPage() {
+      this.currentPage < this.totalPages && this.currentPage++;
+    },
+    firstPage() {
+      this.currentPage = 1;
+    },
+    lastPage() {
+      this.currentPage = this.totalPages;
+    },
+    goToPage(r) {
+      r >= 1 && r <= this.totalPages && (this.currentPage = r);
+    },
+    GetItemLists() {
+      this.isLoading = !0, axios.get(this.xprops.route_get_data).then((r) => {
+        this.itemLists = r.data, this.isLoading = !1;
+      }).catch((r) => {
+        console.error(r), this.isLoading = !1;
+      });
+    }
+  },
+  mounted() {
+    this.GetItemLists();
+  }
+}, I = { class: "p-2" }, O = { class: "flex flex-wrap pb-4 space-y-4 md:items-center md:justify-between flex-column sm:flex-row sm:space-y-0" }, T = { class: "flex items-center gap-2" }, E = { style: { "margin-top": "9px" } }, V = { class: "relative" }, K = { class: "overflow-auto rounded-lg dark:text-gray-400 dark:bg-gray-800" }, M = { class: "w-full h-full max-w-full overflow-hidden bg-white border-separate xl:overflow-auto lg:border-collapse border-spacing-y-5 lg:border-spacing-y-0 dark:border-strokeDark dark:bg-boxDark" }, S = { class: "hidden text-sm font-normal text-center text-gray-500 lg:table-header-group dark:border-strokeDark bg-gray-50 dark:bg-gray-700 dark:text-gray-400" }, G = ["onClick"], B = {
+  key: 0,
+  class: "ml-2"
+}, z = {
+  key: 0,
+  class: "fa fa-arrow-up"
+}, U = {
+  key: 1,
+  class: "fa fa-arrow-down"
+}, q = { key: 0 }, F = ["colspan"], N = ["data-label"], H = { class: "overflow-auto max-h-40" }, J = {
+  key: 0,
+  class: "flex items-center justify-between px-4 py-3 bg-white border-gray-200 sm:px-6 dark:text-gray-400 dark:bg-gray-800"
+}, Q = { class: "flex justify-between flex-1 sm:hidden" }, R = ["disabled"], W = ["disabled"], X = { class: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between" }, Y = { class: "text-sm text-gray-700 dark:text-gray-400" }, Z = { class: "font-medium" }, $ = { class: "font-medium" }, ee = { class: "font-medium" }, te = { "aria-label": "Page navigation" }, re = { class: "flex items-center h-8 -space-x-px text-sm" }, se = ["disabled"], ae = ["onClick"], le = ["onClick"], de = ["disabled"];
+function ie(r, t, o, u, i, a) {
+  const k = p("dropdown");
+  return l(), d("div", I, [
+    e("div", O, [
+      e("div", T, [
+        t[7] || (t[7] = e("span", { class: "font-medium" }, " Show ", -1)),
+        e("div", E, [
+          w(k, {
+            has_cancel: !1,
+            options: i.showNoOfEntries,
+            modelValue: i.itemsPerPage,
+            "onUpdate:modelValue": t[0] || (t[0] = (s) => i.itemsPerPage = s),
+            is_required: !1,
+            field_name: "NoOfEntries",
+            label_name: "",
+            default_value: 10,
+            show: !1,
+            placeholder: "Please select an option"
+          }, null, 8, ["options", "modelValue"])
+        ]),
+        t[8] || (t[8] = e("span", { class: "font-medium" }, " Entries ", -1))
+      ]),
+      t[10] || (t[10] = e("label", {
+        for: "table-search",
+        class: "sr-only"
+      }, "Search", -1)),
+      e("div", V, [
+        t[9] || (t[9] = e("div", { class: "absolute inset-y-0 left-0 flex items-center pointer-events-none rtl:inset-r-0 rtl:right-0 ps-3" }, null, -1)),
+        P(e("input", {
+          type: "text",
+          "onUpdate:modelValue": t[1] || (t[1] = (s) => i.search = s),
+          class: "block p-2 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+          placeholder: "Search ..."
+        }, null, 512), [
+          [_, i.search]
+        ])
+      ])
+    ]),
+    e("div", K, [
+      e("table", M, [
+        e("thead", S, [
+          e("tr", null, [
+            (l(!0), d(y, null, m(o.columns, (s, f) => (l(), d("th", {
+              key: f,
+              onClick: (n) => a.sort(s.field_name, s.sortable),
+              class: "w-full px-4 py-2 lg:w-2/12"
+            }, [
+              c(g(s.field_label) + " ", 1),
+              i.sortKey === s.field_name ? (l(), d("span", B, [
+                i.sortOrder === 1 ? (l(), d("i", z)) : (l(), d("i", U))
+              ])) : h("", !0)
+            ], 8, G))), 128))
+          ])
+        ]),
+        e("tbody", null, [
+          i.isLoading ? (l(), d("tr", q, [
+            e("td", {
+              colspan: o.columns.length
+            }, t[11] || (t[11] = [
+              e("div", {
+                role: "status",
+                class: "p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
+              }, [
+                e("div", { class: "flex items-center justify-between" }, [
+                  e("div", null, [
+                    e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-3" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-3" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-3" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-3" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-3" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12" })
+                ]),
+                e("span", { class: "sr-only" }, "Loading...")
+              ], -1)
+            ]), 8, F)
+          ])) : h("", !0),
+          i.isLoading ? h("", !0) : (l(!0), d(y, { key: 1 }, m(a.paginatedData, (s, f) => (l(), d("tr", {
+            key: f,
+            class: "bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-gray-200 text-gray-500"
+          }, [
+            (l(!0), d(y, null, m(o.columns, (n, x) => (l(), d("td", {
+              key: x,
+              "data-label": n.field_label,
+              class: D(["text-pretty before:content-[attr(data-label)] before:font-bold lg:before:content-none flex flex-col justify-between gap-2 lg:table-cell py-4 px-5 lg:py-3 lg:px-4 border-[1px] dark:border-gray-700", {
+                "rounded-t-lg lg:rounded-t-none": x === 0,
+                "rounded-b-lg lg:rounded-b-none": x === o.columns.length - 1
+              }])
+            }, [
+              e("div", H, [
+                n.tdComp ? (l(), C(j(a.forDynCompIs(n.tdComp)), {
+                  key: 0,
+                  row: s,
+                  field: n.field_name,
+                  xprops: o.xprops,
+                  tdProps: n.tdProps,
+                  onDeleteAction: t[2] || (t[2] = (v) => a.GetItemLists()),
+                  onEditAction: (v) => a.editAction(s),
+                  onGeneralAction: (v) => a.generalAction(s)
+                }, null, 40, ["row", "field", "xprops", "tdProps", "onEditAction", "onGeneralAction"])) : (l(), d(y, { key: 1 }, [
+                  c(g(s[n.field_name]), 1)
+                ], 64))
+              ])
+            ], 10, N))), 128))
+          ]))), 128))
+        ])
+      ])
+    ]),
+    a.paginatedData.length > 0 ? (l(), d("div", J, [
+      e("div", Q, [
+        e("a", {
+          href: "#",
+          onClick: t[3] || (t[3] = b((...s) => a.previousPage && a.previousPage(...s), ["prevent"])),
+          disabled: i.currentPage === 1,
+          class: "relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+        }, "Previous", 8, R),
+        e("a", {
+          href: "#",
+          onClick: t[4] || (t[4] = b((...s) => a.nextPage && a.nextPage(...s), ["prevent"])),
+          disabled: i.currentPage === a.totalPages,
+          class: "relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+        }, "Next", 8, W)
+      ]),
+      e("div", X, [
+        e("div", null, [
+          e("p", Y, [
+            t[12] || (t[12] = c(" Showing ")),
+            e("span", Z, g(a.firstItemIndex), 1),
+            t[13] || (t[13] = c(" to ")),
+            e("span", $, g(a.lastItemIndex), 1),
+            t[14] || (t[14] = c(" of ")),
+            e("span", ee, g(a.filteredData.length), 1),
+            t[15] || (t[15] = c(" entries "))
+          ])
+        ]),
+        e("div", null, [
+          e("nav", te, [
+            e("ul", re, [
+              e("li", null, [
+                e("a", {
+                  href: "#",
+                  onClick: t[5] || (t[5] = b((...s) => a.previousPage && a.previousPage(...s), ["prevent"])),
+                  disabled: i.currentPage === 1,
+                  class: "flex items-center justify-center h-8 px-3 leading-tight text-gray-500 bg-white border border-gray-300 ms-0 border-e-0 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                }, t[16] || (t[16] = [
+                  e("span", { class: "sr-only" }, "Previous", -1),
+                  e("svg", {
+                    class: "w-2.5 h-2.5 rtl:rotate-180",
+                    "aria-hidden": "true",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 6 10"
+                  }, [
+                    e("path", {
+                      stroke: "currentColor",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M5 1 1 5l4 4"
+                    })
+                  ], -1)
+                ]), 8, se)
+              ]),
+              (l(!0), d(y, null, m(a.displayedPageNumbers, (s) => (l(), d(y, { key: s }, [
+                e("li", null, [
+                  i.currentPage !== s ? (l(), d("a", {
+                    key: 0,
+                    href: "#",
+                    onClick: b((f) => a.goToPage(s), ["prevent"]),
+                    class: "flex items-center justify-center h-8 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                  }, g(s), 9, ae)) : h("", !0)
+                ]),
+                e("li", null, [
+                  i.currentPage === s ? (l(), d("a", {
+                    key: 0,
+                    href: "#",
+                    onClick: b((f) => a.goToPage(s), ["prevent"]),
+                    "aria-current": "page",
+                    class: "z-10 flex items-center justify-center h-8 px-3 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+                  }, g(s), 9, le)) : h("", !0)
+                ])
+              ], 64))), 128)),
+              e("li", null, [
+                e("a", {
+                  href: "#",
+                  onClick: t[6] || (t[6] = b((...s) => a.nextPage && a.nextPage(...s), ["prevent"])),
+                  disabled: i.currentPage === a.totalPages,
+                  class: "flex items-center justify-center h-8 px-3 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                }, t[17] || (t[17] = [
+                  e("span", { class: "sr-only" }, "Next", -1),
+                  e("svg", {
+                    class: "w-2.5 h-2.5 rtl:rotate-180",
+                    "aria-hidden": "true",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 6 10"
+                  }, [
+                    e("path", {
+                      stroke: "currentColor",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "m1 9 4-4-4-4"
+                    })
+                  ], -1)
+                ]), 8, de)
+              ])
+            ])
+          ])
+        ])
+      ])
+    ])) : h("", !0)
+  ]);
+}
+const ge = /* @__PURE__ */ A(L, [["render", ie]]);
+export {
+  ge as default
+};

package/dist/GlDataTableServerSideGroupBy-cG4BhXOA.js

@@ -0,0 +1,260 @@
+import D from "./TailwindPagination-Dz89aS_l.js";
+import { resolveComponent as y, createElementBlock as o, openBlock as a, createElementVNode as e, createVNode as m, withDirectives as P, vModelText as C, Fragment as u, renderList as p, createTextVNode as k, createCommentVNode as f, toDisplayString as h, createBlock as I, resolveDynamicComponent as O } from "vue";
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const j = {
+  components: { TailwindPagination: D },
+  props: {
+    data: Array,
+    columns: Array,
+    get_item_url: String,
+    xprops: Object,
+    refreshData: Boolean,
+    groupField: String
+  },
+  data() {
+    return {
+      isLoading: !1,
+      isMounted: !1,
+      limit: 5,
+      showDisabled: !1,
+      size: "default",
+      align: "left",
+      search: "",
+      isDropdownOpen: !1,
+      itemLists: [],
+      tableData: [],
+      sortField: this.columns[0].field_name,
+      sortOrder: "desc",
+      pageOptions: [5, 10, 20, 50],
+      perPage: 5,
+      page: 1
+    };
+  },
+  emits: ["editAction"],
+  computed: {
+    filteredData() {
+      const r = this.search.toLowerCase();
+      return this.sortData(this.data).filter((l) => Object.values(l).some(
+        (n) => n.toString().toLowerCase().includes(r)
+      ));
+    },
+    groupedItems() {
+      return this.groupBy(this.groupField);
+    }
+  },
+  methods: {
+    groupBy(r) {
+      return this.itemLists.data ? this.itemLists.data.reduce((t, l) => {
+        const n = l[r];
+        t[n] || (t[n] = []);
+        const s = { ...l };
+        return delete s[r], t[n].push(s), t;
+      }, {}) : [];
+    },
+    editAction(r) {
+      this.$emit("editAction", r);
+    },
+    forDynCompIs(r) {
+      return typeof r == "object" ? r : null;
+    },
+    GetItemLists(r = 1) {
+      this.isLoading = !0, this.page = r;
+      const t = {
+        sort: this.sortField,
+        order: this.sortOrder,
+        s: this.search,
+        limit: this.perPage,
+        page: this.page
+      };
+      axios.get(this.xprops.route_get_data, { params: t }).then((l) => {
+        this.itemLists = l.data, this.isLoading = !1;
+      }).catch((l) => {
+        console.error(l), this.isLoading = !1;
+      });
+    },
+    updateSortColumn(r, t) {
+      t && (r === this.sortField ? this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc" : (this.sortField = r, this.sortOrder = "asc"), this.GetItemLists(this.page));
+    },
+    handleSearch() {
+      this.sortField = this.columns[0].field_name, this.sortOrder = "asc", this.page = 1, this.GetItemLists(this.page);
+    }
+  },
+  mounted() {
+    this.GetItemLists(), this.isMounted = !0;
+  },
+  watch: {
+    searchFilter() {
+      this.filteredOptions.length === 0 ? this.selected = {} : this.selected = this.filteredOptions[0];
+    },
+    perPage(r) {
+      this.page = 1, this.perPage = r, this.GetItemLists(this.page);
+    },
+    refreshData(r, t) {
+      this.isMounted && r !== t && this.GetItemLists();
+    }
+  }
+}, F = { class: "p-2" }, G = { class: "flex flex-col flex-wrap pb-4 space-y-4 xl:flex-row xl:items-center xl:justify-between sm:space-y-0" }, A = { class: "flex items-center gap-2" }, V = { style: { "margin-top": "9px" } }, B = { class: "relative" }, T = { class: "overflow-auto rounded-lg dark:text-gray-400 dark:bg-gray-800" }, z = { class: "w-full h-full max-w-full overflow-hidden bg-white border-separate xl:overflow-auto lg:border-collapse border-spacing-y-3 lg:border-spacing-y-0 dark:border-strokeDark dark:bg-boxDark" }, E = { class: "hidden text-sm font-normal text-center text-gray-500 lg:table-header-group dark:border-strokeDark bg-gray-50 dark:bg-gray-700 dark:text-gray-400" }, M = ["onClick"], N = {
+  key: 0,
+  class: "ml-2"
+}, U = {
+  key: 0,
+  class: "fa fa-arrow-up"
+}, q = {
+  key: 1,
+  class: "fa fa-arrow-down"
+}, H = { key: 0 }, J = ["colspan"], K = { class: "text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-gray-200" }, Q = ["colspan"], R = ["data-label"], W = { class: "overflow-auto max-h-40" }, X = { class: "flex items-center justify-between px-4 py-3 bg-white border-gray-200 sm:px-6 dark:text-gray-400 dark:bg-gray-800" };
+function Y(r, t, l, n, s, d) {
+  const w = y("dropdown"), v = y("TailwindPagination");
+  return a(), o("div", F, [
+    e("div", G, [
+      e("div", A, [
+        t[4] || (t[4] = e("span", { class: "font-medium" }, " Show ", -1)),
+        e("div", V, [
+          m(w, {
+            options_top_size: 0,
+            has_cancel: !1,
+            options: s.pageOptions,
+            modelValue: s.perPage,
+            "onUpdate:modelValue": t[0] || (t[0] = (i) => s.perPage = i),
+            is_required: !1,
+            field_name: "perPage",
+            label_name: "",
+            default_value: 5,
+            show: !1,
+            placeholder: "Please select an option"
+          }, null, 8, ["options", "modelValue"])
+        ]),
+        t[5] || (t[5] = e("span", { class: "font-medium" }, " Entries ", -1))
+      ]),
+      t[7] || (t[7] = e("label", {
+        for: "table-search",
+        class: "sr-only"
+      }, "Search", -1)),
+      e("div", B, [
+        t[6] || (t[6] = e("div", { class: "absolute inset-y-0 left-0 flex items-center pointer-events-none rtl:inset-r-0 rtl:right-0 ps-3" }, null, -1)),
+        P(e("input", {
+          type: "text",
+          "onUpdate:modelValue": t[1] || (t[1] = (i) => s.search = i),
+          onInput: t[2] || (t[2] = (i) => d.handleSearch()),
+          class: "block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+          placeholder: "Search ..."
+        }, null, 544), [
+          [C, s.search]
+        ])
+      ])
+    ]),
+    e("div", T, [
+      e("table", z, [
+        e("thead", E, [
+          e("tr", null, [
+            (a(!0), o(u, null, p(l.columns, (i, b) => (a(), o("th", {
+              key: b,
+              onClick: (c) => d.updateSortColumn(i.field_name, i.sortable),
+              class: "w-full px-4 py-2 lg:w-2/12"
+            }, [
+              k(h(i.field_label) + " ", 1),
+              s.sortField === i.field_name ? (a(), o("span", N, [
+                s.sortOrder === "asc" ? (a(), o("i", U)) : (a(), o("i", q))
+              ])) : f("", !0)
+            ], 8, M))), 128))
+          ])
+        ]),
+        e("tbody", null, [
+          s.isLoading ? (a(), o("tr", H, [
+            e("td", {
+              colspan: l.columns.length
+            }, t[8] || (t[8] = [
+              e("div", {
+                role: "status",
+                class: "p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
+              }, [
+                e("div", { class: "flex items-center justify-between" }, [
+                  e("div", null, [
+                    e("div", { class: "w-24 h-3 mb-3 bg-gray-300 rounded-full dark:bg-gray-600" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "w-12 h-3 bg-gray-300 rounded-full dark:bg-gray-700" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "w-24 h-3 mb-3 bg-gray-300 rounded-full dark:bg-gray-600" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "w-12 h-3 bg-gray-300 rounded-full dark:bg-gray-700" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "w-24 h-3 mb-3 bg-gray-300 rounded-full dark:bg-gray-600" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "w-12 h-3 bg-gray-300 rounded-full dark:bg-gray-700" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "w-24 h-3 mb-3 bg-gray-300 rounded-full dark:bg-gray-600" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "w-12 h-3 bg-gray-300 rounded-full dark:bg-gray-700" })
+                ]),
+                e("div", { class: "flex items-center justify-between pt-4" }, [
+                  e("div", null, [
+                    e("div", { class: "w-24 h-3 mb-3 bg-gray-300 rounded-full dark:bg-gray-600" }),
+                    e("div", { class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" })
+                  ]),
+                  e("div", { class: "w-12 h-3 bg-gray-300 rounded-full dark:bg-gray-700" })
+                ]),
+                e("span", { class: "sr-only" }, "Loading...")
+              ], -1)
+            ]), 8, J)
+          ])) : f("", !0),
+          s.isLoading ? f("", !0) : (a(!0), o(u, { key: 1 }, p(d.groupedItems, (i, b) => (a(), o(u, null, [
+            e("tr", K, [
+              e("td", {
+                colspan: l.columns.length,
+                class: "text-pretty before:content-[attr(data-label)] before:font-bold lg:before:content-none flex md:flex-row flex-col justify-between gap-2 lg:table-cell py-4 px-5 lg:py-3 lg:px-4 border dark:border-gray-700"
+              }, h(b), 9, Q)
+            ]),
+            (a(!0), o(u, null, p(i, (c, x) => (a(), o("tr", {
+              key: x,
+              class: "text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-gray-200"
+            }, [
+              (a(!0), o(u, null, p(l.columns, (g, _) => (a(), o("td", {
+                key: _,
+                "data-label": g.field_label,
+                class: "text-pretty before:content-[attr(data-label)] before:font-bold lg:before:content-none flex md:flex-row flex-col justify-between gap-2 lg:table-cell py-4 px-5 lg:py-3 lg:px-4 border-[1px] dark:border-gray-700"
+              }, [
+                e("div", W, [
+                  g.tdComp ? (a(), I(O(d.forDynCompIs(g.tdComp)), {
+                    key: 0,
+                    row: c,
+                    field: g.field_name,
+                    xprops: l.xprops,
+                    tdProps: g.tdProps,
+                    onDeleteAction: t[3] || (t[3] = (L) => d.GetItemLists()),
+                    onEditAction: (L) => d.editAction(c)
+                  }, null, 40, ["row", "field", "xprops", "tdProps", "onEditAction"])) : (a(), o(u, { key: 1 }, [
+                    k(h(c[g.field_name]), 1)
+                  ], 64))
+                ])
+              ], 8, R))), 128))
+            ]))), 128))
+          ], 64))), 256))
+        ])
+      ])
+    ]),
+    e("div", X, [
+      m(v, {
+        class: "mt-3 mb-0",
+        data: s.itemLists,
+        limit: s.limit,
+        size: s.size,
+        align: s.align,
+        onPaginationChangePage: d.GetItemLists
+      }, null, 8, ["data", "limit", "size", "align", "onPaginationChangePage"])
+    ])
+  ]);
+}
+const te = /* @__PURE__ */ S(j, [["render", Y]]);
+export {
+  te as default
+};