vue-slim-tables 0.1.2 → 0.3.2

package/README.md

@@ -9,7 +9,7 @@ npm install vue-slim-tables
 
 ```html
 <template>
-    <VueSlimTables :columns="columns" remote="/users" />
+    <VueSlimTables :columns="columns" source="/users" />
 </template>
 
 <script>
@@ -42,7 +42,8 @@ npm install vue-slim-tables
 ### Slots
 | Slot | Props | Description |
 | - | - | - |
-| #head:${column.key} | { column } | Rewrite column thead with custom html |
+| #thead | { columns, orders } | Rewrite whole thead row |
+| #thead:${column.key} | { column } | Rewrite column thead with custom html |
 | #row | { row, index, columns } | Rewrite whole row |
 | #row:empty | - | Rewrite empty table row markup |
 | #row:loading | - | Rewrite loading table rows markup |

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";@keyframes moving-gradient{0%{background-position:-250px 0}to{background-position:250px 0}}.vst-th{line-height:20px}.vst-orderable div{display:flex;justify-content:space-between;align-items:center}.vst-orderable div:hover{cursor:pointer}.vst-orderable div:hover .vst-orderable-toggle{color:#555!important}.vst-orderable div .vst-orderable-toggle{font-size:20px;color:#ccc!important}.vst-orderable div .vst-orderable-toggle:after{content:" \2194";display:inline-block;transform:rotate(-90deg)}.vst-orderable div .vst-orderable-toggle.desc:after{content:" \2191";transform:rotate(0)}.vst-orderable div .vst-orderable-toggle.asc:after{content:" \2193";transform:rotate(0)}.vst-loading-row div{height:1.5rem;background:linear-gradient(to right,#eee 20%,#ddd 50%,#eee 80%);background-size:500px 1.5rem;animation-name:moving-gradient;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards}.vst tr td.vst-loading-row-1 div{animation-delay:-1s}.vst tr td.vst-loading-row-2 div{animation-delay:-.9s}.vst tr td.vst-loading-row-3 div{animation-delay:-.8s}.vst tr td.vst-loading-row-4 div{animation-delay:-.7s}.vst tr td.vst-loading-row-5 div{animation-delay:-.6s}.vst tr td.vst-loading-row-6 div{animation-delay:-.5s}.vst tr td.vst-loading-row-7 div{animation-delay:-.4s}.vst tr td.vst-loading-row-8 div{animation-delay:-.3s}.vst tr td.vst-loading-row-9 div{animation-delay:-.2s}.vst tr td.vst-loading-row-10 div{animation-delay:-.1s}.vst-pagination{display:flex;padding-left:0;list-style:none;border-radius:.25rem}.vst-pagination a{position:relative;display:block;padding:8px 12px;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.vst-pagination a:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.vst-page-item.disabled .vst-page-link{pointer-events:none;color:#6c757d;cursor:auto;background-color:#fff}.vst-page-item .vst-page-link{cursor:pointer}

package/dist/types/components/loading_row.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    columnsLength: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    randNum: number;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    columnsLength: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/types/components/table.vue.d.ts

@@ -0,0 +1,81 @@
+import { ShallowRef } from 'vue';
+interface TableColumn {
+    key: string;
+    title: string;
+    orderable?: boolean;
+}
+interface TableOrders {
+    [key: string]: 'asc' | 'desc';
+}
+interface TableFetchParams {
+    per_page: number;
+    page: number;
+    orders?: TableOrders;
+}
+interface TableRow {
+    [key: string]: any;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    source: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    perPage: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}, {
+    props: {
+        columns: Array<TableColumn>;
+        source: string | ((_: TableFetchParams) => Promise<TableRow[]> | TableRow[]);
+        perPage: number;
+    };
+    orders: ShallowRef<TableOrders>;
+    loadItems: (params: TableFetchParams) => Promise<TableRow[]>;
+    onOrderClick: (key: string) => void;
+    page: import("vue").Ref<number>;
+    isSyncing: import("vue").ComputedRef<boolean>;
+    isSynced: import("vue").ComputedRef<boolean>;
+    prevPage: () => void;
+    nextPage: () => void;
+    reload: () => void;
+    refetch: () => void;
+    rows: {
+        value: TableRow[];
+    };
+    LoadingRow: import("vue").DefineComponent<{
+        columnsLength: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }, {
+        randNum: number;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        columnsLength: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    source: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    perPage: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}>>, {
+    perPage: number;
+}>;
+export default _sfc_main;

package/dist/types/helpers/to_query_string.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (obj: any) => string;
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import VueSlimTable from './components/table.vue';
+export default VueSlimTable;

package/dist/types/use/filterable.d.ts

@@ -0,0 +1,22 @@
+declare type CombinedFilters<Filters> = Filters & {
+    page: number;
+};
+interface UseFiltetableArgs<Filters, Item> {
+    initialFilters: Filters;
+    loadItems: (_filters: CombinedFilters<Filters>) => Promise<Item[]>;
+}
+declare const useFilterable: <Filters, Item>({ initialFilters, loadItems }: UseFiltetableArgs<Filters, Item>) => {
+    page: import("vue").Ref<number>;
+    items: {
+        value: Item[];
+    };
+    syncState: import("vue").Ref<string>;
+    nextPage: () => void;
+    prevPage: () => void;
+    isSyncing: import("vue").ComputedRef<boolean>;
+    isSynced: import("vue").ComputedRef<boolean>;
+    isFailed: import("vue").ComputedRef<boolean>;
+    reload: () => void;
+    refetch: () => void;
+};
+export default useFilterable;

package/dist/vst.es.js

@@ -0,0 +1,271 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, computed, ref, reactive, watch, shallowRef, renderSlot, unref, Fragment, renderList, mergeProps, toHandlers, createTextVNode, toDisplayString, createCommentVNode, createBlock, withModifiers } from "vue";
+var index = "";
+const _hoisted_1$1 = ["colspan"];
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
+const _hoisted_3$1 = [
+  _hoisted_2$1
+];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  props: {
+    columnsLength: { type: Number, required: true }
+  },
+  setup(__props) {
+    const randNum = Math.floor(Math.random() * 10) + 1;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("tr", null, [
+        createElementVNode("td", {
+          colspan: __props.columnsLength,
+          class: normalizeClass(["vst-loading-row", `vst-loading-row-${randNum}`])
+        }, _hoisted_3$1, 10, _hoisted_1$1)
+      ]);
+    };
+  }
+});
+const SYNC_STATES = {
+  INITIAL: "initial",
+  SYNCING: "syncing",
+  SYNCED: "synced",
+  FAILED: "failed"
+};
+const useFilterable = ({ initialFilters, loadItems }) => {
+  const page = ref(1);
+  const items = reactive({ value: [] });
+  const syncState = ref(SYNC_STATES.INITIAL);
+  const filters = reactive({ value: initialFilters });
+  const combinedFilters = computed(() => __spreadValues({
+    page: page.value
+  }, filters.value));
+  const load = () => {
+    syncState.value = SYNC_STATES.SYNCING;
+    return loadItems(combinedFilters.value).then((res) => {
+      items.value = res;
+      syncState.value = SYNC_STATES.SYNCED;
+    }).catch(() => {
+      items.value = [];
+      syncState.value = SYNC_STATES.FAILED;
+    });
+  };
+  load();
+  watch(combinedFilters, load);
+  return {
+    page,
+    items,
+    syncState,
+    nextPage: () => {
+      page.value += 1;
+    },
+    prevPage: () => {
+      page.value -= 1;
+    },
+    isSyncing: computed(() => syncState.value === SYNC_STATES.SYNCING),
+    isSynced: computed(() => syncState.value === SYNC_STATES.SYNCED),
+    isFailed: computed(() => syncState.value === SYNC_STATES.FAILED),
+    reload: () => {
+      load();
+    },
+    refetch: () => {
+      if (page.value === 1) {
+        load();
+      } else {
+        page.value = 1;
+      }
+    }
+  };
+};
+const stringify = (obj, parentPrefix) => (outputArray, [key, val]) => {
+  if (val === null || val === void 0) {
+    return outputArray;
+  }
+  const encodedKey = encodeURIComponent(key);
+  const prefix = parentPrefix ? `${parentPrefix}[${encodedKey}]` : encodedKey;
+  if (["number", "string"].includes(typeof val)) {
+    outputArray.push(`${prefix}=${encodeURIComponent(val)}`);
+    return outputArray;
+  }
+  outputArray.push(Object.entries(val).reduce(stringify(val, prefix), []).join("&"));
+  return outputArray;
+};
+var toQueryString = (obj) => Object.entries(obj).reduce(stringify(), []).join("&");
+const _hoisted_1 = { class: "vst" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["colspan"];
+const _hoisted_5 = ["colspan"];
+const _hoisted_6 = {
+  key: 0,
+  class: "vst-pagination mt-3"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  props: {
+    columns: null,
+    source: null,
+    perPage: { default: 25 }
+  },
+  setup(__props, { expose }) {
+    const props = __props;
+    const orders = shallowRef({});
+    const loadItems = async (params) => {
+      let data;
+      if (typeof props.source === "string") {
+        const response = await fetch(`${props.source}?${toQueryString(params)}`);
+        data = await response.json();
+      } else {
+        data = await props.source(params);
+      }
+      return data;
+    };
+    const onOrderClick = (key) => {
+      if (orders.value[key] === "asc") {
+        orders.value = { [key]: "desc" };
+      } else if (orders.value[key] === "desc") {
+        orders.value = {};
+      } else {
+        orders.value = { [key]: "asc" };
+      }
+    };
+    const {
+      page,
+      isSyncing,
+      isSynced,
+      prevPage,
+      nextPage,
+      reload,
+      refetch,
+      items: rows
+    } = useFilterable({
+      initialFilters: { per_page: props.perPage, orders: orders.value },
+      loadItems
+    });
+    expose({
+      refetch,
+      reload,
+      rows
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", _hoisted_1, [
+        __props.columns.length ? (openBlock(), createElementBlock("thead", _hoisted_2, [
+          renderSlot(_ctx.$slots, "thead", {
+            columns: __props.columns,
+            orders: unref(orders)
+          }, () => [
+            createElementVNode("tr", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+                return openBlock(), createElementBlock("th", mergeProps({
+                  key: column.key,
+                  class: ["vst-th", { "vst-orderable": column.orderable }]
+                }, toHandlers(column.orderable ? { click: () => onOrderClick(column.key) } : {})), [
+                  column.orderable ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, `head:${column.key}`, { column }, () => [
+                      createTextVNode(toDisplayString(column.title), 1)
+                    ]),
+                    createElementVNode("a", {
+                      href: "#",
+                      class: normalizeClass(["vst-orderable-toggle", unref(orders)[column.key]])
+                    }, null, 2)
+                  ])) : renderSlot(_ctx.$slots, `thead:${column.key}`, {
+                    key: 1,
+                    column
+                  }, () => [
+                    createTextVNode(toDisplayString(column.title), 1)
+                  ])
+                ], 16);
+              }), 128))
+            ])
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("tbody", null, [
+          unref(isSyncing) ? renderSlot(_ctx.$slots, "row:loading", { key: 0 }, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.perPage, (i) => {
+              return openBlock(), createBlock(_sfc_main$1, {
+                key: `loadingRow${i}`,
+                "columns-length": __props.columns.length
+              }, null, 8, ["columns-length"]);
+            }), 128))
+          ]) : unref(isSynced) && unref(rows).value.length === 0 ? renderSlot(_ctx.$slots, "row:empty", { key: 1 }, () => [
+            createElementVNode("tr", null, [
+              createElementVNode("td", {
+                colspan: __props.columns.length
+              }, " No records found ", 8, _hoisted_4)
+            ])
+          ]) : unref(isSynced) && unref(rows).value.length ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(rows).value, (row, i) => {
+            return renderSlot(_ctx.$slots, "row", {
+              row,
+              index: i,
+              columns: __props.columns
+            }, () => [
+              (openBlock(), createElementBlock("tr", {
+                key: row["id"] || i
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+                  return openBlock(), createElementBlock("td", {
+                    key: column.key
+                  }, [
+                    renderSlot(_ctx.$slots, `cell:${column.key}`, {
+                      row,
+                      value: row[column.key],
+                      column,
+                      index: i
+                    }, () => [
+                      createTextVNode(toDisplayString(row[column.key]), 1)
+                    ])
+                  ]);
+                }), 128))
+              ]))
+            ]);
+          }), 256)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("tfoot", null, [
+          createElementVNode("tr", null, [
+            createElementVNode("td", {
+              colspan: __props.columns.length
+            }, [
+              renderSlot(_ctx.$slots, "pagination", {
+                page: unref(page),
+                rows: unref(rows).value
+              }, () => [
+                unref(page) > 1 || unref(rows).value.length === __props.perPage || unref(isSyncing) ? (openBlock(), createElementBlock("ul", _hoisted_6, [
+                  createElementVNode("li", {
+                    class: normalizeClass(["vst-page-item", { disabled: unref(page) === 1 || unref(isSyncing) }])
+                  }, [
+                    createElementVNode("a", {
+                      class: "vst-page-link",
+                      onClick: _cache[0] || (_cache[0] = withModifiers((...args) => unref(prevPage) && unref(prevPage)(...args), ["prevent"]))
+                    }, "\u2190")
+                  ], 2),
+                  createElementVNode("li", {
+                    class: normalizeClass(["vst-page-item", {
+                      disabled: unref(rows).value.length < __props.perPage || unref(isSyncing)
+                    }])
+                  }, [
+                    createElementVNode("a", {
+                      class: "vst-page-link",
+                      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => unref(nextPage) && unref(nextPage)(...args), ["prevent"]))
+                    }, "\u2192")
+                  ], 2)
+                ])) : createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_5)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };
+//# sourceMappingURL=vst.es.js.map

package/dist/vst.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vst.es.js","sources":["../src/ts/components/loading_row.vue","../src/ts/use/filterable.ts","../src/ts/helpers/to_query_string.ts","../src/ts/components/table.vue"],"sourcesContent":["<template>\n  <tr>\n    <td\n      :colspan=\"columnsLength\"\n      :class=\"['vst-loading-row', `vst-loading-row-${randNum}`]\">\n      <div />\n    </td>\n  </tr>\n</template>\n\n<script lang=\"ts\" setup>\ndefineProps({\n  columnsLength: { type: Number, required: true },\n})\n\nconst randNum = Math.floor(Math.random() * 10) + 1\n</script>\n","import {\n  ref, computed, reactive, watch,\n} from 'vue'\n\ntype CombinedFilters<Filters> = Filters & {\n  page: number\n}\n\ninterface UseFiltetableArgs<Filters, Item> {\n  initialFilters: Filters,\n  loadItems: (_filters: CombinedFilters<Filters>) => Promise<Item[]>\n}\n\nconst SYNC_STATES = {\n  INITIAL: 'initial',\n  SYNCING: 'syncing',\n  SYNCED: 'synced',\n  FAILED: 'failed',\n}\n\nconst useFilterable = <Filters, Item>({ initialFilters, loadItems }: UseFiltetableArgs<Filters, Item>) => {\n  const page = ref(1)\n  const items = reactive({ value: [] as Item[] }) as { value: Item[] }\n  const syncState = ref(SYNC_STATES.INITIAL)\n  const filters = reactive({ value: initialFilters })\n\n  const combinedFilters = computed(() => ({\n    page: page.value,\n    ...filters.value as Filters,\n  }))\n\n  const load = () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    return loadItems(combinedFilters.value)\n      .then((res: Item[]) => {\n        items.value = res\n        syncState.value = SYNC_STATES.SYNCED\n      })\n      .catch(() => {\n        items.value = []\n        syncState.value = SYNC_STATES.FAILED\n      })\n  }\n  load()\n\n  watch(combinedFilters, load)\n\n  return {\n    page,\n    items,\n    syncState,\n    nextPage: () => {\n      page.value += 1\n    },\n    prevPage: () => {\n      page.value -= 1\n    },\n    isSyncing: computed(() => syncState.value === SYNC_STATES.SYNCING),\n    isSynced: computed(() => syncState.value === SYNC_STATES.SYNCED),\n    isFailed: computed(() => syncState.value === SYNC_STATES.FAILED),\n    reload: () => {\n      load()\n    },\n    refetch: () => {\n      if (page.value === 1) {\n        load()\n      } else {\n        page.value = 1\n      }\n    },\n  }\n}\n\nexport default useFilterable\n","const stringify = (obj, parentPrefix?: string) => (outputArray, [key, val]) => {\n  if (val === null || val === undefined) {\n    return outputArray\n  }\n\n  const encodedKey = encodeURIComponent(key)\n  const prefix = parentPrefix ? `${parentPrefix}[${encodedKey}]` : encodedKey\n\n  if (['number', 'string'].includes(typeof val)) {\n    outputArray.push(`${prefix}=${encodeURIComponent(val)}`)\n    return outputArray\n  }\n\n  outputArray.push(Object.entries(val).reduce(stringify(val, prefix), []).join('&'))\n  return outputArray\n}\n\nexport default (obj): string => Object.entries(obj).reduce(stringify(obj), []).join('&')\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead\" :columns=\"columns\" :orders=\"orders\">\n        <tr>\n          <th\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :class=\"['vst-th', { 'vst-orderable': column.orderable }]\"\n            v-on=\"column.orderable ? { click: () => onOrderClick(column.key) } : {}\">\n            <div v-if=\"column.orderable\">\n              <slot\n                :name=\"`head:${column.key}`\"\n                :column=\"column\">\n                {{ column.title }}\n              </slot>\n\n              <a href=\"#\" :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n            </div>\n\n            <slot\n              v-else\n              :name=\"`thead:${column.key}`\"\n              :column=\"column\">\n              {{ column.title }}\n            </slot>\n          </th>\n        </tr>\n      </slot>\n    </thead>\n    <tbody>\n      <slot v-if=\"isSyncing\" name=\"row:loading\">\n        <LoadingRow\n          v-for=\"i in perPage\"\n          :key=\"`loadingRow${i}`\"\n          :columns-length=\"columns.length\" />\n      </slot>\n\n      <slot v-else-if=\"isSynced && rows.value.length === 0\" name=\"row:empty\">\n        <tr>\n          <td :colspan=\"columns.length\">\n            No records found\n          </td>\n        </tr>\n      </slot>\n\n      <template v-else-if=\"isSynced && rows.value.length\">\n        <slot\n          v-for=\"(row, i) in rows.value\"\n          name=\"row\"\n          :row=\"row\"\n          :index=\"i\"\n          :columns=\"columns\">\n          <tr :key=\"row['id'] || i\">\n            <td\n              v-for=\"column in columns\"\n              :key=\"column.key\">\n              <slot\n                :name=\"`cell:${column.key}`\"\n                :row=\"row\"\n                :value=\"row[column.key]\"\n                :column=\"column\"\n                :index=\"i\">\n                {{ row[column.key] }}\n              </slot>\n            </td>\n          </tr>\n        </slot>\n      </template>\n    </tbody>\n    <tfoot>\n      <tr>\n        <td :colspan=\"columns.length\">\n          <slot name=\"pagination\" :page=\"page\" :rows=\"rows.value\">\n            <ul\n              v-if=\"page > 1 || rows.value.length === perPage || isSyncing\"\n              class=\"vst-pagination mt-3\">\n              <li :class=\"['vst-page-item', { disabled: page === 1 || isSyncing }]\">\n                <a class=\"vst-page-link\" @click.prevent=\"prevPage\">←</a>\n              </li>\n\n              <li\n                :class=\"['vst-page-item', {\n                  disabled: rows.value.length < perPage || isSyncing\n                }]\">\n                <a class=\"vst-page-link\" @click.prevent=\"nextPage\">→</a>\n              </li>\n            </ul>\n          </slot>\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</template>\n\n<script setup lang=\"ts\">\nimport { shallowRef, ShallowRef } from 'vue'\nimport LoadingRow from './loading_row.vue'\n\nimport useFilterable from '../use/filterable'\nimport toQueryString from '../helpers/to_query_string'\n\ninterface TableColumn {\n  key: string,\n  title: string,\n  orderable?: boolean\n}\n\ninterface TableOrders {\n  [key: string]: 'asc' | 'desc'\n}\n\ninterface TableFetchParams {\n  per_page: number,\n  page: number,\n  orders?: TableOrders\n}\n\ninterface TableRow {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n}\n\ninterface TableFilters {\n  per_page: number,\n  orders: TableOrders\n}\n\ninterface TableProps {\n  columns: Array<TableColumn>\n  source: string | ((_: TableFetchParams) => Promise<TableRow[]> | TableRow[])\n  perPage?: number\n}\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  perPage: 25,\n})\n\nconst orders: ShallowRef<TableOrders> = shallowRef({})\n\nconst loadItems = async (params: TableFetchParams) => {\n  let data: TableRow[]\n  if (typeof props.source === 'string') {\n    const response = await fetch(`${props.source}?${toQueryString(params)}`)\n    data = await response.json()\n  } else {\n    data = await props.source(params) as TableRow[]\n  }\n\n  return data\n}\n\nconst onOrderClick = (key: string) => {\n  if (orders.value[key] === 'asc') {\n    orders.value = { [key]: 'desc' }\n  } else if (orders.value[key] === 'desc') {\n    orders.value = {}\n  } else {\n    orders.value = { [key]: 'asc' }\n  }\n}\n\nconst {\n  page, isSyncing, isSynced, prevPage, nextPage, reload, refetch, items: rows,\n} = useFilterable<TableFilters, TableRow>({\n  initialFilters: { per_page: props.perPage, orders: orders.value },\n  loadItems,\n})\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAeM,UAAU,KAAK,MAAM,KAAK,WAAW,EAAE,IAAI;;;;;;;;;;;ACFjD,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,gBAAgB,CAAgB,EAAE,gBAAgB,gBAAkD;QAClG,OAAO,IAAI,CAAC;QACZ,QAAQ,SAAS,EAAE,OAAO,IAAc;QACxC,YAAY,IAAI,YAAY,OAAO;QACnC,UAAU,SAAS,EAAE,OAAO,gBAAgB;QAE5C,kBAAkB,SAAS;IAC/B,MAAM,KAAK;AAAA,KACR,QAAQ,MACX;QAEI,OAAO,MAAM;cACP,QAAQ,YAAY;WAEvB,UAAU,gBAAgB,KAAK,EACnC,KAAK,CAAC,QAAgB;YACf,QAAQ;gBACJ,QAAQ,YAAY;AAAA,KAC/B,EACA,MAAM,MAAM;YACL,QAAQ;gBACJ,QAAQ,YAAY;AAAA,KAC/B;AAAA;;QAIC,iBAAiB,IAAI;SAEpB;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM;WACT,SAAS;AAAA;IAEhB,UAAU,MAAM;WACT,SAAS;AAAA;IAEhB,WAAW,SAAS,MAAM,UAAU,UAAU,YAAY,OAAO;AAAA,IACjE,UAAU,SAAS,MAAM,UAAU,UAAU,YAAY,MAAM;AAAA,IAC/D,UAAU,SAAS,MAAM,UAAU,UAAU,YAAY,MAAM;AAAA,IAC/D,QAAQ,MAAM;;;IAGd,SAAS,MAAM;UACT,KAAK,UAAU,GAAG;;aAEf;aACA,QAAQ;AAAA;;;AAIrB;ACxEA,MAAM,YAAY,CAAC,KAAK,iBAA0B,CAAC,aAAa,CAAC,KAAK,SAAS;MACzE,QAAQ,QAAQ,QAAQ,QAAW;WAC9B;AAAA;QAGH,aAAa,mBAAmB,GAAG;QACnC,SAAS,eAAe,GAAG,gBAAgB,gBAAgB;MAE7D,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAO,GAAG,GAAG;gBACjC,KAAK,GAAG,UAAU,mBAAmB,GAAG,GAAG;WAChD;AAAA;cAGG,KAAK,OAAO,QAAQ,GAAG,EAAE,OAAO,UAAU,KAAK,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC;SAC1E;AACT;AAEA,oBAAe,CAAC,QAAgB,OAAO,QAAQ,GAAG,EAAE,OAAO,UAAa,GAAG,EAAE,EAAE,KAAK,GAAG;;;;;;;;;;;;;;;;;;UCyHjF,SAAkC,WAAW,EAAE;UAE/C,YAAY,OAAO,WAA6B;UAChD;UACA,OAAO,MAAM,WAAW,UAAU;cAC9B,WAAW,MAAM,MAAM,GAAG,MAAM,UAAU,cAAc,MAAM,GAAG;eAChE,MAAM,SAAS;aACjB;eACE,MAAM,MAAM,OAAO,MAAM;AAAA;aAG3B;AAAA;UAGH,eAAe,CAAC,QAAgB;UAChC,OAAO,MAAM,SAAS,OAAO;eACxB,QAAQ,GAAG,MAAM;iBACf,OAAO,MAAM,SAAS,QAAQ;eAChC,QAAQ;aACV;eACE,QAAQ,GAAG,MAAM;;;UAItB;AAAA,MACJ;AAAA,MAAM;AAAA,MAAW;AAAA,MAAU;AAAA,MAAU;AAAA,MAAU;AAAA,MAAQ;AAAA,MAAS,OAAO;AAAA,QACrE,cAAsC;AAAA,MACxC,gBAAgB,EAAE,UAAU,MAAM,SAAS,QAAQ,OAAO;MAC1D;AAAA,KACD;WAEY;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vst.umd.js

@@ -0,0 +1,2 @@
+(function(e,s){typeof exports=="object"&&typeof module!="undefined"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis!="undefined"?globalThis:e||self,e.VueSlimTable=s(e.Vue))})(this,function(e){"use strict";var z=Object.defineProperty;var $=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var V=(e,s,c)=>s in e?z(e,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):e[s]=c,C=(e,s)=>{for(var c in s||(s={}))M.call(s,c)&&V(e,c,s[c]);if($)for(var c of $(s))R.call(s,c)&&V(e,c,s[c]);return e};var s="";const c=["colspan"],b=[e.createElementVNode("div",null,null,-1)],u=e.defineComponent({props:{columnsLength:{type:Number,required:!0}},setup(n){const m=Math.floor(Math.random()*10)+1;return(l,a)=>(e.openBlock(),e.createElementBlock("tr",null,[e.createElementVNode("td",{colspan:n.columnsLength,class:e.normalizeClass(["vst-loading-row",`vst-loading-row-${m}`])},b,10,c)]))}}),g={INITIAL:"initial",SYNCING:"syncing",SYNCED:"synced",FAILED:"failed"},I=({initialFilters:n,loadItems:m})=>{const l=e.ref(1),a=e.reactive({value:[]}),o=e.ref(g.INITIAL),p=e.reactive({value:n}),i=e.computed(()=>C({page:l.value},p.value)),d=()=>(o.value=g.SYNCING,m(i.value).then(N=>{a.value=N,o.value=g.SYNCED}).catch(()=>{a.value=[],o.value=g.FAILED}));return d(),e.watch(i,d),{page:l,items:a,syncState:o,nextPage:()=>{l.value+=1},prevPage:()=>{l.value-=1},isSyncing:e.computed(()=>o.value===g.SYNCING),isSynced:e.computed(()=>o.value===g.SYNCED),isFailed:e.computed(()=>o.value===g.FAILED),reload:()=>{d()},refetch:()=>{l.value===1?d():l.value=1}}},E=(n,m)=>(l,[a,o])=>{if(o==null)return l;const p=encodeURIComponent(a),i=m?`${m}[${p}]`:p;return["number","string"].includes(typeof o)?(l.push(`${i}=${encodeURIComponent(o)}`),l):(l.push(Object.entries(o).reduce(E(o,i),[]).join("&")),l)};var w=n=>Object.entries(n).reduce(E(),[]).join("&");const F={class:"vst"},L={key:0},T={key:0},D=["colspan"],P=["colspan"],j={key:0,class:"vst-pagination mt-3"};return e.defineComponent({props:{columns:null,source:null,perPage:{default:25}},setup(n,{expose:m}){const l=n,a=e.shallowRef({}),o=async r=>{let f;return typeof l.source=="string"?f=await(await fetch(`${l.source}?${w(r)}`)).json():f=await l.source(r),f},p=r=>{a.value[r]==="asc"?a.value={[r]:"desc"}:a.value[r]==="desc"?a.value={}:a.value={[r]:"asc"}},{page:i,isSyncing:d,isSynced:N,prevPage:S,nextPage:B,reload:Y,refetch:x,items:k}=I({initialFilters:{per_page:l.perPage,orders:a.value},loadItems:o});return m({refetch:x,reload:Y,rows:k}),(r,f)=>(e.openBlock(),e.createElementBlock("table",F,[n.columns.length?(e.openBlock(),e.createElementBlock("thead",L,[e.renderSlot(r.$slots,"thead",{columns:n.columns,orders:e.unref(a)},()=>[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,t=>(e.openBlock(),e.createElementBlock("th",e.mergeProps({key:t.key,class:["vst-th",{"vst-orderable":t.orderable}]},e.toHandlers(t.orderable?{click:()=>p(t.key)}:{})),[t.orderable?(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(r.$slots,`head:${t.key}`,{column:t},()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),e.createElementVNode("a",{href:"#",class:e.normalizeClass(["vst-orderable-toggle",e.unref(a)[t.key]])},null,2)])):e.renderSlot(r.$slots,`thead:${t.key}`,{key:1,column:t},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],16))),128))])])])):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[e.unref(d)?e.renderSlot(r.$slots,"row:loading",{key:0},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.perPage,t=>(e.openBlock(),e.createBlock(u,{key:`loadingRow${t}`,"columns-length":n.columns.length},null,8,["columns-length"]))),128))]):e.unref(N)&&e.unref(k).value.length===0?e.renderSlot(r.$slots,"row:empty",{key:1},()=>[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length}," No records found ",8,D)])]):e.unref(N)&&e.unref(k).value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(e.unref(k).value,(t,y)=>e.renderSlot(r.$slots,"row",{row:t,index:y,columns:n.columns},()=>[(e.openBlock(),e.createElementBlock("tr",{key:t.id||y},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,h=>(e.openBlock(),e.createElementBlock("td",{key:h.key},[e.renderSlot(r.$slots,`cell:${h.key}`,{row:t,value:t[h.key],column:h,index:y},()=>[e.createTextVNode(e.toDisplayString(t[h.key]),1)])]))),128))]))])),256)):e.createCommentVNode("",!0)]),e.createElementVNode("tfoot",null,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length},[e.renderSlot(r.$slots,"pagination",{page:e.unref(i),rows:e.unref(k).value},()=>[e.unref(i)>1||e.unref(k).value.length===n.perPage||e.unref(d)?(e.openBlock(),e.createElementBlock("ul",j,[e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(i)===1||e.unref(d)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:f[0]||(f[0]=e.withModifiers((...t)=>e.unref(S)&&e.unref(S)(...t),["prevent"]))},"\u2190")],2),e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(k).value.length<n.perPage||e.unref(d)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:f[1]||(f[1]=e.withModifiers((...t)=>e.unref(B)&&e.unref(B)(...t),["prevent"]))},"\u2192")],2)])):e.createCommentVNode("",!0)])],8,P)])])]))}})});
+//# sourceMappingURL=vst.umd.js.map

package/dist/vst.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vst.umd.js","sources":["../src/ts/components/loading_row.vue","../src/ts/use/filterable.ts","../src/ts/helpers/to_query_string.ts","../src/ts/components/table.vue"],"sourcesContent":["<template>\n  <tr>\n    <td\n      :colspan=\"columnsLength\"\n      :class=\"['vst-loading-row', `vst-loading-row-${randNum}`]\">\n      <div />\n    </td>\n  </tr>\n</template>\n\n<script lang=\"ts\" setup>\ndefineProps({\n  columnsLength: { type: Number, required: true },\n})\n\nconst randNum = Math.floor(Math.random() * 10) + 1\n</script>\n","import {\n  ref, computed, reactive, watch,\n} from 'vue'\n\ntype CombinedFilters<Filters> = Filters & {\n  page: number\n}\n\ninterface UseFiltetableArgs<Filters, Item> {\n  initialFilters: Filters,\n  loadItems: (_filters: CombinedFilters<Filters>) => Promise<Item[]>\n}\n\nconst SYNC_STATES = {\n  INITIAL: 'initial',\n  SYNCING: 'syncing',\n  SYNCED: 'synced',\n  FAILED: 'failed',\n}\n\nconst useFilterable = <Filters, Item>({ initialFilters, loadItems }: UseFiltetableArgs<Filters, Item>) => {\n  const page = ref(1)\n  const items = reactive({ value: [] as Item[] }) as { value: Item[] }\n  const syncState = ref(SYNC_STATES.INITIAL)\n  const filters = reactive({ value: initialFilters })\n\n  const combinedFilters = computed(() => ({\n    page: page.value,\n    ...filters.value as Filters,\n  }))\n\n  const load = () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    return loadItems(combinedFilters.value)\n      .then((res: Item[]) => {\n        items.value = res\n        syncState.value = SYNC_STATES.SYNCED\n      })\n      .catch(() => {\n        items.value = []\n        syncState.value = SYNC_STATES.FAILED\n      })\n  }\n  load()\n\n  watch(combinedFilters, load)\n\n  return {\n    page,\n    items,\n    syncState,\n    nextPage: () => {\n      page.value += 1\n    },\n    prevPage: () => {\n      page.value -= 1\n    },\n    isSyncing: computed(() => syncState.value === SYNC_STATES.SYNCING),\n    isSynced: computed(() => syncState.value === SYNC_STATES.SYNCED),\n    isFailed: computed(() => syncState.value === SYNC_STATES.FAILED),\n    reload: () => {\n      load()\n    },\n    refetch: () => {\n      if (page.value === 1) {\n        load()\n      } else {\n        page.value = 1\n      }\n    },\n  }\n}\n\nexport default useFilterable\n","const stringify = (obj, parentPrefix?: string) => (outputArray, [key, val]) => {\n  if (val === null || val === undefined) {\n    return outputArray\n  }\n\n  const encodedKey = encodeURIComponent(key)\n  const prefix = parentPrefix ? `${parentPrefix}[${encodedKey}]` : encodedKey\n\n  if (['number', 'string'].includes(typeof val)) {\n    outputArray.push(`${prefix}=${encodeURIComponent(val)}`)\n    return outputArray\n  }\n\n  outputArray.push(Object.entries(val).reduce(stringify(val, prefix), []).join('&'))\n  return outputArray\n}\n\nexport default (obj): string => Object.entries(obj).reduce(stringify(obj), []).join('&')\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead\" :columns=\"columns\" :orders=\"orders\">\n        <tr>\n          <th\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :class=\"['vst-th', { 'vst-orderable': column.orderable }]\"\n            v-on=\"column.orderable ? { click: () => onOrderClick(column.key) } : {}\">\n            <div v-if=\"column.orderable\">\n              <slot\n                :name=\"`head:${column.key}`\"\n                :column=\"column\">\n                {{ column.title }}\n              </slot>\n\n              <a href=\"#\" :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n            </div>\n\n            <slot\n              v-else\n              :name=\"`thead:${column.key}`\"\n              :column=\"column\">\n              {{ column.title }}\n            </slot>\n          </th>\n        </tr>\n      </slot>\n    </thead>\n    <tbody>\n      <slot v-if=\"isSyncing\" name=\"row:loading\">\n        <LoadingRow\n          v-for=\"i in perPage\"\n          :key=\"`loadingRow${i}`\"\n          :columns-length=\"columns.length\" />\n      </slot>\n\n      <slot v-else-if=\"isSynced && rows.value.length === 0\" name=\"row:empty\">\n        <tr>\n          <td :colspan=\"columns.length\">\n            No records found\n          </td>\n        </tr>\n      </slot>\n\n      <template v-else-if=\"isSynced && rows.value.length\">\n        <slot\n          v-for=\"(row, i) in rows.value\"\n          name=\"row\"\n          :row=\"row\"\n          :index=\"i\"\n          :columns=\"columns\">\n          <tr :key=\"row['id'] || i\">\n            <td\n              v-for=\"column in columns\"\n              :key=\"column.key\">\n              <slot\n                :name=\"`cell:${column.key}`\"\n                :row=\"row\"\n                :value=\"row[column.key]\"\n                :column=\"column\"\n                :index=\"i\">\n                {{ row[column.key] }}\n              </slot>\n            </td>\n          </tr>\n        </slot>\n      </template>\n    </tbody>\n    <tfoot>\n      <tr>\n        <td :colspan=\"columns.length\">\n          <slot name=\"pagination\" :page=\"page\" :rows=\"rows.value\">\n            <ul\n              v-if=\"page > 1 || rows.value.length === perPage || isSyncing\"\n              class=\"vst-pagination mt-3\">\n              <li :class=\"['vst-page-item', { disabled: page === 1 || isSyncing }]\">\n                <a class=\"vst-page-link\" @click.prevent=\"prevPage\">←</a>\n              </li>\n\n              <li\n                :class=\"['vst-page-item', {\n                  disabled: rows.value.length < perPage || isSyncing\n                }]\">\n                <a class=\"vst-page-link\" @click.prevent=\"nextPage\">→</a>\n              </li>\n            </ul>\n          </slot>\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</template>\n\n<script setup lang=\"ts\">\nimport { shallowRef, ShallowRef } from 'vue'\nimport LoadingRow from './loading_row.vue'\n\nimport useFilterable from '../use/filterable'\nimport toQueryString from '../helpers/to_query_string'\n\ninterface TableColumn {\n  key: string,\n  title: string,\n  orderable?: boolean\n}\n\ninterface TableOrders {\n  [key: string]: 'asc' | 'desc'\n}\n\ninterface TableFetchParams {\n  per_page: number,\n  page: number,\n  orders?: TableOrders\n}\n\ninterface TableRow {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n}\n\ninterface TableFilters {\n  per_page: number,\n  orders: TableOrders\n}\n\ninterface TableProps {\n  columns: Array<TableColumn>\n  source: string | ((_: TableFetchParams) => Promise<TableRow[]> | TableRow[])\n  perPage?: number\n}\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  perPage: 25,\n})\n\nconst orders: ShallowRef<TableOrders> = shallowRef({})\n\nconst loadItems = async (params: TableFetchParams) => {\n  let data: TableRow[]\n  if (typeof props.source === 'string') {\n    const response = await fetch(`${props.source}?${toQueryString(params)}`)\n    data = await response.json()\n  } else {\n    data = await props.source(params) as TableRow[]\n  }\n\n  return data\n}\n\nconst onOrderClick = (key: string) => {\n  if (orders.value[key] === 'asc') {\n    orders.value = { [key]: 'desc' }\n  } else if (orders.value[key] === 'desc') {\n    orders.value = {}\n  } else {\n    orders.value = { [key]: 'asc' }\n  }\n}\n\nconst {\n  page, isSyncing, isSynced, prevPage, nextPage, reload, refetch, items: rows,\n} = useFilterable<TableFilters, TableRow>({\n  initialFilters: { per_page: props.perPage, orders: orders.value },\n  loadItems,\n})\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":["ref","reactive","computed","shallowRef"],"mappings":"iwBAeM,GAAU,KAAK,MAAM,KAAK,SAAW,EAAE,EAAI,mMCF3C,EAAc,CAClB,QAAS,UACT,QAAS,UACT,OAAQ,SACR,OAAQ,QACV,EAEM,EAAgB,CAAgB,CAAE,iBAAgB,eAAkD,MAClG,GAAOA,MAAI,CAAC,EACZ,EAAQC,WAAS,CAAE,MAAO,GAAc,EACxC,EAAYD,MAAI,EAAY,OAAO,EACnC,EAAUC,WAAS,CAAE,MAAO,EAAgB,EAE5C,EAAkBC,WAAS,OAC/B,KAAM,EAAK,OACR,EAAQ,MACX,EAEI,EAAO,OACD,MAAQ,EAAY,QAEvB,EAAU,EAAgB,KAAK,EACnC,KAAK,AAAC,GAAgB,GACf,MAAQ,IACJ,MAAQ,EAAY,OAC/B,EACA,MAAM,IAAM,GACL,MAAQ,KACJ,MAAQ,EAAY,OAC/B,sBAIC,EAAiB,CAAI,EAEpB,CACL,OACA,QACA,YACA,SAAU,IAAM,GACT,OAAS,GAEhB,SAAU,IAAM,GACT,OAAS,GAEhB,UAAWA,WAAS,IAAM,EAAU,QAAU,EAAY,OAAO,EACjE,SAAUA,WAAS,IAAM,EAAU,QAAU,EAAY,MAAM,EAC/D,SAAUA,WAAS,IAAM,EAAU,QAAU,EAAY,MAAM,EAC/D,OAAQ,IAAM,MAGd,QAAS,IAAM,CACT,EAAK,QAAU,QAGZ,MAAQ,GAIrB,ECxEM,EAAY,CAAC,EAAK,IAA0B,CAAC,EAAa,CAAC,EAAK,KAAS,IACzE,GAAQ,WACH,QAGH,GAAa,mBAAmB,CAAG,EACnC,EAAS,EAAe,GAAG,KAAgB,KAAgB,QAE7D,CAAC,SAAU,QAAQ,EAAE,SAAS,MAAO,EAAG,KAC9B,KAAK,GAAG,KAAU,mBAAmB,CAAG,GAAG,EAChD,MAGG,KAAK,OAAO,QAAQ,CAAG,EAAE,OAAO,EAAU,EAAK,CAAM,EAAG,EAAE,EAAE,KAAK,GAAG,CAAC,EAC1E,EACT,QAEe,AAAC,GAAgB,OAAO,QAAQ,CAAG,EAAE,OAAO,EAAa,EAAG,EAAE,EAAE,KAAK,GAAG,4NCyHjF,EAAkCC,aAAW,EAAE,EAE/C,EAAY,KAAO,IAA6B,IAChD,SACA,OAAO,GAAM,QAAW,WAEnB,KAAM,AADI,MAAM,OAAM,GAAG,EAAM,UAAU,EAAc,CAAM,GAAG,GACjD,SAEf,KAAM,GAAM,OAAO,CAAM,EAG3B,GAGH,EAAe,AAAC,GAAgB,CAChC,EAAO,MAAM,KAAS,QACjB,MAAQ,EAAG,GAAM,QACf,EAAO,MAAM,KAAS,SACxB,MAAQ,KAER,MAAQ,EAAG,GAAM,QAItB,CACJ,OAAM,YAAW,WAAU,WAAU,WAAU,SAAQ,UAAS,MAAO,GACrE,EAAsC,CACxC,eAAgB,CAAE,SAAU,EAAM,QAAS,OAAQ,EAAO,OAC1D,YACD,WAEY,CACX,UACA,SACA,OACD"}

package/package.json

@@ -1,11 +1,26 @@
 {
   "name": "vue-slim-tables",
-  "version": "0.1.2",
-  "main": "dist/bundle.js",
+  "version": "0.3.2",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vst.umd.js",
+  "module": "./dist/vst.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vst.es.js",
+      "require": "./dist/vst.umd.js"
+    },
+    "./stylesheets": "dist/style.css",
+    "./src/ts/index": "./src/ts/index.ts",
+    "./filterable": "./src/ts/use/filterable",
+    "./dist/vst.umd.js": "./dist/vst.umd.js"
+  },
   "scripts": {
-    "build": "rm -rf ./dist && NODE_ENV=production webpack --config ./webpack.config.js",
-    "eslint": "eslint ./src/js/ --ext 'js,vue'",
-    "lint": "yarn run eslint --fix"
+    "build": "vite build",
+    "lint": "eslint ./src/ts/ --ext 'ts,vue'",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "keywords": [
     "vue",
@@ -20,25 +35,26 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.1",
-    "eslint": "^8.6.0",
+    "@babel/types": "^7.17.10",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/test-utils": "^2.0.0-rc.21",
+    "c8": "^7.11.2",
+    "eslint": "^8.14.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "8.2.0",
-    "mini-css-extract-plugin": "^2.4.6",
-    "node-sass": "^7.0.1",
-    "sass-loader": "^12.4.0",
-    "style-loader": "^3.3.1",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.2"
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "happy-dom": "^3.1.0",
+    "sass": "^1.51.0",
+    "typescript": "4.6.4",
+    "vite": "^2.9.7",
+    "vite-plugin-dts": "^1.1.1",
+    "vitest": "^0.10.2",
+    "vue-eslint-parser": "^8.3.0"
   },
   "dependencies": {
-    "qs": "^6.10.2"
-  }
+    "vue": "^3.2.33"
+  },
+  "types": "dist/types/index.d.ts"
 }

package/.eslintrc.yml

@@ -1,28 +0,0 @@
-extends:
-  - airbnb-base
-  - plugin:vue/base
-  - plugin:vue/recommended
-  - plugin:vue/strongly-recommended
-plugins:
-  - vue
-env:
-  browser: true
-parserOptions:
-  ecmaVersion: 2019
-rules:
-  semi:
-    - error
-    - never
-  vue/html-closing-bracket-newline:
-    - error
-    - { singleline: never, multiline: never }
-  vue/html-indent:
-    - error
-    - 2
-    - { alignAttributesVertically: false }
-  vue/max-attributes-per-line:
-    - error
-    - { singleline: 3, multiline: { max: 3 } }
-  vue/multi-word-component-names:
-    - error
-    - ignores: ['table']

package/dist/bundle.css

@@ -1,2 +0,0 @@
-@keyframes moving-gradient{0%{background-position:-250px 0}100%{background-position:250px 0}}.vst-th{line-height:20px}.vst-orderable:hover{cursor:pointer}.vst-orderable:hover .vst-orderable-toggle{color:#555 !important}.vst-orderable-toggle{font-size:20px;float:right;color:#ccc !important}.vst-orderable-toggle:after{content:" \2194";display:inline-block;transform:rotate(-90deg)}.vst-orderable-toggle.desc:after{content:" \2191";transform:rotate(0)}.vst-orderable-toggle.asc:after{content:" \2193";transform:rotate(0)}.vst-loading-row div{height:20px;background:linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);background-size:500px 20px;animation-name:moving-gradient;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards}.vst tr td.vst-loading-row-1 div{animation-delay:-1000ms}.vst tr td.vst-loading-row-2 div{animation-delay:-900ms}.vst tr td.vst-loading-row-3 div{animation-delay:-800ms}.vst tr td.vst-loading-row-4 div{animation-delay:-700ms}.vst tr td.vst-loading-row-5 div{animation-delay:-600ms}.vst tr td.vst-loading-row-6 div{animation-delay:-500ms}.vst tr td.vst-loading-row-7 div{animation-delay:-400ms}.vst tr td.vst-loading-row-8 div{animation-delay:-300ms}.vst tr td.vst-loading-row-9 div{animation-delay:-200ms}.vst tr td.vst-loading-row-10 div{animation-delay:-100ms}.vst-pagination{display:flex;padding-left:0;list-style:none;border-radius:0.25rem}.vst-pagination a{position:relative;display:block;padding:8px 12px;padding:0.5rem 0.75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.vst-pagination a:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.vst-page-item.disabled .vst-page-link{pointer-events:none;color:#6c757d;cursor:auto;background-color:#fff}.vst-page-item .vst-page-link{cursor:pointer}
-

package/dist/bundle.js

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSlimTable=e():t.VueSlimTable=e()}(self,(function(){return(()=>{var t={924:(t,e,r)=>{"use strict";var o=r(210),n=r(559),i=n(o("String.prototype.indexOf"));t.exports=function(t,e){var r=o(t,!!e);return"function"==typeof r&&i(t,".prototype.")>-1?n(r):r}},559:(t,e,r)=>{"use strict";var o=r(612),n=r(210),i=n("%Function.prototype.apply%"),a=n("%Function.prototype.call%"),c=n("%Reflect.apply%",!0)||o.call(a,i),p=n("%Object.getOwnPropertyDescriptor%",!0),l=n("%Object.defineProperty%",!0),u=n("%Math.max%");if(l)try{l({},"a",{value:1})}catch(t){l=null}t.exports=function(t){var e=c(o,a,arguments);if(p&&l){var r=p(e,"length");r.configurable&&l(e,"length",{value:1+u(0,t.length-(arguments.length-1))})}return e};var f=function(){return c(o,i,arguments)};l?l(t.exports,"apply",{value:f}):t.exports.apply=f},648:t=>{"use strict";var e="Function.prototype.bind called on incompatible ",r=Array.prototype.slice,o=Object.prototype.toString,n="[object Function]";t.exports=function(t){var i=this;if("function"!=typeof i||o.call(i)!==n)throw new TypeError(e+i);for(var a,c=r.call(arguments,1),p=function(){if(this instanceof a){var e=i.apply(this,c.concat(r.call(arguments)));return Object(e)===e?e:this}return i.apply(t,c.concat(r.call(arguments)))},l=Math.max(0,i.length-c.length),u=[],f=0;f<l;f++)u.push("$"+f);if(a=Function("binder","return function ("+u.join(",")+"){ return binder.apply(this,arguments); }")(p),i.prototype){var s=function(){};s.prototype=i.prototype,a.prototype=new s,s.prototype=null}return a}},612:(t,e,r)=>{"use strict";var o=r(648);t.exports=Function.prototype.bind||o},210:(t,e,r)=>{"use strict";var o,n=SyntaxError,i=Function,a=TypeError,c=function(t){try{return i('"use strict"; return ('+t+").constructor;")()}catch(t){}},p=Object.getOwnPropertyDescriptor;if(p)try{p({},"")}catch(t){p=null}var l=function(){throw new a},u=p?function(){try{return l}catch(t){try{return p(arguments,"callee").get}catch(t){return l}}}():l,f=r(405)(),s=Object.getPrototypeOf||function(t){return t.__proto__},y={},d="undefined"==typeof Uint8Array?o:s(Uint8Array),g={"%AggregateError%":"undefined"==typeof AggregateError?o:AggregateError,"%Array%":Array,"%ArrayBuffer%":"undefined"==typeof ArrayBuffer?o:ArrayBuffer,"%ArrayIteratorPrototype%":f?s([][Symbol.iterator]()):o,"%AsyncFromSyncIteratorPrototype%":o,"%AsyncFunction%":y,"%AsyncGenerator%":y,"%AsyncGeneratorFunction%":y,"%AsyncIteratorPrototype%":y,"%Atomics%":"undefined"==typeof Atomics?o:Atomics,"%BigInt%":"undefined"==typeof BigInt?o:BigInt,"%Boolean%":Boolean,"%DataView%":"undefined"==typeof DataView?o:DataView,"%Date%":Date,"%decodeURI%":decodeURI,"%decodeURIComponent%":decodeURIComponent,"%encodeURI%":encodeURI,"%encodeURIComponent%":encodeURIComponent,"%Error%":Error,"%eval%":eval,"%EvalError%":EvalError,"%Float32Array%":"undefined"==typeof Float32Array?o:Float32Array,"%Float64Array%":"undefined"==typeof Float64Array?o:Float64Array,"%FinalizationRegistry%":"undefined"==typeof FinalizationRegistry?o:FinalizationRegistry,"%Function%":i,"%GeneratorFunction%":y,"%Int8Array%":"undefined"==typeof Int8Array?o:Int8Array,"%Int16Array%":"undefined"==typeof Int16Array?o:Int16Array,"%Int32Array%":"undefined"==typeof Int32Array?o:Int32Array,"%isFinite%":isFinite,"%isNaN%":isNaN,"%IteratorPrototype%":f?s(s([][Symbol.iterator]())):o,"%JSON%":"object"==typeof JSON?JSON:o,"%Map%":"undefined"==typeof Map?o:Map,"%MapIteratorPrototype%":"undefined"!=typeof Map&&f?s((new Map)[Symbol.iterator]()):o,"%Math%":Math,"%Number%":Number,"%Object%":Object,"%parseFloat%":parseFloat,"%parseInt%":parseInt,"%Promise%":"undefined"==typeof Promise?o:Promise,"%Proxy%":"undefined"==typeof Proxy?o:Proxy,"%RangeError%":RangeError,"%ReferenceError%":ReferenceError,"%Reflect%":"undefined"==typeof Reflect?o:Reflect,"%RegExp%":RegExp,"%Set%":"undefined"==typeof Set?o:Set,"%SetIteratorPrototype%":"undefined"!=typeof Set&&f?s((new Set)[Symbol.iterator]()):o,"%SharedArrayBuffer%":"undefined"==typeof SharedArrayBuffer?o:SharedArrayBuffer,"%String%":String,"%StringIteratorPrototype%":f?s(""[Symbol.iterator]()):o,"%Symbol%":f?Symbol:o,"%SyntaxError%":n,"%ThrowTypeError%":u,"%TypedArray%":d,"%TypeError%":a,"%Uint8Array%":"undefined"==typeof Uint8Array?o:Uint8Array,"%Uint8ClampedArray%":"undefined"==typeof Uint8ClampedArray?o:Uint8ClampedArray,"%Uint16Array%":"undefined"==typeof Uint16Array?o:Uint16Array,"%Uint32Array%":"undefined"==typeof Uint32Array?o:Uint32Array,"%URIError%":URIError,"%WeakMap%":"undefined"==typeof WeakMap?o:WeakMap,"%WeakRef%":"undefined"==typeof WeakRef?o:WeakRef,"%WeakSet%":"undefined"==typeof WeakSet?o:WeakSet},h=function t(e){var r;if("%AsyncFunction%"===e)r=c("async function () {}");else if("%GeneratorFunction%"===e)r=c("function* () {}");else if("%AsyncGeneratorFunction%"===e)r=c("async function* () {}");else if("%AsyncGenerator%"===e){var o=t("%AsyncGeneratorFunction%");o&&(r=o.prototype)}else if("%AsyncIteratorPrototype%"===e){var n=t("%AsyncGenerator%");n&&(r=s(n.prototype))}return g[e]=r,r},b={"%ArrayBufferPrototype%":["ArrayBuffer","prototype"],"%ArrayPrototype%":["Array","prototype"],"%ArrayProto_entries%":["Array","prototype","entries"],"%ArrayProto_forEach%":["Array","prototype","forEach"],"%ArrayProto_keys%":["Array","prototype","keys"],"%ArrayProto_values%":["Array","prototype","values"],"%AsyncFunctionPrototype%":["AsyncFunction","prototype"],"%AsyncGenerator%":["AsyncGeneratorFunction","prototype"],"%AsyncGeneratorPrototype%":["AsyncGeneratorFunction","prototype","prototype"],"%BooleanPrototype%":["Boolean","prototype"],"%DataViewPrototype%":["DataView","prototype"],"%DatePrototype%":["Date","prototype"],"%ErrorPrototype%":["Error","prototype"],"%EvalErrorPrototype%":["EvalError","prototype"],"%Float32ArrayPrototype%":["Float32Array","prototype"],"%Float64ArrayPrototype%":["Float64Array","prototype"],"%FunctionPrototype%":["Function","prototype"],"%Generator%":["GeneratorFunction","prototype"],"%GeneratorPrototype%":["GeneratorFunction","prototype","prototype"],"%Int8ArrayPrototype%":["Int8Array","prototype"],"%Int16ArrayPrototype%":["Int16Array","prototype"],"%Int32ArrayPrototype%":["Int32Array","prototype"],"%JSONParse%":["JSON","parse"],"%JSONStringify%":["JSON","stringify"],"%MapPrototype%":["Map","prototype"],"%NumberPrototype%":["Number","prototype"],"%ObjectPrototype%":["Object","prototype"],"%ObjProto_toString%":["Object","prototype","toString"],"%ObjProto_valueOf%":["Object","prototype","valueOf"],"%PromisePrototype%":["Promise","prototype"],"%PromiseProto_then%":["Promise","prototype","then"],"%Promise_all%":["Promise","all"],"%Promise_reject%":["Promise","reject"],"%Promise_resolve%":["Promise","resolve"],"%RangeErrorPrototype%":["RangeError","prototype"],"%ReferenceErrorPrototype%":["ReferenceError","prototype"],"%RegExpPrototype%":["RegExp","prototype"],"%SetPrototype%":["Set","prototype"],"%SharedArrayBufferPrototype%":["SharedArrayBuffer","prototype"],"%StringPrototype%":["String","prototype"],"%SymbolPrototype%":["Symbol","prototype"],"%SyntaxErrorPrototype%":["SyntaxError","prototype"],"%TypedArrayPrototype%":["TypedArray","prototype"],"%TypeErrorPrototype%":["TypeError","prototype"],"%Uint8ArrayPrototype%":["Uint8Array","prototype"],"%Uint8ClampedArrayPrototype%":["Uint8ClampedArray","prototype"],"%Uint16ArrayPrototype%":["Uint16Array","prototype"],"%Uint32ArrayPrototype%":["Uint32Array","prototype"],"%URIErrorPrototype%":["URIError","prototype"],"%WeakMapPrototype%":["WeakMap","prototype"],"%WeakSetPrototype%":["WeakSet","prototype"]},m=r(612),v=r(642),S=m.call(Function.call,Array.prototype.concat),j=m.call(Function.apply,Array.prototype.splice),O=m.call(Function.call,String.prototype.replace),w=m.call(Function.call,String.prototype.slice),A=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,P=/\\(\\)?/g,x=function(t){var e=w(t,0,1),r=w(t,-1);if("%"===e&&"%"!==r)throw new n("invalid intrinsic syntax, expected closing `%`");if("%"===r&&"%"!==e)throw new n("invalid intrinsic syntax, expected opening `%`");var o=[];return O(t,A,(function(t,e,r,n){o[o.length]=r?O(n,P,"$1"):e||t})),o},E=function(t,e){var r,o=t;if(v(b,o)&&(o="%"+(r=b[o])[0]+"%"),v(g,o)){var i=g[o];if(i===y&&(i=h(o)),void 0===i&&!e)throw new a("intrinsic "+t+" exists, but is not available. Please file an issue!");return{alias:r,name:o,value:i}}throw new n("intrinsic "+t+" does not exist!")};t.exports=function(t,e){if("string"!=typeof t||0===t.length)throw new a("intrinsic name must be a non-empty string");if(arguments.length>1&&"boolean"!=typeof e)throw new a('"allowMissing" argument must be a boolean');var r=x(t),o=r.length>0?r[0]:"",i=E("%"+o+"%",e),c=i.name,l=i.value,u=!1,f=i.alias;f&&(o=f[0],j(r,S([0,1],f)));for(var s=1,y=!0;s<r.length;s+=1){var d=r[s],h=w(d,0,1),b=w(d,-1);if(('"'===h||"'"===h||"`"===h||'"'===b||"'"===b||"`"===b)&&h!==b)throw new n("property names with quotes must have matching quotes");if("constructor"!==d&&y||(u=!0),v(g,c="%"+(o+="."+d)+"%"))l=g[c];else if(null!=l){if(!(d in l)){if(!e)throw new a("base intrinsic for "+t+" exists, but the property is not available.");return}if(p&&s+1>=r.length){var m=p(l,d);l=(y=!!m)&&"get"in m&&!("originalValue"in m.get)?m.get:l[d]}else y=v(l,d),l=l[d];y&&!u&&(g[c]=l)}}return l}},405:(t,e,r)=>{"use strict";var o="undefined"!=typeof Symbol&&Symbol,n=r(419);t.exports=function(){return"function"==typeof o&&("function"==typeof Symbol&&("symbol"==typeof o("foo")&&("symbol"==typeof Symbol("bar")&&n())))}},419:t=>{"use strict";t.exports=function(){if("function"!=typeof Symbol||"function"!=typeof Object.getOwnPropertySymbols)return!1;if("symbol"==typeof Symbol.iterator)return!0;var t={},e=Symbol("test"),r=Object(e);if("string"==typeof e)return!1;if("[object Symbol]"!==Object.prototype.toString.call(e))return!1;if("[object Symbol]"!==Object.prototype.toString.call(r))return!1;for(e in t[e]=42,t)return!1;if("function"==typeof Object.keys&&0!==Object.keys(t).length)return!1;if("function"==typeof Object.getOwnPropertyNames&&0!==Object.getOwnPropertyNames(t).length)return!1;var o=Object.getOwnPropertySymbols(t);if(1!==o.length||o[0]!==e)return!1;if(!Object.prototype.propertyIsEnumerable.call(t,e))return!1;if("function"==typeof Object.getOwnPropertyDescriptor){var n=Object.getOwnPropertyDescriptor(t,e);if(42!==n.value||!0!==n.enumerable)return!1}return!0}},642:(t,e,r)=>{"use strict";var o=r(612);t.exports=o.call(Function.call,Object.prototype.hasOwnProperty)},631:(t,e,r)=>{var o="function"==typeof Map&&Map.prototype,n=Object.getOwnPropertyDescriptor&&o?Object.getOwnPropertyDescriptor(Map.prototype,"size"):null,i=o&&n&&"function"==typeof n.get?n.get:null,a=o&&Map.prototype.forEach,c="function"==typeof Set&&Set.prototype,p=Object.getOwnPropertyDescriptor&&c?Object.getOwnPropertyDescriptor(Set.prototype,"size"):null,l=c&&p&&"function"==typeof p.get?p.get:null,u=c&&Set.prototype.forEach,f="function"==typeof WeakMap&&WeakMap.prototype?WeakMap.prototype.has:null,s="function"==typeof WeakSet&&WeakSet.prototype?WeakSet.prototype.has:null,y="function"==typeof WeakRef&&WeakRef.prototype?WeakRef.prototype.deref:null,d=Boolean.prototype.valueOf,g=Object.prototype.toString,h=Function.prototype.toString,b=String.prototype.match,m="function"==typeof BigInt?BigInt.prototype.valueOf:null,v=Object.getOwnPropertySymbols,S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?Symbol.prototype.toString:null,j="function"==typeof Symbol&&"object"==typeof Symbol.iterator,O=Object.prototype.propertyIsEnumerable,w=("function"==typeof Reflect?Reflect.getPrototypeOf:Object.getPrototypeOf)||([].__proto__===Array.prototype?function(t){return t.__proto__}:null),A=r(654).custom,P=A&&R(A)?A:null,x="function"==typeof Symbol&&void 0!==Symbol.toStringTag?Symbol.toStringTag:null;function E(t,e,r){var o="double"===(r.quoteStyle||e)?'"':"'";return o+t+o}function k(t){return String(t).replace(/"/g,"&quot;")}function _(t){return!("[object Array]"!==I(t)||x&&"object"==typeof t&&x in t)}function R(t){if(j)return t&&"object"==typeof t&&t instanceof Symbol;if("symbol"==typeof t)return!0;if(!t||"object"!=typeof t||!S)return!1;try{return S.call(t),!0}catch(t){}return!1}t.exports=function t(e,r,o,n){var c=r||{};if(N(c,"quoteStyle")&&"single"!==c.quoteStyle&&"double"!==c.quoteStyle)throw new TypeError('option "quoteStyle" must be "single" or "double"');if(N(c,"maxStringLength")&&("number"==typeof c.maxStringLength?c.maxStringLength<0&&c.maxStringLength!==1/0:null!==c.maxStringLength))throw new TypeError('option "maxStringLength", if provided, must be a positive integer, Infinity, or `null`');var p=!N(c,"customInspect")||c.customInspect;if("boolean"!=typeof p&&"symbol"!==p)throw new TypeError("option \"customInspect\", if provided, must be `true`, `false`, or `'symbol'`");if(N(c,"indent")&&null!==c.indent&&"\t"!==c.indent&&!(parseInt(c.indent,10)===c.indent&&c.indent>0))throw new TypeError('options "indent" must be "\\t", an integer > 0, or `null`');if(void 0===e)return"undefined";if(null===e)return"null";if("boolean"==typeof e)return e?"true":"false";if("string"==typeof e)return M(e,c);if("number"==typeof e)return 0===e?1/0/e>0?"0":"-0":String(e);if("bigint"==typeof e)return String(e)+"n";var g=void 0===c.depth?5:c.depth;if(void 0===o&&(o=0),o>=g&&g>0&&"object"==typeof e)return _(e)?"[Array]":"[Object]";var v=function(t,e){var r;if("\t"===t.indent)r="\t";else{if(!("number"==typeof t.indent&&t.indent>0))return null;r=Array(t.indent+1).join(" ")}return{base:r,prev:Array(e+1).join(r)}}(c,o);if(void 0===n)n=[];else if(D(n,e)>=0)return"[Circular]";function O(e,r,i){if(r&&(n=n.slice()).push(r),i){var a={depth:c.depth};return N(c,"quoteStyle")&&(a.quoteStyle=c.quoteStyle),t(e,a,o+1,n)}return t(e,c,o+1,n)}if("function"==typeof e){var A=function(t){if(t.name)return t.name;var e=b.call(h.call(t),/^function\s*([\w$]+)/);if(e)return e[1];return null}(e),F=B(e,O);return"[Function"+(A?": "+A:" (anonymous)")+"]"+(F.length>0?" { "+F.join(", ")+" }":"")}if(R(e)){var C=j?String(e).replace(/^(Symbol\(.*\))_[^)]*$/,"$1"):S.call(e);return"object"!=typeof e||j?C:U(C)}if(function(t){if(!t||"object"!=typeof t)return!1;if("undefined"!=typeof HTMLElement&&t instanceof HTMLElement)return!0;return"string"==typeof t.nodeName&&"function"==typeof t.getAttribute}(e)){for(var $="<"+String(e.nodeName).toLowerCase(),G=e.attributes||[],V=0;V<G.length;V++)$+=" "+G[V].name+"="+E(k(G[V].value),"double",c);return $+=">",e.childNodes&&e.childNodes.length&&($+="..."),$+="</"+String(e.nodeName).toLowerCase()+">"}if(_(e)){if(0===e.length)return"[]";var q=B(e,O);return v&&!function(t){for(var e=0;e<t.length;e++)if(D(t[e],"\n")>=0)return!1;return!0}(q)?"["+L(q,v)+"]":"[ "+q.join(", ")+" ]"}if(function(t){return!("[object Error]"!==I(t)||x&&"object"==typeof t&&x in t)}(e)){var H=B(e,O);return 0===H.length?"["+String(e)+"]":"{ ["+String(e)+"] "+H.join(", ")+" }"}if("object"==typeof e&&p){if(P&&"function"==typeof e[P])return e[P]();if("symbol"!==p&&"function"==typeof e.inspect)return e.inspect()}if(function(t){if(!i||!t||"object"!=typeof t)return!1;try{i.call(t);try{l.call(t)}catch(t){return!0}return t instanceof Map}catch(t){}return!1}(e)){var z=[];return a.call(e,(function(t,r){z.push(O(r,e,!0)+" => "+O(t,e))})),W("Map",i.call(e),z,v)}if(function(t){if(!l||!t||"object"!=typeof t)return!1;try{l.call(t);try{i.call(t)}catch(t){return!0}return t instanceof Set}catch(t){}return!1}(e)){var Q=[];return u.call(e,(function(t){Q.push(O(t,e))})),W("Set",l.call(e),Q,v)}if(function(t){if(!f||!t||"object"!=typeof t)return!1;try{f.call(t,f);try{s.call(t,s)}catch(t){return!0}return t instanceof WeakMap}catch(t){}return!1}(e))return T("WeakMap");if(function(t){if(!s||!t||"object"!=typeof t)return!1;try{s.call(t,s);try{f.call(t,f)}catch(t){return!0}return t instanceof WeakSet}catch(t){}return!1}(e))return T("WeakSet");if(function(t){if(!y||!t||"object"!=typeof t)return!1;try{return y.call(t),!0}catch(t){}return!1}(e))return T("WeakRef");if(function(t){return!("[object Number]"!==I(t)||x&&"object"==typeof t&&x in t)}(e))return U(O(Number(e)));if(function(t){if(!t||"object"!=typeof t||!m)return!1;try{return m.call(t),!0}catch(t){}return!1}(e))return U(O(m.call(e)));if(function(t){return!("[object Boolean]"!==I(t)||x&&"object"==typeof t&&x in t)}(e))return U(d.call(e));if(function(t){return!("[object String]"!==I(t)||x&&"object"==typeof t&&x in t)}(e))return U(O(String(e)));if(!function(t){return!("[object Date]"!==I(t)||x&&"object"==typeof t&&x in t)}(e)&&!function(t){return!("[object RegExp]"!==I(t)||x&&"object"==typeof t&&x in t)}(e)){var J=B(e,O),X=w?w(e)===Object.prototype:e instanceof Object||e.constructor===Object,K=e instanceof Object?"":"null prototype",Y=!X&&x&&Object(e)===e&&x in e?I(e).slice(8,-1):K?"Object":"",Z=(X||"function"!=typeof e.constructor?"":e.constructor.name?e.constructor.name+" ":"")+(Y||K?"["+[].concat(Y||[],K||[]).join(": ")+"] ":"");return 0===J.length?Z+"{}":v?Z+"{"+L(J,v)+"}":Z+"{ "+J.join(", ")+" }"}return String(e)};var F=Object.prototype.hasOwnProperty||function(t){return t in this};function N(t,e){return F.call(t,e)}function I(t){return g.call(t)}function D(t,e){if(t.indexOf)return t.indexOf(e);for(var r=0,o=t.length;r<o;r++)if(t[r]===e)return r;return-1}function M(t,e){if(t.length>e.maxStringLength){var r=t.length-e.maxStringLength,o="... "+r+" more character"+(r>1?"s":"");return M(t.slice(0,e.maxStringLength),e)+o}return E(t.replace(/(['\\])/g,"\\$1").replace(/[\x00-\x1f]/g,C),"single",e)}function C(t){var e=t.charCodeAt(0),r={8:"b",9:"t",10:"n",12:"f",13:"r"}[e];return r?"\\"+r:"\\x"+(e<16?"0":"")+e.toString(16).toUpperCase()}function U(t){return"Object("+t+")"}function T(t){return t+" { ? }"}function W(t,e,r,o){return t+" ("+e+") {"+(o?L(r,o):r.join(", "))+"}"}function L(t,e){if(0===t.length)return"";var r="\n"+e.prev+e.base;return r+t.join(","+r)+"\n"+e.prev}function B(t,e){var r=_(t),o=[];if(r){o.length=t.length;for(var n=0;n<t.length;n++)o[n]=N(t,n)?e(t[n],t):""}var i,a="function"==typeof v?v(t):[];if(j){i={};for(var c=0;c<a.length;c++)i["$"+a[c]]=a[c]}for(var p in t)N(t,p)&&(r&&String(Number(p))===p&&p<t.length||j&&i["$"+p]instanceof Symbol||(/[^\w$]/.test(p)?o.push(e(p,t)+": "+e(t[p],t)):o.push(p+": "+e(t[p],t))));if("function"==typeof v)for(var l=0;l<a.length;l++)O.call(t,a[l])&&o.push("["+e(a[l])+"]: "+e(t[a[l]],t));return o}},798:t=>{"use strict";var e=String.prototype.replace,r=/%20/g,o="RFC1738",n="RFC3986";t.exports={default:n,formatters:{RFC1738:function(t){return e.call(t,r,"+")},RFC3986:function(t){return String(t)}},RFC1738:o,RFC3986:n}},129:(t,e,r)=>{"use strict";var o=r(261),n=r(235),i=r(798);t.exports={formats:i,parse:n,stringify:o}},235:(t,e,r)=>{"use strict";var o=r(769),n=Object.prototype.hasOwnProperty,i=Array.isArray,a={allowDots:!1,allowPrototypes:!1,allowSparse:!1,arrayLimit:20,charset:"utf-8",charsetSentinel:!1,comma:!1,decoder:o.decode,delimiter:"&",depth:5,ignoreQueryPrefix:!1,interpretNumericEntities:!1,parameterLimit:1e3,parseArrays:!0,plainObjects:!1,strictNullHandling:!1},c=function(t){return t.replace(/&#(\d+);/g,(function(t,e){return String.fromCharCode(parseInt(e,10))}))},p=function(t,e){return t&&"string"==typeof t&&e.comma&&t.indexOf(",")>-1?t.split(","):t},l=function(t,e,r,o){if(t){var i=r.allowDots?t.replace(/\.([^.[]+)/g,"[$1]"):t,a=/(\[[^[\]]*])/g,c=r.depth>0&&/(\[[^[\]]*])/.exec(i),l=c?i.slice(0,c.index):i,u=[];if(l){if(!r.plainObjects&&n.call(Object.prototype,l)&&!r.allowPrototypes)return;u.push(l)}for(var f=0;r.depth>0&&null!==(c=a.exec(i))&&f<r.depth;){if(f+=1,!r.plainObjects&&n.call(Object.prototype,c[1].slice(1,-1))&&!r.allowPrototypes)return;u.push(c[1])}return c&&u.push("["+i.slice(c.index)+"]"),function(t,e,r,o){for(var n=o?e:p(e,r),i=t.length-1;i>=0;--i){var a,c=t[i];if("[]"===c&&r.parseArrays)a=[].concat(n);else{a=r.plainObjects?Object.create(null):{};var l="["===c.charAt(0)&&"]"===c.charAt(c.length-1)?c.slice(1,-1):c,u=parseInt(l,10);r.parseArrays||""!==l?!isNaN(u)&&c!==l&&String(u)===l&&u>=0&&r.parseArrays&&u<=r.arrayLimit?(a=[])[u]=n:a[l]=n:a={0:n}}n=a}return n}(u,e,r,o)}};t.exports=function(t,e){var r=function(t){if(!t)return a;if(null!==t.decoder&&void 0!==t.decoder&&"function"!=typeof t.decoder)throw new TypeError("Decoder has to be a function.");if(void 0!==t.charset&&"utf-8"!==t.charset&&"iso-8859-1"!==t.charset)throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined");var e=void 0===t.charset?a.charset:t.charset;return{allowDots:void 0===t.allowDots?a.allowDots:!!t.allowDots,allowPrototypes:"boolean"==typeof t.allowPrototypes?t.allowPrototypes:a.allowPrototypes,allowSparse:"boolean"==typeof t.allowSparse?t.allowSparse:a.allowSparse,arrayLimit:"number"==typeof t.arrayLimit?t.arrayLimit:a.arrayLimit,charset:e,charsetSentinel:"boolean"==typeof t.charsetSentinel?t.charsetSentinel:a.charsetSentinel,comma:"boolean"==typeof t.comma?t.comma:a.comma,decoder:"function"==typeof t.decoder?t.decoder:a.decoder,delimiter:"string"==typeof t.delimiter||o.isRegExp(t.delimiter)?t.delimiter:a.delimiter,depth:"number"==typeof t.depth||!1===t.depth?+t.depth:a.depth,ignoreQueryPrefix:!0===t.ignoreQueryPrefix,interpretNumericEntities:"boolean"==typeof t.interpretNumericEntities?t.interpretNumericEntities:a.interpretNumericEntities,parameterLimit:"number"==typeof t.parameterLimit?t.parameterLimit:a.parameterLimit,parseArrays:!1!==t.parseArrays,plainObjects:"boolean"==typeof t.plainObjects?t.plainObjects:a.plainObjects,strictNullHandling:"boolean"==typeof t.strictNullHandling?t.strictNullHandling:a.strictNullHandling}}(e);if(""===t||null==t)return r.plainObjects?Object.create(null):{};for(var u="string"==typeof t?function(t,e){var r,l={},u=e.ignoreQueryPrefix?t.replace(/^\?/,""):t,f=e.parameterLimit===1/0?void 0:e.parameterLimit,s=u.split(e.delimiter,f),y=-1,d=e.charset;if(e.charsetSentinel)for(r=0;r<s.length;++r)0===s[r].indexOf("utf8=")&&("utf8=%E2%9C%93"===s[r]?d="utf-8":"utf8=%26%2310003%3B"===s[r]&&(d="iso-8859-1"),y=r,r=s.length);for(r=0;r<s.length;++r)if(r!==y){var g,h,b=s[r],m=b.indexOf("]="),v=-1===m?b.indexOf("="):m+1;-1===v?(g=e.decoder(b,a.decoder,d,"key"),h=e.strictNullHandling?null:""):(g=e.decoder(b.slice(0,v),a.decoder,d,"key"),h=o.maybeMap(p(b.slice(v+1),e),(function(t){return e.decoder(t,a.decoder,d,"value")}))),h&&e.interpretNumericEntities&&"iso-8859-1"===d&&(h=c(h)),b.indexOf("[]=")>-1&&(h=i(h)?[h]:h),n.call(l,g)?l[g]=o.combine(l[g],h):l[g]=h}return l}(t,r):t,f=r.plainObjects?Object.create(null):{},s=Object.keys(u),y=0;y<s.length;++y){var d=s[y],g=l(d,u[d],r,"string"==typeof t);f=o.merge(f,g,r)}return!0===r.allowSparse?f:o.compact(f)}},261:(t,e,r)=>{"use strict";var o=r(478),n=r(769),i=r(798),a=Object.prototype.hasOwnProperty,c={brackets:function(t){return t+"[]"},comma:"comma",indices:function(t,e){return t+"["+e+"]"},repeat:function(t){return t}},p=Array.isArray,l=String.prototype.split,u=Array.prototype.push,f=function(t,e){u.apply(t,p(e)?e:[e])},s=Date.prototype.toISOString,y=i.default,d={addQueryPrefix:!1,allowDots:!1,charset:"utf-8",charsetSentinel:!1,delimiter:"&",encode:!0,encoder:n.encode,encodeValuesOnly:!1,format:y,formatter:i.formatters[y],indices:!1,serializeDate:function(t){return s.call(t)},skipNulls:!1,strictNullHandling:!1},g={},h=function t(e,r,i,a,c,u,s,y,h,b,m,v,S,j,O){for(var w,A=e,P=O,x=0,E=!1;void 0!==(P=P.get(g))&&!E;){var k=P.get(e);if(x+=1,void 0!==k){if(k===x)throw new RangeError("Cyclic object value");E=!0}void 0===P.get(g)&&(x=0)}if("function"==typeof s?A=s(r,A):A instanceof Date?A=b(A):"comma"===i&&p(A)&&(A=n.maybeMap(A,(function(t){return t instanceof Date?b(t):t}))),null===A){if(a)return u&&!S?u(r,d.encoder,j,"key",m):r;A=""}if("string"==typeof(w=A)||"number"==typeof w||"boolean"==typeof w||"symbol"==typeof w||"bigint"==typeof w||n.isBuffer(A)){if(u){var _=S?r:u(r,d.encoder,j,"key",m);if("comma"===i&&S){for(var R=l.call(String(A),","),F="",N=0;N<R.length;++N)F+=(0===N?"":",")+v(u(R[N],d.encoder,j,"value",m));return[v(_)+"="+F]}return[v(_)+"="+v(u(A,d.encoder,j,"value",m))]}return[v(r)+"="+v(String(A))]}var I,D=[];if(void 0===A)return D;if("comma"===i&&p(A))I=[{value:A.length>0?A.join(",")||null:void 0}];else if(p(s))I=s;else{var M=Object.keys(A);I=y?M.sort(y):M}for(var C=0;C<I.length;++C){var U=I[C],T="object"==typeof U&&void 0!==U.value?U.value:A[U];if(!c||null!==T){var W=p(A)?"function"==typeof i?i(r,U):r:r+(h?"."+U:"["+U+"]");O.set(e,x);var L=o();L.set(g,O),f(D,t(T,W,i,a,c,u,s,y,h,b,m,v,S,j,L))}}return D};t.exports=function(t,e){var r,n=t,l=function(t){if(!t)return d;if(null!==t.encoder&&void 0!==t.encoder&&"function"!=typeof t.encoder)throw new TypeError("Encoder has to be a function.");var e=t.charset||d.charset;if(void 0!==t.charset&&"utf-8"!==t.charset&&"iso-8859-1"!==t.charset)throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined");var r=i.default;if(void 0!==t.format){if(!a.call(i.formatters,t.format))throw new TypeError("Unknown format option provided.");r=t.format}var o=i.formatters[r],n=d.filter;return("function"==typeof t.filter||p(t.filter))&&(n=t.filter),{addQueryPrefix:"boolean"==typeof t.addQueryPrefix?t.addQueryPrefix:d.addQueryPrefix,allowDots:void 0===t.allowDots?d.allowDots:!!t.allowDots,charset:e,charsetSentinel:"boolean"==typeof t.charsetSentinel?t.charsetSentinel:d.charsetSentinel,delimiter:void 0===t.delimiter?d.delimiter:t.delimiter,encode:"boolean"==typeof t.encode?t.encode:d.encode,encoder:"function"==typeof t.encoder?t.encoder:d.encoder,encodeValuesOnly:"boolean"==typeof t.encodeValuesOnly?t.encodeValuesOnly:d.encodeValuesOnly,filter:n,format:r,formatter:o,serializeDate:"function"==typeof t.serializeDate?t.serializeDate:d.serializeDate,skipNulls:"boolean"==typeof t.skipNulls?t.skipNulls:d.skipNulls,sort:"function"==typeof t.sort?t.sort:null,strictNullHandling:"boolean"==typeof t.strictNullHandling?t.strictNullHandling:d.strictNullHandling}}(e);"function"==typeof l.filter?n=(0,l.filter)("",n):p(l.filter)&&(r=l.filter);var u,s=[];if("object"!=typeof n||null===n)return"";u=e&&e.arrayFormat in c?e.arrayFormat:e&&"indices"in e?e.indices?"indices":"repeat":"indices";var y=c[u];r||(r=Object.keys(n)),l.sort&&r.sort(l.sort);for(var g=o(),b=0;b<r.length;++b){var m=r[b];l.skipNulls&&null===n[m]||f(s,h(n[m],m,y,l.strictNullHandling,l.skipNulls,l.encode?l.encoder:null,l.filter,l.sort,l.allowDots,l.serializeDate,l.format,l.formatter,l.encodeValuesOnly,l.charset,g))}var v=s.join(l.delimiter),S=!0===l.addQueryPrefix?"?":"";return l.charsetSentinel&&("iso-8859-1"===l.charset?S+="utf8=%26%2310003%3B&":S+="utf8=%E2%9C%93&"),v.length>0?S+v:""}},769:(t,e,r)=>{"use strict";var o=r(798),n=Object.prototype.hasOwnProperty,i=Array.isArray,a=function(){for(var t=[],e=0;e<256;++e)t.push("%"+((e<16?"0":"")+e.toString(16)).toUpperCase());return t}(),c=function(t,e){for(var r=e&&e.plainObjects?Object.create(null):{},o=0;o<t.length;++o)void 0!==t[o]&&(r[o]=t[o]);return r};t.exports={arrayToObject:c,assign:function(t,e){return Object.keys(e).reduce((function(t,r){return t[r]=e[r],t}),t)},combine:function(t,e){return[].concat(t,e)},compact:function(t){for(var e=[{obj:{o:t},prop:"o"}],r=[],o=0;o<e.length;++o)for(var n=e[o],a=n.obj[n.prop],c=Object.keys(a),p=0;p<c.length;++p){var l=c[p],u=a[l];"object"==typeof u&&null!==u&&-1===r.indexOf(u)&&(e.push({obj:a,prop:l}),r.push(u))}return function(t){for(;t.length>1;){var e=t.pop(),r=e.obj[e.prop];if(i(r)){for(var o=[],n=0;n<r.length;++n)void 0!==r[n]&&o.push(r[n]);e.obj[e.prop]=o}}}(e),t},decode:function(t,e,r){var o=t.replace(/\+/g," ");if("iso-8859-1"===r)return o.replace(/%[0-9a-f]{2}/gi,unescape);try{return decodeURIComponent(o)}catch(t){return o}},encode:function(t,e,r,n,i){if(0===t.length)return t;var c=t;if("symbol"==typeof t?c=Symbol.prototype.toString.call(t):"string"!=typeof t&&(c=String(t)),"iso-8859-1"===r)return escape(c).replace(/%u[0-9a-f]{4}/gi,(function(t){return"%26%23"+parseInt(t.slice(2),16)+"%3B"}));for(var p="",l=0;l<c.length;++l){var u=c.charCodeAt(l);45===u||46===u||95===u||126===u||u>=48&&u<=57||u>=65&&u<=90||u>=97&&u<=122||i===o.RFC1738&&(40===u||41===u)?p+=c.charAt(l):u<128?p+=a[u]:u<2048?p+=a[192|u>>6]+a[128|63&u]:u<55296||u>=57344?p+=a[224|u>>12]+a[128|u>>6&63]+a[128|63&u]:(l+=1,u=65536+((1023&u)<<10|1023&c.charCodeAt(l)),p+=a[240|u>>18]+a[128|u>>12&63]+a[128|u>>6&63]+a[128|63&u])}return p},isBuffer:function(t){return!(!t||"object"!=typeof t)&&!!(t.constructor&&t.constructor.isBuffer&&t.constructor.isBuffer(t))},isRegExp:function(t){return"[object RegExp]"===Object.prototype.toString.call(t)},maybeMap:function(t,e){if(i(t)){for(var r=[],o=0;o<t.length;o+=1)r.push(e(t[o]));return r}return e(t)},merge:function t(e,r,o){if(!r)return e;if("object"!=typeof r){if(i(e))e.push(r);else{if(!e||"object"!=typeof e)return[e,r];(o&&(o.plainObjects||o.allowPrototypes)||!n.call(Object.prototype,r))&&(e[r]=!0)}return e}if(!e||"object"!=typeof e)return[e].concat(r);var a=e;return i(e)&&!i(r)&&(a=c(e,o)),i(e)&&i(r)?(r.forEach((function(r,i){if(n.call(e,i)){var a=e[i];a&&"object"==typeof a&&r&&"object"==typeof r?e[i]=t(a,r,o):e.push(r)}else e[i]=r})),e):Object.keys(r).reduce((function(e,i){var a=r[i];return n.call(e,i)?e[i]=t(e[i],a,o):e[i]=a,e}),a)}}},478:(t,e,r)=>{"use strict";var o=r(210),n=r(924),i=r(631),a=o("%TypeError%"),c=o("%WeakMap%",!0),p=o("%Map%",!0),l=n("WeakMap.prototype.get",!0),u=n("WeakMap.prototype.set",!0),f=n("WeakMap.prototype.has",!0),s=n("Map.prototype.get",!0),y=n("Map.prototype.set",!0),d=n("Map.prototype.has",!0),g=function(t,e){for(var r,o=t;null!==(r=o.next);o=r)if(r.key===e)return o.next=r.next,r.next=t.next,t.next=r,r};t.exports=function(){var t,e,r,o={assert:function(t){if(!o.has(t))throw new a("Side channel does not contain "+i(t))},get:function(o){if(c&&o&&("object"==typeof o||"function"==typeof o)){if(t)return l(t,o)}else if(p){if(e)return s(e,o)}else if(r)return function(t,e){var r=g(t,e);return r&&r.value}(r,o)},has:function(o){if(c&&o&&("object"==typeof o||"function"==typeof o)){if(t)return f(t,o)}else if(p){if(e)return d(e,o)}else if(r)return function(t,e){return!!g(t,e)}(r,o);return!1},set:function(o,n){c&&o&&("object"==typeof o||"function"==typeof o)?(t||(t=new c),u(t,o,n)):p?(e||(e=new p),y(e,o,n)):(r||(r={key:{},next:null}),function(t,e,r){var o=g(t,e);o?o.value=r:t.next={key:e,next:t.next,value:r}}(r,o,n))}};return o}},654:()=>{}},e={};function r(o){var n=e[o];if(void 0!==n)return n.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var o in e)r.o(e,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{"use strict";r.r(o),r.d(o,{default:()=>a});var t=r(129),e=r.n(t);function n(t,e,r,o,n,i,a,c){var p,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=r,l._compiled=!0),o&&(l.functional=!0),i&&(l._scopeId="data-v-"+i),a?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=p):n&&(p=c?function(){n.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:n),p)if(l.functional){l._injectStyles=p;var u=l.render;l.render=function(t,e){return p.call(e),u(t,e)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,p):[p]}return{exports:t,options:l}}var i=n({props:{columnsLength:{type:Number,required:!0}},data:()=>({randNum:Math.floor(10*Math.random())+1})},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("tr",[r("td",{class:["vst-loading-row","vst-loading-row-"+t.randNum],attrs:{colspan:t.columnsLength}},[r("div")])])}),[],!1,null,null,null);const a=n({components:{LoadingRow:i.exports},props:{columns:{type:Array,required:!0},source:{type:[String,Function],required:!0},perPage:{type:Number,default:25}},data:()=>({page:1,rows:[],syncState:"initial",orders:{}}),watch:{page:"fetchData",orders:"refetch",perPage:"refetch"},created(){this.fetchData()},methods:{reload(){this.fetchData(this.page)},async fetchData(t=1){const r={per_page:this.perPage,page:t},o=Object.keys(this.orders);let n;if(o.length&&(r.order=o.map((t=>({field:t,direction:this.orders[t]})))),this.syncState="syncing",this.rows=[],"string"==typeof this.source){const t=await fetch(`${this.source}?${e().stringify(r,{arrayFormat:"brackets"})}`);n=await t.json()}else n=await this.source(r);this.rows=n,this.syncState="fetched"},onOrderClick(t){"asc"===this.orders[t]?this.orders={[t]:"desc"}:"desc"===this.orders[t]?this.orders={}:this.orders={[t]:"asc"}},refetch(){1===this.page?this.fetchData(1):this.page=1}}},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("table",{staticClass:"vst"},[t.columns.length?r("thead",[r("tr",t._l(t.columns,(function(e){return r("th",{key:e.key,class:["vst-th",{"vst-orderable":e.orderable}],on:{click:function(r){r.preventDefault(),e.orderable&&t.onOrderClick(e.key)}}},[t._t("head:"+e.key,(function(){return[t._v("\n          "+t._s(e.title)+"\n        ")]}),{column:e}),t._v(" "),e.orderable?r("a",{class:"vst-orderable-toggle "+(t.orders[e.key]||""),attrs:{href:"#"}}):t._e()],2)})),0)]):t._e(),t._v(" "),r("tbody",[t._l(t.rows,(function(e,o){return t._t("row",(function(){return[r("tr",{key:e.id||o},t._l(t.columns,(function(n){return r("td",{key:n.key},[t._t("cell:"+n.key,(function(){return[t._v("\n            "+t._s(e[n.key])+"\n          ")]}),{row:e,value:e[n.key],column:n,index:o})],2)})),0)]}),{row:e,index:o,columns:t.columns})})),t._v(" "),"fetched"===t.syncState&&0===t.rows.length?t._t("row:empty",(function(){return[r("tr",[r("td",{attrs:{colspan:t.columns.length}},[t._v("\n          No records found\n        ")])])]})):t._e(),t._v(" "),"syncing"===t.syncState?t._t("row:loading",(function(){return t._l(t.perPage,(function(e,o){return r("LoadingRow",{key:"loadingRow"+o,attrs:{"columns-length":t.columns.length}})}))})):t._e()],2),t._v(" "),r("tfoot",[r("tr",[r("td",{attrs:{colspan:t.columns.length}},[t._t("pagination",(function(){return[t.page>1||t.rows.length===t.perPage?r("ul",{staticClass:"vst-pagination mt-3"},[r("li",{class:["vst-page-item",{disabled:1===t.page}]},[r("a",{staticClass:"vst-page-link",on:{click:function(e){e.preventDefault(),t.page-=1}}},[t._v("←")])]),t._v(" "),r("li",{class:["vst-page-item",{disabled:t.rows.length<t.perPage}]},[r("a",{staticClass:"vst-page-link",on:{click:function(e){e.preventDefault(),t.page+=1}}},[t._v("→")])])]):t._e()]}),{page:t.page,rows:t.rows})],2)])])])}),[],!1,null,null,null).exports})(),o})()}));

package/src/js/components/loading_row.vue

@@ -1,22 +0,0 @@
-<template>
-  <tr>
-    <td
-      :colspan="columnsLength"
-      :class="['vst-loading-row', `vst-loading-row-${randNum}`]">
-      <div />
-    </td>
-  </tr>
-</template>
-
-<script>
-export default {
-  props: {
-    columnsLength: { type: Number, required: true },
-  },
-  data() {
-    return {
-      randNum: Math.floor(Math.random() * 10) + 1,
-    }
-  },
-}
-</script>

package/src/js/components/table.vue

@@ -1,151 +0,0 @@
-<template>
-  <table class="vst">
-    <thead v-if="columns.length">
-      <tr>
-        <th
-          v-for="column in columns"
-          :key="column.key"
-          :class="['vst-th', { 'vst-orderable': column.orderable }]"
-          @click.prevent="column.orderable ? onOrderClick(column.key) : null">
-          <slot
-            :name="`head:${column.key}`"
-            :column="column">
-            {{ column.title }}
-          </slot>
-          <a
-            v-if="column.orderable"
-            href="#"
-            :class="`vst-orderable-toggle ${orders[column.key] || ''}`" />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <slot
-        v-for="(row, i) in rows"
-        name="row"
-        :row="row"
-        :index="i"
-        :columns="columns">
-        <tr :key="row.id || i">
-          <td
-            v-for="column in columns"
-            :key="column.key">
-            <slot
-              :name="`cell:${column.key}`"
-              :row="row"
-              :value="row[column.key]"
-              :column="column"
-              :index="i">
-              {{ row[column.key] }}
-            </slot>
-          </td>
-        </tr>
-      </slot>
-
-      <slot v-if="syncState === 'fetched' && rows.length === 0" name="row:empty">
-        <tr>
-          <td :colspan="columns.length">
-            No records found
-          </td>
-        </tr>
-      </slot>
-
-      <slot v-if="syncState === 'syncing'" name="row:loading">
-        <LoadingRow
-          v-for="(row, i) in perPage"
-          :key="`loadingRow${i}`"
-          :columns-length="columns.length" />
-      </slot>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td :colspan="columns.length">
-          <slot name="pagination" :page="page" :rows="rows">
-            <ul v-if="page > 1 || rows.length === perPage" class="vst-pagination mt-3">
-              <li :class="['vst-page-item', { disabled: page === 1 }]">
-                <a class="vst-page-link" @click.prevent="page -= 1">←</a>
-              </li>
-
-              <li :class="['vst-page-item', { disabled: rows.length < perPage }]">
-                <a class="vst-page-link" @click.prevent="page += 1">→</a>
-              </li>
-            </ul>
-          </slot>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
-</template>
-
-<script>
-import qs from 'qs'
-import LoadingRow from './loading_row.vue'
-
-export default {
-  components: { LoadingRow },
-  props: {
-    columns: { type: Array, required: true },
-    source: { type: [String, Function], required: true },
-    perPage: { type: Number, default: 25 },
-  },
-  data() {
-    return {
-      page: 1,
-      rows: [],
-      syncState: 'initial',
-      orders: {},
-    }
-  },
-  watch: {
-    page: 'fetchData',
-    orders: 'refetch',
-    perPage: 'refetch',
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    reload() {
-      this.fetchData(this.page)
-    },
-    async fetchData(page = 1) {
-      const params = { per_page: this.perPage, page }
-
-      const orderKeys = Object.keys(this.orders)
-      if (orderKeys.length) {
-        params.order = orderKeys.map((key) => ({ field: key, direction: this.orders[key] }))
-      }
-
-      this.syncState = 'syncing'
-      this.rows = []
-
-      let data
-      if (typeof this.source === 'string') {
-        const response = await fetch(`${this.source}?${qs.stringify(params, { arrayFormat: 'brackets' })}`)
-        data = await response.json()
-      } else {
-        data = await this.source(params)
-      }
-
-      this.rows = data
-      this.syncState = 'fetched'
-    },
-    onOrderClick(key) {
-      if (this.orders[key] === 'asc') {
-        this.orders = { [key]: 'desc' }
-      } else if (this.orders[key] === 'desc') {
-        this.orders = {}
-      } else {
-        this.orders = { [key]: 'asc' }
-      }
-    },
-    refetch() {
-      if (this.page === 1) {
-        this.fetchData(1)
-      } else {
-        this.page = 1
-      }
-    },
-  },
-}
-</script>

package/src/js/index.js

@@ -1,5 +0,0 @@
-import '../stylesheets/index.scss'
-
-import VueSlimTable from './components/table.vue'
-
-export default VueSlimTable

package/src/stylesheets/index.scss

@@ -1,97 +0,0 @@
-@keyframes moving-gradient {
-  0% { background-position: -250px 0; }
-  100% { background-position: 250px 0; }
-}
-
-.vst {
-  &-th {
-    line-height: 20px;
-  }
-
-  &-orderable:hover {
-    cursor: pointer;
-
-    .vst-orderable-toggle {
-      color: #555 !important;
-    }
-  }
-
-  &-orderable-toggle {
-    font-size: 20px;
-    float: right;
-    color: #ccc !important;
-
-    &:after {
-      content: " \2194";
-      display: inline-block;
-      transform: rotate(-90deg);
-    }
-
-    &.desc:after {
-      content: " \2191";
-      transform: rotate(0);
-    }
-
-    &.asc:after {
-      content: " \2193";
-      transform: rotate(0);
-    }
-  }
-
-  &-loading-row div {
-    height: 20px;
-    background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
-    background-size: 500px 20px;
-    animation-name: moving-gradient;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  tr td.vst-loading-row {
-    @for $i from 1 through 10 {
-      &-#{$i} div {
-        animation-delay: #{($i - 11)*100}ms;
-      }
-    }
-  }
-
-  &-pagination {
-    display: flex;
-    padding-left: 0;
-    list-style: none;
-    border-radius: 0.25rem;
-
-    a {
-      position: relative;
-      display: block;
-      padding: 8px 12px;
-      padding: 0.5rem 0.75rem;
-      margin-left: -1px;
-      line-height: 1.25;
-      color: #007bff;
-      background-color: #fff;
-      border: 1px solid #dee2e6;
-
-      &:hover {
-        z-index: 2;
-        color: #0056b3;
-        text-decoration: none;
-        background-color: #e9ecef;
-        border-color: #dee2e6;
-      }
-    }
-  }
-
-  &-page-item.disabled .vst-page-link {
-    pointer-events: none;
-    color: #6c757d;
-    cursor: auto;
-    background-color: #fff;
-  }
-
-  &-page-item .vst-page-link {
-    cursor: pointer;
-  }
-}

package/webpack.config.js

@@ -1,48 +0,0 @@
-const path = require('path');
-const { VueLoaderPlugin } = require('vue-loader');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    bundle: './src/js/index.js'
-  },
-  output: {
-    filename: '[name].js',
-    library: 'VueSlimTable',
-    libraryTarget: 'umd'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: __dirname,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'sass-loader'
-        ],
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css'
-    })
-  ],
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()]
-  }
-};