vs-datatable 0.2.0 → 0.4.0
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/App.vue.d.ts +2 -0
- package/dist/components/Loader.vue.d.ts +7 -0
- package/dist/components/VsDataTable.vue.d.ts +50 -0
- package/dist/components/VsPagination.vue.d.ts +16 -0
- package/dist/components/VsSearch.vue.d.ts +12 -0
- package/dist/composables/useDataTablePagination.d.ts +16 -0
- package/dist/composables/useDataTableSearch.d.ts +11 -0
- package/dist/composables/useDataTableSelection.d.ts +22 -0
- package/dist/composables/useDataTableSort.d.ts +15 -0
- package/dist/composables/useVsHelper.d.ts +4 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/main.d.ts +1 -0
- package/dist/types/datatable.d.ts +101 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/utils/datatable.d.ts +84 -0
- package/dist/vs-datatable.es.js +383 -225
- package/dist/vs-datatable.umd.js +2 -2
- package/package.json +6 -4
- package/src/styles/bootstrap.scss +0 -7
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
2
|
+
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
height?: string;
|
|
3
|
+
};
|
|
4
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
5
|
+
height: string;
|
|
6
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import type { DataTableProps } from '@/types/datatable';
|
|
2
|
+
declare var __VLS_8: {}, __VLS_11: `header-${string}`, __VLS_12: {
|
|
3
|
+
column: import("@/types/datatable").Column;
|
|
4
|
+
}, __VLS_14: {}, __VLS_17: `cell-${string}`, __VLS_18: {
|
|
5
|
+
item: any;
|
|
6
|
+
value: any;
|
|
7
|
+
column: import("@/types/datatable").Column;
|
|
8
|
+
index: number;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_Slots = {} & {
|
|
11
|
+
[K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
|
|
12
|
+
} & {
|
|
13
|
+
[K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
|
|
14
|
+
} & {
|
|
15
|
+
filterArea?: (props: typeof __VLS_8) => any;
|
|
16
|
+
} & {
|
|
17
|
+
'no-data'?: (props: typeof __VLS_14) => any;
|
|
18
|
+
};
|
|
19
|
+
declare const __VLS_component: import("vue").DefineComponent<DataTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
[x: string]: any;
|
|
21
|
+
} & {
|
|
22
|
+
[x: string]: any;
|
|
23
|
+
}, string, import("vue").PublicProps, Readonly<DataTableProps> & Readonly<{
|
|
24
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
25
|
+
}>, {
|
|
26
|
+
rowsPerPage: number;
|
|
27
|
+
tablename: string;
|
|
28
|
+
rows: any[];
|
|
29
|
+
itemSelected: any[] | null;
|
|
30
|
+
serverOptions: import("@/types/datatable").ServerOptions | null;
|
|
31
|
+
showHeader: boolean;
|
|
32
|
+
headerText: string;
|
|
33
|
+
loading: boolean;
|
|
34
|
+
showSearch: boolean;
|
|
35
|
+
showRowEntries: boolean;
|
|
36
|
+
searchPlaceholder: string;
|
|
37
|
+
loadingText: string;
|
|
38
|
+
noDataText: string;
|
|
39
|
+
noDataDescription: string;
|
|
40
|
+
entriesText: string;
|
|
41
|
+
maxVisiblePages: number;
|
|
42
|
+
rowKey: string | ((item: any, index: number) => string | number);
|
|
43
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
44
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
45
|
+
export default _default;
|
|
46
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
47
|
+
new (): {
|
|
48
|
+
$slots: S;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
modelValue: number;
|
|
3
|
+
totalRecords: number;
|
|
4
|
+
rowsPerPage: number;
|
|
5
|
+
tablename: string;
|
|
6
|
+
maxVisible?: number;
|
|
7
|
+
paginationClass?: string | string[] | Record<string, any>;
|
|
8
|
+
}
|
|
9
|
+
declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
10
|
+
"update:modelValue": (...args: any[]) => void;
|
|
11
|
+
"page-changed": (...args: any[]) => void;
|
|
12
|
+
}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
|
|
13
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
14
|
+
"onPage-changed"?: ((...args: any[]) => any) | undefined;
|
|
15
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
16
|
+
export default _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
modelValue: string;
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
6
|
+
"update:modelValue": (...args: any[]) => void;
|
|
7
|
+
"input-typed": (...args: any[]) => void;
|
|
8
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
9
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
10
|
+
"onInput-typed"?: ((...args: any[]) => any) | undefined;
|
|
11
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DataTable Pagination Composable
|
|
3
|
+
*/
|
|
4
|
+
import type { PaginationHelpers, RecordRange } from '@/types/datatable';
|
|
5
|
+
export declare function useDataTablePagination<T extends (event: any, ...args: any[]) => void>(props: {
|
|
6
|
+
serverOptions?: any;
|
|
7
|
+
serverItemsLength?: number;
|
|
8
|
+
rows: any[];
|
|
9
|
+
}, emit: T): {
|
|
10
|
+
page: import("vue").WritableComputedRef<number, number>;
|
|
11
|
+
rowsPerPage: import("vue").WritableComputedRef<number, number>;
|
|
12
|
+
totalRecords: import("vue").WritableComputedRef<number, number>;
|
|
13
|
+
recordRange: import("vue").ComputedRef<RecordRange>;
|
|
14
|
+
handlePageChange: (newPage: number) => void;
|
|
15
|
+
paginationHelpers: PaginationHelpers;
|
|
16
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DataTable Search Composable
|
|
3
|
+
*/
|
|
4
|
+
import type { SearchHelpers } from '@/types/datatable';
|
|
5
|
+
export declare function useDataTableSearch<T extends (event: any, ...args: any[]) => void>(emit: T): {
|
|
6
|
+
searchQuery: import("vue").Ref<string, string>;
|
|
7
|
+
onInputTyped: (value: string) => void;
|
|
8
|
+
clearSearch: () => void;
|
|
9
|
+
setSearchQuery: (query: string) => void;
|
|
10
|
+
searchHelpers: SearchHelpers;
|
|
11
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DataTable Selection Composable
|
|
3
|
+
*/
|
|
4
|
+
import type { SelectionHelpers } from '@/types/datatable';
|
|
5
|
+
export declare function useDataTableSelection<T extends (event: any, ...args: any[]) => void>(props: {
|
|
6
|
+
itemSelected?: any[] | null;
|
|
7
|
+
rows: any[];
|
|
8
|
+
rowKey?: string | ((item: any, index: number) => string | number);
|
|
9
|
+
}, emit: T): {
|
|
10
|
+
selectedItems: import("vue").WritableComputedRef<any[], any[]>;
|
|
11
|
+
isItemSelectedControlled: import("vue").ComputedRef<boolean>;
|
|
12
|
+
isAllChecked: import("vue").ComputedRef<boolean>;
|
|
13
|
+
isSomeChecked: import("vue").ComputedRef<boolean>;
|
|
14
|
+
toggleRow: (row: any, index: number) => void;
|
|
15
|
+
toggleAll: (event: Event) => void;
|
|
16
|
+
selectRow: (row: any, index: number) => void;
|
|
17
|
+
deselectRow: (row: any, index: number) => void;
|
|
18
|
+
selectAll: () => void;
|
|
19
|
+
deselectAll: () => void;
|
|
20
|
+
clearSelection: () => void;
|
|
21
|
+
selectionHelpers: SelectionHelpers;
|
|
22
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DataTable Sorting Composable
|
|
3
|
+
*/
|
|
4
|
+
import { type Ref } from 'vue';
|
|
5
|
+
import type { Sort, SortHelpers } from '@/types/datatable';
|
|
6
|
+
export declare function useDataTableSort<T extends (event: any, ...args: any[]) => void>(props: {
|
|
7
|
+
sort?: Sort[];
|
|
8
|
+
serverOptions?: any;
|
|
9
|
+
rows: any[];
|
|
10
|
+
rowsPerPage: number;
|
|
11
|
+
}, emit: T, page: Ref<number>): {
|
|
12
|
+
sortedRows: import("vue").ComputedRef<any[]>;
|
|
13
|
+
activeSort: import("vue").ComputedRef<any>;
|
|
14
|
+
sortHelpers: SortHelpers;
|
|
15
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const formatNumber: (value: number) => string;
|
|
2
|
+
export declare const formatDate: (date: string | Date, locale?: string) => string;
|
|
3
|
+
export declare const truncateText: (text: string, maxLength?: number) => string;
|
|
4
|
+
export declare const getNestedValue: (obj: any, path: string) => any;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vs-pagination[data-v-a6d89ca2]{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);flex-wrap:wrap}.vs-pagination-button[data-v-a6d89ca2]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination-button[data-v-a6d89ca2]:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination-button.vs-active[data-v-a6d89ca2]{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination-button[data-v-a6d89ca2]:disabled{opacity:.5;cursor:not-allowed}.vs-pagination-nav[data-v-a6d89ca2]{font-weight:var(--vs-font-weight-bold)}.vs-pagination-ellipsis[data-v-a6d89ca2]{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm);font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-pagination-button[data-v-a6d89ca2]{min-width:28px;height:28px;font-size:12px}}.vs-datatable[data-v-73862aa1]{--vs-table-wrapper-overflow: auto}.vs-table-wrapper[data-v-73862aa1]{overflow:var(--vs-table-wrapper-overflow)}.vs-header-content[data-v-73862aa1]{display:flex;align-items:center;gap:var(--vs-spacing-sm)}.vs-header-label[data-v-73862aa1]{flex:1}.vs-checkbox-column[data-v-73862aa1]{width:50px;text-align:center}.vs-row-clickable[data-v-73862aa1]{cursor:pointer}.vs-row-selected[data-v-73862aa1]{background-color:rgba(var(--vs-primary),.1)}.vs-table-footer[data-v-73862aa1]{display:flex;align-items:center;justify-content:space-between;padding:var(--vs-spacing-sm) 0}.vs-table-info[data-v-73862aa1]{color:var(--vs-secondary);font-size:var(--vs-font-size-md)}.vs-search-container[data-v-73862aa1]{margin-bottom:var(--vs-spacing-md)}:root{--vs-primary: #007bff;--vs-secondary: #6c757d;--vs-success: #28a745;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #17a2b8;--vs-light: #f8f9fa;--vs-dark: #343a40;--vs-table-bg: #ffffff;--vs-table-border: #dee2e6;--vs-table-header-bg: #f8f9fa;--vs-table-header-color: #495057;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #fafafa;--vs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--vs-font-size: 14px;--vs-font-size-sm: 12px;--vs-font-size-lg: 16px;--vs-font-weight-normal: 400;--vs-font-weight-bold: 600;--vs-spacing-xs: 4px;--vs-spacing-sm: 8px;--vs-spacing-md: 16px;--vs-spacing-lg: 24px;--vs-spacing-xl: 32px;--vs-border-radius: 4px;--vs-border-radius-sm: 2px;--vs-border-radius-lg: 8px;--vs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--vs-shadow: 0 2px 4px rgba(0, 0, 0, .1);--vs-shadow-lg: 0 4px 8px rgba(0, 0, 0, .15);--vs-transition: all .2s ease-in-out;--vs-transition-fast: all .15s ease-in-out;--vs-z-dropdown: 1000;--vs-z-sticky: 1020;--vs-z-fixed: 1030;--vs-z-modal: 1040;--vs-z-popover: 1050;--vs-z-tooltip: 1060}.vs-datatable{font-family:var(--vs-font-family);font-size:var(--vs-font-size);line-height:1.5;color:var(--vs-dark);background-color:var(--vs-table-bg);box-sizing:border-box}.vs-datatable *,.vs-datatable *:before,.vs-datatable *:after{box-sizing:border-box}.vs-table-container{position:relative;background-color:var(--vs-table-bg);border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);overflow:hidden;box-shadow:var(--vs-shadow-sm)}.vs-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;background-color:var(--vs-table-bg)}.vs-table thead{background-color:var(--vs-table-header-bg)}.vs-table thead th{padding:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold);color:var(--vs-table-header-color);text-align:left;vertical-align:middle;border-bottom:2px solid var(--vs-table-border);position:relative;-webkit-user-select:none;user-select:none}.vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-table tbody tr{transition:var(--vs-transition-fast);border-bottom:1px solid var(--vs-table-border)}.vs-table tbody tr:hover{background-color:var(--vs-table-hover-bg)}.vs-table tbody tr:nth-child(2n){background-color:var(--vs-table-stripe-bg)}.vs-table tbody tr:last-child{border-bottom:none}.vs-table tbody tr td{padding:var(--vs-spacing-md);vertical-align:middle;border-right:1px solid var(--vs-table-border)}.vs-table tbody tr td:last-child{border-right:none}.vs-sortable{cursor:pointer;position:relative}.vs-sortable:hover{background-color:rgba(var(--vs-primary),.1)}.vs-sortable .vs-sort-icons{display:inline-flex;flex-direction:column;margin-left:var(--vs-spacing-sm);vertical-align:middle}.vs-sortable .vs-sort-icons .vs-sort-icon{font-size:10px;line-height:1;color:var(--vs-secondary);transition:var(--vs-transition-fast);margin:-8px 0}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-asc,.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-desc{color:var(--vs-primary)}.vs-sortable .vs-sort-icons .vs-sort-icon svg{fill:#e3e3e3}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-active svg{fill:currentColor}.vs-sortable .vs-sort-priority{display:inline-block;background-color:var(--vs-primary);color:#fff;font-size:10px;padding:2px 6px;border-radius:var(--vs-border-radius-sm);margin-left:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold)}.vs-loading{display:flex;align-items:center;justify-content:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-loading .vs-spinner{width:20px;height:20px;border:2px solid var(--vs-table-border);border-top:2px solid var(--vs-primary);border-radius:50%;animation:vs-spin 1s linear infinite;margin-right:var(--vs-spacing-sm)}@keyframes vs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vs-no-data{text-align:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-no-data .vs-no-data-icon{width:60px;height:60px;margin:0 auto var(--vs-spacing-md);opacity:.5}.vs-no-data .vs-no-data-message{font-size:var(--vs-font-size-lg);font-weight:var(--vs-font-weight-bold);margin-bottom:var(--vs-spacing-sm)}.vs-no-data .vs-no-data-description{font-size:var(--vs-font-size-sm);color:var(--vs-secondary)}.vs-search{position:relative;margin-bottom:var(--vs-spacing-md)}.vs-search .vs-search-input{width:100%;padding:var(--vs-spacing-sm) var(--vs-spacing-md);padding-left:40px;border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);font-size:var(--vs-font-size);transition:var(--vs-transition-fast)}.vs-search .vs-search-input:focus{outline:none;border-color:var(--vs-primary);box-shadow:0 0 0 2px rgba(var(--vs-primary),.25)}.vs-search .vs-search-icon{position:absolute;left:var(--vs-spacing-md);top:50%;transform:translateY(-50%);color:var(--vs-secondary);pointer-events:none}.vs-pagination{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);margin-top:var(--vs-spacing-md)}.vs-pagination .vs-pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination .vs-pagination-button:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination .vs-pagination-button.vs-active{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination .vs-pagination-button:disabled{opacity:.5;cursor:not-allowed}.vs-pagination .vs-pagination-ellipsis{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm)}.vs-checkbox{display:inline-flex;align-items:center;cursor:pointer}.vs-checkbox input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--vs-primary)}.vs-checkbox label{margin:0;cursor:pointer;font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-table-container{overflow-x:auto}.vs-table{min-width:600px}.vs-pagination{flex-wrap:wrap;gap:var(--vs-spacing-xs)}.vs-pagination .vs-pagination-button{min-width:28px;height:28px;font-size:12px}}.vs-text-center{text-align:center}.vs-text-left{text-align:left}.vs-text-right{text-align:right}.vs-text-muted{color:var(--vs-secondary)}.vs-text-primary{color:var(--vs-primary)}.vs-text-success{color:var(--vs-success)}.vs-text-danger{color:var(--vs-danger)}.vs-text-warning{color:var(--vs-warning)}.vs-bg-primary{background-color:var(--vs-primary)}.vs-bg-success{background-color:var(--vs-success)}.vs-bg-danger{background-color:var(--vs-danger)}.vs-bg-warning{background-color:var(--vs-warning)}.vs-bg-light{background-color:var(--vs-light)}.vs-border{border:1px solid var(--vs-table-border)}.vs-border-top{border-top:1px solid var(--vs-table-border)}.vs-border-bottom{border-bottom:1px solid var(--vs-table-border)}.vs-border-left{border-left:1px solid var(--vs-table-border)}.vs-border-right{border-right:1px solid var(--vs-table-border)}.vs-rounded{border-radius:var(--vs-border-radius)}.vs-rounded-sm{border-radius:var(--vs-border-radius-sm)}.vs-rounded-lg{border-radius:var(--vs-border-radius-lg)}.vs-shadow{box-shadow:var(--vs-shadow)}.vs-shadow-sm{box-shadow:var(--vs-shadow-sm)}.vs-shadow-lg{box-shadow:var(--vs-shadow-lg)}.vs-fade-in{animation:vs-fade-in .3s ease-in-out}@keyframes vs-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.vs-slide-in{animation:vs-slide-in .3s ease-in-out}@keyframes vs-slide-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.vs-datatable.vs-theme-dark{--vs-primary: #0d6efd;--vs-secondary: #6c757d;--vs-success: #198754;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #0dcaf0;--vs-light: #f8f9fa;--vs-dark: #212529;--vs-table-bg: #1a1a1a;--vs-table-border: #333333;--vs-table-header-bg: #2d2d2d;--vs-table-header-color: #ffffff;--vs-table-hover-bg: #333333;--vs-table-stripe-bg: #222222;color:#fff;background-color:var(--vs-table-bg)}.vs-datatable.vs-theme-minimal{--vs-primary: #000000;--vs-secondary: #666666;--vs-success: #000000;--vs-danger: #000000;--vs-warning: #000000;--vs-info: #000000;--vs-light: #f9f9f9;--vs-dark: #000000;--vs-table-bg: #ffffff;--vs-table-border: #e0e0e0;--vs-table-header-bg: #ffffff;--vs-table-header-color: #000000;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #ffffff}.vs-datatable.vs-theme-minimal .vs-table{border:none;box-shadow:none}.vs-datatable.vs-theme-minimal .vs-table thead th{border-bottom:2px solid var(--vs-table-border);font-weight:500}.vs-datatable.vs-theme-minimal .vs-table tbody tr{border-bottom:1px solid var(--vs-table-border)}.vs-datatable.vs-theme-colorful{--vs-primary: #e91e63;--vs-secondary: #9c27b0;--vs-success: #4caf50;--vs-danger: #f44336;--vs-warning: #ff9800;--vs-info: #2196f3;--vs-light: #f3e5f5;--vs-dark: #2e2e2e;--vs-table-bg: #ffffff;--vs-table-border: #e1bee7;--vs-table-header-bg: linear-gradient(135deg, #e91e63, #9c27b0);--vs-table-header-color: #ffffff;--vs-table-hover-bg: #f3e5f5;--vs-table-stripe-bg: #fafafa}.vs-datatable.vs-theme-colorful .vs-table thead th{background:var(--vs-table-header-bg);color:var(--vs-table-header-color);font-weight:600}.vs-datatable.vs-theme-colorful .vs-pagination-button.vs-active{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary))}.vs-datatable.vs-theme-corporate{--vs-primary: #1e3a8a;--vs-secondary: #64748b;--vs-success: #059669;--vs-danger: #dc2626;--vs-warning: #d97706;--vs-info: #0891b2;--vs-light: #f8fafc;--vs-dark: #1e293b;--vs-table-bg: #ffffff;--vs-table-border: #e2e8f0;--vs-table-header-bg: #f1f5f9;--vs-table-header-color: #334155;--vs-table-hover-bg: #f8fafc;--vs-table-stripe-bg: #ffffff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.vs-datatable.vs-theme-corporate .vs-table{border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.vs-datatable.vs-theme-corporate .vs-table thead th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:16px 20px}.vs-datatable.vs-theme-corporate .vs-table tbody td{padding:16px 20px;font-size:14px}.vs-datatable.vs-theme-compact{--vs-spacing-xs: 2px;--vs-spacing-sm: 4px;--vs-spacing-md: 8px;--vs-spacing-lg: 12px;--vs-spacing-xl: 16px;--vs-font-size: 12px;--vs-font-size-sm: 10px;--vs-font-size-lg: 14px}.vs-datatable.vs-theme-compact .vs-table thead th{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-compact .vs-table tbody td{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size)}.vs-datatable.vs-theme-compact .vs-pagination-button{min-width:24px;height:24px;font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-rounded{--vs-border-radius: 12px;--vs-border-radius-sm: 6px;--vs-border-radius-lg: 16px}.vs-datatable.vs-theme-rounded .vs-table-container{border-radius:var(--vs-border-radius);overflow:hidden}.vs-datatable.vs-theme-rounded .vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-pagination-button{border-radius:var(--vs-border-radius-sm)}.vs-datatable.vs-theme-brand{--vs-primary: #ff6b35;--vs-secondary: #004e89;--vs-success: #00a896;--vs-danger: #e63946;--vs-warning: #f77f00;--vs-info: #06a77d}.vs-datatable.vs-theme-brand .vs-table-container{border:2px solid var(--vs-primary);border-radius:16px;box-shadow:0 8px 32px #ff6b3533}.vs-datatable.vs-theme-brand .vs-table thead th{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary));color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.1)}.vs-datatable.vs-theme-brand .vs-pagination-button.vs-active{background:var(--vs-primary);transform:scale(1.05)}.vs-datatable.vs-theme-brand .vs-pagination-button:hover:not(:disabled){border-color:var(--vs-primary);transform:translateY(-1px)}
|
|
1
|
+
.vs-pagination[data-v-a6d89ca2]{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);flex-wrap:wrap}.vs-pagination-button[data-v-a6d89ca2]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination-button[data-v-a6d89ca2]:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination-button.vs-active[data-v-a6d89ca2]{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination-button[data-v-a6d89ca2]:disabled{opacity:.5;cursor:not-allowed}.vs-pagination-nav[data-v-a6d89ca2]{font-weight:var(--vs-font-weight-bold)}.vs-pagination-ellipsis[data-v-a6d89ca2]{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm);font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-pagination-button[data-v-a6d89ca2]{min-width:28px;height:28px;font-size:12px}}.vs-datatable[data-v-69840c78]{--vs-table-wrapper-overflow: auto}.vs-table-wrapper[data-v-69840c78]{overflow:var(--vs-table-wrapper-overflow)}.vs-header-content[data-v-69840c78]{display:flex;align-items:center;gap:var(--vs-spacing-sm)}.vs-header-label[data-v-69840c78]{flex:1}.vs-checkbox-column[data-v-69840c78]{width:50px;text-align:center}.vs-row-clickable[data-v-69840c78]{cursor:pointer}.vs-row-selected[data-v-69840c78]{background-color:rgba(var(--vs-primary),.1)}.vs-table-footer[data-v-69840c78]{display:flex;align-items:center;justify-content:space-between;padding:var(--vs-spacing-sm) 0}.vs-table-info[data-v-69840c78]{color:var(--vs-secondary);font-size:var(--vs-font-size-md)}.vs-search-container[data-v-69840c78]{margin-bottom:var(--vs-spacing-md)}:root{--vs-primary: #007bff;--vs-secondary: #6c757d;--vs-success: #28a745;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #17a2b8;--vs-light: #f8f9fa;--vs-dark: #343a40;--vs-table-bg: #ffffff;--vs-table-border: #dee2e6;--vs-table-header-bg: #f8f9fa;--vs-table-header-color: #495057;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #fafafa;--vs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--vs-font-size: 14px;--vs-font-size-sm: 12px;--vs-font-size-lg: 16px;--vs-font-weight-normal: 400;--vs-font-weight-bold: 600;--vs-spacing-xs: 4px;--vs-spacing-sm: 8px;--vs-spacing-md: 16px;--vs-spacing-lg: 24px;--vs-spacing-xl: 32px;--vs-border-radius: 4px;--vs-border-radius-sm: 2px;--vs-border-radius-lg: 8px;--vs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--vs-shadow: 0 2px 4px rgba(0, 0, 0, .1);--vs-shadow-lg: 0 4px 8px rgba(0, 0, 0, .15);--vs-transition: all .2s ease-in-out;--vs-transition-fast: all .15s ease-in-out;--vs-z-dropdown: 1000;--vs-z-sticky: 1020;--vs-z-fixed: 1030;--vs-z-modal: 1040;--vs-z-popover: 1050;--vs-z-tooltip: 1060}.vs-datatable{font-family:var(--vs-font-family);font-size:var(--vs-font-size);line-height:1.5;color:var(--vs-dark);background-color:var(--vs-table-bg);box-sizing:border-box}.vs-datatable *,.vs-datatable *:before,.vs-datatable *:after{box-sizing:border-box}.vs-table-container{position:relative;background-color:var(--vs-table-bg);border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);overflow:hidden;box-shadow:var(--vs-shadow-sm)}.vs-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;background-color:var(--vs-table-bg)}.vs-table thead{background-color:var(--vs-table-header-bg)}.vs-table thead th{padding:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold);color:var(--vs-table-header-color);text-align:left;vertical-align:middle;border-bottom:2px solid var(--vs-table-border);position:relative;-webkit-user-select:none;user-select:none}.vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-table tbody tr{transition:var(--vs-transition-fast);border-bottom:1px solid var(--vs-table-border)}.vs-table tbody tr:hover{background-color:var(--vs-table-hover-bg)}.vs-table tbody tr:nth-child(2n){background-color:var(--vs-table-stripe-bg)}.vs-table tbody tr:last-child{border-bottom:none}.vs-table tbody tr td{padding:var(--vs-spacing-md);vertical-align:middle;border-right:1px solid var(--vs-table-border)}.vs-table tbody tr td:last-child{border-right:none}.vs-sortable{cursor:pointer;position:relative}.vs-sortable:hover{background-color:rgba(var(--vs-primary),.1)}.vs-sortable .vs-sort-icons{display:inline-flex;flex-direction:column;margin-left:var(--vs-spacing-sm);vertical-align:middle}.vs-sortable .vs-sort-icons .vs-sort-icon{font-size:10px;line-height:1;color:var(--vs-secondary);transition:var(--vs-transition-fast);margin:-8px 0}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-asc,.vs-sortable .vs-sort-icons .vs-sort-icon.vs-sort-desc{color:var(--vs-primary)}.vs-sortable .vs-sort-icons .vs-sort-icon svg{fill:#e3e3e3}.vs-sortable .vs-sort-icons .vs-sort-icon.vs-active svg{fill:currentColor}.vs-sortable .vs-sort-priority{display:inline-block;background-color:var(--vs-primary);color:#fff;font-size:10px;padding:2px 6px;border-radius:var(--vs-border-radius-sm);margin-left:var(--vs-spacing-sm);font-weight:var(--vs-font-weight-bold)}.vs-loading{display:flex;align-items:center;justify-content:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-loading .vs-spinner{width:20px;height:20px;border:2px solid var(--vs-table-border);border-top:2px solid var(--vs-primary);border-radius:50%;animation:vs-spin 1s linear infinite;margin-right:var(--vs-spacing-sm)}@keyframes vs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vs-no-data{text-align:center;padding:var(--vs-spacing-xl);color:var(--vs-secondary)}.vs-no-data .vs-no-data-icon{width:60px;height:60px;margin:0 auto var(--vs-spacing-md);opacity:.5}.vs-no-data .vs-no-data-message{font-size:var(--vs-font-size-lg);font-weight:var(--vs-font-weight-bold);margin-bottom:var(--vs-spacing-sm)}.vs-no-data .vs-no-data-description{font-size:var(--vs-font-size-sm);color:var(--vs-secondary)}.vs-search{position:relative;margin-bottom:var(--vs-spacing-md)}.vs-search .vs-search-input{width:100%;padding:var(--vs-spacing-sm) var(--vs-spacing-md);padding-left:40px;border:1px solid var(--vs-table-border);border-radius:var(--vs-border-radius);font-size:var(--vs-font-size);transition:var(--vs-transition-fast)}.vs-search .vs-search-input:focus{outline:none;border-color:var(--vs-primary);box-shadow:0 0 0 2px rgba(var(--vs-primary),.25)}.vs-search .vs-search-icon{position:absolute;left:var(--vs-spacing-md);top:50%;transform:translateY(-50%);color:var(--vs-secondary);pointer-events:none}.vs-pagination{display:flex;align-items:center;justify-content:center;gap:var(--vs-spacing-sm);margin-top:var(--vs-spacing-md)}.vs-pagination .vs-pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--vs-spacing-sm);border:1px solid var(--vs-table-border);background-color:var(--vs-table-bg);color:var(--vs-dark);text-decoration:none;border-radius:var(--vs-border-radius);font-size:var(--vs-font-size-sm);transition:var(--vs-transition-fast);cursor:pointer}.vs-pagination .vs-pagination-button:hover:not(:disabled){background-color:var(--vs-table-hover-bg);border-color:var(--vs-primary)}.vs-pagination .vs-pagination-button.vs-active{background-color:var(--vs-primary);border-color:var(--vs-primary);color:#fff}.vs-pagination .vs-pagination-button:disabled{opacity:.5;cursor:not-allowed}.vs-pagination .vs-pagination-ellipsis{color:var(--vs-secondary);padding:0 var(--vs-spacing-sm)}.vs-checkbox{display:inline-flex;align-items:center;cursor:pointer}.vs-checkbox input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--vs-primary)}.vs-checkbox label{margin:0;cursor:pointer;font-size:var(--vs-font-size-sm)}@media (max-width: 768px){.vs-table-container{overflow-x:auto}.vs-table{min-width:600px}.vs-pagination{flex-wrap:wrap;gap:var(--vs-spacing-xs)}.vs-pagination .vs-pagination-button{min-width:28px;height:28px;font-size:12px}}.vs-text-center{text-align:center}.vs-text-left{text-align:left}.vs-text-right{text-align:right}.vs-text-muted{color:var(--vs-secondary)}.vs-text-primary{color:var(--vs-primary)}.vs-text-success{color:var(--vs-success)}.vs-text-danger{color:var(--vs-danger)}.vs-text-warning{color:var(--vs-warning)}.vs-bg-primary{background-color:var(--vs-primary)}.vs-bg-success{background-color:var(--vs-success)}.vs-bg-danger{background-color:var(--vs-danger)}.vs-bg-warning{background-color:var(--vs-warning)}.vs-bg-light{background-color:var(--vs-light)}.vs-border{border:1px solid var(--vs-table-border)}.vs-border-top{border-top:1px solid var(--vs-table-border)}.vs-border-bottom{border-bottom:1px solid var(--vs-table-border)}.vs-border-left{border-left:1px solid var(--vs-table-border)}.vs-border-right{border-right:1px solid var(--vs-table-border)}.vs-rounded{border-radius:var(--vs-border-radius)}.vs-rounded-sm{border-radius:var(--vs-border-radius-sm)}.vs-rounded-lg{border-radius:var(--vs-border-radius-lg)}.vs-shadow{box-shadow:var(--vs-shadow)}.vs-shadow-sm{box-shadow:var(--vs-shadow-sm)}.vs-shadow-lg{box-shadow:var(--vs-shadow-lg)}.vs-fade-in{animation:vs-fade-in .3s ease-in-out}@keyframes vs-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.vs-slide-in{animation:vs-slide-in .3s ease-in-out}@keyframes vs-slide-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.vs-datatable.vs-theme-dark{--vs-primary: #0d6efd;--vs-secondary: #6c757d;--vs-success: #198754;--vs-danger: #dc3545;--vs-warning: #ffc107;--vs-info: #0dcaf0;--vs-light: #f8f9fa;--vs-dark: #212529;--vs-table-bg: #1a1a1a;--vs-table-border: #333333;--vs-table-header-bg: #2d2d2d;--vs-table-header-color: #ffffff;--vs-table-hover-bg: #333333;--vs-table-stripe-bg: #222222;color:#fff;background-color:var(--vs-table-bg)}.vs-datatable.vs-theme-minimal{--vs-primary: #000000;--vs-secondary: #666666;--vs-success: #000000;--vs-danger: #000000;--vs-warning: #000000;--vs-info: #000000;--vs-light: #f9f9f9;--vs-dark: #000000;--vs-table-bg: #ffffff;--vs-table-border: #e0e0e0;--vs-table-header-bg: #ffffff;--vs-table-header-color: #000000;--vs-table-hover-bg: #f5f5f5;--vs-table-stripe-bg: #ffffff}.vs-datatable.vs-theme-minimal .vs-table{border:none;box-shadow:none}.vs-datatable.vs-theme-minimal .vs-table thead th{border-bottom:2px solid var(--vs-table-border);font-weight:500}.vs-datatable.vs-theme-minimal .vs-table tbody tr{border-bottom:1px solid var(--vs-table-border)}.vs-datatable.vs-theme-colorful{--vs-primary: #e91e63;--vs-secondary: #9c27b0;--vs-success: #4caf50;--vs-danger: #f44336;--vs-warning: #ff9800;--vs-info: #2196f3;--vs-light: #f3e5f5;--vs-dark: #2e2e2e;--vs-table-bg: #ffffff;--vs-table-border: #e1bee7;--vs-table-header-bg: linear-gradient(135deg, #e91e63, #9c27b0);--vs-table-header-color: #ffffff;--vs-table-hover-bg: #f3e5f5;--vs-table-stripe-bg: #fafafa}.vs-datatable.vs-theme-colorful .vs-table thead th{background:var(--vs-table-header-bg);color:var(--vs-table-header-color);font-weight:600}.vs-datatable.vs-theme-colorful .vs-pagination-button.vs-active{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary))}.vs-datatable.vs-theme-corporate{--vs-primary: #1e3a8a;--vs-secondary: #64748b;--vs-success: #059669;--vs-danger: #dc2626;--vs-warning: #d97706;--vs-info: #0891b2;--vs-light: #f8fafc;--vs-dark: #1e293b;--vs-table-bg: #ffffff;--vs-table-border: #e2e8f0;--vs-table-header-bg: #f1f5f9;--vs-table-header-color: #334155;--vs-table-hover-bg: #f8fafc;--vs-table-stripe-bg: #ffffff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.vs-datatable.vs-theme-corporate .vs-table{border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.vs-datatable.vs-theme-corporate .vs-table thead th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:16px 20px}.vs-datatable.vs-theme-corporate .vs-table tbody td{padding:16px 20px;font-size:14px}.vs-datatable.vs-theme-compact{--vs-spacing-xs: 2px;--vs-spacing-sm: 4px;--vs-spacing-md: 8px;--vs-spacing-lg: 12px;--vs-spacing-xl: 16px;--vs-font-size: 12px;--vs-font-size-sm: 10px;--vs-font-size-lg: 14px}.vs-datatable.vs-theme-compact .vs-table thead th{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-compact .vs-table tbody td{padding:var(--vs-spacing-sm) var(--vs-spacing-md);font-size:var(--vs-font-size)}.vs-datatable.vs-theme-compact .vs-pagination-button{min-width:24px;height:24px;font-size:var(--vs-font-size-sm)}.vs-datatable.vs-theme-rounded{--vs-border-radius: 12px;--vs-border-radius-sm: 6px;--vs-border-radius-lg: 16px}.vs-datatable.vs-theme-rounded .vs-table-container{border-radius:var(--vs-border-radius);overflow:hidden}.vs-datatable.vs-theme-rounded .vs-table thead th:first-child{border-top-left-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-table thead th:last-child{border-top-right-radius:var(--vs-border-radius)}.vs-datatable.vs-theme-rounded .vs-pagination-button{border-radius:var(--vs-border-radius-sm)}.vs-datatable.vs-theme-brand{--vs-primary: #ff6b35;--vs-secondary: #004e89;--vs-success: #00a896;--vs-danger: #e63946;--vs-warning: #f77f00;--vs-info: #06a77d}.vs-datatable.vs-theme-brand .vs-table-container{border:2px solid var(--vs-primary);border-radius:16px;box-shadow:0 8px 32px #ff6b3533}.vs-datatable.vs-theme-brand .vs-table thead th{background:linear-gradient(135deg,var(--vs-primary),var(--vs-secondary));color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.1)}.vs-datatable.vs-theme-brand .vs-pagination-button.vs-active{background:var(--vs-primary);transform:scale(1.05)}.vs-datatable.vs-theme-brand .vs-pagination-button:hover:not(:disabled){border-color:var(--vs-primary);transform:translateY(-1px)}
|
package/dist/index.d.ts
ADDED
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { type Ref, type ComputedRef } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* VsDataTable Types and Interfaces
|
|
4
|
+
*/
|
|
5
|
+
export interface Column {
|
|
6
|
+
label: string;
|
|
7
|
+
field: string;
|
|
8
|
+
width?: string;
|
|
9
|
+
sortable?: boolean;
|
|
10
|
+
isKey?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface Sort {
|
|
13
|
+
field: string;
|
|
14
|
+
order: 'asc' | 'desc';
|
|
15
|
+
priority?: number;
|
|
16
|
+
}
|
|
17
|
+
export interface ServerOptions {
|
|
18
|
+
page: number;
|
|
19
|
+
rowsPerPage: number;
|
|
20
|
+
sort?: Sort[];
|
|
21
|
+
[key: string]: any;
|
|
22
|
+
}
|
|
23
|
+
export interface DataTableProps {
|
|
24
|
+
rows?: any[];
|
|
25
|
+
itemSelected?: any[] | null;
|
|
26
|
+
tablename?: string;
|
|
27
|
+
sort?: Sort[];
|
|
28
|
+
serverItemsLength?: number;
|
|
29
|
+
serverOptions?: ServerOptions | null;
|
|
30
|
+
showHeader?: boolean;
|
|
31
|
+
headerText?: string;
|
|
32
|
+
loading?: boolean;
|
|
33
|
+
columns: Column[];
|
|
34
|
+
showSearch?: boolean;
|
|
35
|
+
tableClass?: string | string[] | Record<string, any>;
|
|
36
|
+
rowClass?: string | string[] | Record<string, any>;
|
|
37
|
+
showRowEntries?: boolean;
|
|
38
|
+
containerClass?: string | string[] | Record<string, any>;
|
|
39
|
+
headerClass?: string | string[] | Record<string, any>;
|
|
40
|
+
cellClass?: string | string[] | Record<string, any>;
|
|
41
|
+
searchClass?: string | string[] | Record<string, any>;
|
|
42
|
+
paginationClass?: string | string[] | Record<string, any>;
|
|
43
|
+
searchPlaceholder?: string;
|
|
44
|
+
loadingText?: string;
|
|
45
|
+
noDataText?: string;
|
|
46
|
+
noDataDescription?: string;
|
|
47
|
+
entriesText?: string;
|
|
48
|
+
maxVisiblePages?: number;
|
|
49
|
+
rowsPerPage?: number;
|
|
50
|
+
rowKey?: string | ((item: any, index: number) => string | number);
|
|
51
|
+
}
|
|
52
|
+
export interface DataTableEmits {
|
|
53
|
+
(event: 'update:itemSelected', value: any[]): void;
|
|
54
|
+
(event: 'update:serverItemsLength', value: number | undefined): void;
|
|
55
|
+
(event: 'update:serverOptions', value: ServerOptions): void;
|
|
56
|
+
(event: 'update:sort', value: Sort[]): void;
|
|
57
|
+
(event: 'input-typed', value: string): void;
|
|
58
|
+
(event: 'page-updated', value: number): void;
|
|
59
|
+
(event: 'sort-changed', payload: {
|
|
60
|
+
sort: Sort[];
|
|
61
|
+
}): void;
|
|
62
|
+
(event: 'row-click', row: any, index: number): void;
|
|
63
|
+
(event: 'row-selected', row: any, index: number): void;
|
|
64
|
+
(event: 'row-deselected', row: any, index: number): void;
|
|
65
|
+
(event: 'all-rows-selected', rows: any[]): void;
|
|
66
|
+
(event: 'table:mounted'): void;
|
|
67
|
+
(event: 'table:unmounted'): void;
|
|
68
|
+
(event: 'table:before-mount'): void;
|
|
69
|
+
(event: 'data-loaded', data: any[]): void;
|
|
70
|
+
(event: 'data-error', error: any): void;
|
|
71
|
+
}
|
|
72
|
+
export interface RecordRange {
|
|
73
|
+
start: number;
|
|
74
|
+
end: number;
|
|
75
|
+
}
|
|
76
|
+
export interface SortHelpers {
|
|
77
|
+
isColumnSorted: (field: string) => boolean;
|
|
78
|
+
getSortPriority: (field: string) => number | null;
|
|
79
|
+
getSortOrder: (field: string) => string | null;
|
|
80
|
+
handleSort: (field: string, event: MouseEvent) => void;
|
|
81
|
+
}
|
|
82
|
+
export interface PaginationHelpers {
|
|
83
|
+
page: Ref<number>;
|
|
84
|
+
rowsPerPage: Ref<number>;
|
|
85
|
+
totalRecords: Ref<number>;
|
|
86
|
+
recordRange: ComputedRef<RecordRange>;
|
|
87
|
+
handlePageChange: (newPage: number) => void;
|
|
88
|
+
}
|
|
89
|
+
export interface SelectionHelpers {
|
|
90
|
+
selectedItems: ComputedRef<any[]>;
|
|
91
|
+
isItemSelectedControlled: ComputedRef<boolean>;
|
|
92
|
+
isAllChecked: ComputedRef<boolean>;
|
|
93
|
+
isSomeChecked: ComputedRef<boolean>;
|
|
94
|
+
toggleRow: (row: any, index: number) => void;
|
|
95
|
+
toggleAll: (event: Event) => void;
|
|
96
|
+
}
|
|
97
|
+
export interface SearchHelpers {
|
|
98
|
+
searchQuery: Ref<string>;
|
|
99
|
+
onInputTyped: (value: string) => void;
|
|
100
|
+
}
|
|
101
|
+
export type { Ref, ComputedRef } from 'vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./datatable";
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* VsDataTable Utility Functions
|
|
3
|
+
*/
|
|
4
|
+
import type { Column, Sort } from '@/types/datatable';
|
|
5
|
+
/**
|
|
6
|
+
* Get nested value from object using dot notation
|
|
7
|
+
* @param obj - The object to traverse
|
|
8
|
+
* @param path - The path to the value (e.g., 'user.profile.name')
|
|
9
|
+
* @returns The value at the path or empty string
|
|
10
|
+
*/
|
|
11
|
+
export declare function getValue(obj: any, path: string): any;
|
|
12
|
+
/**
|
|
13
|
+
* Get row key for identification
|
|
14
|
+
* @param item - The row item
|
|
15
|
+
* @param index - The row index
|
|
16
|
+
* @param rowKey - The row key field or function
|
|
17
|
+
* @returns The unique key for the row
|
|
18
|
+
*/
|
|
19
|
+
export declare function getRowKey(item: any, index: number, rowKey?: string | ((item: any, index: number) => string | number)): string | number;
|
|
20
|
+
/**
|
|
21
|
+
* Check if a row is selected
|
|
22
|
+
* @param item - The row item to check
|
|
23
|
+
* @param selectedItems - Array of selected items
|
|
24
|
+
* @param rowKey - The row key field or function
|
|
25
|
+
* @returns True if the row is selected
|
|
26
|
+
*/
|
|
27
|
+
export declare function isRowSelected(item: any, selectedItems: any[], rowKey?: string | ((item: any, index: number) => string | number)): boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Calculate total columns including checkbox column
|
|
30
|
+
* @param columns - Array of column definitions
|
|
31
|
+
* @param hasCheckbox - Whether checkbox column is present
|
|
32
|
+
* @returns Total number of columns
|
|
33
|
+
*/
|
|
34
|
+
export declare function calculateTotalColumns(columns: Column[], hasCheckbox: boolean): number;
|
|
35
|
+
/**
|
|
36
|
+
* Sort array of objects by multiple criteria
|
|
37
|
+
* @param array - Array to sort
|
|
38
|
+
* @param sortCriteria - Array of sort criteria
|
|
39
|
+
* @returns Sorted array
|
|
40
|
+
*/
|
|
41
|
+
export declare function sortArray(array: any[], sortCriteria: Sort[]): any[];
|
|
42
|
+
/**
|
|
43
|
+
* Generic paginate function
|
|
44
|
+
* @param rows - Array of sorted rows
|
|
45
|
+
* @param page - Current page
|
|
46
|
+
* @param rowsPerPage - Number of rows per page
|
|
47
|
+
* @returns Object with start and end indices
|
|
48
|
+
*/
|
|
49
|
+
export declare function paginateRows<T>(rows: T[], page: number, rowsPerPage?: number): T[];
|
|
50
|
+
/**
|
|
51
|
+
* Calculate record range for pagination display
|
|
52
|
+
* @param page - Current page number
|
|
53
|
+
* @param rowsPerPage - Number of rows per page
|
|
54
|
+
* @param totalRecords - Total number of records
|
|
55
|
+
* @returns Object with start and end indices
|
|
56
|
+
*/
|
|
57
|
+
export declare function calculateRecordRange(page: number, rowsPerPage: number, totalRecords: number): {
|
|
58
|
+
start: number;
|
|
59
|
+
end: number;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Validate column configuration
|
|
63
|
+
* @param columns - Array of column definitions
|
|
64
|
+
* @returns Array of validation errors
|
|
65
|
+
*/
|
|
66
|
+
export declare function validateColumns(columns: Column[]): string[];
|
|
67
|
+
/**
|
|
68
|
+
* Generate unique table ID
|
|
69
|
+
* @param prefix - Prefix for the ID
|
|
70
|
+
* @returns Unique table ID
|
|
71
|
+
*/
|
|
72
|
+
export declare function generateTableId(prefix?: string): string;
|
|
73
|
+
/**
|
|
74
|
+
* Check if server-side mode is active
|
|
75
|
+
* @param serverOptions - Server options object
|
|
76
|
+
* @returns True if server-side mode is active
|
|
77
|
+
*/
|
|
78
|
+
export declare function isServerMode(serverOptions: any): boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Deep clone an object
|
|
81
|
+
* @param obj - Object to clone
|
|
82
|
+
* @returns Cloned object
|
|
83
|
+
*/
|
|
84
|
+
export declare function deepClone<T>(obj: T): T;
|