slickgrid-vue 0.2.0 → 0.2.2
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/README.md +86 -87
- package/dist/index.d.cts +172 -17
- package/dist/index.d.ts +172 -17
- package/dist/index.mjs +385 -346
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -10
- package/src/components/SlickgridVue.vue +22 -68
- package/src/components/slickgridVueProps.interface.ts +89 -2
- package/src/constants.ts +3 -6
- package/src/extensions/slickRowDetailView.ts +1 -2
package/README.md
CHANGED
|
@@ -1,87 +1,86 @@
|
|
|
1
|
-
# Slickgrid-Vue
|
|
2
|
-
|
|
3
|
-
[](https://opensource.org/licenses/MIT)
|
|
4
|
-
[](http://www.typescriptlang.org/)
|
|
5
|
-
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
[](http://www.typescriptlang.org/)
|
|
5
|
+
[](https://npmjs.org/package/slickgrid-vue)
|
|
6
|
+
[](https://www.npmjs.com/package/slickgrid-vue)
|
|
7
|
+
[](https://bundlephobia.com/result?p=slickgrid-vue)
|
|
8
|
+
[](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/vue-cypress.yml)
|
|
9
|
+
|
|
10
|
+
> [!WARNING]
|
|
11
|
+
> Please note that Slickgrid-Vue is still in active development and usage might change depending on feedback provided by external users like you. However, I don't expect much changes though since all examples are working as expected. Give it a try and ⭐ the project if you like it!
|
|
12
|
+
|
|
13
|
+
## Documentation
|
|
14
|
+
📘 [Documentation](https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start) website is powered by GitBook.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
npm install slickgrid-vue
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
#### Basic Usage
|
|
23
|
+
|
|
24
|
+
```vue
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
import { type Column, type GridOption, SlickgridVue } from 'slickgrid-vue';
|
|
27
|
+
|
|
28
|
+
const columnDefinitions = ref<Column[]>([
|
|
29
|
+
{ id: 'username', name: 'Username', field: 'username'},
|
|
30
|
+
{ id: 'age', name: 'Age', field: 'age' }
|
|
31
|
+
]);
|
|
32
|
+
const dataset = ref([
|
|
33
|
+
{ id: 1, username: 'John', age: 20 },
|
|
34
|
+
{ id: 2, username: 'Jane', age: 21 }
|
|
35
|
+
]);
|
|
36
|
+
const gridOptions = ref<GridOption>({ /*...*/ }); // optional
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<slickgrid-vue
|
|
40
|
+
grid-id="grid1"
|
|
41
|
+
v-model:columns="columnDefinitions"
|
|
42
|
+
v-model:data="dataset"
|
|
43
|
+
v-model:options="gridOptions"
|
|
44
|
+
></slickgrid-vue>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
#### Requirements
|
|
48
|
+
- Vue >=3.4
|
|
49
|
+
|
|
50
|
+
### Stackblitz
|
|
51
|
+
|
|
52
|
+
You can also play with the live Stackbliz [Slickgrid-Vite-Demos](https://github.com/ghiscoding/slickgrid-vue-demos). It is also the recommended way to provide a repro when opening a new bug/feature request.
|
|
53
|
+
|
|
54
|
+
[](https://stackblitz.com/github/ghiscoding/slickgrid-vue-demos)
|
|
55
|
+
|
|
56
|
+
Refer to the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start)** and/or clone the [Slickgrid-Vue-Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository for a local demo. Please make sure to read the documentation before opening any new issue and also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
|
|
57
|
+
|
|
58
|
+
### Styling Themes
|
|
59
|
+
|
|
60
|
+
Multiple styling themes are available
|
|
61
|
+
- Bootstrap (see all Slickgrid-Vue [live demos](https://ghiscoding.github.io/slickgrid-vue-demos/))
|
|
62
|
+
- Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))
|
|
63
|
+
- Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))
|
|
64
|
+
|
|
65
|
+
Also note that all of these themes also have **Dark Theme** equivalent and even though Bootstrap is often used as the default, it does work as well with any other UI framework like Bulma, Material, Quasar...
|
|
66
|
+
|
|
67
|
+
### Live Demo page
|
|
68
|
+
`Slickgrid-Vue` works with all Bootstrap versions, you can see a demo of each one below. It also works well with any other frameworks like Material, Bulma, Quasar... and there are also extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/slickgrid-vue/styling/svg-icons)
|
|
69
|
+
- [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-vue-demos) / [examples repo](https://github.com/ghiscoding/slickgrid-vue-demos)
|
|
70
|
+
|
|
71
|
+
#### Working Demos
|
|
72
|
+
For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-Vue Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository (instructions are provided in it). The repo provides multiple examples which are updated frequently (basically every time a new version is out) and is also used as the GitHub live demo page.
|
|
73
|
+
|
|
74
|
+
## License
|
|
75
|
+
[MIT License](LICENSE)
|
|
76
|
+
|
|
77
|
+
## Latest News & Releases
|
|
78
|
+
Check out the [Releases](https://github.com/ghiscoding/slickgrid-universal/releases) section for all latest News & Releases.
|
|
79
|
+
|
|
80
|
+
### Tested with [Cypress](https://www.cypress.io/) (E2E Tests)
|
|
81
|
+
Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-Vue Examples are tested with [Cypress](https://www.cypress.io/) for E2E testing and they run anytime a new PR is created.
|
|
82
|
+
|
|
83
|
+
### Like it? ⭐ it
|
|
84
|
+
You like **Slickgrid-Vue**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) and feel free to contribute. 👷👷♀️
|
|
85
|
+
|
|
86
|
+
<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
package/dist/index.d.cts
CHANGED
|
@@ -19,13 +19,20 @@ import { Filters } from '@slickgrid-universal/common';
|
|
|
19
19
|
import { FilterService } from '@slickgrid-universal/common';
|
|
20
20
|
import { Formatters } from '@slickgrid-universal/common';
|
|
21
21
|
import { GridEventService } from '@slickgrid-universal/common';
|
|
22
|
+
import { GridMenuCommandItemCallbackArgs } from '@slickgrid-universal/common';
|
|
23
|
+
import { GridMenuEventWithElementCallbackArgs } from '@slickgrid-universal/common';
|
|
22
24
|
import { GridOption as GridOption_2 } from '@slickgrid-universal/common';
|
|
23
25
|
import { GridService } from '@slickgrid-universal/common';
|
|
24
26
|
import { GridStateService } from '@slickgrid-universal/common';
|
|
25
27
|
import { GroupTotalFormatters } from '@slickgrid-universal/common';
|
|
28
|
+
import { HeaderButtonOnCommandArgs } from '@slickgrid-universal/common';
|
|
26
29
|
import { HeaderGroupingService } from '@slickgrid-universal/common';
|
|
30
|
+
import { HeaderMenuCommandItemCallbackArgs } from '@slickgrid-universal/common';
|
|
27
31
|
import { i18n } from 'i18next';
|
|
28
32
|
import type * as i18next from 'i18next';
|
|
33
|
+
import { MenuCommandItemCallbackArgs } from '@slickgrid-universal/common';
|
|
34
|
+
import { MenuFromCellCallbackArgs } from '@slickgrid-universal/common';
|
|
35
|
+
import { MenuOptionItemCallbackArgs } from '@slickgrid-universal/common';
|
|
29
36
|
import { OnActiveCellChangedEventArgs } from '@slickgrid-universal/common';
|
|
30
37
|
import { OnAddNewRowEventArgs } from '@slickgrid-universal/common';
|
|
31
38
|
import { OnAutosizeColumnsEventArgs } from '@slickgrid-universal/common';
|
|
@@ -83,6 +90,7 @@ import { SlickEventData } from '@slickgrid-universal/common';
|
|
|
83
90
|
import { SlickEventHandler } from '@slickgrid-universal/common';
|
|
84
91
|
import { SlickGrid } from '@slickgrid-universal/common';
|
|
85
92
|
import { SlickPluginList } from '@slickgrid-universal/common';
|
|
93
|
+
import { SlickRange } from '@slickgrid-universal/common';
|
|
86
94
|
import { SlickRowDetailView as SlickRowDetailView_2 } from '@slickgrid-universal/row-detail-view-plugin';
|
|
87
95
|
import { SlickRowSelectionModel } from '@slickgrid-universal/common';
|
|
88
96
|
import { Slot } from 'vue';
|
|
@@ -93,20 +101,24 @@ import { TreeDataService } from '@slickgrid-universal/common';
|
|
|
93
101
|
import { Utilities } from '@slickgrid-universal/common';
|
|
94
102
|
|
|
95
103
|
declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
96
|
-
"update:options": (
|
|
97
|
-
"update:pagination": (
|
|
98
|
-
"update:columns": (
|
|
99
|
-
"update:data": (
|
|
100
|
-
"update:hierarchical": (
|
|
104
|
+
"update:options": (value: GridOption<Column<any>>) => any;
|
|
105
|
+
"update:pagination": (value: Pagination) => any;
|
|
106
|
+
"update:columns": (value: Column<any>[]) => any;
|
|
107
|
+
"update:data": (value: any[]) => any;
|
|
108
|
+
"update:hierarchical": (value: any[]) => any;
|
|
101
109
|
}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
102
|
-
"onUpdate:options"?: ((
|
|
103
|
-
"onUpdate:pagination"?: ((
|
|
104
|
-
"onUpdate:columns"?: ((
|
|
105
|
-
"onUpdate:data"?: ((
|
|
106
|
-
"onUpdate:hierarchical"?: ((
|
|
110
|
+
"onUpdate:options"?: ((value: GridOption<Column<any>>) => any) | undefined;
|
|
111
|
+
"onUpdate:pagination"?: ((value: Pagination) => any) | undefined;
|
|
112
|
+
"onUpdate:columns"?: ((value: Column<any>[]) => any) | undefined;
|
|
113
|
+
"onUpdate:data"?: ((value: any[]) => any) | undefined;
|
|
114
|
+
"onUpdate:hierarchical"?: ((value: any[]) => any) | undefined;
|
|
107
115
|
}>, {
|
|
108
116
|
gridId: string;
|
|
109
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
117
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
118
|
+
elm: HTMLDivElement;
|
|
119
|
+
}, HTMLDivElement>;
|
|
120
|
+
|
|
121
|
+
declare type __VLS_Props = SlickgridVueProps;
|
|
110
122
|
|
|
111
123
|
declare type __VLS_PublicProps = {
|
|
112
124
|
'options'?: GridOption;
|
|
@@ -114,9 +126,10 @@ declare type __VLS_PublicProps = {
|
|
|
114
126
|
'columns': Column[];
|
|
115
127
|
'data'?: any[];
|
|
116
128
|
'hierarchical'?: any[];
|
|
117
|
-
} &
|
|
129
|
+
} & __VLS_Props;
|
|
118
130
|
|
|
119
131
|
declare function __VLS_template(): {
|
|
132
|
+
attrs: Partial<{}>;
|
|
120
133
|
slots: {
|
|
121
134
|
header?(_: {}): any;
|
|
122
135
|
footer?(_: {}): any;
|
|
@@ -124,13 +137,11 @@ declare function __VLS_template(): {
|
|
|
124
137
|
refs: {
|
|
125
138
|
elm: HTMLDivElement;
|
|
126
139
|
};
|
|
127
|
-
|
|
140
|
+
rootEl: HTMLDivElement;
|
|
128
141
|
};
|
|
129
142
|
|
|
130
143
|
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
131
144
|
|
|
132
|
-
declare let __VLS_typeProps: SlickgridVueProps;
|
|
133
|
-
|
|
134
145
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
135
146
|
new (): {
|
|
136
147
|
$slots: S;
|
|
@@ -484,18 +495,162 @@ export declare interface SlickgridVueProps {
|
|
|
484
495
|
args: OnSetItemsCalledEventArgs;
|
|
485
496
|
}>) => void;
|
|
486
497
|
onOnAfterExportToExcel?: (e: CustomEvent<any>) => void;
|
|
487
|
-
onOnBeforePaginationChange?: (e: CustomEvent<any>) => void;
|
|
488
498
|
onOnBeforeExportToExcel?: (e: CustomEvent<any>) => void;
|
|
489
499
|
onOnBeforeFilterChange?: (e: CustomEvent<any>) => void;
|
|
490
500
|
onOnBeforeFilterClear?: (e: CustomEvent<any>) => void;
|
|
491
501
|
onOnBeforeSortChange?: (e: CustomEvent<any>) => void;
|
|
492
502
|
onOnBeforeToggleTreeCollapse?: (e: CustomEvent<any>) => void;
|
|
503
|
+
onOnContextMenuClearGrouping?: (e: CustomEvent<any>) => void;
|
|
504
|
+
onOnContextMenuCollapseAllGroups?: (e: CustomEvent<any>) => void;
|
|
505
|
+
onOnContextMenuExpandAllGroups?: (e: CustomEvent<any>) => void;
|
|
506
|
+
onOnAfterMenuShow?: (e: CustomEvent<{
|
|
507
|
+
eventData: any;
|
|
508
|
+
args: MenuFromCellCallbackArgs;
|
|
509
|
+
}>) => void;
|
|
510
|
+
onOnBeforeMenuShow?: (e: CustomEvent<{
|
|
511
|
+
eventData: any;
|
|
512
|
+
args: MenuFromCellCallbackArgs;
|
|
513
|
+
}>) => void;
|
|
514
|
+
onOnBeforeMenuClose?: (e: CustomEvent<{
|
|
515
|
+
eventData: any;
|
|
516
|
+
args: MenuFromCellCallbackArgs;
|
|
517
|
+
}>) => void;
|
|
518
|
+
onOnCommand?: (e: CustomEvent<{
|
|
519
|
+
eventData: any;
|
|
520
|
+
args: MenuCommandItemCallbackArgs | MenuOptionItemCallbackArgs;
|
|
521
|
+
}>) => void;
|
|
522
|
+
onOnOptionSelected?: (e: CustomEvent<{
|
|
523
|
+
eventData: any;
|
|
524
|
+
args: MenuCommandItemCallbackArgs | MenuOptionItemCallbackArgs;
|
|
525
|
+
}>) => void;
|
|
526
|
+
onOnColumnPickerColumnsChanged?: (e: CustomEvent<{
|
|
527
|
+
eventData: any;
|
|
528
|
+
args: {
|
|
529
|
+
columnId: string;
|
|
530
|
+
showing: boolean;
|
|
531
|
+
allColumns: Column[];
|
|
532
|
+
visibleColumns: Column[];
|
|
533
|
+
columns: Column[];
|
|
534
|
+
grid: SlickGrid;
|
|
535
|
+
};
|
|
536
|
+
}>) => void;
|
|
537
|
+
onOnColumnsChanged?: (e: CustomEvent<{
|
|
538
|
+
eventData: any;
|
|
539
|
+
args: {
|
|
540
|
+
columnId: string;
|
|
541
|
+
showing: boolean;
|
|
542
|
+
allColumns: Column[];
|
|
543
|
+
visibleColumns: Column[];
|
|
544
|
+
columns: Column[];
|
|
545
|
+
grid: SlickGrid;
|
|
546
|
+
};
|
|
547
|
+
}>) => void;
|
|
548
|
+
onOnGridMenuMenuClose?: (e: CustomEvent<{
|
|
549
|
+
eventData: any;
|
|
550
|
+
args: GridMenuEventWithElementCallbackArgs;
|
|
551
|
+
}>) => void;
|
|
552
|
+
onOnGridMenuBeforeMenuShow?: (e: CustomEvent<{
|
|
553
|
+
eventData: any;
|
|
554
|
+
args: GridMenuEventWithElementCallbackArgs;
|
|
555
|
+
}>) => void;
|
|
556
|
+
onOnGridMenuAfterMenuShow?: (e: CustomEvent<{
|
|
557
|
+
eventData: any;
|
|
558
|
+
args: GridMenuEventWithElementCallbackArgs;
|
|
559
|
+
}>) => void;
|
|
560
|
+
onOnGridMenuClearAllPinning?: (e: CustomEvent<any>) => void;
|
|
561
|
+
onOnGridMenuClearAllFilters?: (e: CustomEvent<any>) => void;
|
|
562
|
+
onOnGridMenuClearAllSorting?: (e: CustomEvent<any>) => void;
|
|
563
|
+
onOnGridMenuColumnsChanged?: (e: CustomEvent<{
|
|
564
|
+
eventData: any;
|
|
565
|
+
args: {
|
|
566
|
+
columnId: string;
|
|
567
|
+
showing: boolean;
|
|
568
|
+
allColumns: Column[];
|
|
569
|
+
visibleColumns: Column[];
|
|
570
|
+
columns: Column[];
|
|
571
|
+
grid: SlickGrid;
|
|
572
|
+
};
|
|
573
|
+
}>) => void;
|
|
574
|
+
onOnGridMenuCommand?: (e: CustomEvent<{
|
|
575
|
+
eventData: any;
|
|
576
|
+
args: GridMenuCommandItemCallbackArgs;
|
|
577
|
+
}>) => void;
|
|
578
|
+
onOnHeaderButtonCommand?: (e: CustomEvent<{
|
|
579
|
+
eventData: any;
|
|
580
|
+
args: HeaderButtonOnCommandArgs;
|
|
581
|
+
}>) => void;
|
|
582
|
+
onOnCopyCells?: (e: CustomEvent<{
|
|
583
|
+
eventData: any;
|
|
584
|
+
args: {
|
|
585
|
+
ranges: SlickRange[];
|
|
586
|
+
};
|
|
587
|
+
}>) => void;
|
|
588
|
+
onOnCopyCancelled?: (e: CustomEvent<{
|
|
589
|
+
eventData: any;
|
|
590
|
+
args: {
|
|
591
|
+
ranges: SlickRange[];
|
|
592
|
+
};
|
|
593
|
+
}>) => void;
|
|
594
|
+
onOnPasteCells?: (e: CustomEvent<{
|
|
595
|
+
eventData: any;
|
|
596
|
+
args: {
|
|
597
|
+
ranges: SlickRange[];
|
|
598
|
+
};
|
|
599
|
+
}>) => void;
|
|
600
|
+
onOnBeforePasteCell?: (e: CustomEvent<{
|
|
601
|
+
eventData: any;
|
|
602
|
+
args: {
|
|
603
|
+
cell: number;
|
|
604
|
+
row: number;
|
|
605
|
+
item: any;
|
|
606
|
+
columnDef: Column;
|
|
607
|
+
value: any;
|
|
608
|
+
};
|
|
609
|
+
}>) => void;
|
|
610
|
+
onOnHeaderMenuHideColumns?: (e: CustomEvent<{
|
|
611
|
+
eventData: any;
|
|
612
|
+
args: {
|
|
613
|
+
columns: Column[];
|
|
614
|
+
hiddenColumn: Column[];
|
|
615
|
+
};
|
|
616
|
+
}>) => void;
|
|
617
|
+
onOnHeaderMenuCommand?: (e: CustomEvent<{
|
|
618
|
+
eventData: any;
|
|
619
|
+
args: MenuCommandItemCallbackArgs;
|
|
620
|
+
}>) => void;
|
|
621
|
+
onOnHeaderMenuColumnResizeByContent?: (e: CustomEvent<{
|
|
622
|
+
eventData: any;
|
|
623
|
+
args: {
|
|
624
|
+
columnId: string;
|
|
625
|
+
};
|
|
626
|
+
}>) => void;
|
|
627
|
+
onOnHeaderMenuBeforeMenuShow?: (e: CustomEvent<{
|
|
628
|
+
eventData: any;
|
|
629
|
+
args: HeaderMenuCommandItemCallbackArgs;
|
|
630
|
+
}>) => void;
|
|
631
|
+
onOnHeaderMenuAfterMenuShow?: (e: CustomEvent<{
|
|
632
|
+
eventData: any;
|
|
633
|
+
args: HeaderMenuCommandItemCallbackArgs;
|
|
634
|
+
}>) => void;
|
|
635
|
+
onOnItemAdded?: (e: CustomEvent<any>) => void;
|
|
636
|
+
onOnItemDeleted?: (e: CustomEvent<any>) => void;
|
|
637
|
+
onOnItemUpdated?: (e: CustomEvent<any>) => void;
|
|
638
|
+
onOnItemUpserted?: (e: CustomEvent<any>) => void;
|
|
639
|
+
onOnFullResizeByContentRequested?: (e: CustomEvent<any>) => void;
|
|
493
640
|
onOnFilterChanged?: (e: CustomEvent<any>) => void;
|
|
494
641
|
onOnFilterCleared?: (e: CustomEvent<any>) => void;
|
|
495
|
-
onOnItemDeleted?: (e: CustomEvent<any>) => void;
|
|
496
642
|
onOnGridStateChanged?: (e: CustomEvent<any>) => void;
|
|
643
|
+
onOnBeforePaginationChange?: (e: CustomEvent<any>) => void;
|
|
497
644
|
onOnPaginationChanged?: (e: CustomEvent<PaginationChangedArgs>) => void;
|
|
645
|
+
onOnPaginationRefreshed?: (e: CustomEvent<any>) => void;
|
|
646
|
+
onOnPaginationVisibilityChanged?: (e: CustomEvent<any>) => void;
|
|
647
|
+
onOnPaginationSetCursorBased?: (e: CustomEvent<any>) => void;
|
|
648
|
+
onOnGridBeforeResize?: (e: CustomEvent<any>) => void;
|
|
649
|
+
onOnGridAfterResize?: (e: CustomEvent<any>) => void;
|
|
650
|
+
onOnBeforeResizeByContent?: (e: CustomEvent<any>) => void;
|
|
651
|
+
onOnAfterResizeByContent?: (e: CustomEvent<any>) => void;
|
|
498
652
|
onOnSelectedRowIdsChanged?: (e: CustomEvent<any>) => void;
|
|
653
|
+
onOnSortCleared?: (e: CustomEvent<any>) => void;
|
|
499
654
|
onOnSortChanged?: (e: CustomEvent<any>) => void;
|
|
500
655
|
onOnToggleTreeCollapsed?: (e: CustomEvent<any>) => void;
|
|
501
656
|
onOnTreeItemToggled?: (e: CustomEvent<any>) => void;
|