vue-slim-tables 0.3.11 → 0.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,5 +1,3 @@
1
1
  import './stylesheets/index.scss';
2
- import VueSlimTable from './ts/components/VueSlimTable.vue';
3
- import type { TableColumn, TableFetchParams, TableFilters, TableOrders, TableProps, TableRow } from './ts/types';
4
- export default VueSlimTable;
5
- export type { TableColumn, TableOrders, TableFetchParams, TableRow, TableFilters, TableProps };
2
+ export type { TableColumn, TableOrders, TableFetchParams, TableRow, TableFilters, TableProps } from './ts/types';
3
+ export { default } from './ts/components/VueSlimTable.vue';
@@ -1,4 +1,4 @@
1
- import type { TableOrders, TableProps, TableRow } from '@/ts/types';
1
+ import type { TableOrders, TableProps, TableRow } from '../types';
2
2
  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<{
3
3
  props: __VLS_PrettifyLocal<TableProps<TRow>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (typeof globalThis extends {
4
4
  __VLS_PROPS_FALLBACK: infer P;
@@ -11,18 +11,18 @@ declare const __VLS_export: <TRow extends TableRow>(__VLS_props: NonNullable<Awa
11
11
  attrs: any;
12
12
  slots: Partial<{
13
13
  [key: `thead:${string}`]: (_props: {
14
- column: import("@/ts/types").TableColumn;
14
+ column: import("../types").TableColumn;
15
15
  orders: TableOrders;
16
16
  }) => import("vue").VNode[];
17
17
  [key: `cell:${string}`]: (_props: {
18
18
  row: TRow;
19
19
  index: number;
20
- column: import("@/ts/types").TableColumn;
20
+ column: import("../types").TableColumn;
21
21
  value: unknown;
22
22
  }) => import("vue").VNode[];
23
23
  'thead:before': () => import("vue").VNode[];
24
24
  thead: (_props: {
25
- columns: import("@/ts/types").TableColumn[];
25
+ columns: import("../types").TableColumn[];
26
26
  orders: TableOrders;
27
27
  }) => import("vue").VNode[];
28
28
  'thead:after': () => import("vue").VNode[];
@@ -31,7 +31,7 @@ declare const __VLS_export: <TRow extends TableRow>(__VLS_props: NonNullable<Awa
31
31
  row: (_props: {
32
32
  row: TRow;
33
33
  index: number;
34
- columns: import("@/ts/types").TableColumn[];
34
+ columns: import("../types").TableColumn[];
35
35
  }) => import("vue").VNode[];
36
36
  pagination: (_props: {
37
37
  page: number;
@@ -1 +1 @@
1
- {"version":3,"file":"vst.cjs.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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","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,6lBC8BMQ,EAASC,EAAAA,WAAwB,EAAE,EAKnCV,EAAY,MAAOW,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,EAEMjB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUM,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAR,EACA,UAAAgB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAf,EACA,QAAAgB,EACA,MAAOC,CAAA,EACLxB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAuB,EAAa,CACX,QAAAF,EACA,OAAAhB,EACA,KAAAiB,CAAA,CACD"}
1
+ {"version":3,"file":"vst.cjs.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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 '../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","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,6lBC8BMQ,EAASC,EAAAA,WAAwB,EAAE,EAKnCV,EAAY,MAAOW,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,EAEMjB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUM,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAR,EACA,UAAAgB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAf,EACA,QAAAgB,EACA,MAAOC,CAAA,EACLxB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAuB,EAAa,CACX,QAAAF,EACA,OAAAhB,EACA,KAAAiB,CAAA,CACD"}
@@ -1 +1 @@
1
- {"version":3,"file":"vst.es.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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","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;;;;;;;;;;;;;;;;;;;;;;;;;;iBC8BMQ,IAASC,EAAwB,EAAE,GAKnCV,IAAY,OAAOW,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,GAEMjB,IAAiBQ,EAAuB,OAAO;AAAA,MACnD,UAAUM,EAAM;AAAA,MAChB,QAAQJ,EAAO;AAAA,IAAA,EACf,GAEI;AAAA,MACJ,MAAAR;AAAA,MACA,WAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAf;AAAA,MACA,SAAAgB;AAAA,MACA,OAAOC;AAAA,IAAA,IACLxB,EAAkC;AAAA,MACpC,gBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,CACD;AAID,WAAAuB,EAAa;AAAA,MACX,SAAAF;AAAA,MACA,QAAAhB;AAAA,MACA,MAAAiB;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"vst.es.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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 '../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","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;;;;;;;;;;;;;;;;;;;;;;;;;;iBC8BMQ,IAASC,EAAwB,EAAE,GAKnCV,IAAY,OAAOW,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,GAEMjB,IAAiBQ,EAAuB,OAAO;AAAA,MACnD,UAAUM,EAAM;AAAA,MAChB,QAAQJ,EAAO;AAAA,IAAA,EACf,GAEI;AAAA,MACJ,MAAAR;AAAA,MACA,WAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAf;AAAA,MACA,SAAAgB;AAAA,MACA,OAAOC;AAAA,IAAA,IACLxB,EAAkC;AAAA,MACpC,gBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,CACD;AAID,WAAAuB,EAAa;AAAA,MACX,SAAAF;AAAA,MACA,QAAAhB;AAAA,MACA,MAAAiB;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"vst.umd.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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","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,8lBC8BMQ,EAASC,EAAAA,WAAwB,EAAE,EAKnCV,EAAY,MAAOW,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,EAEMjB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUM,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAR,EACA,UAAAgB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAf,EACA,QAAAgB,EACA,MAAOC,CAAA,EACLxB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAuB,EAAa,CACX,QAAAF,EACA,OAAAhB,EACA,KAAAiB,CAAA,CACD"}
1
+ {"version":3,"file":"vst.umd.js","sources":["../src/ts/composables/useFilterable.ts","../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 <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 '../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","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,8lBC8BMQ,EAASC,EAAAA,WAAwB,EAAE,EAKnCV,EAAY,MAAOW,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,EAEMjB,EAAiBQ,EAAAA,SAAuB,KAAO,CACnD,SAAUM,EAAM,QAChB,OAAQJ,EAAO,KAAA,EACf,EAEI,CACJ,KAAAR,EACA,UAAAgB,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAf,EACA,QAAAgB,EACA,MAAOC,CAAA,EACLxB,EAAkC,CACpC,eAAAC,EACA,UAAAC,CAAA,CACD,EAID,OAAAuB,EAAa,CACX,QAAAF,EACA,OAAAhB,EACA,KAAAiB,CAAA,CACD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-slim-tables",
3
- "version": "0.3.11",
3
+ "version": "0.3.12",
4
4
  "type": "module",
5
5
  "main": "./dist/vst.cjs.js",
6
6
  "module": "./dist/vst.es.js",