vue-slim-tables 0.3.6 → 0.3.8

package/dist/{types/main.d.ts → index.d.ts}

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

package/dist/ts/components/LoadingRow.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    columnsLength: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, unknown, 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;
+    };
+}>>, {}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/ts/components/VueSlimTable.vue.d.ts

@@ -0,0 +1,51 @@
+import type { TableOrders, TableProps, TableRow } from '@/ts/types';
+declare const __VLS_export: <TRow extends TableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<TableProps<TRow>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        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;
+        }) => import("vue").VNode[];
+        [key: `cell:${string}`]: (_props: {
+            row: TRow;
+            index: number;
+            column: import("@/ts/types").TableColumn;
+            value: unknown;
+        }) => import("vue").VNode[];
+        'thead:before': () => import("vue").VNode[];
+        thead: (_props: {
+            columns: import("@/ts/types").TableColumn[];
+            orders: TableOrders;
+        }) => import("vue").VNode[];
+        'thead:after': () => import("vue").VNode[];
+        'row:loading': () => import("vue").VNode[];
+        'row:empty': () => import("vue").VNode[];
+        row: (_props: {
+            row: TRow;
+            index: number;
+            columns: import("@/ts/types").TableColumn[];
+        }) => import("vue").VNode[];
+        pagination: (_props: {
+            page: number;
+            rows: TRow[];
+        }) => import("vue").VNode[];
+    }>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/{types/ts/use/filterable.d.ts → ts/composables/useFilterable.d.ts}

@@ -1,4 +1,4 @@
-import { Ref, ComputedRef } from 'vue';
+import { type ComputedRef, type Ref } from 'vue';
 type UseFiltetableArgs<T, S> = {
     initialFilters: ComputedRef<T>;
     loadItems: (_params: T & {
@@ -12,7 +12,7 @@ export declare const SYNC_STATES: {
     readonly FAILED: "FAILED";
 };
 type SynsState = (typeof SYNC_STATES)[keyof typeof SYNC_STATES];
-declare const _default: <TFilters, TItem>({ initialFilters, loadItems, }: UseFiltetableArgs<TFilters, TItem>) => {
+declare const _default: <TFilters, TItem>({ initialFilters, loadItems }: UseFiltetableArgs<TFilters, TItem>) => {
     page: Ref<number>;
     items: Ref<TItem[]>;
     syncState: Ref<SynsState>;

package/dist/{types/ts → ts}/types.d.ts

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

package/dist/vst.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("vue"),d={INITIAL:"INITIAL",SYNCING:"SYNCING",SYNCED:"SYNCED",FAILED:"FAILED"},S=({initialFilters:u,loadItems:i})=>{const r=e.ref(1),n=e.ref([]),s=e.ref(d.INITIAL),a=async()=>{s.value=d.SYNCING;try{n.value=await i({...u.value,page:r.value}),s.value=d.SYNCED}catch{n.value=[],s.value=d.FAILED}};return e.watch(u,a),e.watch(r,a),a(),{page:r,items:n,syncState:s,isSyncing:e.computed(()=>s.value===d.SYNCING),isSynced:e.computed(()=>s.value===d.SYNCED),isFailed:e.computed(()=>s.value===d.FAILED),nextPage:()=>{r.value+=1},prevPage:()=>{r.value-=1},setPage:k=>{r.value=k},reload:a,refetch:()=>{r.value===1?a():r.value=1}}},B=["colspan"],C=e.createElementVNode("div",null,null,-1),V=[C],$=e.defineComponent({__name:"LoadingRow",props:{columnsLength:{type:Number,required:!0}},setup(u){const i=Math.floor(Math.random()*10)+1;return(r,n)=>(e.openBlock(),e.createElementBlock("tr",null,[e.createElementVNode("td",{colspan:u.columnsLength,class:e.normalizeClass(["vst-loading-row",`vst-loading-row-${i}`])},V,10,B)]))}}),I={class:"vst"},L={key:0},b={key:0},w=["colspan"],D=["colspan"],P={key:0,class:"vst-pagination"},F=e.defineComponent({__name:"VueSlimTable",props:{columns:{},perPage:{default:25},source:{}},setup(u,{expose:i}){const r=u,n=e.shallowRef({}),s=async t=>{let o=[];try{o=await r.source(t)}catch{}return o},a=(t,o)=>{t.preventDefault(),n.value[o]==="asc"?n.value={[o]:"desc"}:n.value[o]==="desc"?n.value={}:n.value={[o]:"asc"}},k=e.computed(()=>({per_page:r.perPage,orders:n.value})),{page:v,isSyncing:g,isSynced:f,prevPage:N,nextPage:h,reload:E,refetch:y,items:c}=S({initialFilters:k,loadItems:s});return i({refetch:y,reload:E,rows:c}),(t,o)=>(e.openBlock(),e.createElementBlock("table",I,[t.columns.length?(e.openBlock(),e.createElementBlock("thead",L,[e.renderSlot(t.$slots,"thead:before"),e.renderSlot(t.$slots,"thead",{columns:t.columns,orders:n.value},()=>[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,l=>(e.openBlock(),e.createElementBlock("th",e.mergeProps({key:l.key,class:["vst-th",{"vst-orderable":l.orderable}]},e.toHandlers(l.orderable?{click:p=>a(p,l.key)}:{},!0)),[l.orderable?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(t.$slots,`thead:${l.key}`,{column:l,orders:n.value},()=>[e.createTextVNode(e.toDisplayString(l.title),1)]),e.createElementVNode("i",{class:e.normalizeClass(["vst-orderable-toggle",n.value[l.key]])},null,2)])):e.renderSlot(t.$slots,`thead:${l.key}`,{key:1,column:l,orders:n.value},()=>[e.createTextVNode(e.toDisplayString(l.title),1)])],16))),128))])]),e.renderSlot(t.$slots,"thead:after")])):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[e.unref(g)?e.renderSlot(t.$slots,"row:loading",{key:0},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.perPage,l=>(e.openBlock(),e.createBlock($,{key:`loadingRow${l}`,"columns-length":t.columns.length},null,8,["columns-length"]))),128))]):e.unref(f)&&e.unref(c).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,w)])]):e.unref(f)&&e.unref(c).length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(e.unref(c),(l,p)=>e.renderSlot(t.$slots,"row",{row:l,index:p,columns:t.columns},()=>[(e.openBlock(),e.createElementBlock("tr",{key:l.id||p},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,m=>(e.openBlock(),e.createElementBlock("td",{key:m.key},[e.renderSlot(t.$slots,`cell:${m.key}`,{row:l,value:l[m.key],column:m,index:p},()=>[e.createTextVNode(e.toDisplayString(l[m.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(v),rows:e.unref(c)},()=>[e.unref(v)>1||e.unref(c).length===t.perPage||e.unref(g)?(e.openBlock(),e.createElementBlock("ul",P,[e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(v)===1||e.unref(g)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:o[0]||(o[0]=e.withModifiers((...l)=>e.unref(N)&&e.unref(N)(...l),["prevent"]))},"←")],2),e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(c).length<t.perPage||e.unref(g)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:o[1]||(o[1]=e.withModifiers((...l)=>e.unref(h)&&e.unref(h)(...l),["prevent"]))},"→")],2)])):e.createCommentVNode("",!0)])],8,D)])])]))}});module.exports=F;
+//# sourceMappingURL=vst.cjs.js.map

package/dist/vst.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vst.cjs.js","sources":["../src/ts/composables/useFilterable.ts","../src/ts/components/LoadingRow.vue","../src/ts/components/VueSlimTable.vue"],"sourcesContent":["import { type ComputedRef, computed, type Ref, ref, watch } from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: ComputedRef<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>({ initialFilters, loadItems }: 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  <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","<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 { computed, shallowRef } from 'vue'\nimport useFilterable from '@/ts/composables/useFilterable'\nimport type { TableFetchParams, TableFilters, TableOrders, TableProps, TableRow, TableSlots } from '@/ts/types'\nimport LoadingRow from './LoadingRow.vue'\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 = computed<TableFilters>(() => ({\n  per_page: props.perPage,\n  orders: orders.value,\n}))\n\nconst {\n  page,\n  isSyncing,\n  isSynced,\n  prevPage,\n  nextPage,\n  reload,\n  refetch,\n  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":["SYNC_STATES","useFilterable","initialFilters","loadItems","page","ref","items","syncState","reload","watch","computed","num","randNum","orders","shallowRef","params","data","props","onOrderClick","event","key","isSyncing","isSynced","prevPage","nextPage","refetch","rows","__expose"],"mappings":"oCAOaA,EAAc,CACzB,QAAS,UACT,QAAS,UACT,OAAQ,SACR,OAAQ,QACV,EAIAC,EAAe,CAAkB,CAAE,eAAAC,EAAgB,UAAAC,KAAoD,CACrG,MAAMC,EAAOC,EAAAA,IAAI,CAAC,EACZC,EAAsBD,EAAAA,IAAI,EAAE,EAC5BE,EAAYF,EAAAA,IAAeL,EAAY,OAAO,EAE9CQ,EAAS,SAAY,CACzBD,EAAU,MAAQP,EAAY,QAE9B,GAAI,CACFM,EAAM,MAAQ,MAAMH,EAAU,CAC5B,GAAGD,EAAe,MAClB,KAAME,EAAK,KAAA,CACZ,EACDG,EAAU,MAAQP,EAAY,MAChC,MAAQ,CACNM,EAAM,MAAQ,CAAA,EACdC,EAAU,MAAQP,EAAY,MAChC,CACF,EAEAS,OAAAA,EAAAA,MAAMP,EAAgBM,CAAM,EAC5BC,EAAAA,MAAML,EAAMI,CAAM,EAClBA,EAAA,EAEO,CACL,KAAAJ,EACA,MAAAE,EACA,UAAAC,EACA,UAAWG,EAAAA,SAAS,IAAMH,EAAU,QAAUP,EAAY,OAAO,EACjE,SAAUU,EAAAA,SAAS,IAAMH,EAAU,QAAUP,EAAY,MAAM,EAC/D,SAAUU,EAAAA,SAAS,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,EACjBI,EAAA,EAEAJ,EAAK,MAAQ,CAEjB,CAAA,CAEJ,mKClDA,MAAMQ,EAAU,KAAK,MAAM,KAAK,OAAA,EAAW,EAAE,EAAI,+ZCgF3CC,EAASC,EAAAA,WAAwB,EAAE,EAKnCX,EAAY,MAAOY,GAA6B,CACpD,IAAIC,EAAe,CAAA,EAEnB,GAAI,CACFA,EAAO,MAAMC,EAAM,OAAOF,CAAM,CAClC,MAAQ,CAER,CAEA,OAAOC,CACT,EAEME,EAAe,CAACC,EAAcC,IAAgB,CAClDD,EAAM,eAAA,EAEFN,EAAO,MAAMO,CAAG,IAAM,MACxBP,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,MAAA,EACfP,EAAO,MAAMO,CAAG,IAAM,OAC/BP,EAAO,MAAQ,CAAA,EAEfA,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,KAAA,CAE5B,EAEMlB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUO,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAT,EACA,UAAAiB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAhB,EACA,QAAAiB,EACA,MAAOC,CAAA,EACLzB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAwB,EAAa,CACX,QAAAF,EACA,OAAAjB,EACA,KAAAkB,CAAA,CACD"}

package/dist/vst.es.js

@@ -1,29 +1,10 @@
-import { defineComponent as F, openBlock as n, createElementBlock as u, createElementVNode as a, normalizeClass as $, ref as b, watch as _, computed as I, 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: !0 }
-  },
-  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)
-    ]));
-  }
-}), g = {
+import { ref as b, watch as A, computed as S, defineComponent as T, createElementBlock as u, openBlock as n, createElementVNode as a, normalizeClass as $, shallowRef as V, createCommentVNode as E, renderSlot as d, Fragment as N, renderList as f, mergeProps as B, toHandlers as M, createTextVNode as L, toDisplayString as P, unref as t, createBlock as R, withModifiers as F } from "vue";
+const g = {
   INITIAL: "INITIAL",
   SYNCING: "SYNCING",
   SYNCED: "SYNCED",
   FAILED: "FAILED"
-}, j = ({
-  initialFilters: v,
-  loadItems: h
-}) => {
+}, q = ({ initialFilters: v, loadItems: h }) => {
   const o = b(1), l = b([]), i = b(g.INITIAL), c = async () => {
     i.value = g.SYNCING;
     try {
@@ -35,39 +16,55 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
       l.value = [], i.value = g.FAILED;
     }
   };
-  return _(v, c), _(o, c), c(), {
+  return A(v, c), A(o, c), c(), {
     page: o,
     items: l,
     syncState: i,
-    isSyncing: I(() => i.value === g.SYNCING),
-    isSynced: I(() => i.value === g.SYNCED),
-    isFailed: I(() => i.value === g.FAILED),
+    isSyncing: S(() => i.value === g.SYNCING),
+    isSynced: S(() => i.value === g.SYNCED),
+    isFailed: S(() => i.value === g.FAILED),
     nextPage: () => {
       o.value += 1;
     },
     prevPage: () => {
       o.value -= 1;
     },
-    setPage: (S) => {
-      o.value = S;
+    setPage: (I) => {
+      o.value = I;
     },
     reload: c,
     refetch: () => {
       o.value === 1 ? c() : o.value = 1;
     }
   };
-}, J = { class: "vst" }, K = { key: 0 }, Q = { key: 0 }, U = ["colspan"], W = ["colspan"], X = {
+}, z = ["colspan"], H = /* @__PURE__ */ a("div", null, null, -1), O = [
+  H
+], j = /* @__PURE__ */ T({
+  __name: "LoadingRow",
+  props: {
+    columnsLength: { type: Number, required: !0 }
+  },
+  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}`])
+      }, O, 10, z)
+    ]));
+  }
+}), J = { class: "vst" }, K = { key: 0 }, Q = { key: 0 }, U = ["colspan"], W = ["colspan"], X = {
   key: 0,
   class: "vst-pagination"
-}, x = /* @__PURE__ */ F({
-  __name: "slim_table",
+}, x = /* @__PURE__ */ T({
+  __name: "VueSlimTable",
   props: {
     columns: {},
     perPage: { default: 25 },
     source: {}
   },
   setup(v, { expose: h }) {
-    const o = v, l = B({}), i = async (e) => {
+    const o = v, l = V({}), i = async (e) => {
       let r = [];
       try {
         r = await o.source(e);
@@ -76,25 +73,25 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
       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(() => ({
+    }, I = S(() => ({
       per_page: o.perPage,
-      orders: l
+      orders: l.value
     })), {
       page: C,
       isSyncing: m,
-      isSynced: D,
-      prevPage: L,
+      isSynced: w,
+      prevPage: D,
       nextPage: Y,
-      reload: T,
+      reload: _,
       refetch: G,
       items: p
-    } = j({
-      initialFilters: S,
+    } = q({
+      initialFilters: I,
       loadItems: i
     });
     return h({
       refetch: G,
-      reload: T,
+      reload: _,
       rows: p
     }), (e, r) => (n(), u("table", J, [
       e.columns.length ? (n(), u("thead", K, [
@@ -104,16 +101,16 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
           orders: l.value
         }, () => [
           a("tr", null, [
-            (n(!0), u(N, null, f(e.columns, (s) => (n(), u("th", M({
+            (n(!0), u(N, null, f(e.columns, (s) => (n(), u("th", B({
               key: s.key,
               class: ["vst-th", { "vst-orderable": s.orderable }]
-            }, V(s.orderable ? { click: (y) => c(y, s.key) } : {}, !0)), [
+            }, M(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)
+                  L(P(s.title), 1)
                 ]),
                 a("i", {
                   class: $(["vst-orderable-toggle", l.value[s.key]])
@@ -123,26 +120,26 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
                 column: s,
                 orders: l.value
               }, () => [
-                E(P(s.title), 1)
+                L(P(s.title), 1)
               ])
             ], 16))), 128))
           ])
         ]),
         d(e.$slots, "thead:after")
-      ])) : w("", !0),
+      ])) : E("", !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, {
+          (n(!0), u(N, null, f(e.perPage, (s) => (n(), R(j, {
             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 }, () => [
+        ]) : t(w) && 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", {
+        ]) : t(w) && 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
@@ -159,11 +156,11 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
                 column: k,
                 index: y
               }, () => [
-                E(P(s[k.key]), 1)
+                L(P(s[k.key]), 1)
               ])
             ]))), 128))
           ]))
-        ])), 256)) : w("", !0)
+        ])), 256)) : E("", !0)
       ]),
       a("tfoot", null, [
         a("tr", null, [
@@ -180,9 +177,9 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
                 }, [
                   a("a", {
                     class: "vst-page-link",
-                    onClick: r[0] || (r[0] = A(
+                    onClick: r[0] || (r[0] = F(
                       //@ts-ignore
-                      (...s) => t(L) && t(L)(...s),
+                      (...s) => t(D) && t(D)(...s),
                       ["prevent"]
                     ))
                   }, "←")
@@ -192,14 +189,14 @@ const q = ["colspan"], z = /* @__PURE__ */ a("div", null, null, -1), H = [
                 }, [
                   a("a", {
                     class: "vst-page-link",
-                    onClick: r[1] || (r[1] = A(
+                    onClick: r[1] || (r[1] = F(
                       //@ts-ignore
                       (...s) => t(Y) && t(Y)(...s),
                       ["prevent"]
                     ))
                   }, "→")
                 ], 2)
-              ])) : w("", !0)
+              ])) : E("", !0)
             ])
           ], 8, W)
         ])

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/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, ComputedRef,\n} from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: ComputedRef<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 { computed, 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 = computed<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,IAAiBQ,EAAuB,OAAO;AAAA,MACnD,UAAUM,EAAM;AAAA,MAChB,QAAAJ;AAAA,IACA,EAAA,GAEI;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"vst.es.js","sources":["../src/ts/composables/useFilterable.ts","../src/ts/components/LoadingRow.vue","../src/ts/components/VueSlimTable.vue"],"sourcesContent":["import { type ComputedRef, computed, type Ref, ref, watch } from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: ComputedRef<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>({ initialFilters, loadItems }: 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  <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","<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 { computed, shallowRef } from 'vue'\nimport useFilterable from '@/ts/composables/useFilterable'\nimport type { TableFetchParams, TableFilters, TableOrders, TableProps, TableRow, TableSlots } from '@/ts/types'\nimport LoadingRow from './LoadingRow.vue'\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 = computed<TableFilters>(() => ({\n  per_page: props.perPage,\n  orders: orders.value,\n}))\n\nconst {\n  page,\n  isSyncing,\n  isSynced,\n  prevPage,\n  nextPage,\n  reload,\n  refetch,\n  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":["SYNC_STATES","useFilterable","initialFilters","loadItems","page","ref","items","syncState","reload","watch","computed","num","randNum","orders","shallowRef","params","data","props","onOrderClick","event","key","isSyncing","isSynced","prevPage","nextPage","refetch","rows","__expose"],"mappings":";AAOO,MAAMA,IAAc;AAAA,EACzB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAIAC,IAAe,CAAkB,EAAE,gBAAAC,GAAgB,WAAAC,QAAoD;AACrG,QAAMC,IAAOC,EAAI,CAAC,GACZC,IAAsBD,EAAI,EAAE,GAC5BE,IAAYF,EAAeL,EAAY,OAAO,GAE9CQ,IAAS,YAAY;AACzB,IAAAD,EAAU,QAAQP,EAAY;AAE9B,QAAI;AACF,MAAAM,EAAM,QAAQ,MAAMH,EAAU;AAAA,QAC5B,GAAGD,EAAe;AAAA,QAClB,MAAME,EAAK;AAAA,MAAA,CACZ,GACDG,EAAU,QAAQP,EAAY;AAAA,IAChC,QAAQ;AACN,MAAAM,EAAM,QAAQ,CAAA,GACdC,EAAU,QAAQP,EAAY;AAAA,IAChC;AAAA,EACF;AAEA,SAAAS,EAAMP,GAAgBM,CAAM,GAC5BC,EAAML,GAAMI,CAAM,GAClBA,EAAA,GAEO;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;AACb,MAAIJ,EAAK,UAAU,IACjBI,EAAA,IAEAJ,EAAK,QAAQ;AAAA,IAEjB;AAAA,EAAA;AAEJ;;;;;;;;AClDA,UAAMQ,IAAU,KAAK,MAAM,KAAK,OAAA,IAAW,EAAE,IAAI;;;;;;;;;;;;;;;;;;;iBCgF3CC,IAASC,EAAwB,EAAE,GAKnCX,IAAY,OAAOY,MAA6B;AACpD,UAAIC,IAAe,CAAA;AAEnB,UAAI;AACF,QAAAA,IAAO,MAAMC,EAAM,OAAOF,CAAM;AAAA,MAClC,QAAQ;AAAA,MAER;AAEA,aAAOC;AAAA,IACT,GAEME,IAAe,CAACC,GAAcC,MAAgB;AAClD,MAAAD,EAAM,eAAA,GAEFN,EAAO,MAAMO,CAAG,MAAM,QACxBP,EAAO,QAAQ,EAAE,CAACO,CAAG,GAAG,OAAA,IACfP,EAAO,MAAMO,CAAG,MAAM,SAC/BP,EAAO,QAAQ,CAAA,IAEfA,EAAO,QAAQ,EAAE,CAACO,CAAG,GAAG,MAAA;AAAA,IAE5B,GAEMlB,IAAiBQ,EAAuB,OAAO;AAAA,MACnD,UAAUO,EAAM;AAAA,MAChB,QAAQJ,EAAO;AAAA,IAAA,EACf,GAEI;AAAA,MACJ,MAAAT;AAAA,MACA,WAAAiB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAhB;AAAA,MACA,SAAAiB;AAAA,MACA,OAAOC;AAAA,IAAA,IACLzB,EAAkC;AAAA,MACpC,gBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,CACD;AAID,WAAAwB,EAAa;AAAA,MACX,SAAAF;AAAA,MACA,QAAAjB;AAAA,MACA,MAAAkB;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vst.umd.js

@@ -1,2 +1,2 @@
-(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(o,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 o=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:o.value}),s.value=a.SYNCED}catch{l.value=[],s.value=a.FAILED}};return e.watch(i,c),e.watch(o,c),c(),{page:o,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:()=>{o.value+=1},prevPage:()=>{o.value-=1},setPage:h=>{o.value=h},reload:c,refetch:()=>{o.value===1?c():o.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 o=i,l=e.shallowRef({}),s=async t=>{let r=[];try{r=await o.source(t)}catch{}return r},c=(t,r)=>{t.preventDefault(),l.value[r]==="asc"?l.value={[r]:"desc"}:l.value[r]==="desc"?l.value={}:l.value={[r]:"asc"}},h=e.computed(()=>({per_page:o.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,r)=>(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:r[0]||(r[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:r[1]||(r[1]=e.withModifiers((...n)=>e.unref(S)&&e.unref(S)(...n),["prevent"]))},"→")],2)])):e.createCommentVNode("",!0)])],8,w)])])]))}})});
+(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VueSlimTable=s(e.Vue))})(this,(function(e){"use strict";const s={INITIAL:"INITIAL",SYNCING:"SYNCING",SYNCED:"SYNCED",FAILED:"FAILED"},S=({initialFilters:i,loadItems:p})=>{const o=e.ref(1),l=e.ref([]),a=e.ref(s.INITIAL),d=async()=>{a.value=s.SYNCING;try{l.value=await p({...i.value,page:o.value}),a.value=s.SYNCED}catch{l.value=[],a.value=s.FAILED}};return e.watch(i,d),e.watch(o,d),d(),{page:o,items:l,syncState:a,isSyncing:e.computed(()=>a.value===s.SYNCING),isSynced:e.computed(()=>a.value===s.SYNCED),isFailed:e.computed(()=>a.value===s.FAILED),nextPage:()=>{o.value+=1},prevPage:()=>{o.value-=1},setPage:k=>{o.value=k},reload:d,refetch:()=>{o.value===1?d():o.value=1}}},B=["colspan"],V=[e.createElementVNode("div",null,null,-1)],C=e.defineComponent({__name:"LoadingRow",props:{columnsLength:{type:Number,required:!0}},setup(i){const p=Math.floor(Math.random()*10)+1;return(o,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)]))}}),$={class:"vst"},I={key:0},b={key:0},L=["colspan"],w=["colspan"],D={key:0,class:"vst-pagination"};return e.defineComponent({__name:"VueSlimTable",props:{columns:{},perPage:{default:25},source:{}},setup(i,{expose:p}){const o=i,l=e.shallowRef({}),a=async t=>{let r=[];try{r=await o.source(t)}catch{}return r},d=(t,r)=>{t.preventDefault(),l.value[r]==="asc"?l.value={[r]:"desc"}:l.value[r]==="desc"?l.value={}:l.value={[r]:"asc"}},k=e.computed(()=>({per_page:o.perPage,orders:l.value})),{page:h,isSyncing:g,isSynced:N,prevPage:E,nextPage:y,reload:T,refetch:P,items:c}=S({initialFilters:k,loadItems:a});return p({refetch:P,reload:T,rows:c}),(t,r)=>(e.openBlock(),e.createElementBlock("table",$,[t.columns.length?(e.openBlock(),e.createElementBlock("thead",I,[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=>d(m,n.key)}:{},!0)),[n.orderable?(e.openBlock(),e.createElementBlock("div",b,[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(g)?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(N)&&e.unref(c).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,L)])]):e.unref(N)&&e.unref(c).length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(e.unref(c),(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(h),rows:e.unref(c)},()=>[e.unref(h)>1||e.unref(c).length===t.perPage||e.unref(g)?(e.openBlock(),e.createElementBlock("ul",D,[e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(h)===1||e.unref(g)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:r[0]||(r[0]=e.withModifiers((...n)=>e.unref(E)&&e.unref(E)(...n),["prevent"]))},"←")],2),e.createElementVNode("li",{class:e.normalizeClass(["vst-page-item",{disabled:e.unref(c).length<t.perPage||e.unref(g)}])},[e.createElementVNode("a",{class:"vst-page-link",onClick:r[1]||(r[1]=e.withModifiers((...n)=>e.unref(y)&&e.unref(y)(...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/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, ComputedRef,\n} from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: ComputedRef<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 { computed, 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 = computed<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,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUM,EAAM,QAChB,OAAAJ,CACA,EAAA,EAEI,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"}
+{"version":3,"file":"vst.umd.js","sources":["../src/ts/composables/useFilterable.ts","../src/ts/components/LoadingRow.vue","../src/ts/components/VueSlimTable.vue"],"sourcesContent":["import { type ComputedRef, computed, type Ref, ref, watch } from 'vue'\n\ntype UseFiltetableArgs<T, S> = {\n  initialFilters: ComputedRef<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>({ initialFilters, loadItems }: 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  <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","<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 { computed, shallowRef } from 'vue'\nimport useFilterable from '@/ts/composables/useFilterable'\nimport type { TableFetchParams, TableFilters, TableOrders, TableProps, TableRow, TableSlots } from '@/ts/types'\nimport LoadingRow from './LoadingRow.vue'\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 = computed<TableFilters>(() => ({\n  per_page: props.perPage,\n  orders: orders.value,\n}))\n\nconst {\n  page,\n  isSyncing,\n  isSynced,\n  prevPage,\n  nextPage,\n  reload,\n  refetch,\n  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":["SYNC_STATES","useFilterable","initialFilters","loadItems","page","ref","items","syncState","reload","watch","computed","num","randNum","orders","shallowRef","params","data","props","onOrderClick","event","key","isSyncing","isSynced","prevPage","nextPage","refetch","rows","__expose"],"mappings":"0PAOO,MAAMA,EAAc,CACzB,QAAS,UACT,QAAS,UACT,OAAQ,SACR,OAAQ,QACV,EAIAC,EAAe,CAAkB,CAAE,eAAAC,EAAgB,UAAAC,KAAoD,CACrG,MAAMC,EAAOC,EAAAA,IAAI,CAAC,EACZC,EAAsBD,EAAAA,IAAI,EAAE,EAC5BE,EAAYF,EAAAA,IAAeL,EAAY,OAAO,EAE9CQ,EAAS,SAAY,CACzBD,EAAU,MAAQP,EAAY,QAE9B,GAAI,CACFM,EAAM,MAAQ,MAAMH,EAAU,CAC5B,GAAGD,EAAe,MAClB,KAAME,EAAK,KAAA,CACZ,EACDG,EAAU,MAAQP,EAAY,MAChC,MAAQ,CACNM,EAAM,MAAQ,CAAA,EACdC,EAAU,MAAQP,EAAY,MAChC,CACF,EAEAS,OAAAA,EAAAA,MAAMP,EAAgBM,CAAM,EAC5BC,EAAAA,MAAML,EAAMI,CAAM,EAClBA,EAAA,EAEO,CACL,KAAAJ,EACA,MAAAE,EACA,UAAAC,EACA,UAAWG,EAAAA,SAAS,IAAMH,EAAU,QAAUP,EAAY,OAAO,EACjE,SAAUU,EAAAA,SAAS,IAAMH,EAAU,QAAUP,EAAY,MAAM,EAC/D,SAAUU,EAAAA,SAAS,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,EACjBI,EAAA,EAEAJ,EAAK,MAAQ,CAEjB,CAAA,CAEJ,+JClDA,MAAMQ,EAAU,KAAK,MAAM,KAAK,OAAA,EAAW,EAAE,EAAI,oaCgF3CC,EAASC,EAAAA,WAAwB,EAAE,EAKnCX,EAAY,MAAOY,GAA6B,CACpD,IAAIC,EAAe,CAAA,EAEnB,GAAI,CACFA,EAAO,MAAMC,EAAM,OAAOF,CAAM,CAClC,MAAQ,CAER,CAEA,OAAOC,CACT,EAEME,EAAe,CAACC,EAAcC,IAAgB,CAClDD,EAAM,eAAA,EAEFN,EAAO,MAAMO,CAAG,IAAM,MACxBP,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,MAAA,EACfP,EAAO,MAAMO,CAAG,IAAM,OAC/BP,EAAO,MAAQ,CAAA,EAEfA,EAAO,MAAQ,CAAE,CAACO,CAAG,EAAG,KAAA,CAE5B,EAEMlB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUO,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAT,EACA,UAAAiB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAhB,EACA,QAAAiB,EACA,MAAOC,CAAA,EACLzB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAwB,EAAa,CACX,QAAAF,EACA,OAAAjB,EACA,KAAAkB,CAAA,CACD"}

package/package.json

@@ -1,26 +1,29 @@
 {
   "name": "vue-slim-tables",
-  "version": "0.3.6",
+  "version": "0.3.8",
+  "type": "module",
+  "main": "./dist/vst.cjs.js",
+  "module": "./dist/vst.es.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "main": "./dist/vst.umd.js",
-  "module": "./dist/vst.es.js",
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "lint": "npx @biomejs/biome check ./src/ts/ --write",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/vst.es.js",
-      "require": "./dist/vst.umd.js"
+      "require": "./dist/vst.cjs.js"
     },
     "./stylesheets": "dist/style.css",
-    "./src/main": "./src/main.ts",
+    "./src/index": "./src/index.ts",
     "./filterable": "./src/ts/use/filterable"
   },
-  "scripts": {
-    "build": "vite build",
-    "lint": "eslint ./src/ts/ --ext 'ts,vue' --fix",
-    "test": "vitest",
-    "coverage": "vitest run --coverage"
-  },
   "keywords": [
     "vue",
     "table"
@@ -33,27 +36,17 @@
   "author": "fLa <flatra66@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@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.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"
+    "@biomejs/biome": "2.3.10",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.0.11",
+    "sass": "^1.97.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.1.8"
   },
-  "dependencies": {
+  "peerDependencies": {
     "vue": "^3.3.0"
-  },
-  "types": "dist/types/main.d.ts",
-  "packageManager": "yarn@3.4.1"
+  }
 }

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

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

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