vs-datatable 0.1.0

package/README.md

@@ -0,0 +1,2 @@
+# vs-datatable
+A lightweight Vue 3 datatable component with sorting, slots, and nested object support.

package/dist/index.css

@@ -0,0 +1 @@
+@media only screen and (min-width: 1199px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:12px!important;line-height:1!important}}@media only screen and (max-width: 768px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:10px!important;line-height:1!important}}.loader[data-v-6ad4d2c7]{position:relative;width:85px;height:50px;background-repeat:no-repeat;background-image:linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0);background-position:0px center,15px center,30px center,45px center,60px center,75px center,90px center;animation:rikSpikeRoll-6ad4d2c7 .65s linear infinite alternate}@keyframes rikSpikeRoll-6ad4d2c7{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}.sort-container[data-v-48b15b64]{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.sort-icon[data-v-48b15b64]{font-size:.62rem;color:#aaa;margin:-5px 0}.sort-icon.active-asc[data-v-48b15b64],.sort-icon.active-desc[data-v-48b15b64]{color:#daa520}.sort-badge[data-v-48b15b64]{font-size:.65rem;line-height:1;padding:.15rem .3rem;display:inline-flex;align-items:center;justify-content:center}.vs-table{border-collapse:separate;border-spacing:0}.vs-table thead{background-color:#f8f9fa}.vs-table thead th{font-weight:600;vertical-align:middle;padding:.75rem}.vs-table tbody tr{transition:background-color .2s ease}.vs-table tbody tr:hover{background-color:#e9ecef}.vs-table tbody tr td{padding:.65rem .75rem;vertical-align:middle}.vs-table .sort-icon{font-size:.75rem;vertical-align:middle}

package/dist/vs-datatable.es.js

@@ -0,0 +1,407 @@
+import { defineComponent as H, computed as p, createElementBlock as i, openBlock as r, createElementVNode as o, createCommentVNode as k, normalizeClass as w, Fragment as R, renderList as L, toDisplayString as y, normalizeStyle as E, useAttrs as K, ref as A, resolveComponent as Q, createBlock as J, withCtx as W, renderSlot as M, createVNode as D, unref as X, withModifiers as Y, withDirectives as ee, vModelCheckbox as te, createTextVNode as se } from "vue";
+import './index.css';const ae = { ref: "vsPagination" }, oe = ["id"], le = { class: "page-item" }, ne = ["disabled"], re = {
+  key: 0,
+  class: "page-item d-flex"
+}, ie = {
+  key: 0,
+  class: "page-link disabled"
+}, de = ["id", "onClick"], ce = {
+  key: 1,
+  class: "page-item d-flex"
+}, ue = {
+  key: 0,
+  class: "page-link me-2 disabled"
+}, pe = { class: "page-item" }, ve = ["disabled"], fe = /* @__PURE__ */ H({
+  __name: "VsPagination",
+  props: {
+    modelValue: {},
+    totalRecords: {},
+    rowsPerPage: {},
+    tablename: {},
+    maxVisible: {},
+    paginationClass: {}
+  },
+  emits: ["update:modelValue", "page-changed"],
+  setup(e, { emit: b }) {
+    const t = e, c = b, h = t.maxVisible ?? 3, d = p({
+      get: () => t.modelValue,
+      set: (m) => {
+        c("update:modelValue", m), c("page-changed", m);
+      }
+    }), x = p(() => d.value <= Math.floor(h / 2) ? 1 : d.value >= u.value - Math.floor(h / 2) ? Math.max(u.value - h + 1, 1) : d.value - Math.floor(h / 2)), $ = p(() => Math.min(x.value + h - 1, u.value)), u = p(() => Math.ceil(t.totalRecords / t.rowsPerPage)), P = p(() => {
+      const m = [];
+      for (let g = x.value; g <= $.value; g++)
+        m.push(g);
+      return m;
+    }), V = (m) => {
+      m >= 1 && m <= u.value && (d.value = m);
+    }, I = () => {
+      d.value > 1 && d.value--;
+    }, C = () => {
+      d.value < u.value && d.value++;
+    };
+    return (m, g) => (r(), i("div", ae, [
+      o("ul", {
+        class: "pagination pagination-sm mb-0 justify-content-center text-center",
+        id: e.tablename + "-paginate-parent"
+      }, [
+        o("li", le, [
+          o("button", {
+            onClick: I,
+            type: "button",
+            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === 1 }]),
+            disabled: d.value === 1
+          }, " << ", 10, ne)
+        ]),
+        x.value > 1 ? (r(), i("li", re, [
+          o("button", {
+            type: "button",
+            class: "page-link me-2",
+            onClick: g[0] || (g[0] = (_) => V(1))
+          }, "1"),
+          x.value > 2 ? (r(), i("span", ie, "...")) : k("", !0)
+        ])) : k("", !0),
+        (r(!0), i(R, null, L(P.value, (_) => (r(), i("li", {
+          key: _,
+          class: "page-item"
+        }, [
+          o("button", {
+            type: "button",
+            class: w([d.value === _ ? "active" : "", "page-link", e.tablename + "-paginate-button"]),
+            id: e.tablename + "-navigateButton-" + _,
+            onClick: (T) => V(_)
+          }, y(_), 11, de)
+        ]))), 128)),
+        $.value < u.value ? (r(), i("li", ce, [
+          $.value < u.value - 1 ? (r(), i("span", ue, "...")) : k("", !0),
+          o("button", {
+            type: "button",
+            class: "page-link",
+            onClick: g[1] || (g[1] = (_) => V(u.value))
+          }, y(u.value), 1)
+        ])) : k("", !0),
+        o("li", pe, [
+          o("button", {
+            onClick: C,
+            type: "button",
+            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === u.value }]),
+            disabled: d.value === u.value
+          }, " >> ", 10, ve)
+        ])
+      ], 8, oe)
+    ], 512));
+  }
+}), G = (e, b) => {
+  const t = e.__vccOpts || e;
+  for (const [c, h] of b)
+    t[c] = h;
+  return t;
+}, he = /* @__PURE__ */ G(fe, [["__scopeId", "data-v-126f4cdf"]]), me = { class: "flex-fill position-relative" }, ge = { class: "input-group" }, be = ["placeholder", "value"], _e = /* @__PURE__ */ H({
+  __name: "VsSearch",
+  props: {
+    modelValue: {},
+    placeholder: {}
+  },
+  emits: ["update:modelValue", "input-typed"],
+  setup(e, { emit: b }) {
+    const t = b, c = (h) => {
+      const d = h.target;
+      t("update:modelValue", d.value), t("input-typed", d.value);
+    };
+    return (h, d) => (r(), i("div", me, [
+      o("div", ge, [
+        d[0] || (d[0] = o("div", {
+          class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
+          style: { "z-index": "1020" }
+        }, [
+          o("i", { class: "fa fa-search opacity-5" })
+        ], -1)),
+        o("input", {
+          type: "text",
+          class: "form-control ps-35px",
+          placeholder: e.placeholder,
+          value: e.modelValue,
+          onInput: c
+        }, null, 40, be)
+      ])
+    ]));
+  }
+}), ke = /* @__PURE__ */ H({
+  __name: "Loader",
+  props: {
+    height: { default: "50px" }
+  },
+  setup(e) {
+    return (b, t) => (r(), i("div", null, [
+      o("div", {
+        class: "loader",
+        style: E({ height: e.height })
+      }, null, 4)
+    ]));
+  }
+}), ye = /* @__PURE__ */ G(ke, [["__scopeId", "data-v-6ad4d2c7"]]), xe = (e, b = "") => `
+      <svg width="60pt" height="60pt" id="Layer__${e}" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
+          <defs>
+              <linearGradient id="no-data__rfq_${e}" x1="40.1" y1="64.17" x2="40.1" y2="5.83" gradientUnits="userSpaceOnUse">
+                  <stop offset="0" stop-color="#969698" stop-opacity="0.1" />
+                  <stop offset="1" stop-color="#869ac0" stop-opacity="0.25" />
+              </linearGradient>
+              <linearGradient id="no-data__rfq-2_${e}" x1="176.51" y1="-169.09" x2="196.67" y2="-169.09" gradientTransform="matrix(0.73, 0, 0, -0.73, -125.67, -73.17)" gradientUnits="userSpaceOnUse">
+                  <stop offset="0" stop-color="#969698" />
+                  <stop offset="1" stop-color="#869ac0" />
+              </linearGradient>
+              <linearGradient id="no-data__rfq-3_${e}" x1="187.34" y1="-148.34" x2="227.34" y2="-148.34" xlink:href="#no-data__rfq-2_${e}" />
+          </defs>
+          <path d="M61.25,20.42H46.67V5.83Z" fill="#929aa5" opacity="0.5" style="isolation:isolate" />
+          <path d="M19,5.83H46.67L61.25,20.42V64.17H19ZM54,27H26.25V29.9H54Zm0,6.56H26.25v2.92H54ZM26.25,40.1H54V43H26.25Zm0,6.57H54v2.91H26.25Z" fill-rule="evenodd" fill="url(#no-data__rfq_${e})" />
+          <path d="M3,53.35,13.62,42.78l4.12,4.13L7.17,57.48,3,53.35Z" fill-rule="evenodd" fill="url(#no-data__rfq-2_${e})" />
+          <path d="M37.19,35A11.67,11.67,0,1,0,25.52,46.67,11.68,11.68,0,0,0,37.19,35Zm2.91,0A14.58,14.58,0,1,0,25.52,49.58,14.58,14.58,0,0,0,40.1,35Z" fill-rule="evenodd" fill="url(#no-data__rfq-3_${e})" />
+      </svg>
+      <div class="fs-5 fw-700 text-fmdqgray">${b}</div>
+    `, we = { class: "card-body p-4 vs-table-card-body" }, $e = {
+  key: 0,
+  class: "input-group mb-4"
+}, Ve = { class: "flex-fill position-relative" }, Pe = { class: "input-group" }, Ce = {
+  ref: "tableResponsiveRef",
+  class: "table-responsive"
+}, Oe = {
+  key: 0,
+  style: { width: "5%" }
+}, Se = { class: "form-check mb-2px" }, Me = ["id", "checked"], Re = ["for"], Le = ["onClick"], He = { class: "d-inline-flex align-items-center gap-1" }, Ie = {
+  key: 0,
+  class: "sort-container flex-column"
+}, Te = {
+  key: 1,
+  class: "badge bg-secondary sort-badge"
+}, Be = { key: 0 }, Ze = {
+  colspan: "100%",
+  class: "text-center"
+}, qe = { key: 1 }, Ue = {
+  colspan: "100%",
+  class: "text-center"
+}, Ae = ["innerHTML"], De = ["onClick"], Ge = { class: "form-check mb-2px" }, Ne = ["id", "value"], ze = ["for"], Ee = { class: "d-md-flex align-items-center mt-1" }, je = {
+  key: 0,
+  class: "me-md-auto text-md-left text-center mb-2 mb-md-0"
+}, Fe = {
+  key: 1,
+  class: "me-md-auto"
+}, Ke = /* @__PURE__ */ H({
+  __name: "VsDataTable",
+  props: {
+    rows: { default: () => [] },
+    itemSelected: { default: null },
+    tablename: { default: "default-table" },
+    sort: {},
+    serverItemsLength: {},
+    serverOptions: { default: null },
+    showHeader: { type: Boolean, default: !0 },
+    headerText: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    columns: {},
+    showSearch: { type: Boolean, default: !0 },
+    tableClass: {},
+    rowClass: {},
+    showRowEntries: { type: Boolean, default: !0 }
+  },
+  emits: ["update:itemSelected", "update:serverItemsLength", "update:serverOptions", "input-typed", "page-updated", "sort-changed", "row-click"],
+  setup(e, { emit: b }) {
+    const t = e, c = b, h = K(), d = p(() => !!h.onRowClick);
+    function x(s, l) {
+      return l.split(".").reduce((n, a) => n?.[a], s) ?? "";
+    }
+    const $ = (s) => t.serverOptions?.sort?.some((l) => l.field === s), u = (s) => {
+      const l = t.serverOptions?.sort?.find((n) => n.field === s);
+      return l ? l.priority ?? null : null;
+    }, P = (s) => t.serverOptions?.sort?.find((l) => l.field === s)?.order ?? null, V = p(() => {
+      const s = t.serverOptions?.sort ?? [];
+      if (!s.length) return t.rows;
+      const l = (n, a) => a.split(".").reduce((v, f) => v?.[f], n) ?? "";
+      return [...t.rows].sort((n, a) => {
+        for (const { field: v, order: f } of s) {
+          const q = l(n, v), U = l(a, v);
+          if (q !== U)
+            return f === "asc" ? q > U ? 1 : -1 : q < U ? 1 : -1;
+        }
+        return 0;
+      });
+    }), I = (s, l) => {
+      if (!t.serverOptions) return;
+      let n = [...t.serverOptions.sort || []];
+      const a = n.findIndex((v) => v.field === s);
+      l.shiftKey ? a === -1 ? n.push({ field: s, order: "asc" }) : n[a]?.order === "asc" ? n[a].order = "desc" : n.splice(a, 1) : a === -1 ? n = [{ field: s, order: "asc" }] : n[a]?.order === "asc" ? n = [{ field: s, order: "desc" }] : n = [], n = n.map((v, f) => ({ ...v, priority: f + 1 })), c("update:serverOptions", { ...t.serverOptions, sort: n }), c("sort-changed", { sort: n });
+    }, C = A(""), m = (s) => c("input-typed", s), g = A(10), _ = p({
+      get: () => t.serverOptions?.rowsPerPage ?? g.value,
+      set: (s) => {
+        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, rowsPerPage: s }) : g.value = s;
+      }
+    }), T = A(1), B = p({
+      get: () => t.serverItemsLength !== void 0 ? t.serverItemsLength : t.rows.length,
+      set: (s) => {
+        t.serverItemsLength !== void 0 && c("update:serverItemsLength", s);
+      }
+    }), O = p({
+      get: () => t.serverOptions?.page ?? T.value,
+      set: (s) => {
+        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, page: s }) : T.value = s;
+      }
+    }), j = (s) => {
+      t.serverOptions && c("update:serverOptions", { ...t.serverOptions, page: s }), c("page-updated", s);
+    }, Z = p(() => {
+      const s = t.serverOptions?.rowsPerPage ?? 10, l = (O.value - 1) * s + 1, n = Math.min(O.value * s, B.value);
+      return { start: l, end: n };
+    }), S = p({
+      get: () => t.itemSelected || [],
+      set: (s) => c("update:itemSelected", s)
+    }), N = p(() => t.itemSelected !== null), z = p(() => t.rows.length > 0 && S.value.length === t.rows.length), F = () => {
+      S.value = z.value ? [] : [...t.rows];
+    };
+    return (s, l) => {
+      const n = Q("card");
+      return r(), J(n, { class: "vs-table-card mb-3" }, {
+        default: W(() => [
+          o("div", we, [
+            e.showSearch ? (r(), i("div", $e, [
+              o("div", Ve, [
+                o("div", Pe, [
+                  D(_e, {
+                    modelValue: C.value,
+                    "onUpdate:modelValue": l[0] || (l[0] = (a) => C.value = a),
+                    onInputTyped: m,
+                    placeholder: "Search products"
+                  }, null, 8, ["modelValue"]),
+                  l[4] || (l[4] = o("div", {
+                    class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
+                    style: { "z-index": "1020" }
+                  }, [
+                    o("i", { class: "fa fa-search opacity-5" })
+                  ], -1))
+                ])
+              ]),
+              M(s.$slots, "filterArea", {}, void 0, !0)
+            ])) : k("", !0),
+            o("div", Ce, [
+              o("table", {
+                class: w(["table table-hover text-nowrap vs-table", e.tableClass])
+              }, [
+                o("thead", null, [
+                  o("tr", null, [
+                    N.value ? (r(), i("th", Oe, [
+                      o("div", Se, [
+                        o("input", {
+                          type: "checkbox",
+                          class: "form-check-input",
+                          id: e.tablename + "-main-checkbox",
+                          checked: z.value,
+                          onChange: F
+                        }, null, 40, Me),
+                        o("label", {
+                          class: "form-check-label pt-1px",
+                          for: e.tablename + "-main-checkbox"
+                        }, null, 8, Re)
+                      ])
+                    ])) : k("", !0),
+                    (r(!0), i(R, null, L(e.columns, (a) => (r(), i("th", {
+                      key: a.field,
+                      onClick: (v) => a.sortable ? I(a.field, v) : null,
+                      style: E({ width: a.width + "%", cursor: a.sortable ? "pointer" : "default" }),
+                      class: "border-top-0 pt-0 pb-2"
+                    }, [
+                      M(s.$slots, `header-${a.field}`, {}, () => [
+                        o("div", He, [
+                          o("span", null, y(a.label), 1),
+                          a.sortable ? (r(), i("span", Ie, [
+                            o("i", {
+                              class: w(["fa fa-sort-up sort-icon", { "active-asc": $(a.field) && P(a.field) === "asc" }])
+                            }, null, 2),
+                            o("i", {
+                              class: w(["fa fa-sort-down sort-icon", { "active-desc": $(a.field) && P(a.field) === "desc" }])
+                            }, null, 2)
+                          ])) : k("", !0),
+                          u(a.field) !== null ? (r(), i("span", Te, y(u(a.field)), 1)) : k("", !0)
+                        ])
+                      ], !0)
+                    ], 12, Le))), 128))
+                  ])
+                ]),
+                o("tbody", null, [
+                  e.loading ? (r(), i("tr", Be, [
+                    o("td", Ze, [
+                      D(ye)
+                    ])
+                  ])) : V.value.length ? (r(!0), i(R, { key: 2 }, L(V.value, (a, v) => (r(), i("tr", {
+                    key: v,
+                    class: w([e.rowClass, { "cursor-pointer": d.value }]),
+                    onClick: (f) => s.$emit("row-click", a, v)
+                  }, [
+                    N.value ? (r(), i("td", {
+                      key: 0,
+                      onClick: l[2] || (l[2] = Y(() => {
+                      }, ["stop"]))
+                    }, [
+                      o("div", Ge, [
+                        ee(o("input", {
+                          type: "checkbox",
+                          class: "form-check-input",
+                          id: e.tablename + "-checkbox-" + a.id,
+                          value: a,
+                          "onUpdate:modelValue": l[1] || (l[1] = (f) => S.value = f)
+                        }, null, 8, Ne), [
+                          [te, S.value]
+                        ]),
+                        o("label", {
+                          class: "form-check-label pt-1px",
+                          for: e.tablename + "-checkbox-" + a.id
+                        }, null, 8, ze)
+                      ])
+                    ])) : k("", !0),
+                    (r(!0), i(R, null, L(e.columns, (f) => (r(), i("td", {
+                      key: f.field,
+                      class: "align-middle"
+                    }, [
+                      M(s.$slots, `cell-${f.field}`, {
+                        item: a,
+                        value: x(a, f.field)
+                      }, () => [
+                        se(y(x(a, f.field)), 1)
+                      ], !0)
+                    ]))), 128))
+                  ], 10, De))), 128)) : (r(), i("tr", qe, [
+                    o("td", Ue, [
+                      M(s.$slots, "no-data", {}, () => [
+                        o("div", {
+                          innerHTML: X(xe)("vs-table-no_data", "No data available")
+                        }, null, 8, Ae)
+                      ], !0)
+                    ])
+                  ]))
+                ])
+              ], 2)
+            ], 512),
+            o("div", Ee, [
+              e.showRowEntries ? (r(), i("div", je, " Showing " + y(Z.value.start < 1 ? 0 : Z.value.start) + " to " + y(Z.value.end) + " of " + y(B.value) + " entries ", 1)) : (r(), i("div", Fe)),
+              D(he, {
+                modelValue: O.value,
+                "onUpdate:modelValue": l[3] || (l[3] = (a) => O.value = a),
+                totalRecords: B.value,
+                rowsPerPage: _.value,
+                maxVisible: 3,
+                tablename: e.tablename,
+                class: "text-center",
+                onPageChanged: j
+              }, null, 8, ["modelValue", "totalRecords", "rowsPerPage", "tablename"])
+            ])
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), Qe = /* @__PURE__ */ G(Ke, [["__scopeId", "data-v-48b15b64"]]), We = {
+  install(e) {
+    e.component("VsDataTable", Qe);
+  }
+};
+export {
+  Qe as VsDataTable,
+  We as default
+};

package/dist/vs-datatable.umd.js

@@ -0,0 +1,21 @@
+(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.VsDataTable={},b.Vue))})(this,(function(b,e){"use strict";var O=document.createElement("style");O.textContent=`@media only screen and (min-width: 1199px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:12px!important;line-height:1!important}}@media only screen and (max-width: 768px){.pagination .page-item .page-link[data-v-126f4cdf]{padding:4px 8px!important;font-size:10px!important;line-height:1!important}}.loader[data-v-6ad4d2c7]{position:relative;width:85px;height:50px;background-repeat:no-repeat;background-image:linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0),linear-gradient(#CC9933 50px,transparent 0);background-position:0px center,15px center,30px center,45px center,60px center,75px center,90px center;animation:rikSpikeRoll-6ad4d2c7 .65s linear infinite alternate}@keyframes rikSpikeRoll-6ad4d2c7{0%{background-size:10px 3px}16%{background-size:10px 50px,10px 3px,10px 3px,10px 3px,10px 3px,10px 3px}33%{background-size:10px 30px,10px 50px,10px 3px,10px 3px,10px 3px,10px 3px}50%{background-size:10px 10px,10px 30px,10px 50px,10px 3px,10px 3px,10px 3px}66%{background-size:10px 3px,10px 10px,10px 30px,10px 50px,10px 3px,10px 3px}83%{background-size:10px 3px,10px 3px,10px 10px,10px 30px,10px 50px,10px 3px}to{background-size:10px 3px,10px 3px,10px 3px,10px 10px,10px 30px,10px 50px}}.sort-container[data-v-48b15b64]{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.sort-icon[data-v-48b15b64]{font-size:.62rem;color:#aaa;margin:-5px 0}.sort-icon.active-asc[data-v-48b15b64],.sort-icon.active-desc[data-v-48b15b64]{color:#daa520}.sort-badge[data-v-48b15b64]{font-size:.65rem;line-height:1;padding:.15rem .3rem;display:inline-flex;align-items:center;justify-content:center}.vs-table{border-collapse:separate;border-spacing:0}.vs-table thead{background-color:#f8f9fa}.vs-table thead th{font-weight:600;vertical-align:middle;padding:.75rem}.vs-table tbody tr{transition:background-color .2s ease}.vs-table tbody tr:hover{background-color:#e9ecef}.vs-table tbody tr td{padding:.65rem .75rem;vertical-align:middle}.vs-table .sort-icon{font-size:.75rem;vertical-align:middle}
+/*$vite$:1*/`,document.head.appendChild(O);const R={ref:"vsPagination"},D=["id"],T={class:"page-item"},H=["disabled"],I={key:0,class:"page-item d-flex"},q={key:0,class:"page-link disabled"},Z=["id","onClick"],U={key:1,class:"page-item d-flex"},A={key:0,class:"page-link me-2 disabled"},G={class:"page-item"},j=["disabled"],F=e.defineComponent({__name:"VsPagination",props:{modelValue:{},totalRecords:{},rowsPerPage:{},tablename:{},maxVisible:{},paginationClass:{}},emits:["update:modelValue","page-changed"],setup(t,{emit:x}){const a=t,i=x,m=a.maxVisible??3,r=e.computed({get:()=>a.modelValue,set:f=>{i("update:modelValue",f),i("page-changed",f)}}),u=e.computed(()=>r.value<=Math.floor(m/2)?1:r.value>=d.value-Math.floor(m/2)?Math.max(d.value-m+1,1):r.value-Math.floor(m/2)),k=e.computed(()=>Math.min(u.value+m-1,d.value)),d=e.computed(()=>Math.ceil(a.totalRecords/a.rowsPerPage)),y=e.computed(()=>{const f=[];for(let g=u.value;g<=k.value;g++)f.push(g);return f}),_=f=>{f>=1&&f<=d.value&&(r.value=f)},w=()=>{r.value>1&&r.value--},V=()=>{r.value<d.value&&r.value++};return(f,g)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("ul",{class:"pagination pagination-sm mb-0 justify-content-center text-center",id:t.tablename+"-paginate-parent"},[e.createElementVNode("li",T,[e.createElementVNode("button",{onClick:w,type:"button",class:e.normalizeClass([t.tablename+"-paginate-navigators page-link",{disabled:r.value===1}]),disabled:r.value===1}," << ",10,H)]),u.value>1?(e.openBlock(),e.createElementBlock("li",I,[e.createElementVNode("button",{type:"button",class:"page-link me-2",onClick:g[0]||(g[0]=h=>_(1))},"1"),u.value>2?(e.openBlock(),e.createElementBlock("span",q,"...")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,h=>(e.openBlock(),e.createElementBlock("li",{key:h,class:"page-item"},[e.createElementVNode("button",{type:"button",class:e.normalizeClass([r.value===h?"active":"","page-link",t.tablename+"-paginate-button"]),id:t.tablename+"-navigateButton-"+h,onClick:N=>_(h)},e.toDisplayString(h),11,Z)]))),128)),k.value<d.value?(e.openBlock(),e.createElementBlock("li",U,[k.value<d.value-1?(e.openBlock(),e.createElementBlock("span",A,"...")):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"page-link",onClick:g[1]||(g[1]=h=>_(d.value))},e.toDisplayString(d.value),1)])):e.createCommentVNode("",!0),e.createElementVNode("li",G,[e.createElementVNode("button",{onClick:V,type:"button",class:e.normalizeClass([t.tablename+"-paginate-navigators page-link",{disabled:r.value===d.value}]),disabled:r.value===d.value}," >> ",10,j)])],8,D)],512))}}),B=(t,x)=>{const a=t.__vccOpts||t;for(const[i,m]of x)a[i]=m;return a},K=B(F,[["__scopeId","data-v-126f4cdf"]]),Q={class:"flex-fill position-relative"},J={class:"input-group"},W=["placeholder","value"],X=e.defineComponent({__name:"VsSearch",props:{modelValue:{},placeholder:{}},emits:["update:modelValue","input-typed"],setup(t,{emit:x}){const a=x,i=m=>{const r=m.target;a("update:modelValue",r.value),a("input-typed",r.value)};return(m,r)=>(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",J,[r[0]||(r[0]=e.createElementVNode("div",{class:"input-group-text position-absolute top-0 bottom-0 bg-none border-0",style:{"z-index":"1020"}},[e.createElementVNode("i",{class:"fa fa-search opacity-5"})],-1)),e.createElementVNode("input",{type:"text",class:"form-control ps-35px",placeholder:t.placeholder,value:t.modelValue,onInput:i},null,40,W)])]))}}),Y=B(e.defineComponent({__name:"Loader",props:{height:{default:"50px"}},setup(t){return(x,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{class:"loader",style:e.normalizeStyle({height:t.height})},null,4)]))}}),[["__scopeId","data-v-6ad4d2c7"]]),ee=(t,x="")=>`
+      <svg width="60pt" height="60pt" id="Layer__${t}" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
+          <defs>
+              <linearGradient id="no-data__rfq_${t}" x1="40.1" y1="64.17" x2="40.1" y2="5.83" gradientUnits="userSpaceOnUse">
+                  <stop offset="0" stop-color="#969698" stop-opacity="0.1" />
+                  <stop offset="1" stop-color="#869ac0" stop-opacity="0.25" />
+              </linearGradient>
+              <linearGradient id="no-data__rfq-2_${t}" x1="176.51" y1="-169.09" x2="196.67" y2="-169.09" gradientTransform="matrix(0.73, 0, 0, -0.73, -125.67, -73.17)" gradientUnits="userSpaceOnUse">
+                  <stop offset="0" stop-color="#969698" />
+                  <stop offset="1" stop-color="#869ac0" />
+              </linearGradient>
+              <linearGradient id="no-data__rfq-3_${t}" x1="187.34" y1="-148.34" x2="227.34" y2="-148.34" xlink:href="#no-data__rfq-2_${t}" />
+          </defs>
+          <path d="M61.25,20.42H46.67V5.83Z" fill="#929aa5" opacity="0.5" style="isolation:isolate" />
+          <path d="M19,5.83H46.67L61.25,20.42V64.17H19ZM54,27H26.25V29.9H54Zm0,6.56H26.25v2.92H54ZM26.25,40.1H54V43H26.25Zm0,6.57H54v2.91H26.25Z" fill-rule="evenodd" fill="url(#no-data__rfq_${t})" />
+          <path d="M3,53.35,13.62,42.78l4.12,4.13L7.17,57.48,3,53.35Z" fill-rule="evenodd" fill="url(#no-data__rfq-2_${t})" />
+          <path d="M37.19,35A11.67,11.67,0,1,0,25.52,46.67,11.68,11.68,0,0,0,37.19,35Zm2.91,0A14.58,14.58,0,1,0,25.52,49.58,14.58,14.58,0,0,0,40.1,35Z" fill-rule="evenodd" fill="url(#no-data__rfq-3_${t})" />
+      </svg>
+      <div class="fs-5 fw-700 text-fmdqgray">${x}</div>
+    `,te={class:"card-body p-4 vs-table-card-body"},ae={key:0,class:"input-group mb-4"},oe={class:"flex-fill position-relative"},ne={class:"input-group"},le={ref:"tableResponsiveRef",class:"table-responsive"},se={key:0,style:{width:"5%"}},re={class:"form-check mb-2px"},ie=["id","checked"],de=["for"],ce=["onClick"],pe={class:"d-inline-flex align-items-center gap-1"},me={key:0,class:"sort-container flex-column"},fe={key:1,class:"badge bg-secondary sort-badge"},ge={key:0},xe={colspan:"100%",class:"text-center"},he={key:1},be={colspan:"100%",class:"text-center"},ue=["innerHTML"],ke=["onClick"],_e={class:"form-check mb-2px"},ye=["id","value"],Ve=["for"],Ee={class:"d-md-flex align-items-center mt-1"},Ce={key:0,class:"me-md-auto text-md-left text-center mb-2 mb-md-0"},Be={key:1,class:"me-md-auto"},z=B(e.defineComponent({__name:"VsDataTable",props:{rows:{default:()=>[]},itemSelected:{default:null},tablename:{default:"default-table"},sort:{},serverItemsLength:{},serverOptions:{default:null},showHeader:{type:Boolean,default:!0},headerText:{default:""},loading:{type:Boolean,default:!1},columns:{},showSearch:{type:Boolean,default:!0},tableClass:{},rowClass:{},showRowEntries:{type:Boolean,default:!0}},emits:["update:itemSelected","update:serverItemsLength","update:serverOptions","input-typed","page-updated","sort-changed","row-click"],setup(t,{emit:x}){const a=t,i=x,m=e.useAttrs(),r=e.computed(()=>!!m.onRowClick);function u(o,l){return l.split(".").reduce((s,n)=>s?.[n],o)??""}const k=o=>a.serverOptions?.sort?.some(l=>l.field===o),d=o=>{const l=a.serverOptions?.sort?.find(s=>s.field===o);return l?l.priority??null:null},y=o=>a.serverOptions?.sort?.find(l=>l.field===o)?.order??null,_=e.computed(()=>{const o=a.serverOptions?.sort??[];if(!o.length)return a.rows;const l=(s,n)=>n.split(".").reduce((c,p)=>c?.[p],s)??"";return[...a.rows].sort((s,n)=>{for(const{field:c,order:p}of o){const v=l(s,c),P=l(n,c);if(v!==P)return p==="asc"?v>P?1:-1:v<P?1:-1}return 0})}),w=(o,l)=>{if(!a.serverOptions)return;let s=[...a.serverOptions.sort||[]];const n=s.findIndex(c=>c.field===o);l.shiftKey?n===-1?s.push({field:o,order:"asc"}):s[n]?.order==="asc"?s[n].order="desc":s.splice(n,1):n===-1?s=[{field:o,order:"asc"}]:s[n]?.order==="asc"?s=[{field:o,order:"desc"}]:s=[],s=s.map((c,p)=>({...c,priority:p+1})),i("update:serverOptions",{...a.serverOptions,sort:s}),i("sort-changed",{sort:s})},V=e.ref(""),f=o=>i("input-typed",o),g=e.ref(10),h=e.computed({get:()=>a.serverOptions?.rowsPerPage??g.value,set:o=>{a.serverOptions?i("update:serverOptions",{...a.serverOptions,rowsPerPage:o}):g.value=o}}),N=e.ref(1),$=e.computed({get:()=>a.serverItemsLength!==void 0?a.serverItemsLength:a.rows.length,set:o=>{a.serverItemsLength!==void 0&&i("update:serverItemsLength",o)}}),E=e.computed({get:()=>a.serverOptions?.page??N.value,set:o=>{a.serverOptions?i("update:serverOptions",{...a.serverOptions,page:o}):N.value=o}}),Ne=o=>{a.serverOptions&&i("update:serverOptions",{...a.serverOptions,page:o}),i("page-updated",o)},S=e.computed(()=>{const o=a.serverOptions?.rowsPerPage??10,l=(E.value-1)*o+1,s=Math.min(E.value*o,$.value);return{start:l,end:s}}),C=e.computed({get:()=>a.itemSelected||[],set:o=>i("update:itemSelected",o)}),M=e.computed(()=>a.itemSelected!==null),L=e.computed(()=>a.rows.length>0&&C.value.length===a.rows.length),$e=()=>{C.value=L.value?[]:[...a.rows]};return(o,l)=>{const s=e.resolveComponent("card");return e.openBlock(),e.createBlock(s,{class:"vs-table-card mb-3"},{default:e.withCtx(()=>[e.createElementVNode("div",te,[t.showSearch?(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",oe,[e.createElementVNode("div",ne,[e.createVNode(X,{modelValue:V.value,"onUpdate:modelValue":l[0]||(l[0]=n=>V.value=n),onInputTyped:f,placeholder:"Search products"},null,8,["modelValue"]),l[4]||(l[4]=e.createElementVNode("div",{class:"input-group-text position-absolute top-0 bottom-0 bg-none border-0",style:{"z-index":"1020"}},[e.createElementVNode("i",{class:"fa fa-search opacity-5"})],-1))])]),e.renderSlot(o.$slots,"filterArea",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",le,[e.createElementVNode("table",{class:e.normalizeClass(["table table-hover text-nowrap vs-table",t.tableClass])},[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[M.value?(e.openBlock(),e.createElementBlock("th",se,[e.createElementVNode("div",re,[e.createElementVNode("input",{type:"checkbox",class:"form-check-input",id:t.tablename+"-main-checkbox",checked:L.value,onChange:$e},null,40,ie),e.createElementVNode("label",{class:"form-check-label pt-1px",for:t.tablename+"-main-checkbox"},null,8,de)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,n=>(e.openBlock(),e.createElementBlock("th",{key:n.field,onClick:c=>n.sortable?w(n.field,c):null,style:e.normalizeStyle({width:n.width+"%",cursor:n.sortable?"pointer":"default"}),class:"border-top-0 pt-0 pb-2"},[e.renderSlot(o.$slots,`header-${n.field}`,{},()=>[e.createElementVNode("div",pe,[e.createElementVNode("span",null,e.toDisplayString(n.label),1),n.sortable?(e.openBlock(),e.createElementBlock("span",me,[e.createElementVNode("i",{class:e.normalizeClass(["fa fa-sort-up sort-icon",{"active-asc":k(n.field)&&y(n.field)==="asc"}])},null,2),e.createElementVNode("i",{class:e.normalizeClass(["fa fa-sort-down sort-icon",{"active-desc":k(n.field)&&y(n.field)==="desc"}])},null,2)])):e.createCommentVNode("",!0),d(n.field)!==null?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString(d(n.field)),1)):e.createCommentVNode("",!0)])],!0)],12,ce))),128))])]),e.createElementVNode("tbody",null,[t.loading?(e.openBlock(),e.createElementBlock("tr",ge,[e.createElementVNode("td",xe,[e.createVNode(Y)])])):_.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(_.value,(n,c)=>(e.openBlock(),e.createElementBlock("tr",{key:c,class:e.normalizeClass([t.rowClass,{"cursor-pointer":r.value}]),onClick:p=>o.$emit("row-click",n,c)},[M.value?(e.openBlock(),e.createElementBlock("td",{key:0,onClick:l[2]||(l[2]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",_e,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",class:"form-check-input",id:t.tablename+"-checkbox-"+n.id,value:n,"onUpdate:modelValue":l[1]||(l[1]=p=>C.value=p)},null,8,ye),[[e.vModelCheckbox,C.value]]),e.createElementVNode("label",{class:"form-check-label pt-1px",for:t.tablename+"-checkbox-"+n.id},null,8,Ve)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,p=>(e.openBlock(),e.createElementBlock("td",{key:p.field,class:"align-middle"},[e.renderSlot(o.$slots,`cell-${p.field}`,{item:n,value:u(n,p.field)},()=>[e.createTextVNode(e.toDisplayString(u(n,p.field)),1)],!0)]))),128))],10,ke))),128)):(e.openBlock(),e.createElementBlock("tr",he,[e.createElementVNode("td",be,[e.renderSlot(o.$slots,"no-data",{},()=>[e.createElementVNode("div",{innerHTML:e.unref(ee)("vs-table-no_data","No data available")},null,8,ue)],!0)])]))])],2)],512),e.createElementVNode("div",Ee,[t.showRowEntries?(e.openBlock(),e.createElementBlock("div",Ce," Showing "+e.toDisplayString(S.value.start<1?0:S.value.start)+" to "+e.toDisplayString(S.value.end)+" of "+e.toDisplayString($.value)+" entries ",1)):(e.openBlock(),e.createElementBlock("div",Be)),e.createVNode(K,{modelValue:E.value,"onUpdate:modelValue":l[3]||(l[3]=n=>E.value=n),totalRecords:$.value,rowsPerPage:h.value,maxVisible:3,tablename:t.tablename,class:"text-center",onPageChanged:Ne},null,8,["modelValue","totalRecords","rowsPerPage","tablename"])])])]),_:3})}}}),[["__scopeId","data-v-48b15b64"]]),we={install(t){t.component("VsDataTable",z)}};b.VsDataTable=z,b.default=we,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "vs-datatable",
+  "version": "0.1.0",
+  "description": "A lightweight Vue 3 datatable component with sorting, slots, and nested object support.",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "author": "Oregunwa Segun",
+  "homepage": "https://github.com/oregs/vs-datatable",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oregs/vs-datatable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oregs/vs-datatable/issues"
+  },
+  "keywords": [
+    "vue",
+    "datatable",
+    "table",
+    "vue3",
+    "component"
+  ],
+  "main": "./dist/vs-datatable.umd.js",
+  "module": "./dist/vs-datatable.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vs-datatable.es.js",
+      "require": "./dist/vs-datatable.umd.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./style.scss": "./src/styles/index.scss"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run type-check && pnpm run build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.16.5",
+    "@typescript-eslint/utils": "^8.44.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/eslint-plugin": "^1.3.13",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-vue": "^10.5.0",
+    "sass-embedded": "^1.93.2",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.6",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.4"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.0.1",
+    "bootstrap": "^5.3.8"
+  }
+}

package/src/styles/bootstrap.scss

@@ -0,0 +1,7 @@
+// 1. Override Bootstrap variables BEFORE importing
+$primary: #4CAF50; // Example: change primary color (green)
+$table-cell-padding-y: 0.5rem;
+$table-cell-padding-x: 0.75rem;
+
+// 2. Import all Bootstrap
+@import "bootstrap/scss/bootstrap";

package/src/styles/index.scss

@@ -0,0 +1,2 @@
+@import "bootstrap/scss/bootstrap"; 
+@import "./datatable.scss";

package/src/styles/vs-datatable.scss

@@ -0,0 +1,40 @@
+// Import only what you need from bootstrap (optional, leaner)
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+// Example custom styles for the table
+.vs-table {
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    background-color: $gray-100;
+    th {
+      font-weight: 600;
+      vertical-align: middle;
+      padding: 0.75rem;
+    }
+  }
+
+  tbody {
+    tr {
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: $gray-200;
+      }
+
+      td {
+        padding: 0.65rem 0.75rem;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  // Example: custom sort icon
+  .sort-icon {
+    font-size: 0.75rem;
+    vertical-align: middle;
+  }
+}