@sellmate/design-system-vue 1.29.0 → 1.32.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/components.d.ts +7 -0
- package/dist/components.js +132 -22
- package/dist/index.d.ts +1 -1
- package/lib/components.ts +148 -22
- package/lib/index.ts +0 -3
- package/package.json +2 -2
- package/dist/SdTable.d.ts +0 -241
- package/dist/SdTable.js +0 -191
- package/dist/composables/useSdTableVirtualScroll.d.ts +0 -11
- package/dist/composables/useSdTableVirtualScroll.js +0 -58
package/dist/components.d.ts
CHANGED
|
@@ -40,16 +40,23 @@ export declare const SdPortal: StencilVueComponent<JSX.SdPortal>;
|
|
|
40
40
|
export declare const SdRadio: StencilVueComponent<JSX.SdRadio, JSX.SdRadio["value"]>;
|
|
41
41
|
export declare const SdRadioButton: StencilVueComponent<JSX.SdRadioButton, JSX.SdRadioButton["value"]>;
|
|
42
42
|
export declare const SdRadioGroup: StencilVueComponent<JSX.SdRadioGroup, JSX.SdRadioGroup["value"]>;
|
|
43
|
+
export declare const SdScrollArea: StencilVueComponent<JSX.SdScrollArea>;
|
|
43
44
|
export declare const SdSelect: StencilVueComponent<JSX.SdSelect, JSX.SdSelect["value"]>;
|
|
44
45
|
export declare const SdSelectListItem: StencilVueComponent<JSX.SdSelectListItem>;
|
|
45
46
|
export declare const SdSelectListItemSearch: StencilVueComponent<JSX.SdSelectListItemSearch>;
|
|
46
47
|
export declare const SdSelectListbox: StencilVueComponent<JSX.SdSelectListbox>;
|
|
47
48
|
export declare const SdSelectTrigger: StencilVueComponent<JSX.SdSelectTrigger>;
|
|
49
|
+
export declare const SdStepper: StencilVueComponent<JSX.SdStepper>;
|
|
48
50
|
export declare const SdSwitch: StencilVueComponent<JSX.SdSwitch, JSX.SdSwitch["value"]>;
|
|
49
51
|
export declare const SdTabs: StencilVueComponent<JSX.SdTabs, JSX.SdTabs["value"]>;
|
|
50
52
|
export declare const SdTag: StencilVueComponent<JSX.SdTag>;
|
|
51
53
|
export declare const SdTextLink: StencilVueComponent<JSX.SdTextLink>;
|
|
52
54
|
export declare const SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["value"]>;
|
|
55
|
+
export declare const SdTimePicker: StencilVueComponent<JSX.SdTimePicker, JSX.SdTimePicker["value"]>;
|
|
56
|
+
export declare const SdTimePickerSelector: StencilVueComponent<JSX.SdTimePickerSelector>;
|
|
57
|
+
export declare const SdTimePickerTrigger: StencilVueComponent<JSX.SdTimePickerTrigger>;
|
|
58
|
+
export declare const SdTimeRangePicker: StencilVueComponent<JSX.SdTimeRangePicker, JSX.SdTimeRangePicker["value"]>;
|
|
59
|
+
export declare const SdTimeRangePickerSelector: StencilVueComponent<JSX.SdTimeRangePickerSelector>;
|
|
53
60
|
export declare const SdToast: StencilVueComponent<JSX.SdToast>;
|
|
54
61
|
export declare const SdToastContainer: StencilVueComponent<JSX.SdToastContainer>;
|
|
55
62
|
export declare const SdToggle: StencilVueComponent<JSX.SdToggle, JSX.SdToggle["value"]>;
|
package/dist/components.js
CHANGED
|
@@ -122,12 +122,13 @@ export const SdChipInput = /*@__PURE__*/ defineContainer('sd-chip-input', undefi
|
|
|
122
122
|
'error',
|
|
123
123
|
'useReset',
|
|
124
124
|
'maxCount',
|
|
125
|
+
'metaPlacement',
|
|
125
126
|
'duplicateLabel',
|
|
126
127
|
'suggestions',
|
|
127
128
|
'loadingSuggestions',
|
|
128
129
|
'recommendedItems',
|
|
129
130
|
'loadingRecommendedItems',
|
|
130
|
-
'
|
|
131
|
+
'dropdownMinWidth',
|
|
131
132
|
'label',
|
|
132
133
|
'labelWidth',
|
|
133
134
|
'hint',
|
|
@@ -204,6 +205,7 @@ export const SdDatePicker = /*@__PURE__*/ defineContainer('sd-date-picker', unde
|
|
|
204
205
|
'errorMessage',
|
|
205
206
|
'rules',
|
|
206
207
|
'error',
|
|
208
|
+
'status',
|
|
207
209
|
'icon',
|
|
208
210
|
'labelTooltip',
|
|
209
211
|
'labelTooltipProps',
|
|
@@ -229,6 +231,7 @@ export const SdDateRangePicker = /*@__PURE__*/ defineContainer('sd-date-range-pi
|
|
|
229
231
|
'placeholder',
|
|
230
232
|
'selectable',
|
|
231
233
|
'maxRange',
|
|
234
|
+
'useTimePicker',
|
|
232
235
|
'disabled',
|
|
233
236
|
'width',
|
|
234
237
|
'label',
|
|
@@ -239,6 +242,7 @@ export const SdDateRangePicker = /*@__PURE__*/ defineContainer('sd-date-range-pi
|
|
|
239
242
|
'errorMessage',
|
|
240
243
|
'rules',
|
|
241
244
|
'error',
|
|
245
|
+
'status',
|
|
242
246
|
'icon',
|
|
243
247
|
'labelTooltip',
|
|
244
248
|
'labelTooltipProps',
|
|
@@ -253,6 +257,7 @@ export const SdDateRangePickerCalendar = /*@__PURE__*/ defineContainer('sd-date-
|
|
|
253
257
|
'value',
|
|
254
258
|
'selectable',
|
|
255
259
|
'maxRange',
|
|
260
|
+
'useTimePicker',
|
|
256
261
|
'sdSelect',
|
|
257
262
|
'sdViewChange'
|
|
258
263
|
], [
|
|
@@ -292,6 +297,8 @@ export const SdField = /*@__PURE__*/ defineContainer('sd-field', undefined, [
|
|
|
292
297
|
'borderless',
|
|
293
298
|
'label',
|
|
294
299
|
'labelWidth',
|
|
300
|
+
'labelHeight',
|
|
301
|
+
'multiline',
|
|
295
302
|
'addonLabel',
|
|
296
303
|
'addonAlign',
|
|
297
304
|
'icon',
|
|
@@ -309,6 +316,7 @@ export const SdFilePicker = /*@__PURE__*/ defineContainer('sd-file-picker', unde
|
|
|
309
316
|
'maxFileSize',
|
|
310
317
|
'maxTotalSize',
|
|
311
318
|
'maxFiles',
|
|
319
|
+
'size',
|
|
312
320
|
'name',
|
|
313
321
|
'label',
|
|
314
322
|
'labelWidth',
|
|
@@ -355,6 +363,7 @@ export const SdGhostButton = /*@__PURE__*/ defineContainer('sd-ghost-button', un
|
|
|
355
363
|
'size',
|
|
356
364
|
'intent',
|
|
357
365
|
'ariaLabel',
|
|
366
|
+
'pressed',
|
|
358
367
|
'tooltipText',
|
|
359
368
|
'disabled',
|
|
360
369
|
'sdClick'
|
|
@@ -460,6 +469,7 @@ export const SdNumberInput = /*@__PURE__*/ defineContainer('sd-number-input', un
|
|
|
460
469
|
'step',
|
|
461
470
|
'useButton',
|
|
462
471
|
'useDecimal',
|
|
472
|
+
'maxDecimalLength',
|
|
463
473
|
'value',
|
|
464
474
|
'label',
|
|
465
475
|
'labelWidth',
|
|
@@ -502,24 +512,26 @@ export const SdPagination = /*@__PURE__*/ defineContainer('sd-pagination', undef
|
|
|
502
512
|
'sdPageChange'
|
|
503
513
|
], 'currentPage', 'sdPageChange', undefined);
|
|
504
514
|
export const SdPopover = /*@__PURE__*/ defineContainer('sd-popover', undefined, [
|
|
505
|
-
'
|
|
515
|
+
'open',
|
|
516
|
+
'defaultOpen',
|
|
506
517
|
'placement',
|
|
507
|
-
'
|
|
518
|
+
'type',
|
|
519
|
+
'menuTitle',
|
|
520
|
+
'titleIcon',
|
|
508
521
|
'icon',
|
|
509
522
|
'iconSize',
|
|
510
|
-
'
|
|
511
|
-
'
|
|
512
|
-
'
|
|
523
|
+
'color',
|
|
524
|
+
'leftLinkLabel',
|
|
525
|
+
'buttonLabel',
|
|
513
526
|
'ariaLabel',
|
|
514
|
-
'
|
|
515
|
-
'
|
|
516
|
-
'
|
|
517
|
-
'
|
|
518
|
-
'button',
|
|
519
|
-
'menuClass',
|
|
520
|
-
'sdShowChange'
|
|
527
|
+
'menuClassName',
|
|
528
|
+
'sdShowChange',
|
|
529
|
+
'sdButtonClick',
|
|
530
|
+
'sdLeftLinkClick'
|
|
521
531
|
], [
|
|
522
|
-
'sdShowChange'
|
|
532
|
+
'sdShowChange',
|
|
533
|
+
'sdButtonClick',
|
|
534
|
+
'sdLeftLinkClick'
|
|
523
535
|
]);
|
|
524
536
|
export const SdPopup = /*@__PURE__*/ defineContainer('sd-popup', undefined, [
|
|
525
537
|
'popupTitle',
|
|
@@ -547,6 +559,7 @@ export const SdRadio = /*@__PURE__*/ defineContainer('sd-radio', undefined, [
|
|
|
547
559
|
'val',
|
|
548
560
|
'disabled',
|
|
549
561
|
'label',
|
|
562
|
+
'name',
|
|
550
563
|
'sdUpdate'
|
|
551
564
|
], [
|
|
552
565
|
'sdUpdate'
|
|
@@ -571,6 +584,13 @@ export const SdRadioGroup = /*@__PURE__*/ defineContainer('sd-radio-group', unde
|
|
|
571
584
|
], [
|
|
572
585
|
'sdUpdate'
|
|
573
586
|
], 'value', 'sdUpdate', undefined);
|
|
587
|
+
export const SdScrollArea = /*@__PURE__*/ defineContainer('sd-scroll-area', undefined, [
|
|
588
|
+
'axis',
|
|
589
|
+
'background',
|
|
590
|
+
'bordered',
|
|
591
|
+
'maxHeight',
|
|
592
|
+
'maxWidth'
|
|
593
|
+
]);
|
|
574
594
|
export const SdSelect = /*@__PURE__*/ defineContainer('sd-select', undefined, [
|
|
575
595
|
'type',
|
|
576
596
|
'value',
|
|
@@ -649,8 +669,16 @@ export const SdSelectTrigger = /*@__PURE__*/ defineContainer('sd-select-trigger'
|
|
|
649
669
|
'sdTriggerFocus',
|
|
650
670
|
'sdTriggerBlur'
|
|
651
671
|
]);
|
|
672
|
+
export const SdStepper = /*@__PURE__*/ defineContainer('sd-stepper', undefined, [
|
|
673
|
+
'items',
|
|
674
|
+
'value',
|
|
675
|
+
'size',
|
|
676
|
+
'ariaLabel'
|
|
677
|
+
]);
|
|
652
678
|
export const SdSwitch = /*@__PURE__*/ defineContainer('sd-switch', undefined, [
|
|
653
679
|
'value',
|
|
680
|
+
'leftLabel',
|
|
681
|
+
'rightLabel',
|
|
654
682
|
'label',
|
|
655
683
|
'disabled',
|
|
656
684
|
'sdUpdate'
|
|
@@ -671,7 +699,7 @@ export const SdTag = /*@__PURE__*/ defineContainer('sd-tag', undefined, [
|
|
|
671
699
|
'name',
|
|
672
700
|
'label',
|
|
673
701
|
'icon',
|
|
674
|
-
'
|
|
702
|
+
'iconLeft',
|
|
675
703
|
'width'
|
|
676
704
|
]);
|
|
677
705
|
export const SdTextLink = /*@__PURE__*/ defineContainer('sd-text-link', undefined, [
|
|
@@ -723,6 +751,94 @@ export const SdTextarea = /*@__PURE__*/ defineContainer('sd-textarea', undefined
|
|
|
723
751
|
'sdFocus',
|
|
724
752
|
'sdBlur'
|
|
725
753
|
], 'value', 'sdUpdate', undefined);
|
|
754
|
+
export const SdTimePicker = /*@__PURE__*/ defineContainer('sd-time-picker', undefined, [
|
|
755
|
+
'value',
|
|
756
|
+
'size',
|
|
757
|
+
'type',
|
|
758
|
+
'placeholder',
|
|
759
|
+
'disabled',
|
|
760
|
+
'clearable',
|
|
761
|
+
'useMeridiem',
|
|
762
|
+
'minuteStep',
|
|
763
|
+
'width',
|
|
764
|
+
'label',
|
|
765
|
+
'labelWidth',
|
|
766
|
+
'addonLabel',
|
|
767
|
+
'addonAlign',
|
|
768
|
+
'hint',
|
|
769
|
+
'errorMessage',
|
|
770
|
+
'rules',
|
|
771
|
+
'error',
|
|
772
|
+
'status',
|
|
773
|
+
'icon',
|
|
774
|
+
'labelTooltip',
|
|
775
|
+
'labelTooltipProps',
|
|
776
|
+
'name',
|
|
777
|
+
'sdUpdate',
|
|
778
|
+
'sdDropDownShow'
|
|
779
|
+
], [
|
|
780
|
+
'sdUpdate',
|
|
781
|
+
'sdDropDownShow'
|
|
782
|
+
], 'value', 'sdUpdate', undefined);
|
|
783
|
+
export const SdTimePickerSelector = /*@__PURE__*/ defineContainer('sd-time-picker-selector', undefined, [
|
|
784
|
+
'value',
|
|
785
|
+
'useMeridiem',
|
|
786
|
+
'minuteStep',
|
|
787
|
+
'sdUpdate'
|
|
788
|
+
], [
|
|
789
|
+
'sdUpdate'
|
|
790
|
+
]);
|
|
791
|
+
export const SdTimePickerTrigger = /*@__PURE__*/ defineContainer('sd-time-picker-trigger', undefined, [
|
|
792
|
+
'displayText',
|
|
793
|
+
'placeholder',
|
|
794
|
+
'disabled',
|
|
795
|
+
'clearable',
|
|
796
|
+
'size',
|
|
797
|
+
'sdTriggerClick',
|
|
798
|
+
'sdClear'
|
|
799
|
+
], [
|
|
800
|
+
'sdTriggerClick',
|
|
801
|
+
'sdClear'
|
|
802
|
+
]);
|
|
803
|
+
export const SdTimeRangePicker = /*@__PURE__*/ defineContainer('sd-time-range-picker', undefined, [
|
|
804
|
+
'value',
|
|
805
|
+
'size',
|
|
806
|
+
'type',
|
|
807
|
+
'placeholder',
|
|
808
|
+
'disabled',
|
|
809
|
+
'clearable',
|
|
810
|
+
'useMeridiem',
|
|
811
|
+
'minuteStep',
|
|
812
|
+
'rangeOrder',
|
|
813
|
+
'width',
|
|
814
|
+
'label',
|
|
815
|
+
'labelWidth',
|
|
816
|
+
'addonLabel',
|
|
817
|
+
'addonAlign',
|
|
818
|
+
'hint',
|
|
819
|
+
'errorMessage',
|
|
820
|
+
'rules',
|
|
821
|
+
'error',
|
|
822
|
+
'status',
|
|
823
|
+
'icon',
|
|
824
|
+
'labelTooltip',
|
|
825
|
+
'labelTooltipProps',
|
|
826
|
+
'name',
|
|
827
|
+
'sdUpdate',
|
|
828
|
+
'sdDropDownShow'
|
|
829
|
+
], [
|
|
830
|
+
'sdUpdate',
|
|
831
|
+
'sdDropDownShow'
|
|
832
|
+
], 'value', 'sdUpdate', undefined);
|
|
833
|
+
export const SdTimeRangePickerSelector = /*@__PURE__*/ defineContainer('sd-time-range-picker-selector', undefined, [
|
|
834
|
+
'value',
|
|
835
|
+
'useMeridiem',
|
|
836
|
+
'minuteStep',
|
|
837
|
+
'rangeOrder',
|
|
838
|
+
'sdUpdate'
|
|
839
|
+
], [
|
|
840
|
+
'sdUpdate'
|
|
841
|
+
]);
|
|
726
842
|
export const SdToast = /*@__PURE__*/ defineContainer('sd-toast', undefined, [
|
|
727
843
|
'icon',
|
|
728
844
|
'message',
|
|
@@ -763,15 +879,9 @@ export const SdTooltip = /*@__PURE__*/ defineContainer('sd-tooltip', undefined,
|
|
|
763
879
|
'tooltipType',
|
|
764
880
|
'icon',
|
|
765
881
|
'iconSize',
|
|
766
|
-
'label',
|
|
767
|
-
'name',
|
|
768
|
-
'rightIcon',
|
|
769
882
|
'ariaLabel',
|
|
770
883
|
'disabled',
|
|
771
|
-
'type',
|
|
772
884
|
'useClose',
|
|
773
|
-
'sdClass',
|
|
774
885
|
'message',
|
|
775
|
-
'
|
|
776
|
-
'triggerStyle'
|
|
886
|
+
'triggerClassName'
|
|
777
887
|
]);
|
package/dist/index.d.ts
CHANGED
|
@@ -4,4 +4,4 @@ export * from './plugin';
|
|
|
4
4
|
export { sdModal, SdModalVuePlugin } from './sdModal';
|
|
5
5
|
export { sdLoading } from '@sellmate/design-system/utils';
|
|
6
6
|
export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
|
|
7
|
-
export type { ButtonName, ButtonProps, ButtonType, ButtonSize, GhostButtonIntent, GhostButtonSize, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, BadgeColor, FieldAddonAlign, FieldSize, Rule, FieldIdentifier, ValidatableField, InputSize, NumberInputSize, BarcodeInputSize, ChipInputSize, SdTooltipProps, TooltipType, CalloutType, CalendarEventGroup, CheckedType, RadioValue, RadioOption, SelectOption, SelectOptionSelectDetail, SelectType, SelectValue, ConfirmModalMainButton, ConfirmModalType, ConfirmModalOptions, TagName, SdModalCreateOptions, ModalDialogRefLike, SdLoadingShowArgs, LoadingModalState, LoadingModalOptions, Type as DateBoxType, DatePickerSize, DateRangeValue, SdKeyValueField, SdKeyValueChangeDetail, LinearProgressType, CircleProgressType,
|
|
7
|
+
export type { ButtonName, ButtonProps, ButtonType, ButtonSize, GhostButtonIntent, GhostButtonSize, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, BadgeColor, FieldAddonAlign, FieldSize, Rule, FieldIdentifier, ValidatableField, InputSize, NumberInputSize, BarcodeInputSize, ChipInputSize, SdTooltipProps, TooltipType, CalloutType, CalendarEventGroup, CheckedType, RadioValue, RadioOption, SelectOption, SelectOptionSelectDetail, SelectType, SelectValue, ConfirmModalMainButton, ConfirmModalType, ConfirmModalOptions, TagName, SdModalCreateOptions, ModalDialogRefLike, SdLoadingShowArgs, LoadingModalState, LoadingModalOptions, Type as DateBoxType, DatePickerSize, DateRangeValue, SdKeyValueField, SdKeyValueChangeDetail, LinearProgressType, CircleProgressType, PopupType, GuideType, TextLinkSize, TabOption, TabSize, ToastType, ToastPosition, ToastEntry, ToastNotifyOptions, } from '@sellmate/design-system';
|
package/lib/components.ts
CHANGED
|
@@ -150,12 +150,13 @@ export const SdChipInput: StencilVueComponent<JSX.SdChipInput, JSX.SdChipInput["
|
|
|
150
150
|
'error',
|
|
151
151
|
'useReset',
|
|
152
152
|
'maxCount',
|
|
153
|
+
'metaPlacement',
|
|
153
154
|
'duplicateLabel',
|
|
154
155
|
'suggestions',
|
|
155
156
|
'loadingSuggestions',
|
|
156
157
|
'recommendedItems',
|
|
157
158
|
'loadingRecommendedItems',
|
|
158
|
-
'
|
|
159
|
+
'dropdownMinWidth',
|
|
159
160
|
'label',
|
|
160
161
|
'labelWidth',
|
|
161
162
|
'hint',
|
|
@@ -241,6 +242,7 @@ export const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicke
|
|
|
241
242
|
'errorMessage',
|
|
242
243
|
'rules',
|
|
243
244
|
'error',
|
|
245
|
+
'status',
|
|
244
246
|
'icon',
|
|
245
247
|
'labelTooltip',
|
|
246
248
|
'labelTooltipProps',
|
|
@@ -271,6 +273,7 @@ export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.S
|
|
|
271
273
|
'placeholder',
|
|
272
274
|
'selectable',
|
|
273
275
|
'maxRange',
|
|
276
|
+
'useTimePicker',
|
|
274
277
|
'disabled',
|
|
275
278
|
'width',
|
|
276
279
|
'label',
|
|
@@ -281,6 +284,7 @@ export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.S
|
|
|
281
284
|
'errorMessage',
|
|
282
285
|
'rules',
|
|
283
286
|
'error',
|
|
287
|
+
'status',
|
|
284
288
|
'icon',
|
|
285
289
|
'labelTooltip',
|
|
286
290
|
'labelTooltipProps',
|
|
@@ -298,6 +302,7 @@ export const SdDateRangePickerCalendar: StencilVueComponent<JSX.SdDateRangePicke
|
|
|
298
302
|
'value',
|
|
299
303
|
'selectable',
|
|
300
304
|
'maxRange',
|
|
305
|
+
'useTimePicker',
|
|
301
306
|
'sdSelect',
|
|
302
307
|
'sdViewChange'
|
|
303
308
|
], [
|
|
@@ -343,6 +348,8 @@ export const SdField: StencilVueComponent<JSX.SdField> = /*@__PURE__*/ defineCon
|
|
|
343
348
|
'borderless',
|
|
344
349
|
'label',
|
|
345
350
|
'labelWidth',
|
|
351
|
+
'labelHeight',
|
|
352
|
+
'multiline',
|
|
346
353
|
'addonLabel',
|
|
347
354
|
'addonAlign',
|
|
348
355
|
'icon',
|
|
@@ -362,6 +369,7 @@ export const SdFilePicker: StencilVueComponent<JSX.SdFilePicker, JSX.SdFilePicke
|
|
|
362
369
|
'maxFileSize',
|
|
363
370
|
'maxTotalSize',
|
|
364
371
|
'maxFiles',
|
|
372
|
+
'size',
|
|
365
373
|
'name',
|
|
366
374
|
'label',
|
|
367
375
|
'labelWidth',
|
|
@@ -415,6 +423,7 @@ export const SdGhostButton: StencilVueComponent<JSX.SdGhostButton> = /*@__PURE__
|
|
|
415
423
|
'size',
|
|
416
424
|
'intent',
|
|
417
425
|
'ariaLabel',
|
|
426
|
+
'pressed',
|
|
418
427
|
'tooltipText',
|
|
419
428
|
'disabled',
|
|
420
429
|
'sdClick'
|
|
@@ -539,6 +548,7 @@ export const SdNumberInput: StencilVueComponent<JSX.SdNumberInput, JSX.SdNumberI
|
|
|
539
548
|
'step',
|
|
540
549
|
'useButton',
|
|
541
550
|
'useDecimal',
|
|
551
|
+
'maxDecimalLength',
|
|
542
552
|
'value',
|
|
543
553
|
'label',
|
|
544
554
|
'labelWidth',
|
|
@@ -587,24 +597,26 @@ export const SdPagination: StencilVueComponent<JSX.SdPagination, JSX.SdPaginatio
|
|
|
587
597
|
|
|
588
598
|
|
|
589
599
|
export const SdPopover: StencilVueComponent<JSX.SdPopover> = /*@__PURE__*/ defineContainer<JSX.SdPopover>('sd-popover', undefined, [
|
|
590
|
-
'
|
|
600
|
+
'open',
|
|
601
|
+
'defaultOpen',
|
|
591
602
|
'placement',
|
|
592
|
-
'
|
|
603
|
+
'type',
|
|
604
|
+
'menuTitle',
|
|
605
|
+
'titleIcon',
|
|
593
606
|
'icon',
|
|
594
607
|
'iconSize',
|
|
595
|
-
'
|
|
596
|
-
'
|
|
597
|
-
'
|
|
608
|
+
'color',
|
|
609
|
+
'leftLinkLabel',
|
|
610
|
+
'buttonLabel',
|
|
598
611
|
'ariaLabel',
|
|
599
|
-
'
|
|
600
|
-
'
|
|
601
|
-
'
|
|
602
|
-
'
|
|
603
|
-
'button',
|
|
604
|
-
'menuClass',
|
|
605
|
-
'sdShowChange'
|
|
612
|
+
'menuClassName',
|
|
613
|
+
'sdShowChange',
|
|
614
|
+
'sdButtonClick',
|
|
615
|
+
'sdLeftLinkClick'
|
|
606
616
|
], [
|
|
607
|
-
'sdShowChange'
|
|
617
|
+
'sdShowChange',
|
|
618
|
+
'sdButtonClick',
|
|
619
|
+
'sdLeftLinkClick'
|
|
608
620
|
]);
|
|
609
621
|
|
|
610
622
|
|
|
@@ -638,6 +650,7 @@ export const SdRadio: StencilVueComponent<JSX.SdRadio, JSX.SdRadio["value"]> = /
|
|
|
638
650
|
'val',
|
|
639
651
|
'disabled',
|
|
640
652
|
'label',
|
|
653
|
+
'name',
|
|
641
654
|
'sdUpdate'
|
|
642
655
|
], [
|
|
643
656
|
'sdUpdate'
|
|
@@ -671,6 +684,15 @@ export const SdRadioGroup: StencilVueComponent<JSX.SdRadioGroup, JSX.SdRadioGrou
|
|
|
671
684
|
'value', 'sdUpdate', undefined);
|
|
672
685
|
|
|
673
686
|
|
|
687
|
+
export const SdScrollArea: StencilVueComponent<JSX.SdScrollArea> = /*@__PURE__*/ defineContainer<JSX.SdScrollArea>('sd-scroll-area', undefined, [
|
|
688
|
+
'axis',
|
|
689
|
+
'background',
|
|
690
|
+
'bordered',
|
|
691
|
+
'maxHeight',
|
|
692
|
+
'maxWidth'
|
|
693
|
+
]);
|
|
694
|
+
|
|
695
|
+
|
|
674
696
|
export const SdSelect: StencilVueComponent<JSX.SdSelect, JSX.SdSelect["value"]> = /*@__PURE__*/ defineContainer<JSX.SdSelect, JSX.SdSelect["value"]>('sd-select', undefined, [
|
|
675
697
|
'type',
|
|
676
698
|
'value',
|
|
@@ -760,8 +782,18 @@ export const SdSelectTrigger: StencilVueComponent<JSX.SdSelectTrigger> = /*@__PU
|
|
|
760
782
|
]);
|
|
761
783
|
|
|
762
784
|
|
|
785
|
+
export const SdStepper: StencilVueComponent<JSX.SdStepper> = /*@__PURE__*/ defineContainer<JSX.SdStepper>('sd-stepper', undefined, [
|
|
786
|
+
'items',
|
|
787
|
+
'value',
|
|
788
|
+
'size',
|
|
789
|
+
'ariaLabel'
|
|
790
|
+
]);
|
|
791
|
+
|
|
792
|
+
|
|
763
793
|
export const SdSwitch: StencilVueComponent<JSX.SdSwitch, JSX.SdSwitch["value"]> = /*@__PURE__*/ defineContainer<JSX.SdSwitch, JSX.SdSwitch["value"]>('sd-switch', undefined, [
|
|
764
794
|
'value',
|
|
795
|
+
'leftLabel',
|
|
796
|
+
'rightLabel',
|
|
765
797
|
'label',
|
|
766
798
|
'disabled',
|
|
767
799
|
'sdUpdate'
|
|
@@ -788,7 +820,7 @@ export const SdTag: StencilVueComponent<JSX.SdTag> = /*@__PURE__*/ defineContain
|
|
|
788
820
|
'name',
|
|
789
821
|
'label',
|
|
790
822
|
'icon',
|
|
791
|
-
'
|
|
823
|
+
'iconLeft',
|
|
792
824
|
'width'
|
|
793
825
|
]);
|
|
794
826
|
|
|
@@ -847,6 +879,106 @@ export const SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["val
|
|
|
847
879
|
'value', 'sdUpdate', undefined);
|
|
848
880
|
|
|
849
881
|
|
|
882
|
+
export const SdTimePicker: StencilVueComponent<JSX.SdTimePicker, JSX.SdTimePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdTimePicker, JSX.SdTimePicker["value"]>('sd-time-picker', undefined, [
|
|
883
|
+
'value',
|
|
884
|
+
'size',
|
|
885
|
+
'type',
|
|
886
|
+
'placeholder',
|
|
887
|
+
'disabled',
|
|
888
|
+
'clearable',
|
|
889
|
+
'useMeridiem',
|
|
890
|
+
'minuteStep',
|
|
891
|
+
'width',
|
|
892
|
+
'label',
|
|
893
|
+
'labelWidth',
|
|
894
|
+
'addonLabel',
|
|
895
|
+
'addonAlign',
|
|
896
|
+
'hint',
|
|
897
|
+
'errorMessage',
|
|
898
|
+
'rules',
|
|
899
|
+
'error',
|
|
900
|
+
'status',
|
|
901
|
+
'icon',
|
|
902
|
+
'labelTooltip',
|
|
903
|
+
'labelTooltipProps',
|
|
904
|
+
'name',
|
|
905
|
+
'sdUpdate',
|
|
906
|
+
'sdDropDownShow'
|
|
907
|
+
], [
|
|
908
|
+
'sdUpdate',
|
|
909
|
+
'sdDropDownShow'
|
|
910
|
+
],
|
|
911
|
+
'value', 'sdUpdate', undefined);
|
|
912
|
+
|
|
913
|
+
|
|
914
|
+
export const SdTimePickerSelector: StencilVueComponent<JSX.SdTimePickerSelector> = /*@__PURE__*/ defineContainer<JSX.SdTimePickerSelector>('sd-time-picker-selector', undefined, [
|
|
915
|
+
'value',
|
|
916
|
+
'useMeridiem',
|
|
917
|
+
'minuteStep',
|
|
918
|
+
'sdUpdate'
|
|
919
|
+
], [
|
|
920
|
+
'sdUpdate'
|
|
921
|
+
]);
|
|
922
|
+
|
|
923
|
+
|
|
924
|
+
export const SdTimePickerTrigger: StencilVueComponent<JSX.SdTimePickerTrigger> = /*@__PURE__*/ defineContainer<JSX.SdTimePickerTrigger>('sd-time-picker-trigger', undefined, [
|
|
925
|
+
'displayText',
|
|
926
|
+
'placeholder',
|
|
927
|
+
'disabled',
|
|
928
|
+
'clearable',
|
|
929
|
+
'size',
|
|
930
|
+
'sdTriggerClick',
|
|
931
|
+
'sdClear'
|
|
932
|
+
], [
|
|
933
|
+
'sdTriggerClick',
|
|
934
|
+
'sdClear'
|
|
935
|
+
]);
|
|
936
|
+
|
|
937
|
+
|
|
938
|
+
export const SdTimeRangePicker: StencilVueComponent<JSX.SdTimeRangePicker, JSX.SdTimeRangePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdTimeRangePicker, JSX.SdTimeRangePicker["value"]>('sd-time-range-picker', undefined, [
|
|
939
|
+
'value',
|
|
940
|
+
'size',
|
|
941
|
+
'type',
|
|
942
|
+
'placeholder',
|
|
943
|
+
'disabled',
|
|
944
|
+
'clearable',
|
|
945
|
+
'useMeridiem',
|
|
946
|
+
'minuteStep',
|
|
947
|
+
'rangeOrder',
|
|
948
|
+
'width',
|
|
949
|
+
'label',
|
|
950
|
+
'labelWidth',
|
|
951
|
+
'addonLabel',
|
|
952
|
+
'addonAlign',
|
|
953
|
+
'hint',
|
|
954
|
+
'errorMessage',
|
|
955
|
+
'rules',
|
|
956
|
+
'error',
|
|
957
|
+
'status',
|
|
958
|
+
'icon',
|
|
959
|
+
'labelTooltip',
|
|
960
|
+
'labelTooltipProps',
|
|
961
|
+
'name',
|
|
962
|
+
'sdUpdate',
|
|
963
|
+
'sdDropDownShow'
|
|
964
|
+
], [
|
|
965
|
+
'sdUpdate',
|
|
966
|
+
'sdDropDownShow'
|
|
967
|
+
],
|
|
968
|
+
'value', 'sdUpdate', undefined);
|
|
969
|
+
|
|
970
|
+
|
|
971
|
+
export const SdTimeRangePickerSelector: StencilVueComponent<JSX.SdTimeRangePickerSelector> = /*@__PURE__*/ defineContainer<JSX.SdTimeRangePickerSelector>('sd-time-range-picker-selector', undefined, [
|
|
972
|
+
'value',
|
|
973
|
+
'useMeridiem',
|
|
974
|
+
'minuteStep',
|
|
975
|
+
'rangeOrder',
|
|
976
|
+
'sdUpdate'
|
|
977
|
+
], [
|
|
978
|
+
'sdUpdate'
|
|
979
|
+
]);
|
|
980
|
+
|
|
981
|
+
|
|
850
982
|
export const SdToast: StencilVueComponent<JSX.SdToast> = /*@__PURE__*/ defineContainer<JSX.SdToast>('sd-toast', undefined, [
|
|
851
983
|
'icon',
|
|
852
984
|
'message',
|
|
@@ -894,16 +1026,10 @@ export const SdTooltip: StencilVueComponent<JSX.SdTooltip> = /*@__PURE__*/ defin
|
|
|
894
1026
|
'tooltipType',
|
|
895
1027
|
'icon',
|
|
896
1028
|
'iconSize',
|
|
897
|
-
'label',
|
|
898
|
-
'name',
|
|
899
|
-
'rightIcon',
|
|
900
1029
|
'ariaLabel',
|
|
901
1030
|
'disabled',
|
|
902
|
-
'type',
|
|
903
1031
|
'useClose',
|
|
904
|
-
'sdClass',
|
|
905
1032
|
'message',
|
|
906
|
-
'
|
|
907
|
-
'triggerStyle'
|
|
1033
|
+
'triggerClassName'
|
|
908
1034
|
]);
|
|
909
1035
|
|
package/lib/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellmate/design-system-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.32.0",
|
|
4
4
|
"description": "Design System - Vue Component Wrappers",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"vue": "^3.4.38"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@sellmate/design-system": "^1.
|
|
50
|
+
"@sellmate/design-system": "^1.32.0",
|
|
51
51
|
"@stencil/vue-output-target": "^0.11.8"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
package/dist/SdTable.d.ts
DELETED
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
import { type PropType } from 'vue';
|
|
2
|
-
import type { Row as SdTableRow, SdTableColumn, SelectOption } from '@sellmate/design-system';
|
|
3
|
-
type TablePagination = {
|
|
4
|
-
page: number;
|
|
5
|
-
rowsPerPage: number;
|
|
6
|
-
lastPage?: number;
|
|
7
|
-
};
|
|
8
|
-
type TableVirtualScroll = {
|
|
9
|
-
vertical?: boolean;
|
|
10
|
-
horizontal?: boolean;
|
|
11
|
-
};
|
|
12
|
-
type TableVirtualBufferSize = {
|
|
13
|
-
vertical?: number;
|
|
14
|
-
horizontal?: number;
|
|
15
|
-
};
|
|
16
|
-
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
17
|
-
columns: {
|
|
18
|
-
type: PropType<SdTableColumn[]>;
|
|
19
|
-
required: true;
|
|
20
|
-
};
|
|
21
|
-
rows: {
|
|
22
|
-
type: PropType<SdTableRow[]>;
|
|
23
|
-
required: true;
|
|
24
|
-
};
|
|
25
|
-
modelValue: {
|
|
26
|
-
type: PropType<SdTableRow[]>;
|
|
27
|
-
default: any;
|
|
28
|
-
};
|
|
29
|
-
selected: {
|
|
30
|
-
type: PropType<SdTableRow[]>;
|
|
31
|
-
default: any;
|
|
32
|
-
};
|
|
33
|
-
rowKey: {
|
|
34
|
-
type: StringConstructor;
|
|
35
|
-
default: string;
|
|
36
|
-
};
|
|
37
|
-
selectable: {
|
|
38
|
-
type: BooleanConstructor;
|
|
39
|
-
default: boolean;
|
|
40
|
-
};
|
|
41
|
-
resizable: {
|
|
42
|
-
type: BooleanConstructor;
|
|
43
|
-
default: boolean;
|
|
44
|
-
};
|
|
45
|
-
width: {
|
|
46
|
-
type: StringConstructor;
|
|
47
|
-
default: any;
|
|
48
|
-
};
|
|
49
|
-
height: {
|
|
50
|
-
type: StringConstructor;
|
|
51
|
-
default: any;
|
|
52
|
-
};
|
|
53
|
-
stickyHeader: {
|
|
54
|
-
type: BooleanConstructor;
|
|
55
|
-
default: boolean;
|
|
56
|
-
};
|
|
57
|
-
stickyColumn: {
|
|
58
|
-
type: PropType<{
|
|
59
|
-
left?: number;
|
|
60
|
-
right?: number;
|
|
61
|
-
}>;
|
|
62
|
-
default: () => {
|
|
63
|
-
left: number;
|
|
64
|
-
right: number;
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
noDataLabel: {
|
|
68
|
-
type: StringConstructor;
|
|
69
|
-
default: string;
|
|
70
|
-
};
|
|
71
|
-
isLoading: {
|
|
72
|
-
type: BooleanConstructor;
|
|
73
|
-
default: boolean;
|
|
74
|
-
};
|
|
75
|
-
pagination: {
|
|
76
|
-
type: PropType<TablePagination | undefined>;
|
|
77
|
-
default: any;
|
|
78
|
-
};
|
|
79
|
-
useInternalPagination: {
|
|
80
|
-
type: BooleanConstructor;
|
|
81
|
-
default: boolean;
|
|
82
|
-
};
|
|
83
|
-
useRowsPerPageSelect: {
|
|
84
|
-
type: BooleanConstructor;
|
|
85
|
-
default: boolean;
|
|
86
|
-
};
|
|
87
|
-
rowsPerPageOption: {
|
|
88
|
-
type: PropType<SelectOption[]>;
|
|
89
|
-
default: () => {
|
|
90
|
-
label: string;
|
|
91
|
-
value: number;
|
|
92
|
-
}[];
|
|
93
|
-
};
|
|
94
|
-
useVirtualScroll: {
|
|
95
|
-
type: PropType<TableVirtualScroll>;
|
|
96
|
-
default: () => {};
|
|
97
|
-
};
|
|
98
|
-
virtualRowHeight: {
|
|
99
|
-
type: NumberConstructor;
|
|
100
|
-
default: number;
|
|
101
|
-
};
|
|
102
|
-
virtualColumnWidth: {
|
|
103
|
-
type: NumberConstructor;
|
|
104
|
-
default: number;
|
|
105
|
-
};
|
|
106
|
-
virtualBufferSize: {
|
|
107
|
-
type: PropType<TableVirtualBufferSize>;
|
|
108
|
-
default: () => {
|
|
109
|
-
vertical: number;
|
|
110
|
-
horizontal: number;
|
|
111
|
-
};
|
|
112
|
-
};
|
|
113
|
-
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
114
|
-
[key: string]: any;
|
|
115
|
-
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "sdSelectChange" | "sdPageChange" | "sdRowsPerPageChange")[], "update:modelValue" | "sdSelectChange" | "sdPageChange" | "sdRowsPerPageChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
116
|
-
columns: {
|
|
117
|
-
type: PropType<SdTableColumn[]>;
|
|
118
|
-
required: true;
|
|
119
|
-
};
|
|
120
|
-
rows: {
|
|
121
|
-
type: PropType<SdTableRow[]>;
|
|
122
|
-
required: true;
|
|
123
|
-
};
|
|
124
|
-
modelValue: {
|
|
125
|
-
type: PropType<SdTableRow[]>;
|
|
126
|
-
default: any;
|
|
127
|
-
};
|
|
128
|
-
selected: {
|
|
129
|
-
type: PropType<SdTableRow[]>;
|
|
130
|
-
default: any;
|
|
131
|
-
};
|
|
132
|
-
rowKey: {
|
|
133
|
-
type: StringConstructor;
|
|
134
|
-
default: string;
|
|
135
|
-
};
|
|
136
|
-
selectable: {
|
|
137
|
-
type: BooleanConstructor;
|
|
138
|
-
default: boolean;
|
|
139
|
-
};
|
|
140
|
-
resizable: {
|
|
141
|
-
type: BooleanConstructor;
|
|
142
|
-
default: boolean;
|
|
143
|
-
};
|
|
144
|
-
width: {
|
|
145
|
-
type: StringConstructor;
|
|
146
|
-
default: any;
|
|
147
|
-
};
|
|
148
|
-
height: {
|
|
149
|
-
type: StringConstructor;
|
|
150
|
-
default: any;
|
|
151
|
-
};
|
|
152
|
-
stickyHeader: {
|
|
153
|
-
type: BooleanConstructor;
|
|
154
|
-
default: boolean;
|
|
155
|
-
};
|
|
156
|
-
stickyColumn: {
|
|
157
|
-
type: PropType<{
|
|
158
|
-
left?: number;
|
|
159
|
-
right?: number;
|
|
160
|
-
}>;
|
|
161
|
-
default: () => {
|
|
162
|
-
left: number;
|
|
163
|
-
right: number;
|
|
164
|
-
};
|
|
165
|
-
};
|
|
166
|
-
noDataLabel: {
|
|
167
|
-
type: StringConstructor;
|
|
168
|
-
default: string;
|
|
169
|
-
};
|
|
170
|
-
isLoading: {
|
|
171
|
-
type: BooleanConstructor;
|
|
172
|
-
default: boolean;
|
|
173
|
-
};
|
|
174
|
-
pagination: {
|
|
175
|
-
type: PropType<TablePagination | undefined>;
|
|
176
|
-
default: any;
|
|
177
|
-
};
|
|
178
|
-
useInternalPagination: {
|
|
179
|
-
type: BooleanConstructor;
|
|
180
|
-
default: boolean;
|
|
181
|
-
};
|
|
182
|
-
useRowsPerPageSelect: {
|
|
183
|
-
type: BooleanConstructor;
|
|
184
|
-
default: boolean;
|
|
185
|
-
};
|
|
186
|
-
rowsPerPageOption: {
|
|
187
|
-
type: PropType<SelectOption[]>;
|
|
188
|
-
default: () => {
|
|
189
|
-
label: string;
|
|
190
|
-
value: number;
|
|
191
|
-
}[];
|
|
192
|
-
};
|
|
193
|
-
useVirtualScroll: {
|
|
194
|
-
type: PropType<TableVirtualScroll>;
|
|
195
|
-
default: () => {};
|
|
196
|
-
};
|
|
197
|
-
virtualRowHeight: {
|
|
198
|
-
type: NumberConstructor;
|
|
199
|
-
default: number;
|
|
200
|
-
};
|
|
201
|
-
virtualColumnWidth: {
|
|
202
|
-
type: NumberConstructor;
|
|
203
|
-
default: number;
|
|
204
|
-
};
|
|
205
|
-
virtualBufferSize: {
|
|
206
|
-
type: PropType<TableVirtualBufferSize>;
|
|
207
|
-
default: () => {
|
|
208
|
-
vertical: number;
|
|
209
|
-
horizontal: number;
|
|
210
|
-
};
|
|
211
|
-
};
|
|
212
|
-
}>> & Readonly<{
|
|
213
|
-
"onUpdate:modelValue"?: (...args: any[]) => any;
|
|
214
|
-
onSdSelectChange?: (...args: any[]) => any;
|
|
215
|
-
onSdPageChange?: (...args: any[]) => any;
|
|
216
|
-
onSdRowsPerPageChange?: (...args: any[]) => any;
|
|
217
|
-
}>, {
|
|
218
|
-
modelValue: SdTableRow[];
|
|
219
|
-
selected: SdTableRow[];
|
|
220
|
-
rowKey: string;
|
|
221
|
-
selectable: boolean;
|
|
222
|
-
resizable: boolean;
|
|
223
|
-
width: string;
|
|
224
|
-
height: string;
|
|
225
|
-
stickyHeader: boolean;
|
|
226
|
-
stickyColumn: {
|
|
227
|
-
left?: number;
|
|
228
|
-
right?: number;
|
|
229
|
-
};
|
|
230
|
-
noDataLabel: string;
|
|
231
|
-
isLoading: boolean;
|
|
232
|
-
pagination: TablePagination;
|
|
233
|
-
useInternalPagination: boolean;
|
|
234
|
-
useRowsPerPageSelect: boolean;
|
|
235
|
-
rowsPerPageOption: SelectOption[];
|
|
236
|
-
useVirtualScroll: TableVirtualScroll;
|
|
237
|
-
virtualRowHeight: number;
|
|
238
|
-
virtualColumnWidth: number;
|
|
239
|
-
virtualBufferSize: TableVirtualBufferSize;
|
|
240
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
241
|
-
export default _default;
|
package/dist/SdTable.js
DELETED
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import { computed, defineComponent, h, ref, useAttrs, useSlots, watch, } from 'vue';
|
|
2
|
-
const SLOT_WRAPPER_STYLE = {
|
|
3
|
-
display: 'contents',
|
|
4
|
-
};
|
|
5
|
-
const getCellValue = (column, row) => {
|
|
6
|
-
const { field, format, name } = column;
|
|
7
|
-
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
8
|
-
return format ? format(value, row) : value;
|
|
9
|
-
};
|
|
10
|
-
export default defineComponent({
|
|
11
|
-
name: 'SdTable',
|
|
12
|
-
inheritAttrs: false,
|
|
13
|
-
props: {
|
|
14
|
-
columns: {
|
|
15
|
-
type: Array,
|
|
16
|
-
required: true,
|
|
17
|
-
},
|
|
18
|
-
rows: {
|
|
19
|
-
type: Array,
|
|
20
|
-
required: true,
|
|
21
|
-
},
|
|
22
|
-
modelValue: {
|
|
23
|
-
type: Array,
|
|
24
|
-
default: undefined,
|
|
25
|
-
},
|
|
26
|
-
selected: {
|
|
27
|
-
type: Array,
|
|
28
|
-
default: undefined,
|
|
29
|
-
},
|
|
30
|
-
rowKey: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: 'id',
|
|
33
|
-
},
|
|
34
|
-
selectable: {
|
|
35
|
-
type: Boolean,
|
|
36
|
-
default: false,
|
|
37
|
-
},
|
|
38
|
-
resizable: {
|
|
39
|
-
type: Boolean,
|
|
40
|
-
default: false,
|
|
41
|
-
},
|
|
42
|
-
width: {
|
|
43
|
-
type: String,
|
|
44
|
-
default: undefined,
|
|
45
|
-
},
|
|
46
|
-
height: {
|
|
47
|
-
type: String,
|
|
48
|
-
default: undefined,
|
|
49
|
-
},
|
|
50
|
-
stickyHeader: {
|
|
51
|
-
type: Boolean,
|
|
52
|
-
default: false,
|
|
53
|
-
},
|
|
54
|
-
stickyColumn: {
|
|
55
|
-
type: Object,
|
|
56
|
-
default: () => ({ left: 0, right: 0 }),
|
|
57
|
-
},
|
|
58
|
-
noDataLabel: {
|
|
59
|
-
type: String,
|
|
60
|
-
default: '데이터가 없습니다.',
|
|
61
|
-
},
|
|
62
|
-
isLoading: {
|
|
63
|
-
type: Boolean,
|
|
64
|
-
default: false,
|
|
65
|
-
},
|
|
66
|
-
pagination: {
|
|
67
|
-
type: Object,
|
|
68
|
-
default: undefined,
|
|
69
|
-
},
|
|
70
|
-
useInternalPagination: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
default: false,
|
|
73
|
-
},
|
|
74
|
-
useRowsPerPageSelect: {
|
|
75
|
-
type: Boolean,
|
|
76
|
-
default: false,
|
|
77
|
-
},
|
|
78
|
-
rowsPerPageOption: {
|
|
79
|
-
type: Array,
|
|
80
|
-
default: () => [
|
|
81
|
-
{ label: '10개씩 보기', value: 10 },
|
|
82
|
-
{ label: '25개씩 보기', value: 25 },
|
|
83
|
-
{ label: '50개씩 보기', value: 50 },
|
|
84
|
-
{ label: '100개씩 보기', value: 100 },
|
|
85
|
-
],
|
|
86
|
-
},
|
|
87
|
-
useVirtualScroll: {
|
|
88
|
-
type: Object,
|
|
89
|
-
default: () => ({}),
|
|
90
|
-
},
|
|
91
|
-
virtualRowHeight: {
|
|
92
|
-
type: Number,
|
|
93
|
-
default: 44,
|
|
94
|
-
},
|
|
95
|
-
virtualColumnWidth: {
|
|
96
|
-
type: Number,
|
|
97
|
-
default: 120,
|
|
98
|
-
},
|
|
99
|
-
virtualBufferSize: {
|
|
100
|
-
type: Object,
|
|
101
|
-
default: () => ({
|
|
102
|
-
vertical: 5,
|
|
103
|
-
horizontal: 5,
|
|
104
|
-
}),
|
|
105
|
-
},
|
|
106
|
-
},
|
|
107
|
-
emits: ['update:modelValue', 'sdSelectChange', 'sdPageChange', 'sdRowsPerPageChange'],
|
|
108
|
-
setup(props, { emit }) {
|
|
109
|
-
const attrs = useAttrs();
|
|
110
|
-
const slots = useSlots();
|
|
111
|
-
const normalizedRows = computed(() => props.rows ?? []);
|
|
112
|
-
const currentPage = ref(props.pagination?.page || 1);
|
|
113
|
-
const currentRowsPerPage = ref(props.pagination?.rowsPerPage || normalizedRows.value.length || 0);
|
|
114
|
-
watch(() => props.pagination, pagination => {
|
|
115
|
-
currentPage.value = pagination?.page || 1;
|
|
116
|
-
currentRowsPerPage.value = pagination?.rowsPerPage || normalizedRows.value.length || 0;
|
|
117
|
-
}, { immediate: true, deep: true });
|
|
118
|
-
watch(() => normalizedRows.value.length, rowLength => {
|
|
119
|
-
if (!currentRowsPerPage.value) {
|
|
120
|
-
currentRowsPerPage.value = rowLength;
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
const renderedRows = computed(() => {
|
|
124
|
-
if (!props.useInternalPagination || !currentRowsPerPage.value) {
|
|
125
|
-
return normalizedRows.value;
|
|
126
|
-
}
|
|
127
|
-
const startIndex = (currentPage.value - 1) * currentRowsPerPage.value;
|
|
128
|
-
return normalizedRows.value.slice(startIndex, startIndex + currentRowsPerPage.value);
|
|
129
|
-
});
|
|
130
|
-
return () => {
|
|
131
|
-
const slotChildren = [];
|
|
132
|
-
const noDataSlot = slots['no-data'];
|
|
133
|
-
if (noDataSlot) {
|
|
134
|
-
slotChildren.push(h('span', {
|
|
135
|
-
key: 'no-data',
|
|
136
|
-
slot: 'no-data',
|
|
137
|
-
style: SLOT_WRAPPER_STYLE,
|
|
138
|
-
}, noDataSlot()));
|
|
139
|
-
}
|
|
140
|
-
props.columns.forEach(column => {
|
|
141
|
-
const headerSlot = slots[`header-${column.name}`] || slots.header;
|
|
142
|
-
if (headerSlot) {
|
|
143
|
-
slotChildren.push(h('span', {
|
|
144
|
-
key: `header-${column.name}`,
|
|
145
|
-
slot: `header-cell-${column.name}`,
|
|
146
|
-
style: SLOT_WRAPPER_STYLE,
|
|
147
|
-
}, headerSlot({ column })));
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
renderedRows.value.forEach((row, rowIndex) => {
|
|
151
|
-
props.columns.forEach(column => {
|
|
152
|
-
const cellSlot = slots[`cell-${column.name}`] || slots.cell;
|
|
153
|
-
if (!cellSlot)
|
|
154
|
-
return;
|
|
155
|
-
slotChildren.push(h('span', {
|
|
156
|
-
key: `cell-${column.name}-${rowIndex}`,
|
|
157
|
-
slot: `body-cell-${column.name}-${rowIndex}`,
|
|
158
|
-
style: SLOT_WRAPPER_STYLE,
|
|
159
|
-
}, cellSlot({
|
|
160
|
-
column,
|
|
161
|
-
row,
|
|
162
|
-
rowIndex,
|
|
163
|
-
value: getCellValue(column, row),
|
|
164
|
-
})));
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
return h('sd-table', {
|
|
168
|
-
...attrs,
|
|
169
|
-
...props,
|
|
170
|
-
rows: normalizedRows.value,
|
|
171
|
-
selected: props.modelValue ?? props.selected,
|
|
172
|
-
onSdSelectChange: (event) => {
|
|
173
|
-
emit('update:modelValue', event.detail);
|
|
174
|
-
emit('sdSelectChange', event);
|
|
175
|
-
},
|
|
176
|
-
onSdPageChange: (event) => {
|
|
177
|
-
currentPage.value = event.detail;
|
|
178
|
-
emit('sdPageChange', event);
|
|
179
|
-
},
|
|
180
|
-
onSdRowsPerPageChange: (event) => {
|
|
181
|
-
currentRowsPerPage.value = event.detail;
|
|
182
|
-
const lastPage = Math.max(1, Math.ceil(normalizedRows.value.length / event.detail));
|
|
183
|
-
currentPage.value = Math.min(currentPage.value, lastPage);
|
|
184
|
-
emit('sdRowsPerPageChange', event);
|
|
185
|
-
},
|
|
186
|
-
}, {
|
|
187
|
-
default: () => slotChildren,
|
|
188
|
-
});
|
|
189
|
-
};
|
|
190
|
-
},
|
|
191
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type Ref } from 'vue';
|
|
2
|
-
export interface VirtualRow<T = Record<string, any>> {
|
|
3
|
-
/** 전체 rows 기준 절대 인덱스 — sd-tr의 rowKey로 사용 */
|
|
4
|
-
index: number;
|
|
5
|
-
row: T;
|
|
6
|
-
}
|
|
7
|
-
export declare function useSdTableVirtualScroll<T extends Record<string, any>>(tableRef: Ref<any>, rows: Ref<T[]>): {
|
|
8
|
-
virtualRows: import("vue").ComputedRef<VirtualRow<T>[]>;
|
|
9
|
-
from: import("vue").ComputedRef<number>;
|
|
10
|
-
to: import("vue").ComputedRef<number>;
|
|
11
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
|
2
|
-
export function useSdTableVirtualScroll(tableRef, rows) {
|
|
3
|
-
const range = ref(null);
|
|
4
|
-
let targetEl = null;
|
|
5
|
-
let rafId = 0;
|
|
6
|
-
const onVirtualUpdate = (e) => {
|
|
7
|
-
const { from, to } = e.detail;
|
|
8
|
-
range.value = { from, to };
|
|
9
|
-
};
|
|
10
|
-
const syncRange = (el) => {
|
|
11
|
-
const currentRange = el.getVirtualScrollRangeSync?.();
|
|
12
|
-
if (currentRange &&
|
|
13
|
-
typeof currentRange.from === 'number' &&
|
|
14
|
-
typeof currentRange.to === 'number') {
|
|
15
|
-
range.value = { from: currentRange.from, to: currentRange.to };
|
|
16
|
-
return true;
|
|
17
|
-
}
|
|
18
|
-
return false;
|
|
19
|
-
};
|
|
20
|
-
const attachWhenReady = () => {
|
|
21
|
-
// Stencil Vue 래퍼는 expose()를 사용하지 않으므로 $el로 실제 custom element에 접근
|
|
22
|
-
const raw = tableRef.value?.$el ?? tableRef.value;
|
|
23
|
-
const el = raw instanceof HTMLElement ? raw : null;
|
|
24
|
-
if (!el) {
|
|
25
|
-
rafId = requestAnimationFrame(attachWhenReady);
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
targetEl = el;
|
|
29
|
-
targetEl.addEventListener('sdVirtualUpdate', onVirtualUpdate);
|
|
30
|
-
const trySync = () => {
|
|
31
|
-
if (!targetEl)
|
|
32
|
-
return;
|
|
33
|
-
if (!syncRange(targetEl)) {
|
|
34
|
-
rafId = requestAnimationFrame(trySync);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
trySync();
|
|
38
|
-
};
|
|
39
|
-
onMounted(() => {
|
|
40
|
-
attachWhenReady();
|
|
41
|
-
});
|
|
42
|
-
onUnmounted(() => {
|
|
43
|
-
cancelAnimationFrame(rafId);
|
|
44
|
-
targetEl?.removeEventListener('sdVirtualUpdate', onVirtualUpdate);
|
|
45
|
-
targetEl = null;
|
|
46
|
-
});
|
|
47
|
-
const virtualRows = computed(() => {
|
|
48
|
-
if (!range.value)
|
|
49
|
-
return [];
|
|
50
|
-
const { from, to } = range.value;
|
|
51
|
-
return rows.value.slice(from, to).map((row, i) => ({ index: from + i, row }));
|
|
52
|
-
});
|
|
53
|
-
return {
|
|
54
|
-
virtualRows,
|
|
55
|
-
from: computed(() => range.value?.from ?? 0),
|
|
56
|
-
to: computed(() => range.value?.to ?? 0),
|
|
57
|
-
};
|
|
58
|
-
}
|