vueye-table 2.0.0-alpha.4 → 2.0.0-alpha.6

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.
Files changed (18) hide show
  1. package/dist/components/core/VueyeTable/VueyeTable.vue.d.ts +3 -3
  2. package/dist/components/core/VueyeTable/api.d.ts +2 -2
  3. package/dist/components/core/VueyeTable/components/VueyeBody/VueyeBody.vue.d.ts +11 -10
  4. package/dist/components/core/VueyeTable/components/VueyeBody/api.d.ts +7 -0
  5. package/dist/components/core/VueyeTable/components/VueyeDropdown/api.d.ts +4 -1
  6. package/dist/components/core/VueyeTable/components/VueyeHead/VueyeHead.vue.d.ts +2 -1
  7. package/dist/components/core/VueyeTable/components/VueyePagination/VueyePagination.vue.d.ts +9 -8
  8. package/dist/components/core/VueyeTable/components/VueyePagination/api.d.ts +12 -0
  9. package/dist/components/core/VueyeTable/types/Column.d.ts +1 -1
  10. package/dist/components/core/VueyeTable/types/Utils.d.ts +1 -1
  11. package/dist/components/core/VueyeTable/utils/header.d.ts +1 -0
  12. package/dist/components/core/VueyeTable/utils/humanize.d.ts +1 -0
  13. package/dist/components/core/VueyeTable/utils/index.d.ts +1 -0
  14. package/dist/style.css +1 -1
  15. package/dist/vueye-table.js +243 -230
  16. package/dist/vueye-table.umd.cjs +1 -1
  17. package/package.json +6 -2
  18. package/dist/components/core/VueyeTable/composables/props/PaginationProps.d.ts +0 -5
package/dist/components/core/VueyeTable/VueyeTable.vue.d.ts CHANGED
@@ -3,8 +3,8 @@ declare const _default: <TData extends Record<string, unknown>, TColumn extends
3
3
  caption?: string | undefined;
4
4
  data: TData[];
5
5
  summary?: string | undefined;
6
+ columnHeaders?: TColumn[] | undefined;
6
7
  itemValue?: string | undefined;
7
- columnHeaders: TColumn[];
8
8
  perPage?: number | undefined;
9
9
  currentPage?: number | undefined;
10
10
  perPageOptions?: number[] | undefined;
@@ -22,8 +22,8 @@ declare const _default: <TData extends Record<string, unknown>, TColumn extends
22
22
  caption?: string | undefined;
23
23
  data: TData[];
24
24
  summary?: string | undefined;
25
+ columnHeaders?: TColumn[] | undefined;
25
26
  itemValue?: string | undefined;
26
- columnHeaders: TColumn[];
27
27
  perPage?: number | undefined;
28
28
  currentPage?: number | undefined;
29
29
  perPageOptions?: number[] | undefined;
@@ -45,8 +45,8 @@ declare const _default: <TData extends Record<string, unknown>, TColumn extends
45
45
  caption?: string | undefined;
46
46
  data: TData[];
47
47
  summary?: string | undefined;
48
+ columnHeaders?: TColumn[] | undefined;
48
49
  itemValue?: string | undefined;
49
- columnHeaders: TColumn[];
50
50
  perPage?: number | undefined;
51
51
  currentPage?: number | undefined;
52
52
  perPageOptions?: number[] | undefined;
package/dist/components/core/VueyeTable/api.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { InferDefaults } from './types';
2
2
  export type VueyeTableProps<TColumn = any, TData = any> = {
3
- itemValue?: string;
4
- columnHeaders: TColumn[];
5
3
  data: TData[];
4
+ columnHeaders?: TColumn[];
5
+ itemValue?: string;
6
6
  perPage?: number;
7
7
  currentPage?: number;
8
8
  perPageOptions?: number[];
package/dist/components/core/VueyeTable/components/VueyeBody/VueyeBody.vue.d.ts CHANGED
@@ -1,42 +1,43 @@
1
+ import { BodyProps } from './api';
1
2
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
2
3
  itemValue: {
3
4
  type: globalThis.PropType<string>;
4
5
  required: true;
5
- default: string;
6
+ default: (string | ((props: BodyProps) => string)) | undefined;
6
7
  };
7
8
  loading: {
8
9
  type: globalThis.PropType<boolean>;
9
10
  required: true;
10
- default: boolean;
11
+ default: (boolean | ((props: BodyProps) => boolean)) | undefined;
11
12
  };
12
13
  bodyRows: {
13
- type: globalThis.PropType<Row[]>;
14
+ type: globalThis.PropType<import("../..").Row[]>;
14
15
  required: true;
15
- default: () => never[];
16
+ default: ((props: BodyProps) => import("../..").Row[]) | undefined;
16
17
  };
17
18
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
18
19
  itemValue: {
19
20
  type: globalThis.PropType<string>;
20
21
  required: true;
21
- default: string;
22
+ default: (string | ((props: BodyProps) => string)) | undefined;
22
23
  };
23
24
  loading: {
24
25
  type: globalThis.PropType<boolean>;
25
26
  required: true;
26
- default: boolean;
27
+ default: (boolean | ((props: BodyProps) => boolean)) | undefined;
27
28
  };
28
29
  bodyRows: {
29
- type: globalThis.PropType<Row[]>;
30
+ type: globalThis.PropType<import("../..").Row[]>;
30
31
  required: true;
31
- default: () => never[];
32
+ default: ((props: BodyProps) => import("../..").Row[]) | undefined;
32
33
  };
33
34
  }>>, {
34
35
  itemValue: string;
35
36
  loading: boolean;
36
- bodyRows: Row[];
37
+ bodyRows: import("../..").Row[];
37
38
  }, {}>, {
38
39
  default?(_: {
39
- cell: Row;
40
+ cell: any;
40
41
  key: string;
41
42
  }): any;
42
43
  }>;
package/dist/components/core/VueyeTable/components/VueyeBody/api.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { InferDefaults, Row } from '../../types';
2
+ export type BodyProps = {
3
+ loading: boolean;
4
+ bodyRows: Row[];
5
+ itemValue: string;
6
+ };
7
+ export declare const bodyPropDefaults: InferDefaults<BodyProps>;
package/dist/components/core/VueyeTable/components/VueyeDropdown/api.d.ts CHANGED
@@ -3,7 +3,7 @@ interface Option {
3
3
  content: OptionValue;
4
4
  label: string;
5
5
  }
6
- export type dropdownProps = {
6
+ export type DropdownProps = {
7
7
  options: Option[];
8
8
  modelValue: string | number;
9
9
  label: string;
@@ -14,4 +14,7 @@ export declare const dropdownPropsDefaults: {
14
14
  modelValue: string;
15
15
  label: string;
16
16
  };
17
+ export type DropdownEmits = {
18
+ (event: 'update:modelValue', value: OptionValue): void;
19
+ };
17
20
  export {};
package/dist/components/core/VueyeTable/components/VueyeHead/VueyeHead.vue.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ColumnHeader } from '../../types';
1
2
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
2
3
  columnHeaders: {
3
4
  type: globalThis.PropType<ColumnHeader[][]>;
@@ -12,7 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
12
13
  };
13
14
  }>>, {
14
15
  columnHeaders: ColumnHeader[][];
15
- }, {}>, Readonly<any>>;
16
+ }, {}>, Readonly<import("../../types").SlotHeaderCell<Record<string, string>> & import("../../types").SlotHeaderCellContent<Record<string, string>>>>;
16
17
  export default _default;
17
18
  type __VLS_WithTemplateSlots<T, S> = T & {
18
19
  new (): {
package/dist/components/core/VueyeTable/components/VueyePagination/VueyePagination.vue.d.ts CHANGED
@@ -1,23 +1,24 @@
1
+ import { PaginationProps } from './api';
1
2
  declare const _default: import("vue").DefineComponent<{
2
3
  perPage: {
3
4
  type: globalThis.PropType<number>;
4
5
  required: true;
5
- default: number;
6
+ default: (number | ((props: PaginationProps) => number)) | undefined;
6
7
  };
7
8
  currentPage: {
8
9
  type: globalThis.PropType<number>;
9
10
  required: true;
10
- default: number;
11
+ default: (number | ((props: PaginationProps) => number)) | undefined;
11
12
  };
12
13
  perPageOptions: {
13
14
  type: globalThis.PropType<number[]>;
14
15
  required: true;
15
- default: () => number[];
16
+ default: ((props: PaginationProps) => number[]) | undefined;
16
17
  };
17
18
  total: {
18
19
  type: globalThis.PropType<number>;
19
20
  required: true;
20
- default: number;
21
+ default: (number | ((props: PaginationProps) => number)) | undefined;
21
22
  };
22
23
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
23
24
  "update:currentPage": (value: number) => void;
@@ -26,22 +27,22 @@ declare const _default: import("vue").DefineComponent<{
26
27
  perPage: {
27
28
  type: globalThis.PropType<number>;
28
29
  required: true;
29
- default: number;
30
+ default: (number | ((props: PaginationProps) => number)) | undefined;
30
31
  };
31
32
  currentPage: {
32
33
  type: globalThis.PropType<number>;
33
34
  required: true;
34
- default: number;
35
+ default: (number | ((props: PaginationProps) => number)) | undefined;
35
36
  };
36
37
  perPageOptions: {
37
38
  type: globalThis.PropType<number[]>;
38
39
  required: true;
39
- default: () => number[];
40
+ default: ((props: PaginationProps) => number[]) | undefined;
40
41
  };
41
42
  total: {
42
43
  type: globalThis.PropType<number>;
43
44
  required: true;
44
- default: number;
45
+ default: (number | ((props: PaginationProps) => number)) | undefined;
45
46
  };
46
47
  }>> & {
47
48
  "onUpdate:currentPage"?: ((value: number) => any) | undefined;
package/dist/components/core/VueyeTable/components/VueyePagination/api.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { InferDefaults } from '../../types';
2
+ export interface PaginationProps {
3
+ perPage: number;
4
+ currentPage: number;
5
+ total: number;
6
+ perPageOptions: number[];
7
+ }
8
+ export interface PaginationEmits {
9
+ (event: 'update:currentPage', value: number): void;
10
+ (event: 'update:perPage', value: number): void;
11
+ }
12
+ export declare const paginationPropsDefaults: InferDefaults<PaginationProps>;
package/dist/components/core/VueyeTable/types/Column.d.ts CHANGED
@@ -35,7 +35,7 @@ export type ColumnHeaderBase<TData extends Record<string, unknown>> = FiltrableC
35
35
  resizable?: boolean;
36
36
  showOverflowTooltip?: boolean;
37
37
  };
38
- export type ColumnHeader = ColumnHeaderBase<{}> & {
38
+ export type ColumnHeader = ColumnHeaderBase<Record<string, never>> & {
39
39
  rowSpan?: number;
40
40
  colSpan?: number;
41
41
  width?: string;
package/dist/components/core/VueyeTable/types/Utils.d.ts CHANGED
@@ -11,7 +11,7 @@ export type DeepKeyValues<T extends readonly object[]> = {
11
11
  children: infer C;
12
12
  } ? C extends readonly object[] ? U | DeepKeyValues<C> : never : U : never : never;
13
13
  }[number];
14
- type NativeType = null | number | string | boolean | symbol | Function;
14
+ type NativeType = null | number | string | boolean | symbol;
15
15
  type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
16
16
  export type InferDefaults<T> = {
17
17
  [K in keyof T]?: InferDefault<T, T[K]>;
package/dist/components/core/VueyeTable/utils/header.d.ts CHANGED
@@ -4,3 +4,4 @@ export declare function leafCount(headers: ColumnHeader[]): number;
4
4
  export declare function flatHeadersToRows(headers: ColumnHeader[], depth: number, rows?: ColumnHeader[][], currentRow?: number, level?: number): ColumnHeader[][];
5
5
  export declare function getHeaderKeys<T extends ColumnHeader>(headers: T[], keysPath?: string, keys?: string[]): string[];
6
6
  export declare function defineColumnHeaders(headers: any[]): ColumnHeader[];
7
+ export declare function generateColumns<T>(dataItem: T): ColumnHeader[];
package/dist/components/core/VueyeTable/utils/humanize.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function humanize(key: string): string;
package/dist/components/core/VueyeTable/utils/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './header';
2
2
  export * from './body';
3
+ export * from './humanize';
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .dropdown__wrapper{position:relative}.dropdown__trigger{display:flex;align-items:center}.dropdown__trigger>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.dropdown__trigger{border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(124 205 253 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.dropdown__trigger:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));--tw-ring-offset-width: 2px }:is([dir=rtl] .dropdown__trigger)>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 1 }:is(.dark .dropdown__trigger){--tw-border-opacity: 1;border-color:rgb(11 69 111 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(248 250 252 / var(--tw-text-opacity))}.dropdown__menu{position:absolute;bottom:100%;right:0;z-index:45;margin-top:.5rem;width:14rem;transform-origin:top right;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));--tw-ring-opacity: .05 }.dropdown__menu:focus{outline:2px solid transparent;outline-offset:2px}:is(.dark .dropdown__menu){--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}.dropdown__menu__item{display:block;width:100%;padding:.5rem 1rem;text-align:left;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.dropdown__menu__item:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.dropdown__menu__item:focus{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity));outline:2px solid transparent;outline-offset:2px}:is(.dark .dropdown__menu__item){--tw-text-opacity: 1;color:rgb(248 250 252 / var(--tw-text-opacity))}:is(.dark .dropdown__menu__item:hover){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dropdown__menu__item--selected{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}:is(.dark .dropdown__menu__item--selected){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dropdown__overlay{position:fixed;right:0;bottom:0;top:0;left:0;z-index:40;cursor:default;background-color:transparent}.pagination__wrapper{display:flex;align-items:center;-moz-column-gap:.75rem;column-gap:.75rem}.pagination__details{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}:is(.dark .pagination__details){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.pagination__btn-list{display:flex}.pagination__btn{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:rgb(186 227 253 / var(--tw-border-opacity));background-color:transparent;padding:.5rem}.pagination__btn:disabled{cursor:not-allowed;opacity:.5}:is(.dark .pagination__btn){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity))}.pagination__btn--current{--tw-bg-opacity: 1;background-color:rgb(186 227 253 / var(--tw-bg-opacity))}:is(.dark .pagination__btn--current){--tw-bg-opacity: 1;background-color:rgb(6 83 134 / var(--tw-bg-opacity))}table{min-width:800px;border-collapse:collapse;border-radius:.25rem!important;border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));font-size:.875rem;line-height:1.25rem;letter-spacing:.025em}th{border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(224 241 254 / var(--tw-bg-opacity));padding:.5rem 1rem}:is(.dark th){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}td{border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));padding:.5rem 1rem}:is(.dark td){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity))}table{text-align:center}tr:nth-child(2n) td{--tw-bg-opacity: 1;background-color:rgb(224 241 254 / var(--tw-bg-opacity))}:is(.dark tr:nth-child(2n) td){--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}tr:nth-child(odd) td{--tw-bg-opacity: 1;background-color:rgb(240 248 255 / var(--tw-bg-opacity))}:is(.dark tr:nth-child(odd) td){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity))}caption{padding:.5rem}.table__wrapper{display:flex;width:-moz-max-content;width:max-content;flex-direction:column}.table__pagination-wrapper{display:flex;justify-content:flex-end;padding-top:1rem;padding-bottom:1rem}
1
+ .dropdown__wrapper{position:relative}.dropdown__trigger{display:flex;align-items:center}.dropdown__trigger>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.dropdown__trigger{border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(124 205 253 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.dropdown__trigger:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));--tw-ring-offset-width: 2px }:is([dir=rtl] .dropdown__trigger)>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 1 }:is(.dark .dropdown__trigger){--tw-border-opacity: 1;border-color:rgb(11 69 111 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(248 250 252 / var(--tw-text-opacity))}.dropdown__menu{position:absolute;bottom:100%;right:0;z-index:45;margin-top:.5rem;width:14rem;transform-origin:top right;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));--tw-ring-opacity: .05 }.dropdown__menu:focus{outline:2px solid transparent;outline-offset:2px}:is(.dark .dropdown__menu){--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}.dropdown__menu__item{display:block;width:100%;padding:.5rem 1rem;text-align:left;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.dropdown__menu__item:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.dropdown__menu__item:focus{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity));outline:2px solid transparent;outline-offset:2px}:is(.dark .dropdown__menu__item){--tw-text-opacity: 1;color:rgb(248 250 252 / var(--tw-text-opacity))}:is(.dark .dropdown__menu__item:hover){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dropdown__menu__item--selected{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}:is(.dark .dropdown__menu__item--selected){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dropdown__overlay{position:fixed;right:0;bottom:0;top:0;left:0;z-index:40;cursor:default;background-color:transparent}.pagination__wrapper{display:flex;align-items:center;-moz-column-gap:.75rem;column-gap:.75rem}.pagination__details{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}:is(.dark .pagination__details){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.pagination__btn-list{display:flex}.pagination__btn{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:rgb(186 227 253 / var(--tw-border-opacity));background-color:transparent;padding:.5rem}.pagination__btn:focus{--tw-border-opacity: 1;border-color:rgb(12 147 223 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.pagination__btn:disabled{cursor:not-allowed;opacity:.5}:is(.dark .pagination__btn){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity))}.pagination__btn--current{--tw-bg-opacity: 1;background-color:rgb(186 227 253 / var(--tw-bg-opacity))}:is(.dark .pagination__btn--current){--tw-bg-opacity: 1;background-color:rgb(6 83 134 / var(--tw-bg-opacity))}table{min-width:800px;border-collapse:collapse;border-radius:.25rem!important;border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));font-size:.875rem;line-height:1.25rem;letter-spacing:.025em}th{border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(224 241 254 / var(--tw-bg-opacity));padding:.5rem 1rem}:is(.dark th){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}td{border-width:1px;--tw-border-opacity: 1;border-color:rgb(55 179 249 / var(--tw-border-opacity));padding:.5rem 1rem}:is(.dark td){--tw-border-opacity: 1;border-color:rgb(6 83 134 / var(--tw-border-opacity))}table{text-align:center}tr:nth-child(2n) td{--tw-bg-opacity: 1;background-color:rgb(224 241 254 / var(--tw-bg-opacity))}:is(.dark tr:nth-child(2n) td){--tw-bg-opacity: 1;background-color:rgb(8 44 73 / var(--tw-bg-opacity))}tr:nth-child(odd) td{--tw-bg-opacity: 1;background-color:rgb(240 248 255 / var(--tw-bg-opacity))}:is(.dark tr:nth-child(odd) td){--tw-bg-opacity: 1;background-color:rgb(11 69 111 / var(--tw-bg-opacity))}caption{padding:.5rem}.table__wrapper{display:flex;width:-moz-max-content;width:max-content;flex-direction:column}.table__pagination{margin-top:1rem;align-self:flex-end}
package/dist/vueye-table.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as C, mergeDefaults as H, ref as S, computed as h, watchEffect as T, openBlock as i, createElementBlock as d, createElementVNode as r, unref as u, toDisplayString as f, createCommentVNode as B, Fragment as $, renderList as v, normalizeClass as k, renderSlot as m, createTextVNode as j, createVNode as O, toRef as U, useSlots as K, createSlots as M, withCtx as I, normalizeProps as L, guardReactiveProps as z } from "vue";
1
+ import { defineComponent as V, mergeDefaults as C, ref as w, computed as b, watchEffect as N, openBlock as d, createElementBlock as c, createElementVNode as u, unref as i, toDisplayString as f, createCommentVNode as O, Fragment as $, renderList as y, normalizeClass as v, renderSlot as P, createTextVNode as T, createVNode as k, useSlots as U, createSlots as j, withCtx as z, normalizeProps as K, guardReactiveProps as M } from "vue";
2
2
  const A = {
3
3
  itemValue: "id",
4
4
  columnHeaders: () => [],
@@ -10,320 +10,330 @@ const A = {
10
10
  selectable: !1,
11
11
  caption: "",
12
12
  summary: ""
13
- }, F = {
13
+ }, L = {
14
14
  options: () => [],
15
15
  modelValue: "",
16
16
  label: ""
17
- }, W = { class: "dropdown__wrapper" }, q = ["aria-expanded"], G = /* @__PURE__ */ r("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), J = {
17
+ }, F = { class: "dropdown__wrapper" }, G = ["aria-expanded"], W = /* @__PURE__ */ u("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), Z = {
18
18
  class: "py-1",
19
19
  role: "none"
20
- }, Q = ["onClick"], X = /* @__PURE__ */ C({
20
+ }, q = ["onClick"], I = /* @__PURE__ */ V({
21
21
  __name: "VueyeDropdown",
22
- props: H({
22
+ props: C({
23
23
  options: {},
24
24
  modelValue: {},
25
25
  label: {},
26
26
  defaultValue: {}
27
- }, F),
27
+ }, L),
28
28
  emits: ["update:modelValue"],
29
29
  setup(s, { emit: t }) {
30
- const e = s, n = S(!1), l = S(-1), a = h(() => e.options[l.value] ?? e.defaultValue), c = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
31
- function P() {
30
+ const e = s, n = w(!1), r = w(-1), a = b(() => e.options[r.value] ?? e.defaultValue), p = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
31
+ function h() {
32
32
  n.value = !n.value;
33
33
  }
34
- function y(_) {
35
- l.value = _, n.value = !1, t("update:modelValue", a.value.content);
34
+ function g(o) {
35
+ r.value = o, n.value = !1, t("update:modelValue", a.value.content);
36
36
  }
37
- return T(() => {
38
- const _ = e.options.findIndex((p) => p.content === e.modelValue);
39
- _ !== -1 && (l.value = _);
40
- }), (_, p) => (i(), d("div", W, [
41
- r("button", {
37
+ return N(() => {
38
+ const o = e.options.findIndex((l) => l.content === e.modelValue);
39
+ o !== -1 && (r.value = o);
40
+ }), (o, l) => (d(), c("div", F, [
41
+ u("button", {
42
42
  type: "button",
43
43
  class: "dropdown__trigger",
44
- onClick: P,
45
- "aria-expanded": u(n),
44
+ onClick: h,
45
+ "aria-expanded": i(n),
46
46
  "aria-haspopup": !0,
47
47
  ref: "buttonRef"
48
48
  }, [
49
- r("span", null, f(u(a).label), 1),
50
- G
51
- ], 8, q),
52
- u(n) ? (i(), d("div", {
49
+ u("span", null, f(i(a).label), 1),
50
+ W
51
+ ], 8, G),
52
+ i(n) ? (d(), c("div", {
53
53
  key: 0,
54
54
  class: "dropdown__overlay",
55
- onClick: P
56
- })) : B("", !0),
57
- u(n) ? (i(), d("div", {
55
+ onClick: h
56
+ })) : O("", !0),
57
+ i(n) ? (d(), c("div", {
58
58
  key: 1,
59
59
  class: "dropdown__menu",
60
60
  role: "menu",
61
61
  "aria-orientation": "vertical",
62
- "aria-labelledby": c
62
+ "aria-labelledby": p
63
63
  }, [
64
- r("div", J, [
65
- (i(!0), d($, null, v(_.options, (w, b) => (i(), d("button", {
66
- key: b,
67
- class: k([{
68
- "dropdown__menu__item--selected ": b === u(l)
64
+ u("div", Z, [
65
+ (d(!0), c($, null, y(o.options, (_, m) => (d(), c("button", {
66
+ key: m,
67
+ class: v([{
68
+ "dropdown__menu__item--selected ": m === i(r)
69
69
  }, "dropdown__menu__item"]),
70
70
  role: "menuitem",
71
- onClick: (o) => y(b)
72
- }, f(w.label), 11, Q))), 128))
71
+ onClick: (D) => g(m)
72
+ }, f(_.label), 11, q))), 128))
73
73
  ])
74
- ])) : B("", !0)
74
+ ])) : O("", !0)
75
75
  ]));
76
76
  }
77
77
  });
78
- const Y = { key: 0 }, Z = ["colspan"], x = /* @__PURE__ */ r("div", { class: "flex justify-center items-center" }, [
79
- /* @__PURE__ */ r("div", { class: "loader animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16" })
80
- ], -1), ee = [
81
- x
82
- ], te = ["id"], ne = /* @__PURE__ */ C({
78
+ const J = {
79
+ loading: !1,
80
+ bodyRows: () => [],
81
+ itemValue: "id"
82
+ }, Q = { key: 0 }, X = ["colspan"], Y = /* @__PURE__ */ u("div", { class: "loader mx-auto animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16" }, null, -1), x = [
83
+ Y
84
+ ], ee = ["id"], te = /* @__PURE__ */ V({
83
85
  __name: "VueyeBody",
84
- props: {
85
- loading: { type: Boolean, default: !1 },
86
- bodyRows: { default: () => [] },
87
- itemValue: { default: "id" }
88
- },
86
+ props: C({
87
+ loading: { type: Boolean },
88
+ bodyRows: {},
89
+ itemValue: {}
90
+ }, J),
89
91
  setup(s) {
90
- const t = s, e = h(() => Object.keys(t.bodyRows[0]).length);
91
- return (n, l) => (i(), d("tbody", null, [
92
- n.loading ? (i(), d("tr", Y, [
93
- r("td", { colspan: u(e) }, ee, 8, Z)
94
- ])) : (i(!0), d($, { key: 1 }, v(n.bodyRows, (a) => (i(), d("tr", {
92
+ const t = s, e = b(() => Object.keys(t.bodyRows[0]).length);
93
+ return (n, r) => (d(), c("tbody", null, [
94
+ n.loading ? (d(), c("tr", Q, [
95
+ u("td", { colspan: i(e) }, x, 8, X)
96
+ ])) : (d(!0), c($, { key: 1 }, y(n.bodyRows, (a) => (d(), c("tr", {
95
97
  key: a[n.itemValue]
96
98
  }, [
97
- m(n.$slots, "default", { row: a }, () => [
98
- (i(!0), d($, null, v(Object.keys(a), (c) => (i(), d("td", {
99
- key: `${a[n.itemValue]}.${c}`,
100
- id: `${a[n.itemValue]}.${c}`
99
+ P(n.$slots, "default", { row: a }, () => [
100
+ (d(!0), c($, null, y(Object.keys(a), (p) => (d(), c("td", {
101
+ key: `${a[n.itemValue]}.${p}`,
102
+ id: `${a[n.itemValue]}.${p}`
101
103
  }, [
102
- m(n.$slots, "default", {
103
- cell: a[c],
104
- key: `${a[n.itemValue]}.${c}`
104
+ P(n.$slots, "default", {
105
+ cell: a[p],
106
+ key: `${a[n.itemValue]}.${p}`
105
107
  }, () => [
106
- j(f(a[c]), 1)
108
+ T(f(a[p]), 1)
107
109
  ])
108
- ], 8, te))), 128))
110
+ ], 8, ee))), 128))
109
111
  ])
110
112
  ]))), 128))
111
113
  ]));
112
114
  }
113
- }), ae = ["colspan", "rowspan", "scope"], se = /* @__PURE__ */ C({
115
+ }), ne = ["colspan", "rowspan", "scope"], ae = /* @__PURE__ */ V({
114
116
  __name: "VueyeHead",
115
117
  props: {
116
118
  columnHeaders: { default: () => [] }
117
119
  },
118
120
  setup(s) {
119
- return (t, e) => (i(), d("thead", null, [
120
- (i(!0), d($, null, v(t.columnHeaders, (n, l) => (i(), d("tr", { key: l }, [
121
- (i(!0), d($, null, v(n, (a) => m(t.$slots, `headerCell.${a.key}`, {
121
+ return (t, e) => (d(), c("thead", null, [
122
+ (d(!0), c($, null, y(t.columnHeaders, (n, r) => (d(), c("tr", { key: r }, [
123
+ (d(!0), c($, null, y(n, (a) => P(t.$slots, `headerCell.${a.key}`, {
122
124
  key: a.key,
123
125
  headerCell: a
124
126
  }, () => [
125
- r("th", {
127
+ u("th", {
126
128
  colspan: a.colSpan,
127
129
  rowspan: a.rowSpan,
128
130
  scope: a.scope,
129
- class: k([a.className, "th"])
131
+ class: v([a.className, "th"])
130
132
  }, [
131
- m(t.$slots, `headerCellContent.${a.key}`, { headerCellContent: a }, () => [
132
- r("span", {
133
- class: k(a.labelClassName)
133
+ P(t.$slots, `headerCellContent.${a.key}`, { headerCellContent: a }, () => [
134
+ u("span", {
135
+ class: v(a.labelClassName)
134
136
  }, f(a.label), 3)
135
137
  ])
136
- ], 10, ae)
138
+ ], 10, ne)
137
139
  ])), 128))
138
140
  ]))), 128))
139
141
  ]));
140
142
  }
141
- }), oe = { class: "pagination__wrapper" }, re = { class: "pagination__details" }, le = { class: "pagination__btn-list" }, ue = ["disabled"], ie = /* @__PURE__ */ r("span", { class: "sr-only" }, "First page", -1), de = /* @__PURE__ */ r("span", {
143
+ }), oe = {
144
+ perPage: 10,
145
+ currentPage: 1,
146
+ total: 0,
147
+ perPageOptions: () => [10, 20, 30, 40, 50]
148
+ }, se = { class: "pagination__wrapper" }, le = { class: "pagination__details" }, re = { class: "pagination__btn-list" }, ue = ["disabled"], ie = /* @__PURE__ */ u("span", {
142
149
  "aria-hidden": "true",
143
150
  class: "i-solar-alt-arrow-left-linear"
144
- }, null, -1), ce = [
145
- ie,
146
- de
147
- ], pe = ["disabled"], _e = /* @__PURE__ */ r("span", { class: "sr-only" }, "Previous page", -1), ge = /* @__PURE__ */ r("span", {
151
+ }, null, -1), de = [
152
+ ie
153
+ ], ce = ["disabled"], pe = /* @__PURE__ */ u("span", {
148
154
  "aria-hidden": "true",
149
155
  class: "i-solar-double-alt-arrow-left-linear"
150
- }, null, -1), fe = [
151
- _e,
152
- ge
153
- ], he = ["onClick"], Pe = {
156
+ }, null, -1), _e = [
157
+ pe
158
+ ], ge = ["onClick", "aria-label"], be = {
154
159
  key: 1,
155
160
  class: "pagination__btn"
156
- }, be = ["disabled"], ye = /* @__PURE__ */ r("span", { class: "sr-only" }, "Next page", -1), me = /* @__PURE__ */ r("span", {
161
+ }, fe = ["disabled"], he = /* @__PURE__ */ u("span", {
157
162
  "aria-hidden": "true",
158
163
  class: "i-solar-alt-arrow-right-linear"
159
- }, null, -1), ve = [
160
- ye,
161
- me
162
- ], $e = ["disabled"], Ve = /* @__PURE__ */ r("span", { class: "sr-only" }, "Last page", -1), ke = /* @__PURE__ */ r("span", {
164
+ }, null, -1), me = [
165
+ he
166
+ ], Pe = ["disabled"], ye = /* @__PURE__ */ u("span", {
163
167
  "aria-hidden": "true",
164
168
  class: "i-solar-double-alt-arrow-right-linear"
165
- }, null, -1), Ce = [
166
- Ve,
167
- ke
168
- ], we = /* @__PURE__ */ C({
169
+ }, null, -1), $e = [
170
+ ye
171
+ ], ve = /* @__PURE__ */ V({
169
172
  __name: "VueyePagination",
170
- props: {
171
- perPage: { default: 10 },
172
- currentPage: { default: 1 },
173
- total: { default: 0 },
174
- perPageOptions: { default: () => [10, 20, 30, 40, 50] }
175
- },
173
+ props: C({
174
+ perPage: {},
175
+ currentPage: {},
176
+ total: {},
177
+ perPageOptions: {}
178
+ }, oe),
176
179
  emits: ["update:currentPage", "update:perPage"],
177
180
  setup(s, { emit: t }) {
178
- const e = s, n = h(() => Math.ceil(e.total / e.perPage)), l = h(() => e.perPageOptions.map((o) => ({
179
- value: o,
181
+ const e = s, n = b(() => Math.ceil(e.total / e.perPage)), r = b(() => e.perPageOptions.map((o) => ({
182
+ content: o,
180
183
  label: o.toString()
181
- }))), a = h(() => l.value.find((o) => o.value === e.perPage)), c = h(() => Array.from({ length: n.value }, (o, g) => g + 1).reduce(
182
- (o, g) => (g === 1 || g === e.total || g >= e.currentPage - 2 && g <= e.currentPage + 2 ? o.push(g) : (g === e.currentPage - 3 || g === e.currentPage + 3) && o.push("..."), o),
184
+ }))), a = b(() => r.value.find((o) => o.content === e.perPage)), p = b(() => Array.from({ length: n.value }, (o, l) => l + 1).reduce(
185
+ (o, l) => (l === 1 || l === e.total || l >= e.currentPage - 2 && l <= e.currentPage + 2 ? o.push(l) : (l === e.currentPage - 3 || l === e.currentPage + 3) && o.push("..."), o),
183
186
  []
184
187
  ));
185
- function P() {
186
- e.currentPage < n.value && t("update:currentPage", e.currentPage + 1);
187
- }
188
- function y() {
189
- e.currentPage > 1 && t("update:currentPage", e.currentPage - 1);
190
- }
191
- function _() {
192
- e.currentPage > 1 && t("update:currentPage", 1);
193
- }
194
- function p() {
195
- e.currentPage < n.value && t("update:currentPage", e.total);
196
- }
197
- function w(o) {
198
- o > 0 && o <= n.value && t("update:currentPage", o);
199
- }
200
- function b(o) {
188
+ function h(o) {
201
189
  t("update:perPage", Number(o));
202
190
  }
203
- return (o, g) => (i(), d("div", oe, [
204
- r("div", null, [
205
- O(u(X), {
206
- options: u(l),
207
- "default-value": u(a),
208
- label: "Per page",
209
- "onUpdate:modelValue": b
210
- }, null, 8, ["options", "default-value"])
211
- ]),
212
- r("div", null, [
213
- r("span", re, f((o.currentPage - 1) * o.perPage + 1) + " - " + f(o.currentPage * o.perPage > o.total ? o.total : o.currentPage * o.perPage) + " of " + f(o.total), 1)
214
- ]),
215
- r("ul", le, [
216
- r("li", null, [
217
- r("button", {
191
+ function g(o) {
192
+ o >= 1 && o <= n.value && t("update:currentPage", o);
193
+ }
194
+ return (o, l) => (d(), c("div", se, [
195
+ k(i(I), {
196
+ options: i(r),
197
+ "default-value": i(a),
198
+ label: "Per page",
199
+ "onUpdate:modelValue": h
200
+ }, null, 8, ["options", "default-value"]),
201
+ u("span", le, f((o.currentPage - 1) * o.perPage + 1) + " - " + f(o.currentPage * o.perPage > o.total ? o.total : o.currentPage * o.perPage) + " of " + f(o.total), 1),
202
+ u("ul", re, [
203
+ u("li", null, [
204
+ u("button", {
218
205
  class: "pagination__btn",
219
- onClick: _,
220
- disabled: o.currentPage === 1
221
- }, ce, 8, ue)
206
+ onClick: l[0] || (l[0] = (_) => g(1)),
207
+ disabled: o.currentPage === 1,
208
+ "aria-label": "First page"
209
+ }, de, 8, ue)
222
210
  ]),
223
- r("li", null, [
224
- r("button", {
211
+ u("li", null, [
212
+ u("button", {
225
213
  class: "pagination__btn",
226
- onClick: y,
227
- disabled: o.currentPage === 1
228
- }, fe, 8, pe)
214
+ onClick: l[1] || (l[1] = (_) => g(e.currentPage - 1)),
215
+ disabled: o.currentPage === 1,
216
+ "aria-label": "Previous page"
217
+ }, _e, 8, ce)
229
218
  ]),
230
- (i(!0), d($, null, v(u(c), (V) => (i(), d("li", { key: V }, [
231
- typeof V == "number" ? (i(), d("button", {
219
+ (d(!0), c($, null, y(i(p), (_) => (d(), c("li", { key: _ }, [
220
+ typeof _ == "number" ? (d(), c("button", {
232
221
  key: 0,
233
- class: k(["pagination__btn", { "pagination__btn--current": V === o.currentPage }]),
234
- onClick: (je) => w(V)
235
- }, f(V), 11, he)) : (i(), d("span", Pe, "..."))
222
+ class: v(["pagination__btn", { "pagination__btn--current": _ === o.currentPage }]),
223
+ onClick: (m) => g(_),
224
+ "aria-label": "Go to page " + _
225
+ }, f(_), 11, ge)) : (d(), c("span", be, "..."))
236
226
  ]))), 128)),
237
- r("li", null, [
238
- r("button", {
227
+ u("li", null, [
228
+ u("button", {
239
229
  class: "pagination__btn",
240
- onClick: P,
241
- disabled: o.currentPage === u(n)
242
- }, ve, 8, be)
230
+ onClick: l[2] || (l[2] = (_) => g(o.currentPage + 1)),
231
+ disabled: o.currentPage === i(n),
232
+ "aria-label": "Next page"
233
+ }, me, 8, fe)
243
234
  ]),
244
- r("li", null, [
245
- r("button", {
235
+ u("li", null, [
236
+ u("button", {
246
237
  class: "pagination__btn",
247
- onClick: p,
248
- disabled: o.currentPage === u(n)
249
- }, Ce, 8, $e)
238
+ onClick: l[3] || (l[3] = (_) => g(o.total)),
239
+ disabled: o.currentPage === i(n),
240
+ "aria-label": "Last page"
241
+ }, $e, 8, Pe)
250
242
  ])
251
243
  ])
252
244
  ]));
253
245
  }
254
246
  });
255
- function R(s) {
247
+ function Ve(s) {
248
+ return s.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/(?:^|\s)\S/g, (t) => t.toUpperCase()).trim().replace(/\s\s+/g, " ");
249
+ }
250
+ function S(s) {
256
251
  let t = 1;
257
252
  return s.forEach((e) => {
258
- e.children && (t = Math.max(t, R(e.children) + 1));
253
+ e.children && (t = Math.max(t, S(e.children) + 1));
259
254
  }), t;
260
255
  }
261
- function N(s) {
256
+ function H(s) {
262
257
  let t = 0;
263
258
  return s.forEach((e) => {
264
- e.children ? t += N(e.children) : t++;
259
+ e.children ? t += H(e.children) : t++;
265
260
  }), t;
266
261
  }
267
- function D(s, t, e = [], n = 0, l = 0) {
262
+ function B(s, t, e = [], n = 0, r = 0) {
268
263
  return s.forEach((a) => {
269
264
  if (e[n] || (e[n] = []), a.children) {
270
- const { children: c, ...P } = a, y = N(c);
265
+ const { children: p, ...h } = a, g = H(p);
271
266
  e[n].push({
272
- ...P,
273
- colSpan: y,
267
+ ...h,
268
+ colSpan: g,
274
269
  scope: "colgroup"
275
- }), D(c, t, e, n + 1, l + 1);
270
+ }), B(p, t, e, n + 1, r + 1);
276
271
  } else {
277
- const c = t - l;
272
+ const p = t - r;
278
273
  e[n].push({
279
274
  ...a,
280
275
  key: a.key,
281
276
  label: a.label,
282
- rowSpan: c,
277
+ rowSpan: p,
283
278
  scope: "col"
284
279
  });
285
280
  }
286
281
  }), e;
287
282
  }
288
- function E(s, t = "", e = []) {
283
+ function R(s, t = "", e = []) {
289
284
  return s.forEach((n) => {
290
- n.children ? E(n.children, `${t}${n.key}.`, e) : e.push(`${t}${n.key}`);
285
+ n.children ? R(n.children, `${t}${n.key}.`, e) : e.push(`${t}${n.key}`);
291
286
  }), e;
292
287
  }
293
- function Ke(s) {
294
- const t = R(s);
295
- return D(s, t).reduce((l, a) => [...l, ...a], []);
288
+ function Ee(s) {
289
+ const t = S(s);
290
+ return B(s, t).reduce((r, a) => [...r, ...a], []);
291
+ }
292
+ function E(s) {
293
+ const t = [];
294
+ for (const e in s) {
295
+ const n = Ve(e), r = {
296
+ key: e,
297
+ label: n
298
+ };
299
+ if (typeof s[e] == "object" && s[e] !== null) {
300
+ const a = E(s[e]);
301
+ a.length > 0 && (r.children = a);
302
+ }
303
+ t.push(r);
304
+ }
305
+ return t;
296
306
  }
297
- const Oe = (s, t) => {
307
+ const ke = (s, t) => {
298
308
  const e = t.split(".");
299
309
  let n = s;
300
- for (let l = 0; l < e.length; l++)
301
- if (n[e[l]])
302
- n = n[e[l]];
310
+ for (let r = 0; r < e.length; r++)
311
+ if (n[e[r]])
312
+ n = n[e[r]];
303
313
  else
304
314
  return;
305
315
  return n;
306
316
  };
307
- function Se(s, t, e = 0, n = s.length) {
308
- return s.map((l) => E(t).map((a) => ({
309
- [a]: Oe(l, a)
310
- })).reduce((a, c) => ({ ...a, ...c }), {})).slice(e, n);
317
+ function Ce(s, t, e = 0, n = s.length) {
318
+ return s.map((r) => R(t).map((a) => ({
319
+ [a]: ke(r, a)
320
+ })).reduce((a, p) => ({ ...a, ...p }), {})).slice(e, n);
311
321
  }
312
- function Me(s) {
322
+ function Ne(s) {
313
323
  return {
314
- headerKeys: h(() => E(s.flat()))
324
+ headerKeys: b(() => R(s.flat()))
315
325
  };
316
326
  }
317
- function Be(s = {}) {
318
- const t = S({
327
+ function we(s = {}) {
328
+ const t = w({
319
329
  perPage: s.perPage || 10,
320
330
  currentPage: s.currentPage || 1
321
331
  });
322
- function e(l) {
323
- t.value.currentPage = l;
332
+ function e(r) {
333
+ t.value.currentPage = r;
324
334
  }
325
- function n(l) {
326
- t.value.perPage = l;
335
+ function n(r) {
336
+ t.value.perPage = r;
327
337
  }
328
338
  return {
329
339
  pagination: t,
@@ -331,30 +341,30 @@ function Be(s = {}) {
331
341
  updatePerPage: n
332
342
  };
333
343
  }
334
- function Re(s, t, e) {
344
+ function Oe(s, t, e) {
335
345
  return {
336
- bodyRows: h(() => {
337
- const l = t.value.perPage * (t.value.currentPage - 1), a = t.value.perPage * t.value.currentPage;
338
- return Se(s, u(e), l, a);
346
+ bodyRows: b(() => {
347
+ const r = e.value.perPage * (e.value.currentPage - 1), a = e.value.perPage * e.value.currentPage;
348
+ return Ce(s, i(t), r, a);
339
349
  })
340
350
  };
341
351
  }
342
- function De(s) {
343
- const t = u(s) ?? [];
352
+ function Se(s) {
353
+ const t = i(s) ?? [];
344
354
  return {
345
- headers: h(() => D(t, R(t)))
355
+ headers: b(() => B(t, S(t)))
346
356
  };
347
357
  }
348
- const Ee = { class: "table__wrapper" }, He = {
358
+ const Be = { class: "table__wrapper" }, Re = {
349
359
  key: 0,
350
360
  class: "table__caption"
351
- }, Ne = { class: "table__summary" }, Te = { class: "table__pagination-wrapper" }, Ie = /* @__PURE__ */ C({
361
+ }, De = { class: "table__summary" }, Te = /* @__PURE__ */ V({
352
362
  inheritAttrs: !1,
353
363
  __name: "VueyeTable",
354
- props: H({
355
- itemValue: {},
356
- columnHeaders: {},
364
+ props: C({
357
365
  data: {},
366
+ columnHeaders: {},
367
+ itemValue: {},
358
368
  perPage: {},
359
369
  currentPage: {},
360
370
  perPageOptions: {},
@@ -364,53 +374,56 @@ const Ee = { class: "table__wrapper" }, He = {
364
374
  summary: {}
365
375
  }, A),
366
376
  setup(s) {
367
- const t = s, e = U(() => t.columnHeaders), { headers: n } = De(e), l = K(), a = Object.keys(l).filter((p) => p.startsWith("headerCell")), { pagination: c, updateCurrentPage: P, updatePerPage: y } = Be(t), { bodyRows: _ } = Re(t.data, c, e);
368
- return (p, w) => (i(), d("div", Ee, [
369
- r("table", {
370
- class: k(p.$attrs.class ?? "table")
377
+ const t = s, e = b(
378
+ () => t.columnHeaders.length === 0 ? E(t.data[0]) : t.columnHeaders
379
+ ), { headers: n } = Se(e), r = U(), a = Object.keys(r).filter((l) => l.startsWith("headerCell")), { pagination: p, updateCurrentPage: h, updatePerPage: g } = we(t), { bodyRows: o } = Oe(t.data, e, p);
380
+ return (l, _) => (d(), c("div", Be, [
381
+ u("table", {
382
+ class: v(l.$attrs.class ?? "table")
371
383
  }, [
372
- m(p.$slots, "caption", {}, () => [
373
- p.caption ? (i(), d("caption", He, f(p.caption), 1)) : B("", !0)
384
+ P(l.$slots, "caption", {}, () => [
385
+ l.caption ? (d(), c("caption", Re, f(l.caption), 1)) : O("", !0)
374
386
  ]),
375
- O(u(se), { columnHeaders: u(n) }, M({ _: 2 }, [
376
- v(u(a), (b) => ({
377
- name: b,
378
- fn: I((o) => [
379
- m(p.$slots, b, L(z(o)))
387
+ k(i(ae), { columnHeaders: i(n) }, j({ _: 2 }, [
388
+ y(i(a), (m) => ({
389
+ name: m,
390
+ fn: z((D) => [
391
+ P(l.$slots, m, K(M(D)))
380
392
  ])
381
393
  }))
382
394
  ]), 1032, ["columnHeaders"]),
383
- O(u(ne), {
384
- bodyRows: u(_),
385
- loading: p.loading
395
+ k(i(te), {
396
+ bodyRows: i(o),
397
+ loading: l.loading
386
398
  }, null, 8, ["bodyRows", "loading"]),
387
- m(p.$slots, "summary", {}, () => [
388
- r("caption", Ne, f(p.summary), 1)
399
+ P(l.$slots, "summary", {}, () => [
400
+ u("caption", De, f(l.summary), 1)
389
401
  ])
390
402
  ], 2),
391
- r("div", Te, [
392
- O(u(we), {
393
- perPage: u(c).perPage,
394
- currentPage: u(c).currentPage,
395
- perPageOptions: p.perPageOptions,
396
- total: p.data.length,
397
- "onUpdate:currentPage": u(P),
398
- "onUpdate:perPage": u(y)
399
- }, null, 8, ["perPage", "currentPage", "perPageOptions", "total", "onUpdate:currentPage", "onUpdate:perPage"])
400
- ])
403
+ k(i(ve), {
404
+ perPage: i(p).perPage,
405
+ currentPage: i(p).currentPage,
406
+ perPageOptions: l.perPageOptions,
407
+ total: l.data.length,
408
+ "onUpdate:currentPage": i(h),
409
+ "onUpdate:perPage": i(g),
410
+ class: "table__pagination"
411
+ }, null, 8, ["perPage", "currentPage", "perPageOptions", "total", "onUpdate:currentPage", "onUpdate:perPage"])
401
412
  ]));
402
413
  }
403
414
  });
404
415
  export {
405
- Ie as VueyeTable,
406
- Ke as defineColumnHeaders,
407
- R as depthCount,
408
- D as flatHeadersToRows,
409
- Se as getBodyRows,
410
- E as getHeaderKeys,
411
- N as leafCount,
412
- Re as useBodyRows,
413
- Me as useHeaderKeys,
414
- De as useHeaders,
415
- Be as usePagination
416
+ Te as VueyeTable,
417
+ Ee as defineColumnHeaders,
418
+ S as depthCount,
419
+ B as flatHeadersToRows,
420
+ E as generateColumns,
421
+ Ce as getBodyRows,
422
+ R as getHeaderKeys,
423
+ Ve as humanize,
424
+ H as leafCount,
425
+ Oe as useBodyRows,
426
+ Ne as useHeaderKeys,
427
+ Se as useHeaders,
428
+ we as usePagination
416
429
  };
package/dist/vueye-table.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["vueye-table"]={},d.Vue))})(this,function(d,e){"use strict";const $={itemValue:"id",columnHeaders:()=>[],data:()=>[],perPage:10,currentPage:1,perPageOptions:()=>[5,10,20,30],loading:!1,selectable:!1,caption:"",summary:""},C={options:()=>[],modelValue:"",label:""},w={class:"dropdown__wrapper"},S=["aria-expanded"],D=e.createElementVNode("span",{class:"i-solar-alt-arrow-down-linear"},null,-1),O={class:"py-1",role:"none"},R=["onClick"],H=e.defineComponent({__name:"VueyeDropdown",props:e.mergeDefaults({options:{},modelValue:{},label:{},defaultValue:{}},C),emits:["update:modelValue"],setup(r,{emit:n}){const t=r,o=e.ref(!1),s=e.ref(-1),a=e.computed(()=>t.options[s.value]??t.defaultValue),c=`dropdown-label-${Math.random().toString(36).substring(2,9)}`;function u(){o.value=!o.value}function g(p){s.value=p,o.value=!1,n("update:modelValue",a.value.content)}return e.watchEffect(()=>{const p=t.options.findIndex(i=>i.content===t.modelValue);p!==-1&&(s.value=p)}),(p,i)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("button",{type:"button",class:"dropdown__trigger",onClick:u,"aria-expanded":e.unref(o),"aria-haspopup":!0,ref:"buttonRef"},[e.createElementVNode("span",null,e.toDisplayString(e.unref(a).label),1),D],8,S),e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"dropdown__overlay",onClick:u})):e.createCommentVNode("",!0),e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:1,class:"dropdown__menu",role:"menu","aria-orientation":"vertical","aria-labelledby":c},[e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.options,(b,m)=>(e.openBlock(),e.createElementBlock("button",{key:m,class:e.normalizeClass([{"dropdown__menu__item--selected ":m===e.unref(s)},"dropdown__menu__item"]),role:"menuitem",onClick:l=>g(m)},e.toDisplayString(b.label),11,R))),128))])])):e.createCommentVNode("",!0)]))}}),de="",T={key:0},L=["colspan"],j=[e.createElementVNode("div",{class:"flex justify-center items-center"},[e.createElementVNode("div",{class:"loader animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16"})],-1)],F=["id"],z=e.defineComponent({__name:"VueyeBody",props:{loading:{type:Boolean,default:!1},bodyRows:{default:()=>[]},itemValue:{default:"id"}},setup(r){const n=r,t=e.computed(()=>Object.keys(n.bodyRows[0]).length);return(o,s)=>(e.openBlock(),e.createElementBlock("tbody",null,[o.loading?(e.openBlock(),e.createElementBlock("tr",T,[e.createElementVNode("td",{colspan:e.unref(t)},j,8,L)])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(o.bodyRows,a=>(e.openBlock(),e.createElementBlock("tr",{key:a[o.itemValue]},[e.renderSlot(o.$slots,"default",{row:a},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(a),c=>(e.openBlock(),e.createElementBlock("td",{key:`${a[o.itemValue]}.${c}`,id:`${a[o.itemValue]}.${c}`},[e.renderSlot(o.$slots,"default",{cell:a[c],key:`${a[o.itemValue]}.${c}`},()=>[e.createTextVNode(e.toDisplayString(a[c]),1)])],8,F))),128))])]))),128))]))}}),K=["colspan","rowspan","scope"],M=e.defineComponent({__name:"VueyeHead",props:{columnHeaders:{default:()=>[]}},setup(r){return(n,t)=>(e.openBlock(),e.createElementBlock("thead",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columnHeaders,(o,s)=>(e.openBlock(),e.createElementBlock("tr",{key:s},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,a=>e.renderSlot(n.$slots,`headerCell.${a.key}`,{key:a.key,headerCell:a},()=>[e.createElementVNode("th",{colspan:a.colSpan,rowspan:a.rowSpan,scope:a.scope,class:e.normalizeClass([a.className,"th"])},[e.renderSlot(n.$slots,`headerCellContent.${a.key}`,{headerCellContent:a},()=>[e.createElementVNode("span",{class:e.normalizeClass(a.labelClassName)},e.toDisplayString(a.label),3)])],10,K)])),128))]))),128))]))}}),U={class:"pagination__wrapper"},I={class:"pagination__details"},A={class:"pagination__btn-list"},q=["disabled"],W=[e.createElementVNode("span",{class:"sr-only"},"First page",-1),e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-alt-arrow-left-linear"},null,-1)],G=["disabled"],J=[e.createElementVNode("span",{class:"sr-only"},"Previous page",-1),e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-double-alt-arrow-left-linear"},null,-1)],Q=["onClick"],X={key:1,class:"pagination__btn"},Y=["disabled"],Z=[e.createElementVNode("span",{class:"sr-only"},"Next page",-1),e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-alt-arrow-right-linear"},null,-1)],x=["disabled"],v=[e.createElementVNode("span",{class:"sr-only"},"Last page",-1),e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-double-alt-arrow-right-linear"},null,-1)],ee=e.defineComponent({__name:"VueyePagination",props:{perPage:{default:10},currentPage:{default:1},total:{default:0},perPageOptions:{default:()=>[10,20,30,40,50]}},emits:["update:currentPage","update:perPage"],setup(r,{emit:n}){const t=r,o=e.computed(()=>Math.ceil(t.total/t.perPage)),s=e.computed(()=>t.perPageOptions.map(l=>({value:l,label:l.toString()}))),a=e.computed(()=>s.value.find(l=>l.value===t.perPage)),c=e.computed(()=>Array.from({length:o.value},(l,_)=>_+1).reduce((l,_)=>(_===1||_===t.total||_>=t.currentPage-2&&_<=t.currentPage+2?l.push(_):(_===t.currentPage-3||_===t.currentPage+3)&&l.push("..."),l),[]));function u(){t.currentPage<o.value&&n("update:currentPage",t.currentPage+1)}function g(){t.currentPage>1&&n("update:currentPage",t.currentPage-1)}function p(){t.currentPage>1&&n("update:currentPage",1)}function i(){t.currentPage<o.value&&n("update:currentPage",t.total)}function b(l){l>0&&l<=o.value&&n("update:currentPage",l)}function m(l){n("update:perPage",Number(l))}return(l,_)=>(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("div",null,[e.createVNode(e.unref(H),{options:e.unref(s),"default-value":e.unref(a),label:"Per page","onUpdate:modelValue":m},null,8,["options","default-value"])]),e.createElementVNode("div",null,[e.createElementVNode("span",I,e.toDisplayString((l.currentPage-1)*l.perPage+1)+" - "+e.toDisplayString(l.currentPage*l.perPage>l.total?l.total:l.currentPage*l.perPage)+" of "+e.toDisplayString(l.total),1)]),e.createElementVNode("ul",A,[e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:p,disabled:l.currentPage===1},W,8,q)]),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:g,disabled:l.currentPage===1},J,8,G)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),f=>(e.openBlock(),e.createElementBlock("li",{key:f},[typeof f=="number"?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["pagination__btn",{"pagination__btn--current":f===l.currentPage}]),onClick:Ve=>b(f)},e.toDisplayString(f),11,Q)):(e.openBlock(),e.createElementBlock("span",X,"..."))]))),128)),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:u,disabled:l.currentPage===e.unref(o)},Z,8,Y)]),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:i,disabled:l.currentPage===e.unref(o)},v,8,x)])])]))}}),Pe="";function h(r){let n=1;return r.forEach(t=>{t.children&&(n=Math.max(n,h(t.children)+1))}),n}function k(r){let n=0;return r.forEach(t=>{t.children?n+=k(t.children):n++}),n}function y(r,n,t=[],o=0,s=0){return r.forEach(a=>{if(t[o]||(t[o]=[]),a.children){const{children:c,...u}=a,g=k(c);t[o].push({...u,colSpan:g,scope:"colgroup"}),y(c,n,t,o+1,s+1)}else{const c=n-s;t[o].push({...a,key:a.key,label:a.label,rowSpan:c,scope:"col"})}}),t}function P(r,n="",t=[]){return r.forEach(o=>{o.children?P(o.children,`${n}${o.key}.`,t):t.push(`${n}${o.key}`)}),t}function te(r){const n=h(r);return y(r,n).reduce((s,a)=>[...s,...a],[])}const ne=(r,n)=>{const t=n.split(".");let o=r;for(let s=0;s<t.length;s++)if(o[t[s]])o=o[t[s]];else return;return o};function V(r,n,t=0,o=r.length){return r.map(s=>P(n).map(a=>({[a]:ne(s,a)})).reduce((a,c)=>({...a,...c}),{})).slice(t,o)}function oe(r){return{headerKeys:e.computed(()=>P(r.flat()))}}function E(r={}){const n=e.ref({perPage:r.perPage||10,currentPage:r.currentPage||1});function t(s){n.value.currentPage=s}function o(s){n.value.perPage=s}return{pagination:n,updateCurrentPage:t,updatePerPage:o}}function B(r,n,t){return{bodyRows:e.computed(()=>{const s=n.value.perPage*(n.value.currentPage-1),a=n.value.perPage*n.value.currentPage;return V(r,e.unref(t),s,a)})}}function N(r){const n=e.unref(r)??[];return{headers:e.computed(()=>y(n,h(n)))}}const ae={class:"table__wrapper"},re={key:0,class:"table__caption"},le={class:"table__summary"},se={class:"table__pagination-wrapper"},ce=e.defineComponent({inheritAttrs:!1,__name:"VueyeTable",props:e.mergeDefaults({itemValue:{},columnHeaders:{},data:{},perPage:{},currentPage:{},perPageOptions:{},loading:{type:Boolean},selectable:{type:Boolean},caption:{},summary:{}},$),setup(r){const n=r,t=e.toRef(()=>n.columnHeaders),{headers:o}=N(t),s=e.useSlots(),a=Object.keys(s).filter(i=>i.startsWith("headerCell")),{pagination:c,updateCurrentPage:u,updatePerPage:g}=E(n),{bodyRows:p}=B(n.data,c,t);return(i,b)=>(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("table",{class:e.normalizeClass(i.$attrs.class??"table")},[e.renderSlot(i.$slots,"caption",{},()=>[i.caption?(e.openBlock(),e.createElementBlock("caption",re,e.toDisplayString(i.caption),1)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(M),{columnHeaders:e.unref(o)},e.createSlots({_:2},[e.renderList(e.unref(a),m=>({name:m,fn:e.withCtx(l=>[e.renderSlot(i.$slots,m,e.normalizeProps(e.guardReactiveProps(l)))])}))]),1032,["columnHeaders"]),e.createVNode(e.unref(z),{bodyRows:e.unref(p),loading:i.loading},null,8,["bodyRows","loading"]),e.renderSlot(i.$slots,"summary",{},()=>[e.createElementVNode("caption",le,e.toDisplayString(i.summary),1)])],2),e.createElementVNode("div",se,[e.createVNode(e.unref(ee),{perPage:e.unref(c).perPage,currentPage:e.unref(c).currentPage,perPageOptions:i.perPageOptions,total:i.data.length,"onUpdate:currentPage":e.unref(u),"onUpdate:perPage":e.unref(g)},null,8,["perPage","currentPage","perPageOptions","total","onUpdate:currentPage","onUpdate:perPage"])])]))}}),be="",ke="";d.VueyeTable=ce,d.defineColumnHeaders=te,d.depthCount=h,d.flatHeadersToRows=y,d.getBodyRows=V,d.getHeaderKeys=P,d.leafCount=k,d.useBodyRows=B,d.useHeaderKeys=oe,d.useHeaders=N,d.usePagination=E,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
1
+ (function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["vueye-table"]={},d.Vue))})(this,function(d,e){"use strict";const C={itemValue:"id",columnHeaders:()=>[],data:()=>[],perPage:10,currentPage:1,perPageOptions:()=>[5,10,20,30],loading:!1,selectable:!1,caption:"",summary:""},N={options:()=>[],modelValue:"",label:""},S={class:"dropdown__wrapper"},w=["aria-expanded"],D=e.createElementVNode("span",{class:"i-solar-alt-arrow-down-linear"},null,-1),O={class:"py-1",role:"none"},H=["onClick"],R=e.defineComponent({__name:"VueyeDropdown",props:e.mergeDefaults({options:{},modelValue:{},label:{},defaultValue:{}},N),emits:["update:modelValue"],setup(r,{emit:n}){const t=r,o=e.ref(!1),i=e.ref(-1),a=e.computed(()=>t.options[i.value]??t.defaultValue),c=`dropdown-label-${Math.random().toString(36).substring(2,9)}`;function m(){o.value=!o.value}function u(l){i.value=l,o.value=!1,n("update:modelValue",a.value.content)}return e.watchEffect(()=>{const l=t.options.findIndex(s=>s.content===t.modelValue);l!==-1&&(i.value=l)}),(l,s)=>(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("button",{type:"button",class:"dropdown__trigger",onClick:m,"aria-expanded":e.unref(o),"aria-haspopup":!0,ref:"buttonRef"},[e.createElementVNode("span",null,e.toDisplayString(e.unref(a).label),1),D],8,w),e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"dropdown__overlay",onClick:m})):e.createCommentVNode("",!0),e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:1,class:"dropdown__menu",role:"menu","aria-orientation":"vertical","aria-labelledby":c},[e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(p,g)=>(e.openBlock(),e.createElementBlock("button",{key:g,class:e.normalizeClass([{"dropdown__menu__item--selected ":g===e.unref(i)},"dropdown__menu__item"]),role:"menuitem",onClick:$=>u(g)},e.toDisplayString(p.label),11,H))),128))])])):e.createCommentVNode("",!0)]))}}),de="",T={loading:!1,bodyRows:()=>[],itemValue:"id"},z={key:0},L=["colspan"],j=[e.createElementVNode("div",{class:"loader mx-auto animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16"},null,-1)],F=["id"],K=e.defineComponent({__name:"VueyeBody",props:e.mergeDefaults({loading:{type:Boolean},bodyRows:{},itemValue:{}},T),setup(r){const n=r,t=e.computed(()=>Object.keys(n.bodyRows[0]).length);return(o,i)=>(e.openBlock(),e.createElementBlock("tbody",null,[o.loading?(e.openBlock(),e.createElementBlock("tr",z,[e.createElementVNode("td",{colspan:e.unref(t)},j,8,L)])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(o.bodyRows,a=>(e.openBlock(),e.createElementBlock("tr",{key:a[o.itemValue]},[e.renderSlot(o.$slots,"default",{row:a},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(a),c=>(e.openBlock(),e.createElementBlock("td",{key:`${a[o.itemValue]}.${c}`,id:`${a[o.itemValue]}.${c}`},[e.renderSlot(o.$slots,"default",{cell:a[c],key:`${a[o.itemValue]}.${c}`},()=>[e.createTextVNode(e.toDisplayString(a[c]),1)])],8,F))),128))])]))),128))]))}}),U=["colspan","rowspan","scope"],M=e.defineComponent({__name:"VueyeHead",props:{columnHeaders:{default:()=>[]}},setup(r){return(n,t)=>(e.openBlock(),e.createElementBlock("thead",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columnHeaders,(o,i)=>(e.openBlock(),e.createElementBlock("tr",{key:i},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,a=>e.renderSlot(n.$slots,`headerCell.${a.key}`,{key:a.key,headerCell:a},()=>[e.createElementVNode("th",{colspan:a.colSpan,rowspan:a.rowSpan,scope:a.scope,class:e.normalizeClass([a.className,"th"])},[e.renderSlot(n.$slots,`headerCellContent.${a.key}`,{headerCellContent:a},()=>[e.createElementVNode("span",{class:e.normalizeClass(a.labelClassName)},e.toDisplayString(a.label),3)])],10,U)])),128))]))),128))]))}}),A={perPage:10,currentPage:1,total:0,perPageOptions:()=>[10,20,30,40,50]},q={class:"pagination__wrapper"},G={class:"pagination__details"},W={class:"pagination__btn-list"},Z=["disabled"],I=[e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-alt-arrow-left-linear"},null,-1)],J=["disabled"],Q=[e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-double-alt-arrow-left-linear"},null,-1)],X=["onClick","aria-label"],Y={key:1,class:"pagination__btn"},x=["disabled"],v=[e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-alt-arrow-right-linear"},null,-1)],ee=["disabled"],te=[e.createElementVNode("span",{"aria-hidden":"true",class:"i-solar-double-alt-arrow-right-linear"},null,-1)],ne=e.defineComponent({__name:"VueyePagination",props:e.mergeDefaults({perPage:{},currentPage:{},total:{},perPageOptions:{}},A),emits:["update:currentPage","update:perPage"],setup(r,{emit:n}){const t=r,o=e.computed(()=>Math.ceil(t.total/t.perPage)),i=e.computed(()=>t.perPageOptions.map(l=>({content:l,label:l.toString()}))),a=e.computed(()=>i.value.find(l=>l.content===t.perPage)),c=e.computed(()=>Array.from({length:o.value},(l,s)=>s+1).reduce((l,s)=>(s===1||s===t.total||s>=t.currentPage-2&&s<=t.currentPage+2?l.push(s):(s===t.currentPage-3||s===t.currentPage+3)&&l.push("..."),l),[]));function m(l){n("update:perPage",Number(l))}function u(l){l>=1&&l<=o.value&&n("update:currentPage",l)}return(l,s)=>(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(e.unref(R),{options:e.unref(i),"default-value":e.unref(a),label:"Per page","onUpdate:modelValue":m},null,8,["options","default-value"]),e.createElementVNode("span",G,e.toDisplayString((l.currentPage-1)*l.perPage+1)+" - "+e.toDisplayString(l.currentPage*l.perPage>l.total?l.total:l.currentPage*l.perPage)+" of "+e.toDisplayString(l.total),1),e.createElementVNode("ul",W,[e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:s[0]||(s[0]=p=>u(1)),disabled:l.currentPage===1,"aria-label":"First page"},I,8,Z)]),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:s[1]||(s[1]=p=>u(t.currentPage-1)),disabled:l.currentPage===1,"aria-label":"Previous page"},Q,8,J)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),p=>(e.openBlock(),e.createElementBlock("li",{key:p},[typeof p=="number"?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["pagination__btn",{"pagination__btn--current":p===l.currentPage}]),onClick:g=>u(p),"aria-label":"Go to page "+p},e.toDisplayString(p),11,X)):(e.openBlock(),e.createElementBlock("span",Y,"..."))]))),128)),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:s[2]||(s[2]=p=>u(l.currentPage+1)),disabled:l.currentPage===e.unref(o),"aria-label":"Next page"},v,8,x)]),e.createElementVNode("li",null,[e.createElementVNode("button",{class:"pagination__btn",onClick:s[3]||(s[3]=p=>u(l.total)),disabled:l.currentPage===e.unref(o),"aria-label":"Last page"},te,8,ee)])])]))}}),fe="";function P(r){return r.replace(/_/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/(?:^|\s)\S/g,n=>n.toUpperCase()).trim().replace(/\s\s+/g," ")}function _(r){let n=1;return r.forEach(t=>{t.children&&(n=Math.max(n,_(t.children)+1))}),n}function h(r){let n=0;return r.forEach(t=>{t.children?n+=h(t.children):n++}),n}function f(r,n,t=[],o=0,i=0){return r.forEach(a=>{if(t[o]||(t[o]=[]),a.children){const{children:c,...m}=a,u=h(c);t[o].push({...m,colSpan:u,scope:"colgroup"}),f(c,n,t,o+1,i+1)}else{const c=n-i;t[o].push({...a,key:a.key,label:a.label,rowSpan:c,scope:"col"})}}),t}function y(r,n="",t=[]){return r.forEach(o=>{o.children?y(o.children,`${n}${o.key}.`,t):t.push(`${n}${o.key}`)}),t}function oe(r){const n=_(r);return f(r,n).reduce((i,a)=>[...i,...a],[])}function b(r){const n=[];for(const t in r){const o=P(t),i={key:t,label:o};if(typeof r[t]=="object"&&r[t]!==null){const a=b(r[t]);a.length>0&&(i.children=a)}n.push(i)}return n}const ae=(r,n)=>{const t=n.split(".");let o=r;for(let i=0;i<t.length;i++)if(o[t[i]])o=o[t[i]];else return;return o};function k(r,n,t=0,o=r.length){return r.map(i=>y(n).map(a=>({[a]:ae(i,a)})).reduce((a,c)=>({...a,...c}),{})).slice(t,o)}function le(r){return{headerKeys:e.computed(()=>y(r.flat()))}}function V(r={}){const n=e.ref({perPage:r.perPage||10,currentPage:r.currentPage||1});function t(i){n.value.currentPage=i}function o(i){n.value.perPage=i}return{pagination:n,updateCurrentPage:t,updatePerPage:o}}function B(r,n,t){return{bodyRows:e.computed(()=>{const i=t.value.perPage*(t.value.currentPage-1),a=t.value.perPage*t.value.currentPage;return k(r,e.unref(n),i,a)})}}function E(r){const n=e.unref(r)??[];return{headers:e.computed(()=>f(n,_(n)))}}const re={class:"table__wrapper"},se={key:0,class:"table__caption"},ie={class:"table__summary"},ce=e.defineComponent({inheritAttrs:!1,__name:"VueyeTable",props:e.mergeDefaults({data:{},columnHeaders:{},itemValue:{},perPage:{},currentPage:{},perPageOptions:{},loading:{type:Boolean},selectable:{type:Boolean},caption:{},summary:{}},C),setup(r){const n=r,t=e.computed(()=>n.columnHeaders.length===0?b(n.data[0]):n.columnHeaders),{headers:o}=E(t),i=e.useSlots(),a=Object.keys(i).filter(s=>s.startsWith("headerCell")),{pagination:c,updateCurrentPage:m,updatePerPage:u}=V(n),{bodyRows:l}=B(n.data,t,c);return(s,p)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("table",{class:e.normalizeClass(s.$attrs.class??"table")},[e.renderSlot(s.$slots,"caption",{},()=>[s.caption?(e.openBlock(),e.createElementBlock("caption",se,e.toDisplayString(s.caption),1)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(M),{columnHeaders:e.unref(o)},e.createSlots({_:2},[e.renderList(e.unref(a),g=>({name:g,fn:e.withCtx($=>[e.renderSlot(s.$slots,g,e.normalizeProps(e.guardReactiveProps($)))])}))]),1032,["columnHeaders"]),e.createVNode(e.unref(K),{bodyRows:e.unref(l),loading:s.loading},null,8,["bodyRows","loading"]),e.renderSlot(s.$slots,"summary",{},()=>[e.createElementVNode("caption",ie,e.toDisplayString(s.summary),1)])],2),e.createVNode(e.unref(ne),{perPage:e.unref(c).perPage,currentPage:e.unref(c).currentPage,perPageOptions:s.perPageOptions,total:s.data.length,"onUpdate:currentPage":e.unref(m),"onUpdate:perPage":e.unref(u),class:"table__pagination"},null,8,["perPage","currentPage","perPageOptions","total","onUpdate:currentPage","onUpdate:perPage"])]))}}),ye="",he="";d.VueyeTable=ce,d.defineColumnHeaders=oe,d.depthCount=_,d.flatHeadersToRows=f,d.generateColumns=b,d.getBodyRows=k,d.getHeaderKeys=y,d.humanize=P,d.leafCount=h,d.useBodyRows=B,d.useHeaderKeys=le,d.useHeaders=E,d.usePagination=V,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueye-table",
3
- "version": "2.0.0-alpha.4",
3
+ "version": "2.0.0-alpha.6",
4
4
  "private": false,
5
5
  "description": "Vue data table",
6
6
  "author": "Brahim Boussadjra",
@@ -38,16 +38,19 @@
38
38
  "@testing-library/vue": "^7.0.0",
39
39
  "@types/node": "^20.7.1",
40
40
  "@vitejs/plugin-vue": "^4.3.4",
41
+ "@vitest/coverage-v8": "^0.34.6",
42
+ "@vitest/ui": "^0.34.6",
41
43
  "@vue/eslint-config-prettier": "^8.0.0",
42
44
  "@vue/eslint-config-typescript": "^12.0.0",
45
+ "@vue/test-utils": "^2.4.1",
43
46
  "@vue/tsconfig": "^0.4.0",
44
47
  "@vueuse/core": "^10.4.1",
45
- "@vueuse/head": "^2.0.0",
46
48
  "autoprefixer": "^10.4.16",
47
49
  "eslint": "^8.50.0",
48
50
  "eslint-plugin-import": "^2.28.1",
49
51
  "eslint-plugin-vue": "^9.17.0",
50
52
  "histoire": "^0.17.2",
53
+ "jsdom": "^22.1.0",
51
54
  "pathe": "^1.1.1",
52
55
  "pnpm": "^8.8.0",
53
56
  "postcss": "^8.4.30",
@@ -81,6 +84,7 @@
81
84
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
82
85
  "format": "prettier . --write --ignore-path .gitignore",
83
86
  "test:unit": "vitest",
87
+ "test:coverage": "vitest --coverage",
84
88
  "pub:release": "pnpm publish --access public",
85
89
  "generate-md": "tsdoc --src=api.ts",
86
90
  "analyse": "vite-bundle-visualizer dist --port 3000"
package/dist/components/core/VueyeTable/composables/props/PaginationProps.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export interface PaginationProps {
2
- perPage: number;
3
- currentPage: number;
4
- total: number;
5
- }