@milaboratories/uikit 2.6.4 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/.turbo/turbo-build.log +31 -31
  2. package/.turbo/turbo-type-check.log +1 -1
  3. package/CHANGELOG.md +8 -0
  4. package/dist/components/PlAccordion/ExpandTransition.vue2.js +27 -0
  5. package/dist/components/PlAccordion/ExpandTransition.vue2.js.map +1 -0
  6. package/dist/components/PlAutocomplete/PlAutocomplete.vue.d.ts +2 -2
  7. package/dist/components/PlAutocomplete/PlAutocomplete.vue.js +1 -1
  8. package/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map +1 -1
  9. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts +1 -1
  10. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js.map +1 -1
  11. package/dist/components/PlElementList/PlElementListItem.vue.d.ts +3 -1
  12. package/dist/components/PlElementList/PlElementListItem.vue2.js +36 -34
  13. package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
  14. package/package.json +3 -3
  15. package/src/components/PlAutocomplete/PlAutocomplete.vue +3 -3
  16. package/src/components/PlAutocomplete/__tests__/PlAutocomplete.spec.ts +1 -1
  17. package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue +1 -1
  18. package/src/components/PlElementList/PlElementListItem.vue +2 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
2
2
 
3
- > @milaboratories/uikit@2.6.4 build /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.6.5 build /home/runner/_work/platforma/platforma/lib/ui/uikit
4
4
  > ts-builder build --target browser-lib --build-config ./build.browser-lib.config.js
5
5
 
6
6
  Building browser-lib project...
@@ -13,7 +13,7 @@ rendering chunks...
13
13
 
14
14
  [vite:dts] Start generate declaration files...
15
15
  computing gzip size...
16
- [vite:dts] Declaration files built in 29484ms.
16
+ [vite:dts] Declaration files built in 15382ms.
17
17
 
18
18
  dist/components/PlTabs/Tab.vue2.js  0.09 kB │ gzip: 0.11 kB │ map: 0.09 kB
19
19
  dist/components/PlTooltip/global.js  0.10 kB │ gzip: 0.11 kB │ map: 0.22 kB
@@ -30,69 +30,69 @@ computing gzip size...
30
30
  dist/components/DataTable/TrBody.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
31
31
  dist/components/PlAlert/PlAlert.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
32
32
  dist/base/BtnBase.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
33
+ dist/components/TabItem.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
33
34
  dist/components/VScroll.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
34
35
  dist/components/HScroll.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
35
- dist/components/TabItem.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
36
36
  dist/components/DataTable/TScroll.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
37
- dist/components/PlSplash/PlSplash.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
38
37
  dist/layout/PlSpacer/PlSpacer.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
38
+ dist/components/PlSplash/PlSplash.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
39
39
  dist/components/PlLogView/PlLogView.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
40
40
  dist/components/PlBtnLink/PlBtnLink.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
41
41
  dist/components/PlTooltip/PlTooltip.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
42
42
  dist/components/Scrollable.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
43
- dist/components/PlCheckbox/PlCheckbox.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
44
- dist/components/PlBtnGhost/PlBtnGhost.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
45
43
  dist/components/PlDropdown/PlDropdown.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
44
+ dist/components/PlBtnGhost/PlBtnGhost.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
45
+ dist/components/PlCheckbox/PlCheckbox.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
46
46
  dist/components/PlBtnGroup/PlBtnGroup.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
47
- dist/components/PlTextArea/PlTextArea.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
48
47
  dist/components/PlBtnSplit/PlBtnSplit.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
49
- dist/components/PlDropdown/OptionList.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
48
+ dist/components/PlTextArea/PlTextArea.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
50
49
  dist/components/InputRange.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
50
+ dist/components/PlDropdown/OptionList.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
51
51
  dist/components/SliderRange.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
52
- dist/components/PlBtnDanger/PlBtnDanger.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
52
+ dist/components/PlTextField/PlTextField.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
53
+ dist/components/PlBtnAccent/PlBtnAccent.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
53
54
  dist/components/PlAccordion/PlAccordion.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
55
+ dist/layout/PlContainer/PlContainer.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
56
+ dist/components/PlFileInput/PlFileInput.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
57
+ dist/components/PlBtnDanger/PlBtnDanger.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
54
58
  dist/layout/PlBlockPage/PlBlockPage.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
55
- dist/components/PlBtnAccent/PlBtnAccent.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
56
59
  dist/components/PlStatusTag/PlStatusTag.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
57
- dist/components/PlTextField/PlTextField.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
58
- dist/components/PlFileInput/PlFileInput.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
59
- dist/layout/PlContainer/PlContainer.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
60
60
  dist/components/DataTable/ColumnCaret.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
61
61
  dist/components/PlBtnPrimary/PlBtnPrimary.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
62
62
  dist/components/PlFileDialog/PlFileDialog.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
63
63
  dist/utils/InnerBorder.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.34 kB
64
64
  dist/components/ThemeSwitcher.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
65
- dist/components/PlDropdownRef/PlDropdownRef.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
66
65
  dist/components/PlProgressBar/PlProgressBar.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
67
- dist/components/PlNumberField/PlNumberField.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
68
66
  dist/components/PlDialogModal/PlDialogModal.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
69
- dist/components/PlAutocomplete/PlAutocomplete.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
67
+ dist/components/PlDropdownRef/PlDropdownRef.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
68
+ dist/components/PlNumberField/PlNumberField.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
70
69
  dist/components/PlDropdownLine/PlDropdownLine.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
71
- dist/components/PlBtnSecondary/PlBtnSecondary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
70
+ dist/components/PlAutocomplete/PlAutocomplete.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
72
71
  dist/components/DataTable/TableComponent.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
73
72
  dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
73
+ dist/components/PlBtnSecondary/PlBtnSecondary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
74
74
  dist/components/PlProgressCell/PlProgressCell.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
75
- dist/components/PlCheckbox/PlCheckboxBase.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
76
75
  dist/components/PlDropdownLine/ResizableInput.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
76
+ dist/components/PlCheckbox/PlCheckboxBase.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
77
77
  dist/components/ContextProvider.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
78
- dist/components/PlConfirmDialog.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
79
78
  dist/utils/DropdownOverlay/DropdownOverlay.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
79
+ dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
80
80
  dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
81
- dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
82
81
  dist/components/PlEditableTitle/PlEditableTitle.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
83
- dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
82
+ dist/components/PlConfirmDialog.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
83
+ dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
84
84
  dist/helpers/math.js  0.12 kB │ gzip: 0.13 kB │ map: 0.33 kB
85
85
  dist/components/DataTable/RowsCommandMenu.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
86
86
  dist/components/DropdownListItem.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
87
- dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
88
87
  dist/components/PlLoaderCircular/PlLoaderCircular.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
88
+ dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
89
89
  dist/components/PlSlideModal/PlPureSlideModal.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
90
90
  dist/components/SliderRangeTriple.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
91
91
  dist/components/DataTable/BaseCellComponent.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
92
92
  dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
93
93
  dist/components/DataTable/ColumnsCommandMenu.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
94
- dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
95
94
  dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
95
+ dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
96
96
  dist/components/TransitionSlidePanel.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
97
97
  dist/components/PlRadio/keys.js  0.13 kB │ gzip: 0.13 kB │ map: 0.43 kB
98
98
  dist/composition/utils.js  0.15 kB │ gzip: 0.14 kB │ map: 0.38 kB
@@ -147,10 +147,10 @@ computing gzip size...
147
147
  dist/assets/icons/icon-assets-min/16_maximize.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.47 kB
148
148
  dist/components/PlSlideModal/PlSlideModal.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
149
149
  dist/components/PlRadio/PlRadioGroup.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
150
+ dist/components/PlErrorAlert/PlErrorAlert.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
150
151
  dist/assets/icons/icon-assets-min/16_caret-left.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.46 kB
151
152
  dist/assets/icons/icon-assets-min/16_download.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.46 kB
152
153
  dist/assets/icons/icon-assets-min/24_linetype-dashed.svg.js  0.29 kB │ gzip: 0.23 kB │ map: 0.48 kB
153
- dist/components/PlErrorAlert/PlErrorAlert.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
154
154
  dist/assets/icons/icon-assets-min/24_drag-dots.svg.js  0.29 kB │ gzip: 0.23 kB │ map: 0.46 kB
155
155
  dist/assets/icons/icon-assets-min/16_chevron-up.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.47 kB
156
156
  dist/components/PlElementList/PlElementList.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
@@ -219,8 +219,8 @@ computing gzip size...
219
219
  dist/assets/icons/icon-assets-min/24_legend-box.svg.js  0.35 kB │ gzip: 0.26 kB │ map: 0.54 kB
220
220
  dist/assets/icons/icon-assets-min/24_position-left.svg.js  0.35 kB │ gzip: 0.27 kB │ map: 0.52 kB
221
221
  dist/assets/icons/icon-assets-min/24_close.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.52 kB
222
- dist/assets/icons/icon-assets-min/24_stop.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.52 kB
223
222
  dist/composition/useFilteredList.js  0.35 kB │ gzip: 0.24 kB │ map: 1.15 kB
223
+ dist/assets/icons/icon-assets-min/24_stop.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.52 kB
224
224
  dist/layout/PlSpacer/PlSpacer.vue.js  0.35 kB │ gzip: 0.27 kB │ map: 0.53 kB
225
225
  dist/assets/icons/icon-assets-min/24_checkbox.svg.js  0.35 kB │ gzip: 0.26 kB │ map: 0.53 kB
226
226
  dist/assets/icons/icon-assets-min/24_play.svg.js  0.35 kB │ gzip: 0.28 kB │ map: 0.53 kB
@@ -266,9 +266,9 @@ computing gzip size...
266
266
  dist/assets/icons/icon-assets-min/24_align-right.svg.js  0.43 kB │ gzip: 0.28 kB │ map: 0.61 kB
267
267
  dist/assets/icons/icon-assets-min/24_zoom-out.svg.js  0.43 kB │ gzip: 0.29 kB │ map: 0.63 kB
268
268
  dist/assets/icons/icon-assets-min/24_windows-collapse.svg.js  0.43 kB │ gzip: 0.30 kB │ map: 0.66 kB
269
- dist/utils/InnerBorder.vue.js  0.43 kB │ gzip: 0.31 kB │ map: 0.42 kB
270
269
  dist/assets/icons/icon-assets-min/16_delete-circle.svg.js  0.43 kB │ gzip: 0.30 kB │ map: 0.62 kB
271
270
  dist/assets/icons/icon-assets-min/24_drag-vertical.svg.js  0.43 kB │ gzip: 0.31 kB │ map: 0.62 kB
271
+ dist/utils/InnerBorder.vue.js  0.43 kB │ gzip: 0.31 kB │ map: 0.42 kB
272
272
  dist/assets/icons/icon-assets-min/16_zip.svg.js  0.43 kB │ gzip: 0.29 kB │ map: 0.60 kB
273
273
  dist/assets/icons/icon-assets-min/24_arrow-left-curved.svg.js  0.43 kB │ gzip: 0.31 kB │ map: 0.61 kB
274
274
  dist/assets/icons/icon-assets-min/24_drag-horizontal.svg.js  0.43 kB │ gzip: 0.32 kB │ map: 0.62 kB
@@ -282,8 +282,8 @@ computing gzip size...
282
282
  dist/assets/icons/icon-assets-min/24_renew.svg.js  0.44 kB │ gzip: 0.32 kB │ map: 0.62 kB
283
283
  dist/assets/icons/icon-assets-min/16_error.svg.js  0.44 kB │ gzip: 0.32 kB │ map: 0.64 kB
284
284
  dist/assets/icons/icon-assets-min/24_monetization.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.63 kB
285
- dist/assets/images/24_checkbox-light-enabled-unchecked.svg.js  0.45 kB │ gzip: 0.32 kB │ map: 0.67 kB
286
285
  dist/assets/icons/icon-assets-min/24_y-axis.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
286
+ dist/assets/images/24_checkbox-light-enabled-unchecked.svg.js  0.45 kB │ gzip: 0.32 kB │ map: 0.67 kB
287
287
  dist/assets/icons/icon-assets-min/16_y-axis.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
288
288
  dist/assets/icons/icon-assets-min/24_delete-circle.svg.js  0.45 kB │ gzip: 0.31 kB │ map: 0.65 kB
289
289
  dist/assets/icons/icon-assets-min/24_zoom-in.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
@@ -602,7 +602,7 @@ computing gzip size...
602
602
  dist/composition/useSortable2.js  4.41 kB │ gzip: 1.50 kB │ map: 13.08 kB
603
603
  dist/components/PlAlert/PlAlert.vue.js  4.44 kB │ gzip: 1.70 kB │ map: 3.53 kB
604
604
  dist/components/PlSlideModal/PlSlideModal.vue2.js  4.45 kB │ gzip: 1.75 kB │ map: 2.18 kB
605
- dist/components/PlElementList/PlElementListItem.vue2.js  4.62 kB │ gzip: 1.29 kB │ map: 10.46 kB
605
+ dist/components/PlElementList/PlElementListItem.vue2.js  4.69 kB │ gzip: 1.31 kB │ map: 10.64 kB
606
606
  dist/components/PlBtnGroup/PlBtnGroup.vue.js  5.14 kB │ gzip: 1.94 kB │ map: 4.42 kB
607
607
  dist/components/PlTooltip/PlTooltip.vue.js  5.19 kB │ gzip: 1.93 kB │ map: 6.61 kB
608
608
  dist/components/Slider.vue.js  5.52 kB │ gzip: 1.92 kB │ map: 9.88 kB
@@ -626,12 +626,12 @@ computing gzip size...
626
626
  dist/components/PlDropdown/PlDropdown.vue.js  15.71 kB │ gzip: 4.52 kB │ map: 18.09 kB
627
627
  dist/components/PlDropdownMulti/PlDropdownMulti.vue.js  18.23 kB │ gzip: 4.95 kB │ map: 16.65 kB
628
628
  dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js  18.26 kB │ gzip: 4.95 kB │ map: 17.77 kB
629
- dist/components/PlAutocomplete/PlAutocomplete.vue.js  18.68 kB │ gzip: 5.24 kB │ map: 20.89 kB
630
- dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js  19.31 kB │ gzip: 5.23 kB │ map: 20.78 kB
629
+ dist/components/PlAutocomplete/PlAutocomplete.vue.js  18.69 kB │ gzip: 5.24 kB │ map: 20.99 kB
630
+ dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js  19.31 kB │ gzip: 5.23 kB │ map: 20.80 kB
631
631
  dist/components/PlSvg/PlSvg.vue2.js  39.54 kB │ gzip: 3.38 kB │ map: 12.31 kB
632
632
  dist/components/PlFileDialog/pl-file-dialog.module.scss.js  47.68 kB │ gzip: 16.33 kB │ map: 0.13 kB
633
633
  dist/index.js 502.41 kB │ gzip: 192.50 kB │ map: 5.86 kB
634
634
  dist/components/PlSlideModal/PlPureSlideModal.vue.js 605.54 kB │ gzip: 205.13 kB │ map: 2.93 kB
635
635
  dist/components/DataTable/TableComponent.vue.js 607.38 kB │ gzip: 206.02 kB │ map: 6.85 kB
636
- ✓ built in 38.05s
636
+ ✓ built in 21.59s
637
637
  Build completed successfully
package/.turbo/turbo-type-check.log CHANGED
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
2
2
 
3
- > @milaboratories/uikit@2.6.4 type-check /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.6.5 type-check /home/runner/_work/platforma/platforma/lib/ui/uikit
4
4
  > ts-builder types --target browser-lib
5
5
 
6
6
  ↳ vue-tsc.js --noEmit --project ./tsconfig.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @milaboratories/uikit
2
2
 
3
+ ## 2.6.5
4
+
5
+ ### Patch Changes
6
+
7
+ - bf6fe49: Update advanced filters and types
8
+ - Updated dependencies [bf6fe49]
9
+ - @platforma-sdk/model@1.45.45
10
+
3
11
  ## 2.6.4
4
12
 
5
13
  ### Patch Changes
package/dist/components/PlAccordion/ExpandTransition.vue2.js ADDED
@@ -0,0 +1,27 @@
1
+ import { defineComponent as n, createBlock as r, openBlock as a, Transition as s, withCtx as p, renderSlot as c } from "vue";
2
+ const f = /* @__PURE__ */ n({
3
+ __name: "ExpandTransition",
4
+ setup(l) {
5
+ const t = (e) => {
6
+ e.classList.add("expand-collapse-fix"), e.style.setProperty("--component-height", e.scrollHeight + "px");
7
+ }, o = (e) => {
8
+ e.style.removeProperty("--component-height"), e.classList.remove("expand-collapse-fix");
9
+ };
10
+ return (e, i) => (a(), r(s, {
11
+ name: "expand-collapse",
12
+ onEnter: t,
13
+ onLeave: t,
14
+ onAfterEnter: o,
15
+ onAfterLeave: o
16
+ }, {
17
+ default: p(() => [
18
+ c(e.$slots, "default")
19
+ ]),
20
+ _: 3
21
+ }));
22
+ }
23
+ });
24
+ export {
25
+ f as default
26
+ };
27
+ //# sourceMappingURL=ExpandTransition.vue2.js.map
package/dist/components/PlAccordion/ExpandTransition.vue2.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n el.classList.add('expand-collapse-fix');\n (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n (el as HTMLElement).style.removeProperty('--component-height');\n el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n <slot/>\n </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n transition:\n height 0.2s ease-in-out,\n opacity 0.2s ease-in-out;\n height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n opacity: 0.5;\n height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter","_createBlock","_Transition","_renderSlot","_ctx"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;2BAIEE,EAEaC,GAAA;AAAA,MAFD,MAAK;AAAA,MAAmB,SAAOJ;AAAA,MAAU,SAAOA;AAAA,MAAU,cAAaE;AAAA,MAAU,cAAaA;AAAA,IAAA;iBACxG,MAAO;AAAA,QAAPG,EAAOC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}
package/dist/components/PlAutocomplete/PlAutocomplete.vue.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ListOption } from '../../types';
2
2
  /**
3
3
  * A component for selecting one value from a big list of options using string search request
4
4
  */
5
- declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
5
+ declare const _default: <M extends null | undefined | string | number = string | null | undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
6
6
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
7
7
  readonly "onUpdate:modelValue"?: ((value: M) => any) | undefined;
8
8
  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & ({
@@ -15,7 +15,7 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
15
15
  /**
16
16
  * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.
17
17
  */
18
- modelSearch?: (v: M) => Promise<ListOption<M>>;
18
+ modelSearch?: (v: NonNullable<M>) => Promise<ListOption<NonNullable<M>>>;
19
19
  /**
20
20
  * The label text for the dropdown field (optional)
21
21
  */
package/dist/components/PlAutocomplete/PlAutocomplete.vue.js CHANGED
@@ -140,7 +140,7 @@ const De = ["tabindex"], Fe = { class: "pl-autocomplete__container" }, Me = { cl
140
140
  return c.optionsSearch(e);
141
141
  }), P = H(() => r.value, async (e) => {
142
142
  var o, l;
143
- return e && !I((o = y.value) == null ? void 0 : o.value, e) ? c.modelSearch ? c.modelSearch(e) : (l = await c.optionsSearch(String(e))) == null ? void 0 : l[0] : y.value;
143
+ return e != null && !I((o = y.value) == null ? void 0 : o.value, e) ? c.modelSearch ? c.modelSearch(e) : (l = await c.optionsSearch(String(e))) == null ? void 0 : l[0] : y.value;
144
144
  });
145
145
  return g(() => C.value, (e) => {
146
146
  e && (E.value = e, s.value !== null && (V.value = !1));
package/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ListOptionBase } from '@platforma-sdk/model';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /**\n * Lambda for requesting of available options for the dropdown by search string.\n */\n optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n /**\n * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n */\n modelSearch?: (v: M) => Promise<ListOption<M>>;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: string;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: string;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\n /**\n * Formatter for the selected value if its label is absent\n */\n formatValue?: (value: M) => string;\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n }>(),\n {\n modelSearch: undefined,\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n formatValue: (v: M) => String(v),\n groupPosition: undefined,\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (isLoadingError.value) {\n return 'Data loading error';\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized | undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label || (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return '';\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionBase<M> & { index: number } | undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n search.value = null;\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n search.value = '';\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n if (v !== null) { // search is null when dropdown is closed;\n return props.optionsSearch(v);\n }\n return undefined;\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n if (props.modelSearch) {\n return props.modelSearch(v);\n }\n return (await props.optionsSearch(String(v)))?.[0];\n }\n return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n});\n\nwatch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {\n isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","model","_useModel","props","__props","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","search","data","reactive","findActiveIndex","tap","renderedOptionsRef","o","deepEqual","v","updateActive","loadedOptionsRef","modelOptionRef","computed","normalizeListOptions","opt","index","selectedIndex","isLoadingOptions","isLoadingError","isDisabled","computedError","getErrorMessage","textValue","modelOption","unref","options","item","computedPlaceholder","hasValue","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","watch","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","length","it","localIndex","delta","newIndex","useLabelNotch","watchPostEffect","searchDebounced","refDebounced","optionsRequest","useWatchFetch","modelOptionRequest","result","err","loading","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","$event","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlMaskIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","_hoisted_8","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","_Fragment","_renderList","DropdownListItem","_withModifiers","_hoisted_9","DoubleContour","_hoisted_10","_toDisplayString","_hoisted_11","_hoisted_12"],"mappings":"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"}
1
+ {"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends null | undefined | string | number = null | undefined | string\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ListOptionBase } from '@platforma-sdk/model';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /**\n * Lambda for requesting of available options for the dropdown by search string.\n */\n optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n /**\n * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n */\n modelSearch?: (v: NonNullable<M>) => Promise<ListOption<NonNullable<M>>>;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: string;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: string;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\n /**\n * Formatter for the selected value if its label is absent\n */\n formatValue?: (value: M) => string;\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n }>(),\n {\n modelSearch: undefined,\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n formatValue: (v: M) => String(v),\n groupPosition: undefined,\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (isLoadingError.value) {\n return 'Data loading error';\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized | undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label || (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return '';\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionBase<M> & { index: number } | undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n search.value = null;\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n search.value = '';\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n if (v !== null) { // search is null when dropdown is closed;\n return props.optionsSearch(v);\n }\n return undefined;\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n if (v != null && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n if (props.modelSearch) {\n return props.modelSearch(v);\n }\n return (await props.optionsSearch(String(v)))?.[0];\n }\n return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n});\n\nwatch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {\n isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","model","_useModel","props","__props","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","search","data","reactive","findActiveIndex","tap","renderedOptionsRef","o","deepEqual","v","updateActive","loadedOptionsRef","modelOptionRef","computed","normalizeListOptions","opt","index","selectedIndex","isLoadingOptions","isLoadingError","isDisabled","computedError","getErrorMessage","textValue","modelOption","unref","options","item","computedPlaceholder","hasValue","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","watch","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","length","it","localIndex","delta","newIndex","useLabelNotch","watchPostEffect","searchDebounced","refDebounced","optionsRequest","useWatchFetch","modelOptionRequest","result","err","loading","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","$event","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlMaskIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","_hoisted_8","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","_Fragment","_renderList","DropdownListItem","_withModifiers","_hoisted_9","DoubleContour","_hoisted_10","_toDisplayString","_hoisted_11","_hoisted_12"],"mappings":"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"}
package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts CHANGED
@@ -32,7 +32,7 @@ import { ListOptionBase } from '@platforma-sdk/model';
32
32
  * return users.map(user => ({ value: user.id, label: user.name }))
33
33
  * }
34
34
  */
35
- declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
35
+ declare const _default: <M extends string | number = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
36
36
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
37
37
  readonly "onUpdate:modelValue"?: ((v: M[]) => any) | undefined;
38
38
  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAutocompleteMulti.vue.js","sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n name: 'PlAutocompleteMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete-multi.scss';\n\nimport type { ListOptionBase } from '@platforma-sdk/model';\nimport canonicalize from 'canonicalize';\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlTooltip } from '../PlTooltip';\n\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { PlSvg } from '../PlSvg';\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * Lambda for requesting of available options for the dropdown by search string.\n */\n optionsSearch: (s: string) => Promise<Readonly<ListOptionBase<M>[]>>;\n /**\n * Lambda for requesting options that correspond to the current model values.\n */\n modelSearch: (values: M[]) => Promise<Readonly<ListOptionBase<M>[]>>;\n /**\n * Unique identifier for the source of the options, changing it will invalidate the options cache.\n */\n sourceId?: string;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Debounce time in ms for the options search.\n */\n debounce?: number;\n /**\n * If `true`, the search input is reset and focus is set on it when the new option is selected.\n */\n resetSearchOnSelect?: boolean;\n /**\n * The text to display when no options are found.\n */\n emptyOptionsText?: string;\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: '...',\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: 'Nothing found',\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n search: '',\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(() => data.open, (v) => {\n if (!v) {\n data.search = '';\n }\n}, { flush: 'sync' });\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst debounce = toRef(props, 'debounce');\n\nconst searchOptionsRef = useWatchFetch(() => [data.search, data.open, props.sourceId] as const, async ([search, _open]) => {\n return props.optionsSearch(search);\n}, {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n});\n\nconst modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {\n return props.modelSearch(v);\n}, {\n debounce,\n});\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string | undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value.map((v) =>\n allOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined,\n );\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = '';\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => data.open = !data.open;\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return 'The selected values are not one of the options';\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">{{ emptyOptionsText }}</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","inputRef","overlay","useTemplateRef","data","reactive","watch","selectedValuesRef","computed","placeholderRef","debounce","toRef","searchOptionsRef","useWatchFetch","search","_open","_search","open","modelOptionsRef","allOptionsRef","modelOptions","searchOptions","seenValues","result","addOptions","options","option","canonicalValue","canonicalize","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","deepIncludes","isOptionsLoading","isDisabled","tabindex","updateActiveOption","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleOpen","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","activeOption","filteredOptions","length","useLabelNotch","computedError","getErrorMessage","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_Fragment","_renderList","i","_createBlock","_unref","PlChip","_withModifiers","_createTextVNode","_toDisplayString","_hoisted_6","PlMaskIcon24","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","_hoisted_8","item","index","DropdownListItem","_hoisted_9","_createVNode","DoubleContour","_hoisted_10","_hoisted_11"],"mappings":"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"}
1
+ {"version":3,"file":"PlAutocompleteMulti.vue.js","sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n name: 'PlAutocompleteMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string | number = string\">\nimport './pl-autocomplete-multi.scss';\n\nimport type { ListOptionBase } from '@platforma-sdk/model';\nimport canonicalize from 'canonicalize';\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlTooltip } from '../PlTooltip';\n\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { PlSvg } from '../PlSvg';\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * Lambda for requesting of available options for the dropdown by search string.\n */\n optionsSearch: (s: string) => Promise<Readonly<ListOptionBase<M>[]>>;\n /**\n * Lambda for requesting options that correspond to the current model values.\n */\n modelSearch: (values: M[]) => Promise<Readonly<ListOptionBase<M>[]>>;\n /**\n * Unique identifier for the source of the options, changing it will invalidate the options cache.\n */\n sourceId?: string;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Debounce time in ms for the options search.\n */\n debounce?: number;\n /**\n * If `true`, the search input is reset and focus is set on it when the new option is selected.\n */\n resetSearchOnSelect?: boolean;\n /**\n * The text to display when no options are found.\n */\n emptyOptionsText?: string;\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: '...',\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: 'Nothing found',\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n search: '',\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(() => data.open, (v) => {\n if (!v) {\n data.search = '';\n }\n}, { flush: 'sync' });\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst debounce = toRef(props, 'debounce');\n\nconst searchOptionsRef = useWatchFetch(() => [data.search, data.open, props.sourceId] as const, async ([search, _open]) => {\n return props.optionsSearch(search);\n}, {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n});\n\nconst modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {\n return props.modelSearch(v);\n}, {\n debounce,\n});\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string | undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value.map((v) =>\n allOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined,\n );\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = '';\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => data.open = !data.open;\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return 'The selected values are not one of the options';\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">{{ emptyOptionsText }}</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","inputRef","overlay","useTemplateRef","data","reactive","watch","selectedValuesRef","computed","placeholderRef","debounce","toRef","searchOptionsRef","useWatchFetch","search","_open","_search","open","modelOptionsRef","allOptionsRef","modelOptions","searchOptions","seenValues","result","addOptions","options","option","canonicalValue","canonicalize","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","deepIncludes","isOptionsLoading","isDisabled","tabindex","updateActiveOption","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleOpen","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","activeOption","filteredOptions","length","useLabelNotch","computedError","getErrorMessage","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_Fragment","_renderList","i","_createBlock","_unref","PlChip","_withModifiers","_createTextVNode","_toDisplayString","_hoisted_6","PlMaskIcon24","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","_hoisted_8","item","index","DropdownListItem","_hoisted_9","_createVNode","DoubleContour","_hoisted_10","_hoisted_11"],"mappings":"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"}
package/dist/components/PlElementList/PlElementListItem.vue.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
2
2
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
3
+ readonly onClick?: ((item: MouseEvent) => any) | undefined;
3
4
  readonly onToggle?: ((item: T, index: number) => any) | undefined;
4
5
  readonly onPin?: ((item: T, index: number) => any) | undefined;
5
6
  readonly onExpand?: ((item: T, index: number) => any) | undefined;
6
7
  readonly onRemove?: ((item: T, index: number) => any) | undefined;
7
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onToggle" | "onPin" | "onExpand" | "onRemove"> & {
8
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onToggle" | "onPin" | "onExpand" | "onRemove"> & {
8
9
  item: T;
9
10
  index: number;
10
11
  showDragHandle: boolean;
@@ -60,6 +61,7 @@ declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<A
60
61
  }) => unknown;
61
62
  };
62
63
  emit: {
64
+ (e: "click", item: MouseEvent): void;
63
65
  (e: "expand", item: T, index: number): void;
64
66
  (e: "toggle", item: T, index: number): void;
65
67
  (e: "pin", item: T, index: number): void;
package/dist/components/PlElementList/PlElementListItem.vue2.js CHANGED
@@ -1,7 +1,7 @@
1
- import { defineComponent as E, useSlots as P, computed as b, createElementBlock as n, openBlock as i, createCommentVNode as a, createElementVNode as y, normalizeClass as l, renderSlot as m, createBlock as w, createVNode as v, unref as d, withModifiers as p } from "vue";
2
- import u from "../PlIcon16/PlIcon16.vue.js";
3
- import f from "../PlIcon24/PlIcon24.vue.js";
4
- const h = ["data-draggable"], A = /* @__PURE__ */ E({
1
+ import { defineComponent as E, useSlots as P, computed as b, createElementBlock as n, openBlock as t, createCommentVNode as a, createElementVNode as m, normalizeClass as l, renderSlot as v, createBlock as w, createVNode as $, unref as y, withModifiers as p } from "vue";
2
+ import k from "../PlIcon16/PlIcon16.vue.js";
3
+ import c from "../PlIcon24/PlIcon24.vue.js";
4
+ const T = ["data-draggable"], A = /* @__PURE__ */ E({
5
5
  inheritAttrs: !1,
6
6
  __name: "PlElementListItem",
7
7
  props: {
@@ -22,20 +22,22 @@ const h = ["data-draggable"], A = /* @__PURE__ */ E({
22
22
  afterClass: {},
23
23
  beforeClass: {}
24
24
  },
25
- emits: ["expand", "toggle", "pin", "remove"],
26
- setup(o, { emit: c }) {
27
- const e = o, $ = P(), k = b(() => $.content !== void 0), C = b(() => $.after !== void 0), B = b(() => $.before !== void 0), r = c;
28
- return (s, t) => (i(), n("div", null, [
29
- B.value ? (i(), n("div", {
25
+ emits: ["click", "expand", "toggle", "pin", "remove"],
26
+ setup(o, { emit: f }) {
27
+ const e = o, g = P(), u = b(() => g.content !== void 0), C = b(() => g.after !== void 0), B = b(() => g.before !== void 0), d = f;
28
+ return (s, i) => (t(), n("div", {
29
+ onClick: i[4] || (i[4] = (r) => d("click", r))
30
+ }, [
31
+ B.value ? (t(), n("div", {
30
32
  key: 0,
31
33
  class: l(o.beforeClass)
32
34
  }, [
33
- m(s.$slots, "before", {
35
+ v(s.$slots, "before", {
34
36
  item: e.item,
35
37
  index: e.index
36
38
  })
37
39
  ], 2)) : a("", !0),
38
- y("div", {
40
+ m("div", {
39
41
  class: l([s.$style.root, s.$attrs.class, {
40
42
  [s.$style.active]: e.isActive,
41
43
  [s.$style.pinned]: e.isPinned,
@@ -43,82 +45,82 @@ const h = ["data-draggable"], A = /* @__PURE__ */ E({
43
45
  [s.$style.disabled]: e.isToggled
44
46
  }])
45
47
  }, [
46
- y("div", {
48
+ m("div", {
47
49
  class: l([s.$style.head, o.titleClass, {
48
- [s.$style.clickable]: k.value
50
+ [s.$style.clickable]: u.value
49
51
  }]),
50
- onClick: t[3] || (t[3] = (g) => o.isExpandable && r("expand", e.item, e.index))
52
+ onClick: i[3] || (i[3] = (r) => o.isExpandable && d("expand", e.item, e.index))
51
53
  }, [
52
- e.showDragHandle ? (i(), n("div", {
54
+ e.showDragHandle ? (t(), n("div", {
53
55
  key: 0,
54
56
  class: l([s.$style.action, s.$style.draggable, { [s.$style.disable]: !e.isDraggable }]),
55
57
  "data-draggable": e.isDraggable
56
58
  }, [
57
- v(d(u), { name: "drag-dots" })
58
- ], 10, h)) : a("", !0),
59
- o.isExpandable ? (i(), w(d(u), {
59
+ $(y(k), { name: "drag-dots" })
60
+ ], 10, T)) : a("", !0),
61
+ o.isExpandable ? (t(), w(y(k), {
60
62
  key: 1,
61
63
  class: l([s.$style.contentChevron, { [s.$style.opened]: e.isExpanded }]),
62
64
  name: "chevron-down"
63
65
  }, null, 8, ["class"])) : a("", !0),
64
- y("div", {
66
+ m("div", {
65
67
  class: l(s.$style.title)
66
68
  }, [
67
- m(s.$slots, "title", {
69
+ v(s.$slots, "title", {
68
70
  item: e.item,
69
71
  index: e.index
70
72
  })
71
73
  ], 2),
72
- y("div", {
74
+ m("div", {
73
75
  class: l([s.$style.actions, s.$style.showOnHover])
74
76
  }, [
75
- e.isToggable ? (i(), n("div", {
77
+ e.isToggable ? (t(), n("div", {
76
78
  key: 0,
77
79
  class: l([s.$style.action, s.$style.clickable, { [s.$style.disable]: !e.isToggable }]),
78
- onClick: t[0] || (t[0] = p((g) => r("toggle", e.item, e.index), ["stop"]))
80
+ onClick: i[0] || (i[0] = p((r) => d("toggle", e.item, e.index), ["stop"]))
79
81
  }, [
80
- v(d(f), {
82
+ $(y(c), {
81
83
  name: e.isToggled === !0 ? "view-hide" : "view-show",
82
84
  size: "16"
83
85
  }, null, 8, ["name"])
84
86
  ], 2)) : a("", !0),
85
- e.isPinnable ? (i(), n("div", {
87
+ e.isPinnable ? (t(), n("div", {
86
88
  key: 1,
87
89
  class: l([s.$style.action, s.$style.clickable, {
88
90
  [s.$style.disable]: !e.isPinnable,
89
91
  [s.$style.activated]: e.isPinned
90
92
  }]),
91
- onClick: t[1] || (t[1] = p((g) => r("pin", e.item, e.index), ["stop"]))
93
+ onClick: i[1] || (i[1] = p((r) => d("pin", e.item, e.index), ["stop"]))
92
94
  }, [
93
- v(d(f), {
95
+ $(y(c), {
94
96
  name: "pin",
95
97
  size: "16"
96
98
  })
97
99
  ], 2)) : a("", !0),
98
- e.isRemovable ? (i(), n("div", {
100
+ e.isRemovable ? (t(), n("div", {
99
101
  key: 2,
100
102
  class: l([s.$style.action, s.$style.clickable]),
101
- onClick: t[2] || (t[2] = p((g) => r("remove", e.item, e.index), ["stop"]))
103
+ onClick: i[2] || (i[2] = p((r) => d("remove", e.item, e.index), ["stop"]))
102
104
  }, [
103
- v(d(u), { name: "close" })
105
+ $(y(k), { name: "close" })
104
106
  ], 2)) : a("", !0)
105
107
  ], 2)
106
108
  ], 2),
107
- k.value && e.isExpanded ? (i(), n("div", {
109
+ u.value && e.isExpanded ? (t(), n("div", {
108
110
  key: 0,
109
111
  class: l([s.$style.body, o.contentClass, { [s.$style.disabled]: e.isToggled }])
110
112
  }, [
111
- m(s.$slots, "content", {
113
+ v(s.$slots, "content", {
112
114
  item: e.item,
113
115
  index: e.index
114
116
  })
115
117
  ], 2)) : a("", !0)
116
118
  ], 2),
117
- C.value ? (i(), n("div", {
119
+ C.value ? (t(), n("div", {
118
120
  key: 1,
119
121
  class: l(o.afterClass)
120
122
  }, [
121
- m(s.$slots, "after", {
123
+ v(s.$slots, "after", {
122
124
  item: e.item,
123
125
  index: e.index
124
126
  })
package/dist/components/PlElementList/PlElementListItem.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\nconst hasAfterSlot = computed(() => slots['after'] !== undefined);\nconst hasBeforeSlot = computed(() => slots['before'] !== undefined);\n\nconst emit = defineEmits<{\n (e: 'expand', item: T, index: number): void;\n (e: 'toggle', item: T, index: number): void;\n (e: 'pin', item: T, index: number): void;\n (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div>\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[$style.root, $attrs.class, {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n }]\"\n >\n <div\n :class=\"[$style.head, titleClass, {\n [$style.clickable]: hasContentSlot,\n }]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[$style.action, $style.clickable, {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n }]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active)\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);;\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 8px;\n text-overflow: ellipsis;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","hasAfterSlot","hasBeforeSlot","emit","__emit","_createElementBlock","_renderSlot","_ctx","_createElementVNode","$style","$attrs","_normalizeClass","_cache","$event","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24"],"mappings":"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"}
1
+ {"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\nconst hasAfterSlot = computed(() => slots['after'] !== undefined);\nconst hasBeforeSlot = computed(() => slots['before'] !== undefined);\n\nconst emit = defineEmits<{\n (e: 'click', item: MouseEvent): void;\n (e: 'expand', item: T, index: number): void;\n (e: 'toggle', item: T, index: number): void;\n (e: 'pin', item: T, index: number): void;\n (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[$style.root, $attrs.class, {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n }]\"\n >\n <div\n :class=\"[$style.head, titleClass, {\n [$style.clickable]: hasContentSlot,\n }]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[$style.action, $style.clickable, {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n }]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active)\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);;\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 8px;\n text-overflow: ellipsis;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","hasAfterSlot","hasBeforeSlot","emit","__emit","_createElementBlock","_cache","event","_renderSlot","_ctx","_createElementVNode","$style","$attrs","_normalizeClass","$event","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@milaboratories/uikit",
3
- "version": "2.6.4",
3
+ "version": "2.6.5",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -32,7 +32,7 @@
32
32
  "resize-observer-polyfill": "^1.5.1",
33
33
  "canonicalize": "~2.1.0",
34
34
  "@milaboratories/helpers": "1.12.0",
35
- "@platforma-sdk/model": "1.45.42"
35
+ "@platforma-sdk/model": "1.45.45"
36
36
  },
37
37
  "devDependencies": {
38
38
  "jsdom": "^25.0.1",
@@ -41,8 +41,8 @@
41
41
  "svgo": "^3.3.2",
42
42
  "typescript": "~5.6.3",
43
43
  "@milaboratories/ts-configs": "1.0.6",
44
- "@milaboratories/ts-builder": "1.0.5",
45
44
  "@milaboratories/build-configs": "1.0.8",
45
+ "@milaboratories/ts-builder": "1.0.5",
46
46
  "@milaboratories/eslint-config": "1.0.5"
47
47
  },
48
48
  "scripts": {
package/src/components/PlAutocomplete/PlAutocomplete.vue CHANGED
@@ -7,7 +7,7 @@ export default {
7
7
  };
8
8
  </script>
9
9
 
10
- <script lang="ts" setup generic="M = unknown">
10
+ <script lang="ts" setup generic="M extends null | undefined | string | number = null | undefined | string">
11
11
  import './pl-autocomplete.scss';
12
12
  import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
13
13
  import { tap } from '../../helpers/functions';
@@ -43,7 +43,7 @@ const props = withDefaults(
43
43
  /**
44
44
  * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.
45
45
  */
46
- modelSearch?: (v: M) => Promise<ListOption<M>>;
46
+ modelSearch?: (v: NonNullable<M>) => Promise<ListOption<NonNullable<M>>>;
47
47
  /**
48
48
  * The label text for the dropdown field (optional)
49
49
  */
@@ -307,7 +307,7 @@ const optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {
307
307
  });
308
308
 
309
309
  const modelOptionRequest = useWatchFetch(() => model.value, async (v) => {
310
- if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component
310
+ if (v != null && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component
311
311
  if (props.modelSearch) {
312
312
  return props.modelSearch(v);
313
313
  }
package/src/components/PlAutocomplete/__tests__/PlAutocomplete.spec.ts CHANGED
@@ -13,7 +13,7 @@ describe('PlAutocomplete', () => {
13
13
  const wrapper = mount(PlAutocomplete, {
14
14
  props: {
15
15
  'modelValue': 1,
16
- 'onUpdate:modelValue': (e: unknown) => wrapper.setProps({ modelValue: e }),
16
+ 'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
17
17
  'optionsSearch': (_str: string) => {
18
18
  return Promise.resolve(options);
19
19
  },
package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue CHANGED
@@ -37,7 +37,7 @@ export default {
37
37
  };
38
38
  </script>
39
39
 
40
- <script lang="ts" setup generic="M = unknown">
40
+ <script lang="ts" setup generic="M extends string | number = string">
41
41
  import './pl-autocomplete-multi.scss';
42
42
 
43
43
  import type { ListOptionBase } from '@platforma-sdk/model';
package/src/components/PlElementList/PlElementListItem.vue CHANGED
@@ -34,6 +34,7 @@ const hasAfterSlot = computed(() => slots['after'] !== undefined);
34
34
  const hasBeforeSlot = computed(() => slots['before'] !== undefined);
35
35
 
36
36
  const emit = defineEmits<{
37
+ (e: 'click', item: MouseEvent): void;
37
38
  (e: 'expand', item: T, index: number): void;
38
39
  (e: 'toggle', item: T, index: number): void;
39
40
  (e: 'pin', item: T, index: number): void;
@@ -42,7 +43,7 @@ const emit = defineEmits<{
42
43
  </script>
43
44
 
44
45
  <template>
45
- <div>
46
+ <div @click="(event) => emit('click', event)">
46
47
  <div v-if="hasBeforeSlot" :class="beforeClass">
47
48
  <slot name="before" :item="props.item" :index="props.index" />
48
49
  </div>