vue-slim-tables 0.3.1 → 0.3.2

package/README.md

@@ -42,11 +42,10 @@ 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 |
 | #cell:${column.key} | { row, index, column, value } | Rewrite cell with custom html |
 | #pagination | { page, rows } | Rewrite pagination with your own implementation |
-| #thead:before | { columns } | Render row before base header |
-| #thead:after | { columns } | Render row after base header |

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

@@ -10,10 +10,10 @@ interface TableOrders {
 interface TableFetchParams {
     per_page: number;
     page: number;
-    order?: Array<{
-        field: string;
-        direction: 'asc' | 'desc';
-    }>;
+    orders?: TableOrders;
+}
+interface TableRow {
+    [key: string]: any;
 }
 declare const _sfc_main: import("vue").DefineComponent<{
     columns: {
@@ -32,11 +32,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     props: {
         columns: Array<TableColumn>;
-        source: string | ((_: TableFetchParams) => Promise<Array<unknown>> | Array<unknown>);
+        source: string | ((_: TableFetchParams) => Promise<TableRow[]> | TableRow[]);
         perPage: number;
     };
     orders: ShallowRef<TableOrders>;
-    fetchData: (params: TableFetchParams) => Promise<any>;
+    loadItems: (params: TableFetchParams) => Promise<TableRow[]>;
     onOrderClick: (key: string) => void;
     page: import("vue").Ref<number>;
     isSyncing: import("vue").ComputedRef<boolean>;
@@ -46,9 +46,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     reload: () => void;
     refetch: () => void;
     rows: {
-        value: {
-            [x: string]: any;
-        }[];
+        value: TableRow[];
     };
     LoadingRow: import("vue").DefineComponent<{
         columnsLength: {

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

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

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

@@ -1,15 +1,14 @@
-interface UseFiltetableArgs {
-    initialFilters: {
-        [key: string]: any;
-    };
-    loadItems: any;
+declare type CombinedFilters<Filters> = Filters & {
+    page: number;
+};
+interface UseFiltetableArgs<Filters, Item> {
+    initialFilters: Filters;
+    loadItems: (_filters: CombinedFilters<Filters>) => Promise<Item[]>;
 }
-declare const useFilterable: ({ initialFilters, loadItems }: UseFiltetableArgs) => {
+declare const useFilterable: <Filters, Item>({ initialFilters, loadItems }: UseFiltetableArgs<Filters, Item>) => {
     page: import("vue").Ref<number>;
     items: {
-        value: {
-            [x: string]: any;
-        }[];
+        value: Item[];
     };
     syncState: import("vue").Ref<string>;
     nextPage: () => void;

package/dist/vst.es.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, computed, ref, reactive, isReactive, watch, shallowRef, renderSlot, Fragment, renderList, createTextVNode, toDisplayString, unref, createCommentVNode, createBlock, withModifiers } from "vue";
+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);
@@ -47,13 +47,13 @@ const useFilterable = ({ initialFilters, loadItems }) => {
   const page = ref(1);
   const items = reactive({ value: [] });
   const syncState = ref(SYNC_STATES.INITIAL);
-  const reactiveInitialFilters = isReactive(initialFilters) ? initialFilters : reactive({ value: initialFilters });
-  const filters = computed(() => __spreadValues({
+  const filters = reactive({ value: initialFilters });
+  const combinedFilters = computed(() => __spreadValues({
     page: page.value
-  }, reactiveInitialFilters.value));
+  }, filters.value));
   const load = () => {
     syncState.value = SYNC_STATES.SYNCING;
-    return loadItems(filters.value).then((res) => {
+    return loadItems(combinedFilters.value).then((res) => {
       items.value = res;
       syncState.value = SYNC_STATES.SYNCED;
     }).catch(() => {
@@ -61,8 +61,8 @@ const useFilterable = ({ initialFilters, loadItems }) => {
       syncState.value = SYNC_STATES.FAILED;
     });
   };
-  watch(filters, load);
   load();
+  watch(combinedFilters, load);
   return {
     page,
     items,
@@ -104,11 +104,10 @@ const stringify = (obj, parentPrefix) => (outputArray, [key, val]) => {
 var toQueryString = (obj) => Object.entries(obj).reduce(stringify(), []).join("&");
 const _hoisted_1 = { class: "vst" };
 const _hoisted_2 = { key: 0 };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { key: 0 };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["colspan"];
 const _hoisted_5 = ["colspan"];
-const _hoisted_6 = ["colspan"];
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 0,
   class: "vst-pagination mt-3"
 };
@@ -121,7 +120,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose }) {
     const props = __props;
     const orders = shallowRef({});
-    const fetchData = async (params) => {
+    const loadItems = async (params) => {
       let data;
       if (typeof props.source === "string") {
         const response = await fetch(`${props.source}?${toQueryString(params)}`);
@@ -150,8 +149,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       refetch,
       items: rows
     } = useFilterable({
-      initialFilters: { per_page: props.perPage, orders },
-      loadItems: fetchData
+      initialFilters: { per_page: props.perPage, orders: orders.value },
+      loadItems
     });
     expose({
       refetch,
@@ -161,33 +160,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("table", _hoisted_1, [
         __props.columns.length ? (openBlock(), createElementBlock("thead", _hoisted_2, [
-          renderSlot(_ctx.$slots, "thead:before", { columns: __props.columns }),
-          createElementVNode("tr", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
-              return openBlock(), createElementBlock("th", {
-                key: column.key,
-                class: normalizeClass(["vst-th", { "vst-orderable": column.orderable }]),
-                onClick: ($event) => column.orderable ? onOrderClick(column.key) : null
-              }, [
-                column.orderable ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                  renderSlot(_ctx.$slots, `head:${column.key}`, { column }, () => [
+          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)
-                  ]),
-                  column.orderable ? (openBlock(), createElementBlock("a", {
-                    key: 0,
-                    href: "#",
-                    class: normalizeClass(["vst-orderable-toggle", unref(orders)[column.key]])
-                  }, null, 2)) : createCommentVNode("", true)
-                ])) : renderSlot(_ctx.$slots, `head:${column.key}`, {
-                  key: 1,
-                  column
-                }, () => [
-                  createTextVNode(toDisplayString(column.title), 1)
-                ])
-              ], 10, _hoisted_3);
-            }), 128))
-          ]),
-          renderSlot(_ctx.$slots, "thead:after", { columns: __props.columns })
+                  ])
+                ], 16);
+              }), 128))
+            ])
+          ])
         ])) : createCommentVNode("", true),
         createElementVNode("tbody", null, [
           unref(isSyncing) ? renderSlot(_ctx.$slots, "row:loading", { key: 0 }, () => [
@@ -201,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("tr", null, [
               createElementVNode("td", {
                 colspan: __props.columns.length
-              }, " No records found ", 8, _hoisted_5)
+              }, " 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", {
@@ -239,7 +239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 page: unref(page),
                 rows: unref(rows).value
               }, () => [
-                unref(page) > 1 || unref(rows).value.length === __props.perPage || unref(isSyncing) ? (openBlock(), createElementBlock("ul", _hoisted_7, [
+                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) }])
                   }, [
@@ -260,7 +260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ], 2)
                 ])) : createCommentVNode("", true)
               ])
-            ], 8, _hoisted_6)
+            ], 8, _hoisted_5)
           ])
         ])
       ]);

package/dist/vst.es.js.map

@@ -1 +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, isReactive,\n} from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface Item { [key: string]: any }\n\ninterface UseFiltetableArgs {\n  initialFilters: {\n    [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any\n  },\n  loadItems: any // eslint-disable-line @typescript-eslint/no-explicit-any\n}\n\nconst SYNC_STATES = {\n  INITIAL: 'initial',\n  SYNCING: 'syncing',\n  SYNCED: 'synced',\n  FAILED: 'failed',\n}\n\nconst useFilterable = ({ initialFilters, loadItems }: UseFiltetableArgs) => {\n  const page = ref(1)\n  const items = reactive({ value: [] as Item[] })\n  const syncState = ref(SYNC_STATES.INITIAL)\n  const reactiveInitialFilters = isReactive(initialFilters) ? initialFilters : reactive({ value: initialFilters })\n\n  const filters = computed(() => ({\n    page: page.value,\n    ...reactiveInitialFilters.value,\n  }))\n\n  const load = () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    return loadItems(filters.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\n  watch(filters, load)\n\n  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) => (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) => Object.entries(obj).reduce(stringify(obj), []).join('&')\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead:before\" :columns=\"columns\" />\n      <tr>\n        <th\n          v-for=\"column in columns\"\n          :key=\"column.key\"\n          :class=\"['vst-th', { 'vst-orderable': column.orderable }]\"\n          @click=\"column.orderable ? onOrderClick(column.key) : null\">\n          <div v-if=\"column.orderable\">\n            <slot\n              :name=\"`head:${column.key}`\"\n              :column=\"column\">\n              {{ column.title }}\n            </slot>\n\n            <a\n              v-if=\"column.orderable\"\n              href=\"#\"\n              :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n          </div>\n\n          <slot\n            v-else\n            :name=\"`head:${column.key}`\"\n            :column=\"column\">\n            {{ column.title }}\n          </slot>\n        </th>\n      </tr>\n      <slot name=\"thead:after\" :columns=\"columns\" />\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  order?: Array<{\n    field: string\n    direction: 'asc' | 'desc'\n  }>\n}\n\ninterface TableProps {\n  columns: Array<TableColumn>\n  source: string | ((_: TableFetchParams) => Promise<Array<unknown>> | Array<unknown>)\n  perPage?: number\n}\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  perPage: 25,\n})\n\nconst orders: ShallowRef<TableOrders> = shallowRef({})\n\nconst fetchData = async (params: TableFetchParams) => {\n  let data\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)\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({\n  initialFilters: { per_page: props.perPage, orders },\n  loadItems: fetchData,\n})\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAeM,UAAU,KAAK,MAAM,KAAK,WAAW,EAAE,IAAI;;;;;;;;;;;ACDjD,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,gBAAgB,gBAAmC;QACpE,OAAO,IAAI,CAAC;QACZ,QAAQ,SAAS,EAAE,OAAO,IAAc;QACxC,YAAY,IAAI,YAAY,OAAO;QACnC,yBAAyB,WAAW,cAAc,IAAI,iBAAiB,SAAS,EAAE,OAAO,gBAAgB;QAEzG,UAAU,SAAS;IACvB,MAAM,KAAK;AAAA,KACR,uBAAuB,MAC1B;QAEI,OAAO,MAAM;cACP,QAAQ,YAAY;WAEvB,UAAU,QAAQ,KAAK,EAC3B,KAAK,CAAC,QAAgB;YACf,QAAQ;gBACJ,QAAQ,YAAY;AAAA,KAC/B,EACA,MAAM,MAAM;YACL,QAAQ;gBACJ,QAAQ,YAAY;AAAA,KAC/B;AAAA;QAGC,SAAS,IAAI;;SAIZ;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;AC1EA,MAAM,YAAY,CAAC,KAAK,iBAAiB,CAAC,aAAa,CAAC,KAAK,SAAS;MAChE,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,QAAQ,OAAO,QAAQ,GAAG,EAAE,OAAO,UAAa,GAAG,EAAE,EAAE,KAAK,GAAG;;;;;;;;;;;;;;;;;;;UCqHzE,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,cAAc;AAAA,MAChB,gBAAgB,EAAE,UAAU,MAAM,SAAS;MAC3C,WAAW;AAAA,KACZ;WAEY;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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

@@ -1,2 +1,2 @@
-var M=Object.defineProperty;var $=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var C=(e,s,c)=>s in e?M(e,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):e[s]=c,V=(e,s)=>{for(var c in s||(s={}))x.call(s,c)&&C(e,c,s[c]);if($)for(var c of $(s))G.call(s,c)&&C(e,c,s[c]);return e};(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 s="";const c=["colspan"],b=[e.createElementVNode("div",null,null,-1)],I=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)]))}}),k={INITIAL:"initial",SYNCING:"syncing",SYNCED:"synced",FAILED:"failed"},u=({initialFilters:n,loadItems:m})=>{const l=e.ref(1),a=e.reactive({value:[]}),r=e.ref(k.INITIAL),h=e.isReactive(n)?n:e.reactive({value:n}),d=e.computed(()=>V({page:l.value},h.value)),i=()=>(r.value=k.SYNCING,m(d.value).then(y=>{a.value=y,r.value=k.SYNCED}).catch(()=>{a.value=[],r.value=k.FAILED}));return e.watch(d,i),i(),{page:l,items:a,syncState:r,nextPage:()=>{l.value+=1},prevPage:()=>{l.value-=1},isSyncing:e.computed(()=>r.value===k.SYNCING),isSynced:e.computed(()=>r.value===k.SYNCED),isFailed:e.computed(()=>r.value===k.FAILED),reload:()=>{i()},refetch:()=>{l.value===1?i():l.value=1}}},E=(n,m)=>(l,[a,r])=>{if(r==null)return l;const h=encodeURIComponent(a),d=m?`${m}[${h}]`:h;return["number","string"].includes(typeof r)?(l.push(`${d}=${encodeURIComponent(r)}`),l):(l.push(Object.entries(r).reduce(E(r,d),[]).join("&")),l)};var w=n=>Object.entries(n).reduce(E(),[]).join("&");const L={class:"vst"},D={key:0},T=["onClick"],F={key:0},P=["colspan"],j=["colspan"],Y={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({}),r=async o=>{let f;return typeof l.source=="string"?f=await(await fetch(`${l.source}?${w(o)}`)).json():f=await l.source(o),f},h=o=>{a.value[o]==="asc"?a.value={[o]:"desc"}:a.value[o]==="desc"?a.value={}:a.value={[o]:"asc"}},{page:d,isSyncing:i,isSynced:y,prevPage:B,nextPage:S,reload:z,refetch:R,items:g}=u({initialFilters:{per_page:l.perPage,orders:a},loadItems:r});return m({refetch:R,reload:z,rows:g}),(o,f)=>(e.openBlock(),e.createElementBlock("table",L,[n.columns.length?(e.openBlock(),e.createElementBlock("thead",D,[e.renderSlot(o.$slots,"thead:before",{columns:n.columns}),e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,t=>(e.openBlock(),e.createElementBlock("th",{key:t.key,class:e.normalizeClass(["vst-th",{"vst-orderable":t.orderable}]),onClick:N=>t.orderable?h(t.key):null},[t.orderable?(e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(o.$slots,`head:${t.key}`,{column:t},()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),t.orderable?(e.openBlock(),e.createElementBlock("a",{key:0,href:"#",class:e.normalizeClass(["vst-orderable-toggle",e.unref(a)[t.key]])},null,2)):e.createCommentVNode("",!0)])):e.renderSlot(o.$slots,`head:${t.key}`,{key:1,column:t},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],10,T))),128))]),e.renderSlot(o.$slots,"thead:after",{columns:n.columns})])):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[e.unref(i)?e.renderSlot(o.$slots,"row:loading",{key:0},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.perPage,t=>(e.openBlock(),e.createBlock(I,{key:`loadingRow${t}`,"columns-length":n.columns.length},null,8,["columns-length"]))),128))]):e.unref(y)&&e.unref(g).value.length===0?e.renderSlot(o.$slots,"row:empty",{key:1},()=>[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length}," No records found ",8,P)])]):e.unref(y)&&e.unref(g).value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(e.unref(g).value,(t,N)=>e.renderSlot(o.$slots,"row",{row:t,index:N,columns:n.columns},()=>[(e.openBlock(),e.createElementBlock("tr",{key:t.id||N},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,p=>(e.openBlock(),e.createElementBlock("td",{key:p.key},[e.renderSlot(o.$slots,`cell:${p.key}`,{row:t,value:t[p.key],column:p,index:N},()=>[e.createTextVNode(e.toDisplayString(t[p.key]),1)])]))),128))]))])),256)):e.createCommentVNode("",!0)]),e.createElementVNode("tfoot",null,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length},[e.renderSlot(o.$slots,"pagination",{page:e.unref(d),rows:e.unref(g).value},()=>[e.unref(d)>1||e.unref(g).value.length===n.perPage||e.unref(i)?(e.openBlock(),e.createElementBlock("ul",Y,[e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(d)===1||e.unref(i)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:f[0]||(f[0]=e.withModifiers((...t)=>e.unref(B)&&e.unref(B)(...t),["prevent"]))},"\u2190")],2),e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(g).value.length<n.perPage||e.unref(i)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:f[1]||(f[1]=e.withModifiers((...t)=>e.unref(S)&&e.unref(S)(...t),["prevent"]))},"\u2192")],2)])):e.createCommentVNode("",!0)])],8,j)])])]))}})});
+(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

@@ -1 +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, isReactive,\n} from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface Item { [key: string]: any }\n\ninterface UseFiltetableArgs {\n  initialFilters: {\n    [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any\n  },\n  loadItems: any // eslint-disable-line @typescript-eslint/no-explicit-any\n}\n\nconst SYNC_STATES = {\n  INITIAL: 'initial',\n  SYNCING: 'syncing',\n  SYNCED: 'synced',\n  FAILED: 'failed',\n}\n\nconst useFilterable = ({ initialFilters, loadItems }: UseFiltetableArgs) => {\n  const page = ref(1)\n  const items = reactive({ value: [] as Item[] })\n  const syncState = ref(SYNC_STATES.INITIAL)\n  const reactiveInitialFilters = isReactive(initialFilters) ? initialFilters : reactive({ value: initialFilters })\n\n  const filters = computed(() => ({\n    page: page.value,\n    ...reactiveInitialFilters.value,\n  }))\n\n  const load = () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    return loadItems(filters.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\n  watch(filters, load)\n\n  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) => (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) => Object.entries(obj).reduce(stringify(obj), []).join('&')\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead:before\" :columns=\"columns\" />\n      <tr>\n        <th\n          v-for=\"column in columns\"\n          :key=\"column.key\"\n          :class=\"['vst-th', { 'vst-orderable': column.orderable }]\"\n          @click=\"column.orderable ? onOrderClick(column.key) : null\">\n          <div v-if=\"column.orderable\">\n            <slot\n              :name=\"`head:${column.key}`\"\n              :column=\"column\">\n              {{ column.title }}\n            </slot>\n\n            <a\n              v-if=\"column.orderable\"\n              href=\"#\"\n              :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n          </div>\n\n          <slot\n            v-else\n            :name=\"`head:${column.key}`\"\n            :column=\"column\">\n            {{ column.title }}\n          </slot>\n        </th>\n      </tr>\n      <slot name=\"thead:after\" :columns=\"columns\" />\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  order?: Array<{\n    field: string\n    direction: 'asc' | 'desc'\n  }>\n}\n\ninterface TableProps {\n  columns: Array<TableColumn>\n  source: string | ((_: TableFetchParams) => Promise<Array<unknown>> | Array<unknown>)\n  perPage?: number\n}\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  perPage: 25,\n})\n\nconst orders: ShallowRef<TableOrders> = shallowRef({})\n\nconst fetchData = async (params: TableFetchParams) => {\n  let data\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)\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({\n  initialFilters: { per_page: props.perPage, orders },\n  loadItems: fetchData,\n})\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":["ref","reactive","isReactive","computed","shallowRef"],"mappings":"iwBAeM,GAAU,KAAK,MAAM,KAAK,SAAW,EAAE,EAAI,mMCD3C,EAAc,CAClB,QAAS,UACT,QAAS,UACT,OAAQ,SACR,OAAQ,QACV,EAEM,EAAgB,CAAC,CAAE,iBAAgB,eAAmC,MACpE,GAAOA,MAAI,CAAC,EACZ,EAAQC,WAAS,CAAE,MAAO,GAAc,EACxC,EAAYD,MAAI,EAAY,OAAO,EACnC,EAAyBE,aAAW,CAAc,EAAI,EAAiBD,WAAS,CAAE,MAAO,EAAgB,EAEzG,EAAUE,WAAS,OACvB,KAAM,EAAK,OACR,EAAuB,MAC1B,EAEI,EAAO,OACD,MAAQ,EAAY,QAEvB,EAAU,EAAQ,KAAK,EAC3B,KAAK,AAAC,GAAgB,GACf,MAAQ,IACJ,MAAQ,EAAY,OAC/B,EACA,MAAM,IAAM,GACL,MAAQ,KACJ,MAAQ,EAAY,OAC/B,kBAGC,EAAS,CAAI,MAIZ,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,EC1EM,EAAY,CAAC,EAAK,IAAiB,CAAC,EAAa,CAAC,EAAK,KAAS,IAChE,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,GAAQ,OAAO,QAAQ,CAAG,EAAE,OAAO,EAAa,EAAG,EAAE,EAAE,KAAK,GAAG,0OCqHzE,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,EAAc,CAChB,eAAgB,CAAE,SAAU,EAAM,QAAS,UAC3C,UAAW,EACZ,WAEY,CACX,UACA,SACA,OACD"}
+{"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,6 +1,6 @@
 {
   "name": "vue-slim-tables",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "files": [
     "dist"
   ],
@@ -13,7 +13,8 @@
     },
     "./stylesheets": "dist/style.css",
     "./src/ts/index": "./src/ts/index.ts",
-    "./filterable": "./src/ts/use/filterable"
+    "./filterable": "./src/ts/use/filterable",
+    "./dist/vst.umd.js": "./dist/vst.umd.js"
   },
   "scripts": {
     "build": "vite build",
@@ -34,25 +35,26 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.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.17",
+    "@vue/test-utils": "^2.0.0-rc.21",
     "c8": "^7.11.2",
-    "eslint": "^8.12.0",
+    "eslint": "^8.14.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "^8.5.0",
-    "happy-dom": "^2.55.0",
-    "sass": "^1.49.11",
-    "typescript": "4.6.3",
-    "vite": "^2.9.1",
-    "vite-plugin-dts": "^1.0.5",
-    "vitest": "^0.8.4",
+    "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": {
-    "vue": "^3.2.31"
+    "vue": "^3.2.33"
   },
   "types": "dist/types/index.d.ts"
 }