vue-slim-tables 0.3.2 → 0.3.5

package/README.md

@@ -9,19 +9,19 @@ npm install vue-slim-tables
 
 ```html
 <template>
-    <VueSlimTables :columns="columns" source="/users" />
+  <VueSlimTables :columns="columns" :source="asyncSource" />
 </template>
 
-<script>
-    export default {
-        created() {
-            this.columns = [
-                { key: 'id', title: 'ID' },
-                { key: 'name', title: 'Name' },
-                { key: 'phone', title: 'Phone' }
-            ]
-        }
-    }
+<script setup>
+const columns = [
+  { key: 'id', title: 'ID' },
+  { key: 'name', title: 'Name' },
+  { key: 'phone', title: 'Phone' }
+]
+
+const asyncSource = (params) => {
+  return fetch('...', params).then((res) => res.json())
+}
 </script>
 ```
 
@@ -29,23 +29,25 @@ npm install vue-slim-tables
 | Prop | Type | Required | Description |
 | - | - | - | - |
 | columns | Array | true | Array of column objects described below |
-| source | [String, Function] | true | `string` is for async fetching rows<br/>`function` for more complicated async load |
-| perPage | Number | false | Number or rows to display |
+| source | Function | true | async load |
+| perPage | Number | false | Number or rows to display. By default 25 will be used |
 
 #### Column object
 | Key | Type | Required | Description |
 | - | - | - | - |
 | key | String | true | `Uniq` key that used for ordering and slots |
-| title | String | true | Displayed in thead |
+| title | String | true | Displayed in thead cell |
 | orderable | Boolean | false | Ordering by column `key` |
 
 ### Slots
 | Slot | Props | Description |
 | - | - | - |
-| #thead | { columns, orders } | Rewrite whole thead row |
-| #thead:${column.key} | { column } | Rewrite column thead with custom html |
-| #row | { row, index, columns } | Rewrite whole row |
+| #thead:before | - | Add a row before main |
+| #thead | { columns, orders } | Rewrite the entire thead row |
+| #thead:after | - | Add a row after main |
+| #thead:${column.key} | { column } | Rewrite thead cell with custom html |
+| #row | { row, index, columns } | Rewrite the entire tbody 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 |
+| #cell:${column.key} | { row, index, column, value } | Rewrite tbody cell with custom html |
 | #pagination | { page, rows } | Rewrite pagination with your own implementation |

package/dist/style.css

@@ -1 +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}
+@charset "UTF-8";@keyframes moving-gradient{0%{background-position:-250px 0}to{background-position:250px 0}}.vst{--color-white: hsl(0, 0%, 100%);--color-light-grey: hsl(0, 0%, 90%);--color-grey: hsl(0, 0%, 75%);--color-dark-grey: hsl(0, 0%, 50%);--color-blue: hsl(211, 100%, 35%);--color-light-blue: hsl(211, 100%, 50%);width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:separate;border-spacing:0}.vst th,.vst td{border-top:1px solid var(--color-light-grey);padding:1rem;vertical-align:top}.vst thead th{vertical-align:bottom}.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:var(--color-dark-grey)}.vst-orderable div .vst-orderable-toggle{font-size:1.25rem;font-style:normal;color:var(--color-grey)}.vst-orderable div .vst-orderable-toggle:after{content:" ↔";display:inline-block;transform:rotate(-90deg)}.vst-orderable div .vst-orderable-toggle.desc:after{color:var(--color-dark-grey);content:" ↑";transform:rotate(0)}.vst-orderable div .vst-orderable-toggle.asc:after{color:var(--color-dark-grey);content:" ↓";transform:rotate(0)}.vst-loading-row div{height:1.125rem;background:linear-gradient(to right,var(--color-light-grey) 20%,var(--color-white) 50%,var(--color-light-grey) 80%);background-size:500px 1.125rem;animation-name:moving-gradient;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease;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{font-size:1.25rem;position:relative;display:block;padding:.5rem .75rem;margin-right:-1px;line-height:1.25;color:var(--color-light-blue);background-color:var(--color-white);border:1px solid var(--color-light-grey)}.vst-pagination a:hover{z-index:2;text-decoration:none;color:var(--color-blue);background-color:var(--color-light-grey);border-color:var(--color-light-grey)}.vst-page-item.disabled .vst-page-link{pointer-events:none;color:var(--color-dark-grey);cursor:auto;background-color:var(--color-white)}.vst-page-item .vst-page-link{cursor:pointer}

package/dist/types/main.d.ts

@@ -0,0 +1,4 @@
+import type { TableColumn, TableOrders, TableFetchParams, TableRow, TableFilters, TableProps } from './ts/types';
+import VueSlimTable from './ts/components/slim_table.vue';
+export default VueSlimTable;
+export { TableColumn, TableOrders, TableFetchParams, TableRow, TableFilters, TableProps };

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

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

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

@@ -0,0 +1,121 @@
+import type { TableOrders, TableRow, TableProps } from '../../ts/types';
+declare const _default: <TRow extends TableRow>(__VLS_props: TableProps<TRow> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
+    props: TableProps<TRow>;
+    expose(exposed: {
+        refetch: () => void;
+        reload: () => Promise<void>;
+        rows: import("vue").Ref<TRow[]>;
+    }): void;
+    attrs: any;
+    slots: Partial<{
+        [key: `thead:${string}`]: (_props: {
+            column: import('../../ts/types').TableColumn;
+            orders: TableOrders;
+        }) => any;
+        [key: `cell:${string}`]: (_props: {
+            row: TRow;
+            index: number;
+            column: import('../../ts/types').TableColumn;
+            value: unknown;
+        }) => any;
+        'thead:before': () => any;
+        thead: (_props: {
+            columns: import('../../ts/types').TableColumn[];
+            orders: TableOrders;
+        }) => any;
+        'thead:after': () => any;
+        'row:loading': () => any;
+        'row:empty': () => any;
+        row: (_props: {
+            row: TRow;
+            index: number;
+            columns: import('../../ts/types').TableColumn[];
+        }) => any;
+        pagination: (_props: {
+            page: number;
+            rows: TRow[];
+        }) => any;
+    }>;
+    emit: any;
+}, "attrs" | "emit" | "slots"> | undefined, __VLS_setup?: Promise<{
+    props: TableProps<TRow>;
+    expose(exposed: {
+        refetch: () => void;
+        reload: () => Promise<void>;
+        rows: import("vue").Ref<TRow[]>;
+    }): void;
+    attrs: any;
+    slots: Partial<{
+        [key: `thead:${string}`]: (_props: {
+            column: import('../../ts/types').TableColumn;
+            orders: TableOrders;
+        }) => any;
+        [key: `cell:${string}`]: (_props: {
+            row: TRow;
+            index: number;
+            column: import('../../ts/types').TableColumn;
+            value: unknown;
+        }) => any;
+        'thead:before': () => any;
+        thead: (_props: {
+            columns: import('../../ts/types').TableColumn[];
+            orders: TableOrders;
+        }) => any;
+        'thead:after': () => any;
+        'row:loading': () => any;
+        'row:empty': () => any;
+        row: (_props: {
+            row: TRow;
+            index: number;
+            columns: import('../../ts/types').TableColumn[];
+        }) => any;
+        pagination: (_props: {
+            page: number;
+            rows: TRow[];
+        }) => any;
+    }>;
+    emit: any;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: TableProps<TRow>;
+        expose(exposed: {
+            refetch: () => void;
+            reload: () => Promise<void>;
+            rows: import("vue").Ref<TRow[]>;
+        }): void;
+        attrs: any;
+        slots: Partial<{
+            [key: `thead:${string}`]: (_props: {
+                column: import('../../ts/types').TableColumn;
+                orders: TableOrders;
+            }) => any;
+            [key: `cell:${string}`]: (_props: {
+                row: TRow;
+                index: number;
+                column: import('../../ts/types').TableColumn;
+                value: unknown;
+            }) => any;
+            'thead:before': () => any;
+            thead: (_props: {
+                columns: import('../../ts/types').TableColumn[];
+                orders: TableOrders;
+            }) => any;
+            'thead:after': () => any;
+            'row:loading': () => any;
+            'row:empty': () => any;
+            row: (_props: {
+                row: TRow;
+                index: number;
+                columns: import('../../ts/types').TableColumn[];
+            }) => any;
+            pagination: (_props: {
+                page: number;
+                rows: TRow[];
+            }) => any;
+        }>;
+        emit: any;
+    } | undefined;
+};
+export default _default;

package/dist/types/ts/types.d.ts

@@ -0,0 +1,53 @@
+import { ShallowRef } from 'vue';
+export type TableColumn = {
+    key: string;
+    title: string;
+    orderable?: boolean;
+};
+export type TableOrders = {
+    [key: string]: 'asc' | 'desc';
+};
+export type TableFilters = {
+    per_page: number;
+    orders: ShallowRef<TableOrders>;
+};
+export type TableFetchParams = {
+    page: number;
+} & TableFilters;
+export type TableRow = {
+    [key: string]: any;
+};
+export type TableProps<T> = {
+    columns: Array<TableColumn>;
+    perPage: number;
+    source: ((_: TableFetchParams) => Promise<T[]> | T[]);
+};
+export type TableSlots<T> = Partial<{
+    'thead:before': () => any;
+    thead: (_props: {
+        columns: TableColumn[];
+        orders: TableOrders;
+    }) => any;
+    'thead:after': () => any;
+    [key: `thead:${string}`]: (_props: {
+        column: TableColumn;
+        orders: TableOrders;
+    }) => any;
+    'row:loading': () => any;
+    'row:empty': () => any;
+    row: (_props: {
+        row: T;
+        index: number;
+        columns: TableColumn[];
+    }) => any;
+    [key: `cell:${string}`]: (_props: {
+        row: T;
+        index: number;
+        column: TableColumn;
+        value: unknown;
+    }) => any;
+    pagination: (_props: {
+        page: number;
+        rows: T[];
+    }) => any;
+}>;

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

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+type UseFiltetableArgs<T, S> = {
+    initialFilters: Ref<T>;
+    loadItems: (_params: T & {
+        page: number;
+    }) => Promise<S[]>;
+};
+export declare const SYNC_STATES: {
+    readonly INITIAL: "INITIAL";
+    readonly SYNCING: "SYNCING";
+    readonly SYNCED: "SYNCED";
+    readonly FAILED: "FAILED";
+};
+type SynsState = (typeof SYNC_STATES)[keyof typeof SYNC_STATES];
+declare const _default: <TFilters, TItem>({ initialFilters, loadItems, }: UseFiltetableArgs<TFilters, TItem>) => {
+    page: Ref<number>;
+    items: Ref<TItem[]>;
+    syncState: Ref<SynsState>;
+    isSyncing: import("vue").ComputedRef<boolean>;
+    isSynced: import("vue").ComputedRef<boolean>;
+    isFailed: import("vue").ComputedRef<boolean>;
+    nextPage: () => void;
+    prevPage: () => void;
+    setPage: (num: number) => void;
+    reload: () => Promise<void>;
+    refetch: () => void;
+};
+export default _default;

package/dist/vst.es.js

@@ -1,271 +1,213 @@
-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({
+import { defineComponent as F, openBlock as n, createElementBlock as u, createElementVNode as a, normalizeClass as $, ref as I, watch as _, computed as b, shallowRef as B, renderSlot as d, Fragment as N, renderList as f, mergeProps as M, toHandlers as V, createTextVNode as E, toDisplayString as P, createCommentVNode as w, unref as t, createBlock as R, withModifiers as A } from "vue";
+const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
+  z
+], O = /* @__PURE__ */ F({
+  __name: "loading_row",
   props: {
-    columnsLength: { type: Number, required: true }
+    columnsLength: { type: Number, required: !0 }
   },
-  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)
-      ]);
-    };
+  setup(v) {
+    const h = Math.floor(Math.random() * 10) + 1;
+    return (o, l) => (n(), u("tr", null, [
+      a("td", {
+        colspan: v.columnsLength,
+        class: $(["vst-loading-row", `vst-loading-row-${h}`])
+      }, H, 10, q)
+    ]));
   }
-});
-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;
-    });
+}), g = {
+  INITIAL: "INITIAL",
+  SYNCING: "SYNCING",
+  SYNCED: "SYNCED",
+  FAILED: "FAILED"
+}, j = ({
+  initialFilters: v,
+  loadItems: h
+}) => {
+  const o = I(1), l = I([]), i = I(g.INITIAL), c = async () => {
+    i.value = g.SYNCING;
+    try {
+      l.value = await h({
+        ...v.value,
+        page: o.value
+      }), i.value = g.SYNCED;
+    } catch {
+      l.value = [], i.value = g.FAILED;
+    }
   };
-  load();
-  watch(combinedFilters, load);
-  return {
-    page,
-    items,
-    syncState,
+  return _(v, c), _(o, c), c(), {
+    page: o,
+    items: l,
+    syncState: i,
+    isSyncing: b(() => i.value === g.SYNCING),
+    isSynced: b(() => i.value === g.SYNCED),
+    isFailed: b(() => i.value === g.FAILED),
     nextPage: () => {
-      page.value += 1;
+      o.value += 1;
     },
     prevPage: () => {
-      page.value -= 1;
+      o.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();
+    setPage: (S) => {
+      o.value = S;
     },
+    reload: c,
     refetch: () => {
-      if (page.value === 1) {
-        load();
-      } else {
-        page.value = 1;
-      }
+      o.value === 1 ? c() : o.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 = {
+}, J = { class: "vst" }, K = { key: 0 }, Q = { key: 0 }, U = ["colspan"], W = ["colspan"], X = {
   key: 0,
-  class: "vst-pagination mt-3"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
+  class: "vst-pagination"
+}, x = /* @__PURE__ */ F({
+  __name: "slim_table",
   props: {
-    columns: null,
-    source: null,
-    perPage: { default: 25 }
+    columns: {},
+    perPage: { default: 25 },
+    source: {}
   },
-  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);
+  setup(v, { expose: h }) {
+    const o = v, l = B({}), i = async (e) => {
+      let r = [];
+      try {
+        r = await o.source(e);
+      } catch {
       }
-      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 r;
+    }, c = (e, r) => {
+      e.preventDefault(), l.value[r] === "asc" ? l.value = { [r]: "desc" } : l.value[r] === "desc" ? l.value = {} : l.value = { [r]: "asc" };
+    }, S = I({
+      per_page: o.perPage,
+      orders: l
+    }), {
+      page: C,
+      isSyncing: m,
+      isSynced: D,
+      prevPage: L,
+      nextPage: Y,
+      reload: T,
+      refetch: G,
+      items: p
+    } = j({
+      initialFilters: S,
+      loadItems: i
     });
-    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))
-            ])
+    return h({
+      refetch: G,
+      reload: T,
+      rows: p
+    }), (e, r) => (n(), u("table", J, [
+      e.columns.length ? (n(), u("thead", K, [
+        d(e.$slots, "thead:before"),
+        d(e.$slots, "thead", {
+          columns: e.columns,
+          orders: l.value
+        }, () => [
+          a("tr", null, [
+            (n(!0), u(N, null, f(e.columns, (s) => (n(), u("th", M({
+              key: s.key,
+              class: ["vst-th", { "vst-orderable": s.orderable }]
+            }, V(s.orderable ? { click: (y) => c(y, s.key) } : {}, !0)), [
+              s.orderable ? (n(), u("div", Q, [
+                d(e.$slots, `thead:${s.key}`, {
+                  column: s,
+                  orders: l.value
+                }, () => [
+                  E(P(s.title), 1)
+                ]),
+                a("i", {
+                  class: $(["vst-orderable-toggle", l.value[s.key]])
+                }, null, 2)
+              ])) : d(e.$slots, `thead:${s.key}`, {
+                key: 1,
+                column: s,
+                orders: l.value
+              }, () => [
+                E(P(s.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
+        d(e.$slots, "thead:after")
+      ])) : w("", !0),
+      a("tbody", null, [
+        t(m) ? d(e.$slots, "row:loading", { key: 0 }, () => [
+          (n(!0), u(N, null, f(e.perPage, (s) => (n(), R(O, {
+            key: `loadingRow${s}`,
+            "columns-length": e.columns.length
+          }, null, 8, ["columns-length"]))), 128))
+        ]) : t(D) && t(p).length === 0 ? d(e.$slots, "row:empty", { key: 1 }, () => [
+          a("tr", null, [
+            a("td", {
+              colspan: e.columns.length
+            }, " No records found ", 8, U)
+          ])
+        ]) : t(D) && t(p).length ? (n(!0), u(N, { key: 2 }, f(t(p), (s, y) => d(e.$slots, "row", {
+          row: s,
+          index: y,
+          columns: e.columns
+        }, () => [
+          (n(), u("tr", {
+            key: s.id || y
+          }, [
+            (n(!0), u(N, null, f(e.columns, (k) => (n(), u("td", {
+              key: k.key
             }, [
-              renderSlot(_ctx.$slots, "pagination", {
-                page: unref(page),
-                rows: unref(rows).value
+              d(e.$slots, `cell:${k.key}`, {
+                row: s,
+                value: s[k.key],
+                column: k,
+                index: y
               }, () => [
-                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)
+                E(P(s[k.key]), 1)
               ])
-            ], 8, _hoisted_5)
-          ])
+            ]))), 128))
+          ]))
+        ])), 256)) : w("", !0)
+      ]),
+      a("tfoot", null, [
+        a("tr", null, [
+          a("td", {
+            colspan: e.columns.length
+          }, [
+            d(e.$slots, "pagination", {
+              page: t(C),
+              rows: t(p)
+            }, () => [
+              t(C) > 1 || t(p).length === e.perPage || t(m) ? (n(), u("ul", X, [
+                a("li", {
+                  class: $(["vst-page-item", { disabled: t(C) === 1 || t(m) }])
+                }, [
+                  a("a", {
+                    class: "vst-page-link",
+                    onClick: r[0] || (r[0] = A(
+                      //@ts-ignore
+                      (...s) => t(L) && t(L)(...s),
+                      ["prevent"]
+                    ))
+                  }, "←")
+                ], 2),
+                a("li", {
+                  class: $(["vst-page-item", { disabled: t(p).length < e.perPage || t(m) }])
+                }, [
+                  a("a", {
+                    class: "vst-page-link",
+                    onClick: r[1] || (r[1] = A(
+                      //@ts-ignore
+                      (...s) => t(Y) && t(Y)(...s),
+                      ["prevent"]
+                    ))
+                  }, "→")
+                ], 2)
+              ])) : w("", !0)
+            ])
+          ], 8, W)
         ])
-      ]);
-    };
+      ])
+    ]));
   }
 });
-export { _sfc_main as default };
+export {
+  x as default
+};
 //# sourceMappingURL=vst.es.js.map

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,\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"vst.es.js","sources":["../src/ts/components/loading_row.vue","../src/ts/use/filterable.ts","../src/ts/components/slim_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, watch, Ref,\n} from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: Ref<T>\n  loadItems: (_params: T & { page: number }) => Promise<S[]>\n}\n\nexport const SYNC_STATES = {\n  INITIAL: 'INITIAL',\n  SYNCING: 'SYNCING',\n  SYNCED: 'SYNCED',\n  FAILED: 'FAILED',\n} as const\n\ntype SynsState = (typeof SYNC_STATES)[keyof typeof SYNC_STATES]\n\nexport default <TFilters, TItem>({\n  initialFilters,\n  loadItems,\n}: UseFiltetableArgs<TFilters, TItem>) => {\n  const page = ref(1)\n  const items: Ref<TItem[]> = ref([])\n  const syncState = ref<SynsState>(SYNC_STATES.INITIAL)\n\n  const reload = async () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    try {\n      items.value = await loadItems({\n        ...initialFilters.value,\n        page: page.value,\n      })\n      syncState.value = SYNC_STATES.SYNCED\n    } catch {\n      items.value = []\n      syncState.value = SYNC_STATES.FAILED\n    }\n  }\n\n  watch(initialFilters, reload)\n  watch(page, reload)\n  reload()\n\n  return {\n    page,\n    items,\n    syncState,\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    nextPage: () => {\n      page.value += 1\n    },\n    prevPage: () => {\n      page.value -= 1\n    },\n    setPage: (num: number) => {\n      page.value = num\n    },\n    reload,\n    refetch: () => {\n      if (page.value === 1) {\n        reload()\n      } else {\n        page.value = 1\n      }\n    },\n  }\n}\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead:before\" />\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: (event: Event) => onOrderClick(event, column.key) } : {}\">\n            <div v-if=\"column.orderable\">\n              <slot\n                :name=\"`thead:${column.key}`\"\n                :column=\"column\"\n                :orders=\"orders\">\n                {{ column.title }}\n              </slot>\n\n              <i :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n            </div>\n\n            <slot\n              v-else\n              :name=\"`thead:${column.key}`\"\n              :column=\"column\"\n              :orders=\"orders\">\n              {{ column.title }}\n            </slot>\n          </th>\n        </tr>\n      </slot>\n      <slot name=\"thead:after\" />\n    </thead>\n    <tbody>\n      <slot v-if=\"isSyncing\" name=\"row:loading\">\n        <LoadingRow v-for=\"i in perPage\" :key=\"`loadingRow${i}`\" :columns-length=\"columns.length\" />\n      </slot>\n\n      <slot v-else-if=\"isSynced && rows.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.length\">\n        <slot\n          v-for=\"(row, i) in rows\"\n          name=\"row\"\n          :row=\"row\"\n          :index=\"i\"\n          :columns=\"columns\">\n          <tr :key=\"row['id'] || i\">\n            <td v-for=\"column in columns\" :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\">\n            <ul v-if=\"page > 1 || rows.length === perPage || isSyncing\" class=\"vst-pagination\">\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 :class=\"['vst-page-item', { disabled: rows.length < perPage || isSyncing }]\">\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\" generic=\"TRow extends TableRow\">\nimport { ref, shallowRef } from 'vue'\nimport LoadingRow from './loading_row.vue'\n\nimport useFilterable from '../use/filterable'\n\nimport type {\n  TableOrders, TableFetchParams, TableRow, TableFilters, TableProps, TableSlots,\n} from '@/ts/types'\n\nconst orders = shallowRef<TableOrders>({})\nconst props = withDefaults(defineProps<TableProps<TRow>>(), {\n  perPage: 25,\n})\n\nconst loadItems = async (params: TableFetchParams) => {\n  let data: TRow[] = []\n\n  try {\n    data = await props.source(params)\n  } catch {\n    // TODO: show errors\n  }\n\n  return data\n}\n\nconst onOrderClick = (event: Event, key: string) => {\n  event.preventDefault()\n\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 initialFilters = ref<TableFilters>({\n  per_page: props.perPage,\n  orders,\n})\n\nconst {\n  page, isSyncing, isSynced, prevPage, nextPage, reload, refetch, items: rows,\n} = useFilterable<TableFilters, TRow>({\n  initialFilters,\n  loadItems,\n})\n\ndefineSlots<TableSlots<TRow>>()\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":["randNum","SYNC_STATES","useFilterable","initialFilters","loadItems","page","ref","items","syncState","reload","watch","computed","num","orders","shallowRef","params","data","props","onOrderClick","event","key","isSyncing","isSynced","prevPage","nextPage","refetch","rows","__expose"],"mappings":";;;;;;;;;AAeA,UAAMA,IAAU,KAAK,MAAM,KAAK,WAAW,EAAE,IAAI;;;;;;;;ICNpCC,IAAc;AAAA,EACzB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAIAC,IAAe,CAAkB;AAAA,EAC/B,gBAAAC;AAAA,EACA,WAAAC;AACF,MAA0C;AAClC,QAAAC,IAAOC,EAAI,CAAC,GACZC,IAAsBD,EAAI,CAAA,CAAE,GAC5BE,IAAYF,EAAeL,EAAY,OAAO,GAE9CQ,IAAS,YAAY;AACzB,IAAAD,EAAU,QAAQP,EAAY;AAE1B,QAAA;AACI,MAAAM,EAAA,QAAQ,MAAMH,EAAU;AAAA,QAC5B,GAAGD,EAAe;AAAA,QAClB,MAAME,EAAK;AAAA,MAAA,CACZ,GACDG,EAAU,QAAQP,EAAY;AAAA,IAAA,QACxB;AACN,MAAAM,EAAM,QAAQ,IACdC,EAAU,QAAQP,EAAY;AAAA,IAChC;AAAA,EAAA;AAGF,SAAAS,EAAMP,GAAgBM,CAAM,GAC5BC,EAAML,GAAMI,CAAM,GACXA,KAEA;AAAA,IACL,MAAAJ;AAAA,IACA,OAAAE;AAAA,IACA,WAAAC;AAAA,IACA,WAAWG,EAAS,MAAMH,EAAU,UAAUP,EAAY,OAAO;AAAA,IACjE,UAAUU,EAAS,MAAMH,EAAU,UAAUP,EAAY,MAAM;AAAA,IAC/D,UAAUU,EAAS,MAAMH,EAAU,UAAUP,EAAY,MAAM;AAAA,IAC/D,UAAU,MAAM;AACd,MAAAI,EAAK,SAAS;AAAA,IAChB;AAAA,IACA,UAAU,MAAM;AACd,MAAAA,EAAK,SAAS;AAAA,IAChB;AAAA,IACA,SAAS,CAACO,MAAgB;AACxB,MAAAP,EAAK,QAAQO;AAAA,IACf;AAAA,IACA,QAAAH;AAAA,IACA,SAAS,MAAM;AACT,MAAAJ,EAAK,UAAU,IACVI,MAEPJ,EAAK,QAAQ;AAAA,IAEjB;AAAA,EAAA;AAEJ;;;;;;;;;;;iBC6BMQ,IAASC,EAAwB,CAAA,CAAE,GAKnCV,IAAY,OAAOW,MAA6B;AACpD,UAAIC,IAAe,CAAA;AAEf,UAAA;AACK,QAAAA,IAAA,MAAMC,EAAM,OAAOF,CAAM;AAAA,MAAA,QAC1B;AAAA,MAER;AAEO,aAAAC;AAAA,IAAA,GAGHE,IAAe,CAACC,GAAcC,MAAgB;AAClD,MAAAD,EAAM,eAAe,GAEjBN,EAAO,MAAMO,CAAG,MAAM,QACxBP,EAAO,QAAQ,EAAE,CAACO,CAAG,GAAG,OAAO,IACtBP,EAAO,MAAMO,CAAG,MAAM,SAC/BP,EAAO,QAAQ,KAEfA,EAAO,QAAQ,EAAE,CAACO,CAAG,GAAG,MAAM;AAAA,IAChC,GAGIjB,IAAiBG,EAAkB;AAAA,MACvC,UAAUW,EAAM;AAAA,MAChB,QAAAJ;AAAA,IAAA,CACD,GAEK;AAAA,MACJ,MAAAR;AAAA,MAAM,WAAAgB;AAAA,MAAW,UAAAC;AAAA,MAAU,UAAAC;AAAA,MAAU,UAAAC;AAAA,MAAU,QAAAf;AAAA,MAAQ,SAAAgB;AAAA,MAAS,OAAOC;AAAA,QACrExB,EAAkC;AAAA,MACpC,gBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,CACD;AAIY,WAAAuB,EAAA;AAAA,MACX,SAAAF;AAAA,MACA,QAAAhB;AAAA,MACA,MAAAiB;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vst.umd.js

@@ -1,2 +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)])])]))}})});
+(function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis<"u"?globalThis:e||self,e.VueSlimTable=g(e.Vue))})(this,function(e){"use strict";const g="",B=["colspan"],V=[e.createElementVNode("div",null,null,-1)],C=e.defineComponent({__name:"loading_row",props:{columnsLength:{type:Number,required:!0}},setup(i){const p=Math.floor(Math.random()*10)+1;return(r,l)=>(e.openBlock(),e.createElementBlock("tr",null,[e.createElementVNode("td",{colspan:i.columnsLength,class:e.normalizeClass(["vst-loading-row",`vst-loading-row-${p}`])},V,10,B)]))}}),a={INITIAL:"INITIAL",SYNCING:"SYNCING",SYNCED:"SYNCED",FAILED:"FAILED"},$=({initialFilters:i,loadItems:p})=>{const r=e.ref(1),l=e.ref([]),s=e.ref(a.INITIAL),c=async()=>{s.value=a.SYNCING;try{l.value=await p({...i.value,page:r.value}),s.value=a.SYNCED}catch{l.value=[],s.value=a.FAILED}};return e.watch(i,c),e.watch(r,c),c(),{page:r,items:l,syncState:s,isSyncing:e.computed(()=>s.value===a.SYNCING),isSynced:e.computed(()=>s.value===a.SYNCED),isFailed:e.computed(()=>s.value===a.FAILED),nextPage:()=>{r.value+=1},prevPage:()=>{r.value-=1},setPage:h=>{r.value=h},reload:c,refetch:()=>{r.value===1?c():r.value=1}}},I={class:"vst"},b={key:0},L={key:0},_=["colspan"],w=["colspan"],D={key:0,class:"vst-pagination"};return e.defineComponent({__name:"slim_table",props:{columns:{},perPage:{default:25},source:{}},setup(i,{expose:p}){const r=i,l=e.shallowRef({}),s=async t=>{let o=[];try{o=await r.source(t)}catch{}return o},c=(t,o)=>{t.preventDefault(),l.value[o]==="asc"?l.value={[o]:"desc"}:l.value[o]==="desc"?l.value={}:l.value={[o]:"asc"}},h=e.ref({per_page:r.perPage,orders:l}),{page:N,isSyncing:k,isSynced:E,prevPage:y,nextPage:S,reload:P,refetch:T,items:d}=$({initialFilters:h,loadItems:s});return p({refetch:T,reload:P,rows:d}),(t,o)=>(e.openBlock(),e.createElementBlock("table",I,[t.columns.length?(e.openBlock(),e.createElementBlock("thead",b,[e.renderSlot(t.$slots,"thead:before"),e.renderSlot(t.$slots,"thead",{columns:t.columns,orders:l.value},()=>[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,n=>(e.openBlock(),e.createElementBlock("th",e.mergeProps({key:n.key,class:["vst-th",{"vst-orderable":n.orderable}]},e.toHandlers(n.orderable?{click:m=>c(m,n.key)}:{},!0)),[n.orderable?(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(t.$slots,`thead:${n.key}`,{column:n,orders:l.value},()=>[e.createTextVNode(e.toDisplayString(n.title),1)]),e.createElementVNode("i",{class:e.normalizeClass(["vst-orderable-toggle",l.value[n.key]])},null,2)])):e.renderSlot(t.$slots,`thead:${n.key}`,{key:1,column:n,orders:l.value},()=>[e.createTextVNode(e.toDisplayString(n.title),1)])],16))),128))])]),e.renderSlot(t.$slots,"thead:after")])):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[e.unref(k)?e.renderSlot(t.$slots,"row:loading",{key:0},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.perPage,n=>(e.openBlock(),e.createBlock(C,{key:`loadingRow${n}`,"columns-length":t.columns.length},null,8,["columns-length"]))),128))]):e.unref(E)&&e.unref(d).length===0?e.renderSlot(t.$slots,"row:empty",{key:1},()=>[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:t.columns.length}," No records found ",8,_)])]):e.unref(E)&&e.unref(d).length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(e.unref(d),(n,m)=>e.renderSlot(t.$slots,"row",{row:n,index:m,columns:t.columns},()=>[(e.openBlock(),e.createElementBlock("tr",{key:n.id||m},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,f=>(e.openBlock(),e.createElementBlock("td",{key:f.key},[e.renderSlot(t.$slots,`cell:${f.key}`,{row:n,value:n[f.key],column:f,index:m},()=>[e.createTextVNode(e.toDisplayString(n[f.key]),1)])]))),128))]))])),256)):e.createCommentVNode("",!0)]),e.createElementVNode("tfoot",null,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:t.columns.length},[e.renderSlot(t.$slots,"pagination",{page:e.unref(N),rows:e.unref(d)},()=>[e.unref(N)>1||e.unref(d).length===t.perPage||e.unref(k)?(e.openBlock(),e.createElementBlock("ul",D,[e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(N)===1||e.unref(k)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:o[0]||(o[0]=e.withModifiers((...n)=>e.unref(y)&&e.unref(y)(...n),["prevent"]))},"←")],2),e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(d).length<t.perPage||e.unref(k)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:o[1]||(o[1]=e.withModifiers((...n)=>e.unref(S)&&e.unref(S)(...n),["prevent"]))},"→")],2)])):e.createCommentVNode("",!0)])],8,w)])])]))}})});
 //# 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,\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"}
+{"version":3,"file":"vst.umd.js","sources":["../src/ts/components/loading_row.vue","../src/ts/use/filterable.ts","../src/ts/components/slim_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, watch, Ref,\n} from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: Ref<T>\n  loadItems: (_params: T & { page: number }) => Promise<S[]>\n}\n\nexport const SYNC_STATES = {\n  INITIAL: 'INITIAL',\n  SYNCING: 'SYNCING',\n  SYNCED: 'SYNCED',\n  FAILED: 'FAILED',\n} as const\n\ntype SynsState = (typeof SYNC_STATES)[keyof typeof SYNC_STATES]\n\nexport default <TFilters, TItem>({\n  initialFilters,\n  loadItems,\n}: UseFiltetableArgs<TFilters, TItem>) => {\n  const page = ref(1)\n  const items: Ref<TItem[]> = ref([])\n  const syncState = ref<SynsState>(SYNC_STATES.INITIAL)\n\n  const reload = async () => {\n    syncState.value = SYNC_STATES.SYNCING\n\n    try {\n      items.value = await loadItems({\n        ...initialFilters.value,\n        page: page.value,\n      })\n      syncState.value = SYNC_STATES.SYNCED\n    } catch {\n      items.value = []\n      syncState.value = SYNC_STATES.FAILED\n    }\n  }\n\n  watch(initialFilters, reload)\n  watch(page, reload)\n  reload()\n\n  return {\n    page,\n    items,\n    syncState,\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    nextPage: () => {\n      page.value += 1\n    },\n    prevPage: () => {\n      page.value -= 1\n    },\n    setPage: (num: number) => {\n      page.value = num\n    },\n    reload,\n    refetch: () => {\n      if (page.value === 1) {\n        reload()\n      } else {\n        page.value = 1\n      }\n    },\n  }\n}\n","<template>\n  <table class=\"vst\">\n    <thead v-if=\"columns.length\">\n      <slot name=\"thead:before\" />\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: (event: Event) => onOrderClick(event, column.key) } : {}\">\n            <div v-if=\"column.orderable\">\n              <slot\n                :name=\"`thead:${column.key}`\"\n                :column=\"column\"\n                :orders=\"orders\">\n                {{ column.title }}\n              </slot>\n\n              <i :class=\"['vst-orderable-toggle', orders[column.key]]\" />\n            </div>\n\n            <slot\n              v-else\n              :name=\"`thead:${column.key}`\"\n              :column=\"column\"\n              :orders=\"orders\">\n              {{ column.title }}\n            </slot>\n          </th>\n        </tr>\n      </slot>\n      <slot name=\"thead:after\" />\n    </thead>\n    <tbody>\n      <slot v-if=\"isSyncing\" name=\"row:loading\">\n        <LoadingRow v-for=\"i in perPage\" :key=\"`loadingRow${i}`\" :columns-length=\"columns.length\" />\n      </slot>\n\n      <slot v-else-if=\"isSynced && rows.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.length\">\n        <slot\n          v-for=\"(row, i) in rows\"\n          name=\"row\"\n          :row=\"row\"\n          :index=\"i\"\n          :columns=\"columns\">\n          <tr :key=\"row['id'] || i\">\n            <td v-for=\"column in columns\" :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\">\n            <ul v-if=\"page > 1 || rows.length === perPage || isSyncing\" class=\"vst-pagination\">\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 :class=\"['vst-page-item', { disabled: rows.length < perPage || isSyncing }]\">\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\" generic=\"TRow extends TableRow\">\nimport { ref, shallowRef } from 'vue'\nimport LoadingRow from './loading_row.vue'\n\nimport useFilterable from '../use/filterable'\n\nimport type {\n  TableOrders, TableFetchParams, TableRow, TableFilters, TableProps, TableSlots,\n} from '@/ts/types'\n\nconst orders = shallowRef<TableOrders>({})\nconst props = withDefaults(defineProps<TableProps<TRow>>(), {\n  perPage: 25,\n})\n\nconst loadItems = async (params: TableFetchParams) => {\n  let data: TRow[] = []\n\n  try {\n    data = await props.source(params)\n  } catch {\n    // TODO: show errors\n  }\n\n  return data\n}\n\nconst onOrderClick = (event: Event, key: string) => {\n  event.preventDefault()\n\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 initialFilters = ref<TableFilters>({\n  per_page: props.perPage,\n  orders,\n})\n\nconst {\n  page, isSyncing, isSynced, prevPage, nextPage, reload, refetch, items: rows,\n} = useFilterable<TableFilters, TRow>({\n  initialFilters,\n  loadItems,\n})\n\ndefineSlots<TableSlots<TRow>>()\n\ndefineExpose({\n  refetch,\n  reload,\n  rows,\n})\n</script>\n"],"names":["randNum","SYNC_STATES","useFilterable","initialFilters","loadItems","page","ref","items","syncState","reload","watch","computed","num","orders","shallowRef","params","data","props","onOrderClick","event","key","isSyncing","isSynced","prevPage","nextPage","refetch","rows","__expose"],"mappings":"kaAeA,MAAMA,EAAU,KAAK,MAAM,KAAK,SAAW,EAAE,EAAI,mMCNpCC,EAAc,CACzB,QAAS,UACT,QAAS,UACT,OAAQ,SACR,OAAQ,QACV,EAIAC,EAAe,CAAkB,CAC/B,eAAAC,EACA,UAAAC,CACF,IAA0C,CAClC,MAAAC,EAAOC,MAAI,CAAC,EACZC,EAAsBD,MAAI,CAAA,CAAE,EAC5BE,EAAYF,EAAAA,IAAeL,EAAY,OAAO,EAE9CQ,EAAS,SAAY,CACzBD,EAAU,MAAQP,EAAY,QAE1B,GAAA,CACIM,EAAA,MAAQ,MAAMH,EAAU,CAC5B,GAAGD,EAAe,MAClB,KAAME,EAAK,KAAA,CACZ,EACDG,EAAU,MAAQP,EAAY,MAAA,MACxB,CACNM,EAAM,MAAQ,GACdC,EAAU,MAAQP,EAAY,MAChC,CAAA,EAGFS,OAAAA,QAAMP,EAAgBM,CAAM,EAC5BC,QAAML,EAAMI,CAAM,EACXA,IAEA,CACL,KAAAJ,EACA,MAAAE,EACA,UAAAC,EACA,UAAWG,EAAS,SAAA,IAAMH,EAAU,QAAUP,EAAY,OAAO,EACjE,SAAUU,EAAS,SAAA,IAAMH,EAAU,QAAUP,EAAY,MAAM,EAC/D,SAAUU,EAAS,SAAA,IAAMH,EAAU,QAAUP,EAAY,MAAM,EAC/D,SAAU,IAAM,CACdI,EAAK,OAAS,CAChB,EACA,SAAU,IAAM,CACdA,EAAK,OAAS,CAChB,EACA,QAAUO,GAAgB,CACxBP,EAAK,MAAQO,CACf,EACA,OAAAH,EACA,QAAS,IAAM,CACTJ,EAAK,QAAU,EACVI,IAEPJ,EAAK,MAAQ,CAEjB,CAAA,CAEJ,iOC6BMQ,EAASC,aAAwB,CAAA,CAAE,EAKnCV,EAAY,MAAOW,GAA6B,CACpD,IAAIC,EAAe,CAAA,EAEf,GAAA,CACKA,EAAA,MAAMC,EAAM,OAAOF,CAAM,CAAA,MAC1B,CAER,CAEO,OAAAC,CAAA,EAGHE,EAAe,CAACC,EAAcC,IAAgB,CAClDD,EAAM,eAAe,EAEjBN,EAAO,MAAMO,CAAG,IAAM,MACxBP,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,MAAO,EACtBP,EAAO,MAAMO,CAAG,IAAM,OAC/BP,EAAO,MAAQ,GAEfA,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,KAAM,CAChC,EAGIjB,EAAiBG,EAAAA,IAAkB,CACvC,SAAUW,EAAM,QAChB,OAAAJ,CAAA,CACD,EAEK,CACJ,KAAAR,EAAM,UAAAgB,EAAW,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,OAAAf,EAAQ,QAAAgB,EAAS,MAAOC,GACrExB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAIY,OAAAuB,EAAA,CACX,QAAAF,EACA,OAAAhB,EACA,KAAAiB,CAAA,CACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-slim-tables",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "files": [
     "dist"
   ],
@@ -12,13 +12,12 @@
       "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"
+    "./src/main": "./src/main.ts",
+    "./filterable": "./src/ts/use/filterable"
   },
   "scripts": {
     "build": "vite build",
-    "lint": "eslint ./src/ts/ --ext 'ts,vue'",
+    "lint": "eslint ./src/ts/ --ext 'ts,vue' --fix",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
@@ -33,28 +32,28 @@
   },
   "author": "fLa <flatra66@gmail.com>",
   "license": "MIT",
-  "private": false,
   "devDependencies": {
-    "@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",
+    "@babel/types": "^7.20.7",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-v8": "^0.34.1",
+    "@vue/test-utils": "^2.4.1",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "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"
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-vue": "^9.17.0",
+    "happy-dom": "^10.8.0",
+    "sass": "^1.64.2",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.8",
+    "vite-plugin-dts": "^3.5.1",
+    "vitest": "^0.34.1",
+    "vue-eslint-parser": "^9.3.1"
   },
   "dependencies": {
-    "vue": "^3.2.33"
+    "vue": "^3.3.0"
   },
-  "types": "dist/types/index.d.ts"
+  "types": "dist/types/main.d.ts",
+  "packageManager": "yarn@3.4.1"
 }

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

@@ -1,14 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

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

package/dist/types/index.d.ts

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

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

@@ -1,22 +0,0 @@
-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;