@milaboratories/uikit 2.7.0 → 2.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.turbo/turbo-build.log +35 -47
  2. package/.turbo/turbo-type-check.log +1 -1
  3. package/CHANGELOG.md +16 -0
  4. package/dist/components/PlAccordion/ExpandTransition.vue.js +27 -0
  5. package/dist/components/PlAccordion/ExpandTransition.vue.js.map +1 -0
  6. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts +111 -0
  7. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js.map +1 -1
  8. package/dist/components/PlAutocompleteMulti/index.d.ts +1 -1
  9. package/dist/components/PlDropdown/PlDropdown.vue.js +101 -101
  10. package/dist/components/PlDropdown/PlDropdown.vue.js.map +1 -1
  11. package/dist/components/PlErrorAlert/PlErrorAlert.vue.d.ts +1 -1
  12. package/dist/components/PlErrorBoundary/PlErrorBoundary.vue.d.ts +6 -6
  13. package/package.json +4 -4
  14. package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue +7 -6
  15. package/src/components/PlAutocompleteMulti/index.ts +1 -1
  16. package/src/components/PlDropdown/PlDropdown.vue +10 -2
package/.turbo/turbo-build.log CHANGED
@@ -1,45 +1,31 @@
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.7.0 build /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.7.2 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...
7
7
  Using custom config: ./build.browser-lib.config.js
8
8
  ↳ vite.js build --config ./build.browser-lib.config.js --mode production
9
9
  vite v6.3.5 building for production...
10
- src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue:477:1 - error TS4082: Default export of the module has or is using private name 'OptionsSearch'.
11
-
12
-  477 export default (<M extends string | number = string,>(
13
-   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14
-  478 __VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'],
15
-   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
16
-  ...
17
- 1114 })(),
18
-   ~~~~~
19
- 1115 ) => ({} as import('vue').VNode & { __ctx?: Awaited<typeof __VLS_setup> }));
20
-   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
21
-
22
10
  transforming...
23
11
  ✓ 729 modules transformed.
24
12
  rendering chunks...
25
13
 
26
14
  [vite:dts] Start generate declaration files...
27
15
  computing gzip size...
28
- [vite:dts] Declaration files built in 11443ms.
29
-
30
16
  dist/components/PlTabs/Tab.vue2.js  0.09 kB │ gzip: 0.11 kB │ map: 0.09 kB
31
17
  dist/components/PlTooltip/global.js  0.10 kB │ gzip: 0.11 kB │ map: 0.22 kB
32
18
  dist/layout/PlRow/PlRow.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
33
19
  dist/components/PlFileDialog/Local.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
34
20
  dist/components/Slider.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
21
+ dist/components/PlChip/PlChip.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
35
22
  dist/components/PlTabs/PlTabs.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
36
23
  dist/layout/PlGrid/PlGrid.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
37
- dist/components/PlChip/PlChip.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
24
+ dist/components/PlFileDialog/Remote.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
38
25
  dist/components/DataTable/TdCell.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
39
26
  dist/components/DataTable/TrHead.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
40
27
  dist/components/DataTable/ThCell.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
41
28
  dist/components/DataTable/TrBody.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
42
- dist/components/PlFileDialog/Remote.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
43
29
  dist/components/PlAlert/PlAlert.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
44
30
  dist/base/BtnBase.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
45
31
  dist/components/VScroll.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
@@ -49,62 +35,62 @@ computing gzip size...
49
35
  dist/components/PlSplash/PlSplash.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
50
36
  dist/layout/PlSpacer/PlSpacer.vue2.js  0.10 kB │ gzip: 0.11 kB │ map: 0.10 kB
51
37
  dist/components/PlTooltip/PlTooltip.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
52
- dist/components/PlLogView/PlLogView.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
53
38
  dist/components/PlBtnLink/PlBtnLink.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
39
+ dist/components/PlLogView/PlLogView.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
54
40
  dist/components/Scrollable.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
41
+ dist/components/PlBtnGhost/PlBtnGhost.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
55
42
  dist/components/PlBtnSplit/PlBtnSplit.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
56
- dist/components/PlTextArea/PlTextArea.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
57
43
  dist/components/PlDropdown/PlDropdown.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
58
44
  dist/components/PlCheckbox/PlCheckbox.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
59
45
  dist/components/PlBtnGroup/PlBtnGroup.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
60
- dist/components/PlBtnGhost/PlBtnGhost.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
61
- dist/components/PlDropdown/OptionList.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
46
+ dist/components/PlTextArea/PlTextArea.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
62
47
  dist/components/InputRange.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
48
+ dist/components/PlDropdown/OptionList.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
63
49
  dist/components/SliderRange.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
50
+ dist/components/PlTextField/PlTextField.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
51
+ dist/layout/PlContainer/PlContainer.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
52
+ dist/layout/PlBlockPage/PlBlockPage.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
54
+ dist/components/PlFileInput/PlFileInput.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
64
55
  dist/components/PlStatusTag/PlStatusTag.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
65
56
  dist/components/PlBtnDanger/PlBtnDanger.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
66
- dist/components/PlBtnAccent/PlBtnAccent.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
67
57
  dist/components/PlAccordion/PlAccordion.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
68
- dist/layout/PlBlockPage/PlBlockPage.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
69
- dist/layout/PlContainer/PlContainer.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
70
- dist/components/PlFileInput/PlFileInput.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
71
- dist/components/PlTextField/PlTextField.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
72
58
  dist/components/DataTable/ColumnCaret.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
73
59
  dist/components/PlBtnPrimary/PlBtnPrimary.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
74
60
  dist/components/PlFileDialog/PlFileDialog.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
75
61
  dist/utils/InnerBorder.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.34 kB
76
62
  dist/components/ThemeSwitcher.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
77
63
  dist/components/PlNumberField/PlNumberField.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
78
- dist/components/PlDropdownRef/PlDropdownRef.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
79
- dist/components/PlProgressBar/PlProgressBar.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
80
64
  dist/components/PlDialogModal/PlDialogModal.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
81
- dist/components/PlBtnSecondary/PlBtnSecondary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
82
- dist/components/PlAutocomplete/PlAutocomplete.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
65
+ dist/components/PlProgressBar/PlProgressBar.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
66
+ dist/components/PlDropdownRef/PlDropdownRef.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
83
67
  dist/components/PlProgressCell/PlProgressCell.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
84
68
  dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
85
- dist/components/PlDropdownLine/PlDropdownLine.vue2.js  0.12 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
86
70
  dist/components/DataTable/TableComponent.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
72
+ dist/components/PlDropdownLine/PlDropdownLine.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
87
73
  dist/components/PlCheckbox/PlCheckboxBase.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
88
74
  dist/components/PlDropdownLine/ResizableInput.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
89
75
  dist/components/ContextProvider.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
90
76
  dist/components/PlConfirmDialog.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
91
77
  dist/utils/DropdownOverlay/DropdownOverlay.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
92
- dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
93
78
  dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
94
79
  dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
80
+ dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
95
81
  dist/components/PlEditableTitle/PlEditableTitle.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
96
82
  dist/helpers/math.js  0.12 kB │ gzip: 0.13 kB │ map: 0.33 kB
97
83
  dist/components/DataTable/RowsCommandMenu.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
98
84
  dist/components/DropdownListItem.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
99
- dist/components/PlLoaderCircular/PlLoaderCircular.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
100
- dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
101
85
  dist/components/PlSlideModal/PlPureSlideModal.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
86
+ dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
87
+ dist/components/PlLoaderCircular/PlLoaderCircular.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
102
88
  dist/components/SliderRangeTriple.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
103
89
  dist/components/DataTable/BaseCellComponent.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
104
90
  dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
105
91
  dist/components/DataTable/ColumnsCommandMenu.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
106
- dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
107
92
  dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
93
+ dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
108
94
  dist/components/TransitionSlidePanel.vue2.js  0.13 kB │ gzip: 0.12 kB │ map: 0.11 kB
109
95
  dist/components/PlRadio/keys.js  0.13 kB │ gzip: 0.13 kB │ map: 0.43 kB
110
96
  dist/composition/utils.js  0.15 kB │ gzip: 0.14 kB │ map: 0.38 kB
@@ -159,10 +145,10 @@ computing gzip size...
159
145
  dist/assets/icons/icon-assets-min/16_maximize.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.47 kB
160
146
  dist/components/PlSlideModal/PlSlideModal.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
161
147
  dist/components/PlRadio/PlRadioGroup.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
162
- dist/components/PlErrorAlert/PlErrorAlert.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
163
148
  dist/assets/icons/icon-assets-min/16_caret-left.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.46 kB
164
149
  dist/assets/icons/icon-assets-min/16_download.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.46 kB
165
150
  dist/assets/icons/icon-assets-min/24_linetype-dashed.svg.js  0.29 kB │ gzip: 0.23 kB │ map: 0.48 kB
151
+ dist/components/PlErrorAlert/PlErrorAlert.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
166
152
  dist/assets/icons/icon-assets-min/24_drag-dots.svg.js  0.29 kB │ gzip: 0.23 kB │ map: 0.46 kB
167
153
  dist/assets/icons/icon-assets-min/16_chevron-up.svg.js  0.29 kB │ gzip: 0.24 kB │ map: 0.47 kB
168
154
  dist/components/PlElementList/PlElementList.vue.js  0.29 kB │ gzip: 0.22 kB │ map: 0.11 kB
@@ -177,12 +163,12 @@ computing gzip size...
177
163
  dist/assets/icons/icon-assets-min/24_jump-link.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.46 kB
178
164
  dist/assets/icons/icon-assets-min/24_checkbox-intermediate.svg.js  0.30 kB │ gzip: 0.24 kB │ map: 0.53 kB
179
165
  dist/assets/icons/icon-assets-min/24_chevron-up.svg.js  0.30 kB │ gzip: 0.24 kB │ map: 0.48 kB
180
- dist/components/PlElementList/utils.js  0.30 kB │ gzip: 0.23 kB │ map: 0.79 kB
181
166
  dist/assets/icons/icon-assets-min/16_close.svg.js  0.30 kB │ gzip: 0.24 kB │ map: 0.47 kB
182
167
  dist/assets/icons/icon-assets-min/24_chevron-down.svg.js  0.30 kB │ gzip: 0.24 kB │ map: 0.48 kB
183
168
  dist/assets/icons/icon-assets-min/24_linetype-dotdash.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.49 kB
184
169
  dist/assets/icons/icon-assets-min/24_menu.svg.js  0.30 kB │ gzip: 0.24 kB │ map: 0.46 kB
185
170
  dist/assets/icons/icon-assets-min/24_text-align-left.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.49 kB
171
+ dist/components/PlElementList/utils.js  0.30 kB │ gzip: 0.23 kB │ map: 0.79 kB
186
172
  dist/assets/icons/icon-assets-min/24_arrow-link.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
187
173
  dist/assets/icons/icon-assets-min/24_chevron-right.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.49 kB
188
174
  dist/assets/icons/icon-assets-min/16_arrow-link.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
@@ -194,10 +180,10 @@ computing gzip size...
194
180
  dist/assets/icons/icon-assets-min/24_text-align-right.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.50 kB
195
181
  dist/assets/icons/icon-assets-min/16_checkmark.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
196
182
  dist/components/PlChartStackedBar/PlChartStackedBar.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
197
- dist/components/PlElementList/PlElementListItem.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
198
183
  dist/assets/icons/icon-assets-min/16_arrow-up.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
199
184
  dist/assets/icons/icon-assets-min/24_linetype-twodash.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.50 kB
200
185
  dist/components/PlChartStackedBar/StackedRowCompact.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
186
+ dist/components/PlElementList/PlElementListItem.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
201
187
  dist/assets/icons/icon-assets-min/24_checkmark.svg.js  0.31 kB │ gzip: 0.25 kB │ map: 0.49 kB
202
188
  dist/assets/icons/icon-assets-min/16_arrow-down.svg.js  0.31 kB │ gzip: 0.25 kB │ map: 0.49 kB
203
189
  dist/assets/icons/icon-assets-min/16_arrow-left.svg.js  0.31 kB │ gzip: 0.24 kB │ map: 0.49 kB
@@ -223,16 +209,16 @@ computing gzip size...
223
209
  dist/assets/icons/icon-assets-min/16_compare.svg.js  0.34 kB │ gzip: 0.26 kB │ map: 0.51 kB
224
210
  dist/assets/icons/icon-assets-min/16_jump-link.svg.js  0.34 kB │ gzip: 0.26 kB │ map: 0.52 kB
225
211
  dist/assets/icons/icon-assets-min/16_reverse.svg.js  0.34 kB │ gzip: 0.26 kB │ map: 0.51 kB
226
- dist/components/DataTable/TrHead.vue.js  0.34 kB │ gzip: 0.27 kB │ map: 0.41 kB
227
212
  dist/assets/icons/icon-assets-min/16_stop.svg.js  0.34 kB │ gzip: 0.25 kB │ map: 0.52 kB
213
+ dist/components/DataTable/TrHead.vue.js  0.34 kB │ gzip: 0.27 kB │ map: 0.41 kB
228
214
  dist/assets/icons/icon-assets-min/24_expand-left.svg.js  0.35 kB │ gzip: 0.24 kB │ map: 0.53 kB
229
215
  dist/assets/icons/icon-assets-min/24_expand-right.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.53 kB
230
216
  dist/assets/icons/icon-assets-min/24_restart.svg.js  0.35 kB │ gzip: 0.27 kB │ map: 0.52 kB
231
217
  dist/assets/icons/icon-assets-min/24_legend-box.svg.js  0.35 kB │ gzip: 0.26 kB │ map: 0.54 kB
232
218
  dist/assets/icons/icon-assets-min/24_position-left.svg.js  0.35 kB │ gzip: 0.27 kB │ map: 0.52 kB
233
219
  dist/assets/icons/icon-assets-min/24_close.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.52 kB
234
- dist/composition/useFilteredList.js  0.35 kB │ gzip: 0.24 kB │ map: 1.15 kB
235
220
  dist/assets/icons/icon-assets-min/24_stop.svg.js  0.35 kB │ gzip: 0.25 kB │ map: 0.52 kB
221
+ dist/composition/useFilteredList.js  0.35 kB │ gzip: 0.24 kB │ map: 1.15 kB
236
222
  dist/layout/PlSpacer/PlSpacer.vue.js  0.35 kB │ gzip: 0.27 kB │ map: 0.53 kB
237
223
  dist/assets/icons/icon-assets-min/24_checkbox.svg.js  0.35 kB │ gzip: 0.26 kB │ map: 0.53 kB
238
224
  dist/assets/icons/icon-assets-min/24_play.svg.js  0.35 kB │ gzip: 0.28 kB │ map: 0.53 kB
@@ -278,9 +264,9 @@ computing gzip size...
278
264
  dist/assets/icons/icon-assets-min/24_align-right.svg.js  0.43 kB │ gzip: 0.28 kB │ map: 0.61 kB
279
265
  dist/assets/icons/icon-assets-min/24_zoom-out.svg.js  0.43 kB │ gzip: 0.29 kB │ map: 0.63 kB
280
266
  dist/assets/icons/icon-assets-min/24_windows-collapse.svg.js  0.43 kB │ gzip: 0.30 kB │ map: 0.66 kB
281
- dist/utils/InnerBorder.vue.js  0.43 kB │ gzip: 0.31 kB │ map: 0.42 kB
282
267
  dist/assets/icons/icon-assets-min/16_delete-circle.svg.js  0.43 kB │ gzip: 0.30 kB │ map: 0.62 kB
283
268
  dist/assets/icons/icon-assets-min/24_drag-vertical.svg.js  0.43 kB │ gzip: 0.31 kB │ map: 0.62 kB
269
+ dist/utils/InnerBorder.vue.js  0.43 kB │ gzip: 0.31 kB │ map: 0.42 kB
284
270
  dist/assets/icons/icon-assets-min/16_zip.svg.js  0.43 kB │ gzip: 0.29 kB │ map: 0.60 kB
285
271
  dist/assets/icons/icon-assets-min/24_arrow-left-curved.svg.js  0.43 kB │ gzip: 0.31 kB │ map: 0.61 kB
286
272
  dist/assets/icons/icon-assets-min/24_drag-horizontal.svg.js  0.43 kB │ gzip: 0.32 kB │ map: 0.62 kB
@@ -294,8 +280,8 @@ computing gzip size...
294
280
  dist/assets/icons/icon-assets-min/24_renew.svg.js  0.44 kB │ gzip: 0.32 kB │ map: 0.62 kB
295
281
  dist/assets/icons/icon-assets-min/16_error.svg.js  0.44 kB │ gzip: 0.32 kB │ map: 0.64 kB
296
282
  dist/assets/icons/icon-assets-min/24_monetization.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.63 kB
297
- dist/assets/images/24_checkbox-light-enabled-unchecked.svg.js  0.45 kB │ gzip: 0.32 kB │ map: 0.67 kB
298
283
  dist/assets/icons/icon-assets-min/24_y-axis.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
284
+ dist/assets/images/24_checkbox-light-enabled-unchecked.svg.js  0.45 kB │ gzip: 0.32 kB │ map: 0.67 kB
299
285
  dist/assets/icons/icon-assets-min/16_y-axis.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
300
286
  dist/assets/icons/icon-assets-min/24_delete-circle.svg.js  0.45 kB │ gzip: 0.31 kB │ map: 0.65 kB
301
287
  dist/assets/icons/icon-assets-min/24_zoom-in.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
@@ -360,8 +346,8 @@ computing gzip size...
360
346
  dist/assets/icons/icon-assets-min/16_settings.svg.js  0.56 kB │ gzip: 0.33 kB │ map: 0.74 kB
361
347
  dist/composition/useFormState.js  0.56 kB │ gzip: 0.32 kB │ map: 1.67 kB
362
348
  dist/assets/icons/icon-assets-min/24_frame-type-none.svg.js  0.56 kB │ gzip: 0.27 kB │ map: 0.75 kB
363
- dist/components/DataTable/ColumnCaret.vue.js  0.56 kB │ gzip: 0.37 kB │ map: 0.90 kB
364
349
  dist/assets/icons/icon-assets-min/24_columns.svg.js  0.56 kB │ gzip: 0.33 kB │ map: 0.76 kB
350
+ dist/components/DataTable/ColumnCaret.vue.js  0.56 kB │ gzip: 0.37 kB │ map: 0.90 kB
365
351
  dist/assets/icons/icon-assets-min/16_clipboard-copied.svg.js  0.56 kB │ gzip: 0.36 kB │ map: 0.76 kB
366
352
  dist/assets/icons/icon-assets-min/16_clipboard.svg.js  0.56 kB │ gzip: 0.34 kB │ map: 0.74 kB
367
353
  dist/assets/icons/icon-assets-min/24_file-doc-import.svg.js  0.56 kB │ gzip: 0.37 kB │ map: 0.77 kB
@@ -487,8 +473,8 @@ computing gzip size...
487
473
  dist/composition/usePosition.js  1.00 kB │ gzip: 0.46 kB │ map: 2.31 kB
488
474
  dist/assets/icons/icon-assets-min/16_progress.svg.js  1.02 kB │ gzip: 0.61 kB │ map: 1.22 kB
489
475
  dist/composition/useDraggable.js  1.02 kB │ gzip: 0.44 kB │ map: 2.56 kB
490
- dist/components/DataTable/assets/TableIcon.vue.js  1.02 kB │ gzip: 0.55 kB │ map: 1.20 kB
491
476
  dist/assets/icons/icon-assets-min/24_strip-plot.svg.js  1.02 kB │ gzip: 0.36 kB │ map: 1.29 kB
477
+ dist/components/DataTable/assets/TableIcon.vue.js  1.02 kB │ gzip: 0.55 kB │ map: 1.20 kB
492
478
  dist/components/PlChartStackedBar/Legends.vue3.js  1.03 kB │ gzip: 0.56 kB │ map: 0.10 kB
493
479
  dist/helpers/downloadContent.js  1.03 kB │ gzip: 0.50 kB │ map: 3.22 kB
494
480
  dist/generated/icons-16.js  1.04 kB │ gzip: 0.42 kB │ map: 1.90 kB
@@ -635,15 +621,17 @@ computing gzip size...
635
621
  dist/components/PlFileInput/PlFileInput.vue.js  11.57 kB │ gzip: 3.48 kB │ map: 10.58 kB
636
622
  dist/composition/filters/metadata.js  12.91 kB │ gzip: 1.15 kB │ map: 24.22 kB
637
623
  dist/components/PlDropdownLine/PlDropdownLine.vue.js  14.81 kB │ gzip: 3.93 kB │ map: 15.98 kB
638
- dist/components/PlDropdown/PlDropdown.vue.js  15.71 kB │ gzip: 4.52 kB │ map: 18.09 kB
624
+ dist/components/PlDropdown/PlDropdown.vue.js  15.74 kB │ gzip: 4.52 kB │ map: 18.45 kB
639
625
  dist/components/PlDropdownMulti/PlDropdownMulti.vue.js  18.23 kB │ gzip: 4.95 kB │ map: 16.65 kB
640
626
  dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js  18.26 kB │ gzip: 4.95 kB │ map: 17.77 kB
641
627
  dist/components/PlAutocomplete/PlAutocomplete.vue.js  18.62 kB │ gzip: 5.23 kB │ map: 20.72 kB
642
- dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js  19.31 kB │ gzip: 5.23 kB │ map: 20.78 kB
628
+ dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js  19.31 kB │ gzip: 5.23 kB │ map: 20.80 kB
643
629
  dist/components/PlSvg/PlSvg.vue2.js  39.54 kB │ gzip: 3.38 kB │ map: 12.31 kB
644
630
  dist/components/PlFileDialog/pl-file-dialog.module.scss.js  47.68 kB │ gzip: 16.33 kB │ map: 0.13 kB
645
631
  dist/index.js 502.41 kB │ gzip: 192.50 kB │ map: 5.86 kB
646
632
  dist/components/PlSlideModal/PlPureSlideModal.vue.js 605.54 kB │ gzip: 205.13 kB │ map: 2.93 kB
647
633
  dist/components/DataTable/TableComponent.vue.js 607.38 kB │ gzip: 206.02 kB │ map: 6.85 kB
648
- ✓ built in 15.02s
634
+ [vite:dts] Declaration files built in 22613ms.
635
+
636
+ ✓ built in 28.61s
649
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.7.0 type-check /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.7.2 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,21 @@
1
1
  # @milaboratories/uikit
2
2
 
3
+ ## 2.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 92439e1: ts-builder ignore customcudition for build/serve without flag
8
+ - @milaboratories/helpers@1.12.0
9
+ - @platforma-sdk/model@1.46.0
10
+
11
+ ## 2.7.1
12
+
13
+ ### Patch Changes
14
+
15
+ - 10aab62: Fix PlDropdown showing loading spinner when disabled
16
+
17
+ When a PlDropdown is both disabled and has undefined options, it no longer shows a loading spinner. The disabled state now takes precedence over the loading state, preventing misleading UX where users think they need to wait when they actually need to interact with another control first.
18
+
3
19
  ## 2.7.0
4
20
 
5
21
  ### Minor Changes
package/dist/components/PlAccordion/ExpandTransition.vue.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.vue.js.map
package/dist/components/PlAccordion/ExpandTransition.vue.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpandTransition.vue.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/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts ADDED
@@ -0,0 +1,111 @@
1
+ import { ListOptionBase } from '@platforma-sdk/model';
2
+ /**
3
+ * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.
4
+ * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.
5
+ *
6
+ * @example
7
+ * Basic usage:
8
+ * <PlAutocompleteMulti
9
+ * v-model="selectedUsers"
10
+ * :options-search="searchUsers"
11
+ * :model-search="getUsersByIds"
12
+ * label="Select Users"
13
+ * placeholder="Search for users..."
14
+ * required
15
+ * :debounce="300"
16
+ * helper="Choose one or more users from the list"
17
+ * />
18
+ *
19
+ * With async functions:
20
+ * const selectedUsers = ref([])
21
+ *
22
+ * const searchUsers = async (searchTerm) => {
23
+ * const response = await fetch('/api/users/search?q=' + searchTerm)
24
+ * const users = await response.json()
25
+ * return users.map(user => ({ value: user.id, label: user.name }))
26
+ * }
27
+ *
28
+ * const getUsersByIds = async (userIds) => {
29
+ * if (!userIds.length) return []
30
+ * const response = await fetch('/api/users?ids=' + userIds.join(','))
31
+ * const users = await response.json()
32
+ * return users.map(user => ({ value: user.id, label: user.name }))
33
+ * }
34
+ */
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
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
37
+ readonly "onUpdate:modelValue"?: ((v: M[]) => any) | undefined;
38
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
39
+ /**
40
+ * The current selected values.
41
+ */
42
+ modelValue: M[];
43
+ /**
44
+ * Lambda for requesting of available options for the dropdown by search string.
45
+ */
46
+ optionsSearch: OptionsSearch<M>;
47
+ /**
48
+ * Unique identifier for the source of the options, changing it will invalidate the options cache.
49
+ */
50
+ sourceId?: string;
51
+ /**
52
+ * The label text for the dropdown field (optional)
53
+ */
54
+ label?: string;
55
+ /**
56
+ * A helper text displayed below the dropdown when there are no errors (optional).
57
+ */
58
+ helper?: string;
59
+ /**
60
+ * Error message displayed below the dropdown (optional)
61
+ */
62
+ error?: unknown;
63
+ /**
64
+ * Placeholder text shown when no value is selected.
65
+ */
66
+ placeholder?: string;
67
+ /**
68
+ * If `true`, the dropdown component is marked as required.
69
+ */
70
+ required?: boolean;
71
+ /**
72
+ * If `true`, the dropdown component is disabled and cannot be interacted with.
73
+ */
74
+ disabled?: boolean;
75
+ /**
76
+ * Debounce time in ms for the options search.
77
+ */
78
+ debounce?: number;
79
+ /**
80
+ * If `true`, the search input is reset and focus is set on it when the new option is selected.
81
+ */
82
+ resetSearchOnSelect?: boolean;
83
+ /**
84
+ * The text to display when no options are found.
85
+ */
86
+ emptyOptionsText?: string;
87
+ /**
88
+ * Makes some of corners not rounded
89
+ * */
90
+ groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
91
+ } & Partial<{}>> & import('vue').PublicProps;
92
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
93
+ attrs: any;
94
+ slots: {
95
+ append?(_: {}): any;
96
+ tooltip?(_: {}): any;
97
+ };
98
+ emit: (e: "update:modelValue", v: M[]) => void;
99
+ }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
100
+ [key: string]: any;
101
+ }> & {
102
+ __ctx?: Awaited<typeof __VLS_setup>;
103
+ };
104
+ export default _default;
105
+ export interface OptionsSearch<T> {
106
+ (s: string, type: 'label'): Promise<Readonly<ListOptionBase<T>[]>>;
107
+ (s: T[], type: 'value'): Promise<Readonly<ListOptionBase<T>[]>>;
108
+ }
109
+ type __VLS_PrettifyLocal<T> = {
110
+ [K in keyof T]: T[K];
111
+ } & {};
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 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\ninterface OptionsSearch {\n (s: string, type: 'label'): Promise<Readonly<ListOptionBase<M>[]>>;\n (s: M[], type: 'value'): Promise<Readonly<ListOptionBase<M>[]>>;\n}\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: OptionsSearch;\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, 'label');\n}, {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n});\n\nconst modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {\n return props.optionsSearch(v, 'value');\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\nexport interface OptionsSearch<T> {\n (s: string, type: 'label'): Promise<Readonly<ListOptionBase<T>[]>>;\n (s: T[], type: 'value'): Promise<Readonly<ListOptionBase<T>[]>>;\n}\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: OptionsSearch<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, 'label');\n}, {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n});\n\nconst modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {\n return props.optionsSearch(v, 'value');\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;AA6BA,UAAMC,IAAOC,GAIPC,IAAY,CAACC,MAAWH,EAAK,qBAAqBG,CAAC,GAEnDC,IAAQC,GAAA,GAERC,IAAQC,GAsERC,IAAUC,EAAA,GACVC,IAAWD,EAAA,GAEXE,IAAUC,GAAe,SAAS,GAElCC,IAAOC,GAAS;AAAA,MACpB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,MAAM;AAAA,MACN,eAAe;AAAA,IAAA,CAChB;AAED,IAAAC,EAAM,MAAMF,EAAK,MAAM,CAACV,MAAM;AAC5B,MAAKA,MACHU,EAAK,SAAS;AAAA,IAElB,GAAG,EAAE,OAAO,QAAQ;AAEpB,UAAMG,IAAoBC,EAAS,MAAO,MAAM,QAAQX,EAAM,UAAU,IAAIA,EAAM,aAAa,EAAG,GAE5FY,IAAiBD,EAAS,MAC1BJ,EAAK,QAAQP,EAAM,WAAW,SAAS,IAClCA,EAAM,cAGRA,EAAM,WAAW,SAAS,IAAI,KAAKA,EAAM,WACjD,GAEKa,IAAWC,GAAMd,GAAO,UAAU,GAElCe,IAAmBC,EAAc,MAAM,CAACT,EAAK,QAAQA,EAAK,MAAMP,EAAM,QAAQ,GAAY,OAAO,CAACiB,GAAQC,CAAK,MAC5GlB,EAAM,cAAciB,GAAQ,OAAO,GACzC;AAAA,MACD,mBAAmB,CAAC,CAACE,GAASC,CAAI,MAAMA;AAAA,MACxC,UAAAP;AAAA,IAAA,CACD,GAEKQ,IAAkBL,EAAc,MAAM,CAAChB,EAAM,YAAYA,EAAM,QAAQ,GAAY,OAAO,CAACH,CAAC,MACzFG,EAAM,cAAcH,GAAG,OAAO,GACpC;AAAA,MACD,UAAAgB;AAAA,IAAA,CACD,GAEKS,IAAgBX,EAAS,MAAM;AACnC,YAAMY,IAAeF,EAAgB,SAAS,CAAA,GACxCG,IAAgBT,EAAiB,SAAS,CAAA,GAE1CU,wBAAiB,IAAA,GACjBC,IAAS,CAAA,GAETC,IAAa,CAACC,MAA2C;AAC7D,mBAAWC,KAAUD,GAAS;AAC5B,gBAAME,IAAiBC,GAAaF,EAAO,KAAK;AAChD,UAAKJ,EAAW,IAAIK,CAAc,MAChCL,EAAW,IAAIK,CAAc,GAC7BJ,EAAO,KAAKG,CAAM;AAAA,QAEtB;AAAA,MACF;AAEA,aAAAF,EAAWJ,CAAY,GACvBI,EAAWH,CAAa,GAEjBE;AAAA,IACT,CAAC,GAEKM,IAAqBrB,EAAS,MAC3BD,EAAkB,MAAM,IAAI,CAACb,MAClCyB,EAAc,MAAM,KAAK,CAACW,MAAQC,EAAUD,EAAI,OAAOpC,CAAC,CAAC,CAAC,EAAE;AAAA,MAAO,CAACA,MAAMA,MAAM;AAAA,IAAA,CAEnF,GAEKsC,IAAqBxB,EAAS,MAAM;AACxC,YAAMyB,IAAiBC,EAAM3B,CAAiB;AAI9C,aAAO,CAAC,GAFQK,EAAiB,SAAS,CAAA,CAExB,EAAE,IAAI,CAACkB,OAAS;AAAA,QAChC,GAAGA;AAAA,QACH,UAAUK,EAAaF,GAAgBH,EAAI,KAAK;AAAA,MAAA,EAChD;AAAA,IACJ,CAAC,GAEKM,IAAmB5B,EAAS,MAAMI,EAAiB,WAAWM,EAAgB,OAAO,GAErFmB,IAAa7B,EAAS,MACtBU,EAAgB,UAAU,SACrB,KAGFrB,EAAM,QACd,GAEKyC,IAAW9B,EAAS,MAAO6B,EAAW,QAAQ,SAAY,GAAI,GAE9DE,KAAqB,MAAM;AAC/B,MAAAnC,EAAK,eAAe;AAAA,IACtB,GAEMoC,IAAe,CAAC9C,MAAS;;AAC7B,YAAM+C,IAASP,EAAM3B,CAAiB;AACtC,MAAAd,EAAU0C,EAAaM,GAAQ/C,CAAC,IAAI+C,EAAO,OAAO,CAACC,MAAO,CAACX,EAAUW,GAAIhD,CAAC,CAAC,IAAI,CAAC,GAAG+C,GAAQ/C,CAAC,CAAC,GACzFG,EAAM,wBACRO,EAAK,SAAS,MAEhBuC,IAAA1C,EAAS,UAAT,QAAA0C,EAAgB;AAAA,IAClB,GAEMC,IAAiB,CAACC,MAASpD,EAAUyC,EAAM3B,CAAiB,EAAE,OAAO,CAACb,MAAM,CAACqC,EAAUrC,GAAGmD,CAAC,CAAC,CAAC,GAE7FC,KAAkB,MAAA;;AAAM,cAAAH,IAAA1C,EAAS,UAAT,gBAAA0C,EAAgB;AAAA,OAExCI,KAAa,MAAM3C,EAAK,OAAO,CAACA,EAAK,MAErC4C,IAAa,CAACC,MAAsB;;AACxC,YAAMC,IAAgBD,EAAM;AAE5B,MAAI,GAACN,IAAA5C,EAAQ,UAAR,QAAA4C,EAAe,SAASO,OAAkB,GAACC,KAAAC,IAAAlD,EAAQ,UAAR,gBAAAkD,EAAe,YAAf,QAAAD,EAAwB,SAASD,QAC/E9C,EAAK,OAAO;AAAA,IAEhB,GAEMiD,KAAgB,CAAC,MAAgD;;AACrE,YAAM,EAAE,MAAApC,GAAM,cAAAqC,EAAA,IAAiBlD;AAE/B,UAAI,CAACa,GAAM;AACT,QAAI,EAAE,SAAS,YACbb,EAAK,OAAO;AAEd;AAAA,MACF;AAEA,MAAI,EAAE,SAAS,aACbA,EAAK,OAAO,KACZuC,IAAA1C,EAAS,UAAT,QAAA0C,EAAgB;AAGlB,YAAMY,IAAkBrB,EAAMF,CAAkB,GAE1C,EAAE,QAAAwB,MAAWD;AAEnB,UAAI,CAACC;AACH;AAGF,MAAI,CAAC,aAAa,WAAW,OAAO,EAAE,SAAS,EAAE,IAAI,KACnD,EAAE,eAAA,GAGA,EAAE,SAAS,WACbhB,EAAae,EAAgBD,CAAY,EAAE,KAAK;AAGlD,YAAMT,IAAI,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK;AAEnE,MAAAzC,EAAK,eAAe,KAAK,IAAIkD,IAAeT,IAAIW,CAAM,IAAIA,GAE1D,sBAAsB,MAAA;;AAAM,gBAAAb,IAAAzC,EAAQ,UAAR,gBAAAyC,EAAe;AAAA,OAAkB;AAAA,IAC/D;AAEA,IAAAc,GAAc1D,CAAO,GAErBO;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM0C,GAAA;AAAA,MACN,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMmB,IAAgBlD,EAAS,MAAM;AACnC,UAAI,CAAA4B,EAAiB,OAIrB;AAAA,YAAIxB,EAAiB;AACnB,iBAAO+C,EAAgB/C,EAAiB,KAAK;AAG/C,YAAIM,EAAgB;AAClB,iBAAOyC,EAAgBzC,EAAgB,KAAK;AAG9C,YAAIrB,EAAM;AACR,iBAAO8D,EAAgB9D,EAAM,KAAK;AAGpC,YAAIA,EAAM,WAAW,UAAUgC,EAAmB,MAAM,WAAWhC,EAAM,WAAW;AAClF,iBAAO;AAAA;AAAA,IAIX,CAAC;2BAIC+D,EAmFM,OAAA;AAAA,MAnFD,OAAM;AAAA,MAAmC,SAAOd;AAAA,IAAA;MACnDe,EA+EM,OAAA;AAAA,iBA9EA;AAAA,QAAJ,KAAI9D;AAAA,QACH,UAAUuC,EAAA;AAAA,QACX,OAAKwB,GAAA,CAAC,yBAAuB,EAAA,MACb1D,EAAK,MAAI,OAAS,EAAQsD,EAAA,OAAa,UAAarB,EAAA,MAAA,CAAU,CAAA;AAAA,QAC7E,WAASgB;AAAA,QACT,YAAUL;AAAA,MAAA;QAEXa,EAsEM,OAtENE,IAsEM;AAAA,UArEJF,EAyBM,OAzBNG,IAyBM;AAAA,eAxBJH,EAUE,SAAA;AAAA,uBATI;AAAA,cAAJ,KAAI5D;AAAA,cACK,uBAAAgE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA9D,EAAK,SAAM8D;AAAA,cACpB,MAAK;AAAA,cACL,UAAS;AAAA,cACR,UAAU7B,EAAA;AAAA,cACV,aAAa5B,EAAA;AAAA,cACd,YAAW;AAAA,cACX,cAAa;AAAA,cACZ,SAAKwD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAE9D,EAAK,OAAI;AAAA,YAAA;cAPR,CAAA+D,IAAA/D,EAAK,MAAM;AAAA,YAAA;YASVA,EAAK,oBAAjBgE,KAAAR,EAIM,OAJNS,IAIM;AAAA,eAHJD,EAAA,EAAA,GAAAR,EAESU,GAAA,MAAAC,EAFkB1C,EAAA,OAAkB,CAA7BC,GAAK0C,YAArBC,EAESC,EAAAC,CAAA,GAAA;AAAA,gBAFuC,KAAKH;AAAA,gBAAG,WAAA;AAAA,gBAAU,OAAA;AAAA,gBAAO,SAAKP,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAW,EAAA,CAAAV,MAAO9D,EAAK,OAAI,IAAA,CAAA,MAAA,CAAA;AAAA,gBAAU,SAAK,CAAA8D,MAAEtB,EAAed,EAAI,KAAK;AAAA,cAAA;2BACrI,MAA4B;AAAA,kBAAzB+C,EAAAC,EAAAhD,EAAI,SAASA,EAAI,KAAK,GAAA,CAAA;AAAA,gBAAA;;;;YAI7B+B,EAMM,OANNkB,IAMM;AAAA,cALgB3C,EAAA,cAApBqC,EAAuDC,EAAAM,EAAA,GAAA;AAAA;gBAAjB,MAAK;AAAA,cAAA;cAC3CC,EAAsBC,EAAA,QAAA,QAAA;AAAA,cACtBrB,EAEM,OAAA;AAAA,gBAFD,OAAM;AAAA,gBAAwC,WAAYd,IAAU,CAAA,MAAA,CAAA;AAAA,cAAA;gBACvEc,EAA6C,OAAA,EAAxC,OAAM,gCAAA,GAA+B,MAAA,EAAA;AAAA,cAAA;;;UAInC/D,EAAA,cAAb8D,EAQQ,SAAAuB,IAAA;AAAA,YAPOrF,EAAA,iBAAb2E,EAA4CC,EAAAU,EAAA,GAAA;AAAA;cAApB,KAAKV,EAAAW,EAAA;AAAA,YAAA;YAC7BxB,EAAwB,gBAAf/D,EAAA,KAAK,GAAA,CAAA;AAAA,YACG4E,EAAA/E,CAAA,EAAM,gBAAvB8E,EAIYC,EAAAY,EAAA,GAAA;AAAA;cAJoB,OAAM;AAAA,cAAO,UAAS;AAAA,YAAA;cACzC,WACT,MAAuB;AAAA,gBAAvBL,EAAuBC,EAAA,QAAA,SAAA;AAAA,cAAA;;;;UAKrB9E,EAAK,aADbqE,EAgCkBc,IAAA;AAAA;qBA9BZ;AAAA,YAAJ,KAAIrF;AAAA,YACH,MAAMH,EAAA;AAAA,YACP,OAAM;AAAA,YACL,KAAK;AAAA,YACN,UAAS;AAAA,YACR,YAAUiD;AAAA,UAAA;uBAEX,MAUM;AAAA,cAVNa,EAUM,OAVN2B,IAUM;AAAA,iBATJpB,EAAA,EAAA,GAAAR,EAQSU,GAAA,MAAAC,EAPY1C,EAAA,OAAkB,CAA7BC,GAAK0C,YADfC,EAQSC,EAAAC,CAAA,GAAA;AAAA,kBANN,KAAKH;AAAA,kBACN,WAAA;AAAA,kBACA,OAAA;AAAA,kBACC,SAAK,CAAAN,MAAEtB,EAAed,EAAI,KAAK;AAAA,gBAAA;6BAEhC,MAA4B;AAAA,oBAAzB+C,EAAAC,EAAAhD,EAAI,SAASA,EAAI,KAAK,GAAA,CAAA;AAAA,kBAAA;;;;eAG7BsC,EAAA,EAAA,GAAAR,EAUEU,GAAA,MAAAC,EATwBvC,EAAA,OAAkB,CAAlCyD,GAAMC,YADhBjB,EAUEkB,IAAA;AAAA,gBARC,KAAKD;AAAA,gBACL,QAAQD;AAAA,gBACR,aAAW;AAAA,gBACX,eAAaA,EAAK;AAAA,gBAClB,cAAYrF,EAAK,gBAAgBsF;AAAA,gBAClC,MAAK;AAAA,gBACL,gBAAA;AAAA,gBACC,SAAKd,EAAA,CAAAV,MAAO1B,EAAaiD,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,cAAA;eAE1BzD,EAAA,MAAmB,UAAM,CAAKI,EAAA,cAA1CwB,EAA8G,OAA9GgC,IAA8Gd,EAAzBhF,EAAA,gBAAgB,GAAA,CAAA;;;;UAEvG+F,GAAwFC,IAAA;AAAA,YAAzE,OAAM;AAAA,YAAkC,kBAAgBhG,EAAA;AAAA,UAAA;;;MAGhE4D,EAAA,cAAXE,EAAwF,OAAxFmC,IAAwFjB,EAAtBpB,EAAA,KAAa,GAAA,CAAA,KAC/D5D,EAAA,eAAhB8D,EAAgF,OAAhFoC,IAAgFlB,EAAfhF,EAAA,MAAM,GAAA,CAAA;;;;"}
package/dist/components/PlAutocompleteMulti/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default as PlAutocompleteMulti } from './PlAutocompleteMulti.vue';
1
+ export { default as PlAutocompleteMulti, type OptionsSearch as PlAutocompleteMultiOptionsSearch } from './PlAutocompleteMulti.vue';
package/dist/components/PlDropdown/PlDropdown.vue.js CHANGED
@@ -1,40 +1,40 @@
1
1
  (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
2
2
  .ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--v5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}
3
3
  .pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--icon-color: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
4
- import { defineComponent as le, ref as B, useTemplateRef as ae, reactive as ie, computed as s, unref as i, watch as P, watchPostEffect as se, createElementBlock as v, openBlock as l, createElementVNode as f, createCommentVNode as c, normalizeClass as de, createBlock as u, createVNode as D, withDirectives as ce, vModelText as ue, withCtx as $, createTextVNode as pe, toDisplayString as h, renderSlot as z, withModifiers as M } from "vue";
5
- import fe from "../../assets/images/required.svg.js";
6
- import { getErrorMessage as me } from "../../helpers/error.js";
7
- import { tap as ve } from "../../helpers/functions.js";
4
+ import { defineComponent as ae, ref as P, useTemplateRef as ie, reactive as se, computed as i, unref as s, watch as D, watchPostEffect as de, createElementBlock as v, openBlock as l, createElementVNode as f, createCommentVNode as c, normalizeClass as ce, createBlock as u, createVNode as $, withDirectives as ue, vModelText as pe, withCtx as z, createTextVNode as fe, toDisplayString as h, renderSlot as M, withModifiers as T } from "vue";
5
+ import me from "../../assets/images/required.svg.js";
6
+ import { getErrorMessage as ve } from "../../helpers/error.js";
7
+ import { tap as he } from "../../helpers/functions.js";
8
8
  import { deepEqual as x } from "../../helpers/objects.js";
9
- import { normalizeListOptions as he } from "../../helpers/utils.js";
10
- import we from "../../utils/DoubleContour.vue.js";
9
+ import { normalizeListOptions as we } from "../../helpers/utils.js";
10
+ import ge from "../../utils/DoubleContour.vue.js";
11
11
 
12
- import { useLabelNotch as ge } from "../../utils/useLabelNotch.js";
13
- import ye from "../LongText.vue.js";
12
+ import { useLabelNotch as ye } from "../../utils/useLabelNotch.js";
13
+ import ke from "../LongText.vue.js";
14
14
 
15
15
  import _ from "../PlIcon16/PlIcon16.vue.js";
16
- import T from "../PlIcon24/PlIcon24.vue.js";
17
- import ke from "../PlSvg/PlSvg.vue.js";
18
- import Ie from "../PlTooltip/PlTooltip.vue.js";
19
- import xe from "./OptionList.vue.js";
16
+ import F from "../PlIcon24/PlIcon24.vue.js";
17
+ import Ie from "../PlSvg/PlSvg.vue.js";
18
+ import xe from "../PlTooltip/PlTooltip.vue.js";
19
+ import _e from "./OptionList.vue.js";
20
20
 
21
- import { useGroupBy as _e } from "./useGroupBy.js";
22
- const Ve = ["tabindex"], be = { class: "pl-dropdown__container" }, Le = { class: "pl-dropdown__field" }, Ce = ["disabled", "placeholder"], Ee = {
21
+ import { useGroupBy as be } from "./useGroupBy.js";
22
+ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Re = {
23
23
  key: 0,
24
24
  class: "input-value"
25
- }, Re = { class: "pl-dropdown__controls" }, Oe = { key: 0 }, Se = {
25
+ }, Se = { class: "pl-dropdown__controls" }, Oe = { key: 0 }, Ae = {
26
26
  key: 0,
27
27
  class: "pl-dropdown__error"
28
- }, Ae = {
28
+ }, Be = {
29
29
  key: 1,
30
30
  class: "pl-dropdown__helper"
31
- }, Be = {
31
+ }, Pe = {
32
32
  key: 2,
33
33
  class: "pl-dropdown__helper"
34
- }, Pe = {
34
+ }, De = {
35
35
  name: "PlDropdown"
36
- }, Ze = /* @__PURE__ */ le({
37
- ...Pe,
36
+ }, eo = /* @__PURE__ */ ae({
37
+ ...De,
38
38
  props: {
39
39
  modelValue: {},
40
40
  label: { default: "" },
@@ -53,54 +53,54 @@ const Ve = ["tabindex"], be = { class: "pl-dropdown__container" }, Le = { class:
53
53
  groupPosition: { default: void 0 }
54
54
  },
55
55
  emits: ["update:modelValue"],
56
- setup(n, { emit: F }) {
57
- const V = F, r = n, d = B(), g = B(), y = ae("optionListRef"), o = ie({
56
+ setup(r, { emit: N }) {
57
+ const b = N, n = r, d = P(), w = P(), g = ie("optionListRef"), o = se({
58
58
  search: "",
59
59
  activeIndex: -1,
60
60
  open: !1,
61
61
  optionsHeight: 0
62
- }), N = () => ve(
63
- R.value.findIndex((e) => x(e.value, r.modelValue)),
62
+ }), q = () => he(
63
+ S.value.findIndex((e) => x(e.value, n.modelValue)),
64
64
  (e) => e < 0 ? 0 : e
65
- ), q = () => o.activeIndex = N(), w = s(() => r.options === void 0), k = s(() => w.value ? !0 : r.disabled), b = s(() => (r.options ?? []).findIndex((e) => x(e.value, r.modelValue))), L = s(() => {
66
- if (!w.value) {
67
- if (r.error)
68
- return me(r.error);
69
- if (r.modelValue !== void 0 && b.value === -1)
65
+ ), H = () => o.activeIndex = q(), y = i(() => n.options === void 0), V = i(() => !n.disabled && y.value), k = i(() => y.value ? !0 : n.disabled), L = i(() => (n.options ?? []).findIndex((e) => x(e.value, n.modelValue))), C = i(() => {
66
+ if (!y.value) {
67
+ if (n.error)
68
+ return ve(n.error);
69
+ if (n.modelValue !== void 0 && L.value === -1)
70
70
  return "The selected value is not one of the options";
71
71
  }
72
- }), C = s(
73
- () => he(r.options ?? []).map((e, t) => ({
72
+ }), E = i(
73
+ () => we(n.options ?? []).map((e, t) => ({
74
74
  ...e,
75
75
  index: t,
76
- isSelected: t === b.value,
76
+ isSelected: t === L.value,
77
77
  isActive: t === o.activeIndex
78
78
  }))
79
- ), E = s(() => {
80
- const t = i(C).find((a) => x(a.value, r.modelValue));
81
- return (t == null ? void 0 : t.label) || r.modelValue;
82
- }), H = s(() => !o.open && r.modelValue !== void 0 ? "" : r.modelValue ? String(E.value) : r.placeholder), U = s(() => r.modelValue !== void 0 && r.modelValue !== null), K = s(() => {
83
- const e = C.value;
79
+ ), R = i(() => {
80
+ const t = s(E).find((a) => x(a.value, n.modelValue));
81
+ return (t == null ? void 0 : t.label) || n.modelValue;
82
+ }), U = i(() => !o.open && n.modelValue !== void 0 ? "" : n.modelValue ? String(R.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), G = i(() => {
83
+ const e = E.value;
84
84
  return o.search ? e.filter((t) => {
85
85
  const a = o.search.toLowerCase();
86
86
  return t.label.toLowerCase().includes(a) || t.description && t.description.toLowerCase().includes(a) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(a) : t.value === o.search;
87
87
  }) : e;
88
- }), { orderedRef: R, groupsRef: G, restRef: W } = _e(K, "group"), j = s(() => k.value ? void 0 : "0"), O = (e) => {
88
+ }), { orderedRef: S, groupsRef: W, restRef: j } = be(G, "group"), J = i(() => k.value ? void 0 : "0"), O = (e) => {
89
89
  var t;
90
- V("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
91
- }, J = (e) => {
90
+ b("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
91
+ }, Q = (e) => {
92
92
  O(e);
93
- }, Q = () => V("update:modelValue", void 0), X = () => {
93
+ }, X = () => b("update:modelValue", void 0), Y = () => {
94
94
  var e;
95
- return (e = g.value) == null ? void 0 : e.focus();
96
- }, Y = () => {
95
+ return (e = w.value) == null ? void 0 : e.focus();
96
+ }, Z = () => {
97
97
  o.open = !o.open, o.open || (o.search = "");
98
- }, Z = () => o.open = !0, ee = (e) => {
98
+ }, ee = () => o.open = !0, oe = (e) => {
99
99
  var a, p, m;
100
100
  const t = e.relatedTarget;
101
- !((a = d.value) != null && a.contains(t)) && !((m = (p = y.value) == null ? void 0 : p.listRef) != null && m.contains(t)) && (o.search = "", o.open = !1);
102
- }, oe = (e) => {
103
- var S, A;
101
+ !((a = d.value) != null && a.contains(t)) && !((m = (p = g.value) == null ? void 0 : p.listRef) != null && m.contains(t)) && (o.search = "", o.open = !1);
102
+ }, te = (e) => {
103
+ var A, B;
104
104
  if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
105
105
  e.preventDefault();
106
106
  else
@@ -110,84 +110,84 @@ const Ve = ["tabindex"], be = { class: "pl-dropdown__container" }, Le = { class:
110
110
  e.code === "Enter" && (o.open = !0);
111
111
  return;
112
112
  }
113
- e.code === "Escape" && (o.open = !1, (S = d.value) == null || S.focus());
114
- const p = R.value, { length: m } = p;
113
+ e.code === "Escape" && (o.open = !1, (A = d.value) == null || A.focus());
114
+ const p = S.value, { length: m } = p;
115
115
  if (!m)
116
116
  return;
117
- e.code === "Enter" && O((A = p.find((I) => I.index === a)) == null ? void 0 : A.value);
118
- const te = p.findIndex((I) => I.index === a) ?? -1, ne = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, re = Math.abs(te + ne + m) % m;
119
- o.activeIndex = p[re].index ?? -1;
117
+ e.code === "Enter" && O((B = p.find((I) => I.index === a)) == null ? void 0 : B.value);
118
+ const ne = p.findIndex((I) => I.index === a) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, le = Math.abs(ne + re + m) % m;
119
+ o.activeIndex = p[le].index ?? -1;
120
120
  };
121
- return ge(d), P(() => r.modelValue, q, { immediate: !0 }), P(
121
+ return ye(d), D(() => n.modelValue, H, { immediate: !0 }), D(
122
122
  () => o.open,
123
123
  (e) => {
124
124
  var t;
125
- return e ? (t = g.value) == null ? void 0 : t.focus() : "";
125
+ return e ? (t = w.value) == null ? void 0 : t.focus() : "";
126
126
  }
127
- ), se(() => {
127
+ ), de(() => {
128
128
  var e;
129
- o.search, o.activeIndex >= 0 && o.open && ((e = y.value) == null || e.scrollIntoActive());
129
+ o.search, o.activeIndex >= 0 && o.open && ((e = g.value) == null || e.scrollIntoActive());
130
130
  }), (e, t) => (l(), v("div", {
131
131
  class: "pl-dropdown__envelope",
132
- onClick: X
132
+ onClick: Y
133
133
  }, [
134
134
  f("div", {
135
135
  ref_key: "rootRef",
136
136
  ref: d,
137
- tabindex: j.value,
138
- class: de(["pl-dropdown", { open: o.open, error: n.error || n.errorStatus, disabled: k.value }]),
139
- onKeydown: oe,
140
- onFocusout: ee
137
+ tabindex: J.value,
138
+ class: ce(["pl-dropdown", { open: o.open, error: r.error || r.errorStatus, disabled: k.value }]),
139
+ onKeydown: te,
140
+ onFocusout: oe
141
141
  }, [
142
- f("div", be, [
143
- f("div", Le, [
144
- ce(f("input", {
142
+ f("div", Le, [
143
+ f("div", Ce, [
144
+ ue(f("input", {
145
145
  ref_key: "input",
146
- ref: g,
146
+ ref: w,
147
147
  "onUpdate:modelValue": t[0] || (t[0] = (a) => o.search = a),
148
148
  type: "text",
149
149
  tabindex: "-1",
150
150
  disabled: k.value,
151
- placeholder: H.value,
151
+ placeholder: U.value,
152
152
  spellcheck: "false",
153
153
  autocomplete: "chrome-off",
154
- onFocus: Z
155
- }, null, 40, Ce), [
156
- [ue, o.search]
154
+ onFocus: ee
155
+ }, null, 40, Ee), [
156
+ [pe, o.search]
157
157
  ]),
158
- o.open ? c("", !0) : (l(), v("div", Ee, [
159
- D(ye, null, {
160
- default: $(() => [
161
- pe(h(E.value), 1)
158
+ o.open ? c("", !0) : (l(), v("div", Re, [
159
+ $(ke, null, {
160
+ default: z(() => [
161
+ fe(h(R.value), 1)
162
162
  ]),
163
163
  _: 1
164
164
  })
165
165
  ])),
166
- f("div", Re, [
167
- w.value ? (l(), u(i(T), {
166
+ f("div", Se, [
167
+ V.value ? (l(), u(s(F), {
168
168
  key: 0,
169
169
  name: "loading"
170
170
  })) : c("", !0),
171
- n.clearable && U.value ? (l(), u(i(_), {
171
+ r.clearable && K.value ? (l(), u(s(_), {
172
172
  key: 1,
173
173
  class: "clear",
174
174
  name: "delete-clear",
175
- onClick: M(Q, ["stop"])
175
+ onClick: T(X, ["stop"])
176
176
  })) : c("", !0),
177
- z(e.$slots, "append"),
177
+ M(e.$slots, "append"),
178
178
  f("div", {
179
179
  class: "pl-dropdown__arrow-wrapper",
180
- onClick: M(Y, ["stop"])
180
+ onClick: T(Z, ["stop"])
181
181
  }, [
182
- n.arrowIconLarge ? (l(), u(i(T), {
182
+ r.arrowIconLarge ? (l(), u(s(F), {
183
183
  key: 0,
184
- name: n.arrowIconLarge,
184
+ name: r.arrowIconLarge,
185
185
  class: "arrow-icon"
186
- }, null, 8, ["name"])) : n.arrowIcon ? (l(), u(i(_), {
186
+ }, null, 8, ["name"])) : r.arrowIcon ? (l(), u(s(_), {
187
187
  key: 1,
188
- name: n.arrowIcon,
188
+ name: r.arrowIcon,
189
189
  class: "arrow-icon"
190
- }, null, 8, ["name"])) : (l(), u(i(_), {
190
+ }, null, 8, ["name"])) : (l(), u(s(_), {
191
191
  key: 2,
192
192
  name: "chevron-down",
193
193
  class: "arrow-icon arrow-icon-default"
@@ -195,44 +195,44 @@ const Ve = ["tabindex"], be = { class: "pl-dropdown__container" }, Le = { class:
195
195
  ])
196
196
  ])
197
197
  ]),
198
- n.label ? (l(), v("label", Oe, [
199
- n.required ? (l(), u(i(ke), {
198
+ r.label ? (l(), v("label", Oe, [
199
+ r.required ? (l(), u(s(Ie), {
200
200
  key: 0,
201
- uri: i(fe)
201
+ uri: s(me)
202
202
  }, null, 8, ["uri"])) : c("", !0),
203
- f("span", null, h(n.label), 1),
204
- e.$slots.tooltip ? (l(), u(i(Ie), {
203
+ f("span", null, h(r.label), 1),
204
+ e.$slots.tooltip ? (l(), u(s(xe), {
205
205
  key: 1,
206
206
  class: "info",
207
207
  position: "top"
208
208
  }, {
209
- tooltip: $(() => [
210
- z(e.$slots, "tooltip")
209
+ tooltip: z(() => [
210
+ M(e.$slots, "tooltip")
211
211
  ]),
212
212
  _: 3
213
213
  })) : c("", !0)
214
214
  ])) : c("", !0),
215
- o.open ? (l(), u(xe, {
215
+ o.open ? (l(), u(_e, {
216
216
  key: 1,
217
217
  ref_key: "optionListRef",
218
- ref: y,
218
+ ref: g,
219
219
  "root-ref": d.value,
220
- groups: i(G),
221
- rest: i(W),
222
- "option-size": n.optionSize,
223
- "select-option": J
220
+ groups: s(W),
221
+ rest: s(j),
222
+ "option-size": r.optionSize,
223
+ "select-option": Q
224
224
  }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : c("", !0),
225
- D(we, {
225
+ $(ge, {
226
226
  class: "pl-dropdown__contour",
227
- "group-position": n.groupPosition
227
+ "group-position": r.groupPosition
228
228
  }, null, 8, ["group-position"])
229
229
  ])
230
230
  ], 42, Ve),
231
- L.value ? (l(), v("div", Se, h(L.value), 1)) : w.value && n.loadingOptionsHelper ? (l(), v("div", Ae, h(n.loadingOptionsHelper), 1)) : n.helper ? (l(), v("div", Be, h(n.helper), 1)) : c("", !0)
231
+ C.value ? (l(), v("div", Ae, h(C.value), 1)) : V.value && r.loadingOptionsHelper ? (l(), v("div", Be, h(r.loadingOptionsHelper), 1)) : r.helper ? (l(), v("div", Pe, h(r.helper), 1)) : c("", !0)
232
232
  ]));
233
233
  }
234
234
  });
235
235
  export {
236
- Ze as default
236
+ eo as default
237
237
  };
238
238
  //# sourceMappingURL=PlDropdown.vue.js.map
package/dist/components/PlDropdown/PlDropdown.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlDropdown.vue.js","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\n */\n modelValue: M;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\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 * Shows red border even without an error message\n */\n errorStatus?: boolean;\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?: MaskIconName16;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: MaskIconName24;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\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 label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\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 (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M | undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\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 }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.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 = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, 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 data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.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-dropdown__controls\">\n <PlIcon24 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-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","$slots","PlTooltip","OptionList","DoubleContour","_hoisted_8","_toDisplayString","_hoisted_9","_hoisted_10"],"mappings":"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"}
1
+ {"version":3,"file":"PlDropdown.vue.js","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\n */\n modelValue: M;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\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 * Shows red border even without an error message\n */\n errorStatus?: boolean;\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?: MaskIconName16;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: MaskIconName24;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\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 label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\n */\nconst showLoadingSpinner = computed(() => {\n return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\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 (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M | undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\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 }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.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 = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, 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 data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.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-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"showLoadingSpinner && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","showLoadingSpinner","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","$slots","PlTooltip","OptionList","DoubleContour","_hoisted_8","_toDisplayString","_hoisted_9","_hoisted_10"],"mappings":"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"}
package/dist/components/PlErrorAlert/PlErrorAlert.vue.d.ts CHANGED
@@ -9,8 +9,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
9
9
  maxHeight?: string;
10
10
  copyMessage?: string;
11
11
  }> & Readonly<{}>, {
12
- message: string;
13
12
  title: string;
13
+ message: string;
14
14
  maxHeight: string;
15
15
  copyMessage: string;
16
16
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
package/dist/components/PlErrorBoundary/PlErrorBoundary.vue.d.ts CHANGED
@@ -34,8 +34,8 @@ declare function __VLS_template(): {
34
34
  maxHeight?: string;
35
35
  copyMessage?: string;
36
36
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
37
- message: string;
38
37
  title: string;
38
+ message: string;
39
39
  maxHeight: string;
40
40
  copyMessage: string;
41
41
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
@@ -59,8 +59,8 @@ declare function __VLS_template(): {
59
59
  $nextTick: typeof import('vue').nextTick;
60
60
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
61
61
  } & Readonly<{
62
- message: string;
63
62
  title: string;
63
+ message: string;
64
64
  maxHeight: string;
65
65
  copyMessage: string;
66
66
  }> & Omit<Readonly<{
@@ -68,7 +68,7 @@ declare function __VLS_template(): {
68
68
  message?: string;
69
69
  maxHeight?: string;
70
70
  copyMessage?: string;
71
- }> & Readonly<{}>, "message" | "title" | "maxHeight" | "copyMessage"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
71
+ }> & Readonly<{}>, "title" | "message" | "maxHeight" | "copyMessage"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
72
72
  $slots: {
73
73
  title?(_: {}): any;
74
74
  message?(_: {}): any;
@@ -111,8 +111,8 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
111
111
  maxHeight?: string;
112
112
  copyMessage?: string;
113
113
  }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
114
- message: string;
115
114
  title: string;
115
+ message: string;
116
116
  maxHeight: string;
117
117
  copyMessage: string;
118
118
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
@@ -136,8 +136,8 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
136
136
  $nextTick: typeof import('vue').nextTick;
137
137
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
138
138
  } & Readonly<{
139
- message: string;
140
139
  title: string;
140
+ message: string;
141
141
  maxHeight: string;
142
142
  copyMessage: string;
143
143
  }> & Omit<Readonly<{
@@ -145,7 +145,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
145
145
  message?: string;
146
146
  maxHeight?: string;
147
147
  copyMessage?: string;
148
- }> & Readonly<{}>, "message" | "title" | "maxHeight" | "copyMessage"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
148
+ }> & Readonly<{}>, "title" | "message" | "maxHeight" | "copyMessage"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
149
149
  $slots: {
150
150
  title?(_: {}): any;
151
151
  message?(_: {}): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@milaboratories/uikit",
3
- "version": "2.7.0",
3
+ "version": "2.7.2",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -41,9 +41,9 @@
41
41
  "svgo": "^3.3.2",
42
42
  "typescript": "~5.6.3",
43
43
  "@milaboratories/ts-configs": "1.0.6",
44
- "@milaboratories/eslint-config": "1.0.5",
45
- "@milaboratories/ts-builder": "1.0.5",
46
- "@milaboratories/build-configs": "1.0.8"
44
+ "@milaboratories/build-configs": "1.0.9",
45
+ "@milaboratories/ts-builder": "1.0.6",
46
+ "@milaboratories/eslint-config": "1.0.5"
47
47
  },
48
48
  "scripts": {
49
49
  "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",
package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue CHANGED
@@ -35,6 +35,12 @@
35
35
  export default {
36
36
  name: 'PlAutocompleteMulti',
37
37
  };
38
+
39
+ export interface OptionsSearch<T> {
40
+ (s: string, type: 'label'): Promise<Readonly<ListOptionBase<T>[]>>;
41
+ (s: T[], type: 'value'): Promise<Readonly<ListOptionBase<T>[]>>;
42
+ }
43
+
38
44
  </script>
39
45
 
40
46
  <script lang="ts" setup generic="M extends string | number = string">
@@ -65,11 +71,6 @@ const emitModel = (v: M[]) => emit('update:modelValue', v);
65
71
 
66
72
  const slots = useSlots();
67
73
 
68
- interface OptionsSearch {
69
- (s: string, type: 'label'): Promise<Readonly<ListOptionBase<M>[]>>;
70
- (s: M[], type: 'value'): Promise<Readonly<ListOptionBase<M>[]>>;
71
- }
72
-
73
74
  const props = withDefaults(
74
75
  defineProps<{
75
76
  /**
@@ -79,7 +80,7 @@ const props = withDefaults(
79
80
  /**
80
81
  * Lambda for requesting of available options for the dropdown by search string.
81
82
  */
82
- optionsSearch: OptionsSearch;
83
+ optionsSearch: OptionsSearch<M>;
83
84
  /**
84
85
  * Unique identifier for the source of the options, changing it will invalidate the options cache.
85
86
  */
package/src/components/PlAutocompleteMulti/index.ts CHANGED
@@ -1 +1 @@
1
- export { default as PlAutocompleteMulti } from './PlAutocompleteMulti.vue';
1
+ export { default as PlAutocompleteMulti, type OptionsSearch as PlAutocompleteMultiOptionsSearch } from './PlAutocompleteMulti.vue';
package/src/components/PlDropdown/PlDropdown.vue CHANGED
@@ -139,6 +139,14 @@ const isLoadingOptions = computed(() => {
139
139
  return props.options === undefined;
140
140
  });
141
141
 
142
+ /**
143
+ * Loading spinner should not be shown when the dropdown is explicitly disabled,
144
+ * even if options are undefined. The disabled state takes precedence.
145
+ */
146
+ const showLoadingSpinner = computed(() => {
147
+ return !props.disabled && isLoadingOptions.value;
148
+ });
149
+
142
150
  const isDisabled = computed(() => {
143
151
  if (isLoadingOptions.value) {
144
152
  return true;
@@ -349,7 +357,7 @@ watchPostEffect(() => {
349
357
  </div>
350
358
 
351
359
  <div class="pl-dropdown__controls">
352
- <PlIcon24 v-if="isLoadingOptions" name="loading" />
360
+ <PlIcon24 v-if="showLoadingSpinner" name="loading" />
353
361
  <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
354
362
  <slot name="append" />
355
363
  <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
@@ -381,7 +389,7 @@ watchPostEffect(() => {
381
389
  </div>
382
390
  </div>
383
391
  <div v-if="computedError" class="pl-dropdown__error">{{ computedError }}</div>
384
- <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="pl-dropdown__helper">{{ loadingOptionsHelper }}</div>
392
+ <div v-else-if="showLoadingSpinner && loadingOptionsHelper" class="pl-dropdown__helper">{{ loadingOptionsHelper }}</div>
385
393
  <div v-else-if="helper" class="pl-dropdown__helper">{{ helper }}</div>
386
394
  </div>
387
395
  </template>