@milaboratories/uikit 2.16.3 → 2.17.1

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 (81) hide show
  1. package/.turbo/turbo-build.log +31 -23
  2. package/.turbo/turbo-formatter$colon$check.log +1 -1
  3. package/.turbo/turbo-linter$colon$check.log +1 -1
  4. package/CHANGELOG.md +32 -0
  5. package/dist/components/PlAlert/PlAlert.js.map +1 -1
  6. package/dist/components/PlAlert/PlAlert.vue.d.ts +4 -1
  7. package/dist/components/PlAlert/PlAlert.vue.d.ts.map +1 -1
  8. package/dist/components/PlAlert/PlAlert.vue2.js +27 -24
  9. package/dist/components/PlAlert/PlAlert.vue2.js.map +1 -1
  10. package/dist/components/PlAlert/pl-alert.css +1 -1
  11. package/dist/components/PlDropdown/PlDropdown.js +5 -4
  12. package/dist/components/PlDropdown/PlDropdown.js.map +1 -1
  13. package/dist/components/PlDropdown/PlDropdown.style.css +1 -0
  14. package/dist/components/PlDropdown/PlDropdown.style.js +5 -0
  15. package/dist/components/PlDropdown/PlDropdown.style.js.map +1 -0
  16. package/dist/components/PlDropdown/PlDropdown.vue.d.ts +10 -2
  17. package/dist/components/PlDropdown/PlDropdown.vue.d.ts.map +1 -1
  18. package/dist/components/PlDropdown/PlDropdown.vue2.js +136 -110
  19. package/dist/components/PlDropdown/PlDropdown.vue2.js.map +1 -1
  20. package/dist/components/PlDropdownMulti/PlDropdownMulti.js.map +1 -1
  21. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts +10 -2
  22. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts.map +1 -1
  23. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js +123 -84
  24. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map +1 -1
  25. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js.map +1 -1
  26. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts +12 -5
  27. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts.map +1 -1
  28. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js +8 -1
  29. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js.map +1 -1
  30. package/dist/components/PlDropdownRef/PlDropdownRef.js.map +1 -1
  31. package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts +8 -2
  32. package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts.map +1 -1
  33. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js +8 -1
  34. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map +1 -1
  35. package/dist/components/PlTooltip/PlTooltip.js.map +1 -1
  36. package/dist/components/PlTooltip/PlTooltip.style.css +1 -1
  37. package/dist/components/PlTooltip/PlTooltip.style.js +1 -1
  38. package/dist/components/PlTooltip/PlTooltip.style.js.map +1 -1
  39. package/dist/components/PlTooltip/PlTooltip.vue.d.ts.map +1 -1
  40. package/dist/components/PlTooltip/PlTooltip.vue2.js +1 -1
  41. package/dist/components/PlTooltip/PlTooltip.vue2.js.map +1 -1
  42. package/dist/components/PlValueLabel/PlValueLabel.js +7 -0
  43. package/dist/components/PlValueLabel/PlValueLabel.js.map +1 -0
  44. package/dist/components/PlValueLabel/PlValueLabel.style.css +1 -0
  45. package/dist/components/PlValueLabel/PlValueLabel.style.js +5 -0
  46. package/dist/components/PlValueLabel/PlValueLabel.style.js.map +1 -0
  47. package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts +45 -0
  48. package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts.map +1 -0
  49. package/dist/components/PlValueLabel/PlValueLabel.vue2.js +37 -0
  50. package/dist/components/PlValueLabel/PlValueLabel.vue2.js.map +1 -0
  51. package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts +2 -0
  52. package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts.map +1 -0
  53. package/dist/components/PlValueLabel/index.d.ts +2 -0
  54. package/dist/components/PlValueLabel/index.d.ts.map +1 -0
  55. package/dist/components/PlValueLabel/index.js +1 -0
  56. package/dist/helpers/columnValue.d.ts +25 -0
  57. package/dist/helpers/columnValue.d.ts.map +1 -0
  58. package/dist/helpers/columnValue.js +17 -0
  59. package/dist/helpers/columnValue.js.map +1 -0
  60. package/dist/index.d.ts +2 -0
  61. package/dist/index.d.ts.map +1 -1
  62. package/dist/index.js +32 -30
  63. package/dist/index.js.map +1 -1
  64. package/package.json +2 -3
  65. package/src/__tests__/setup.ts +10 -2
  66. package/src/components/PlAlert/PlAlert.vue +23 -5
  67. package/src/components/PlAlert/pl-alert.scss +6 -0
  68. package/src/components/PlDropdown/PlDropdown.vue +49 -8
  69. package/src/components/PlDropdown/__tests__/PlDropdown.spec.ts +95 -0
  70. package/src/components/PlDropdownMulti/PlDropdownMulti.vue +50 -9
  71. package/src/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.ts +47 -0
  72. package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue +10 -3
  73. package/src/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.ts +2 -2
  74. package/src/components/PlDropdownRef/PlDropdownRef.vue +10 -3
  75. package/src/components/PlDropdownRef/__tests__/PlDropdownRef.spec.ts +2 -2
  76. package/src/components/PlTooltip/PlTooltip.vue +1 -0
  77. package/src/components/PlValueLabel/PlValueLabel.vue +80 -0
  78. package/src/components/PlValueLabel/__tests__/PlValueLabel.spec.ts +64 -0
  79. package/src/components/PlValueLabel/index.ts +1 -0
  80. package/src/helpers/columnValue.ts +43 -0
  81. package/src/index.ts +2 -0
package/.turbo/turbo-build.log CHANGED
@@ -7,7 +7,7 @@ Using custom config: ./build.browser-lib.config.js
7
7
  vite v8.3.5 building client environment for production...
8
8
  [warn] `inlineDynamicImports` option is deprecated, please use `codeSplitting: false` instead.
9
9
  transforming...
10
- ✓ 741 modules transformed.
10
+ ✓ 747 modules transformed.
11
11
  [lightningcss minify] Unknown at rule: @use
12
12
  1 |
13
13
  2 | @use "../../assets/variables.scss" as *;
@@ -17,11 +17,13 @@ transforming...
17
17
  rendering chunks...
18
18
  
19
19
  [unplugin:dts] Start generate declaration files...
20
- [unplugin:dts] Declaration files built in 5998ms.
20
+ [unplugin:dts] Declaration files built in 5915ms.
21
21
  
22
22
  computing gzip size...
23
23
  dist/components/PlClipboard/PlClipboard.vue_vue_type_style_index_0_lang.css 0.04 kB │ gzip: 0.06 kB
24
+ dist/components/PlDropdown/PlDropdown.vue_vue_type_style_index_0_lang.css 0.04 kB │ gzip: 0.06 kB
24
25
  dist/components/PlSlideModal/PlSlideModal.vue_vue_type_style_index_0_lang.css 0.05 kB │ gzip: 0.06 kB
26
+ dist/components/PlValueLabel/PlValueLabel.vue_vue_type_style_index_0_lang.css 0.06 kB │ gzip: 0.08 kB
25
27
  dist/components/PlChartStackedBar/PlChartStackedBarCompact.vue_vue_type_style_index_0_lang.css 0.06 kB │ gzip: 0.08 kB
26
28
  dist/layout/PlContainer/pl-container.css 0.06 kB │ gzip: 0.08 kB
27
29
  dist/layout/PlGrid/pl-grid.css 0.06 kB │ gzip: 0.07 kB
@@ -62,7 +64,7 @@ dist/components/contextMenu/Menu.vue_vue_type_style_index_0_scoped_a7698a57_lang
62
64
  dist/components/PlSearchField/PlSearchField.vue_vue_type_style_index_0_lang.css 1.03 kB │ gzip: 0.39 kB
63
65
  dist/components/PlProgressCell/pl-progress-cell.css 1.14 kB │ gzip: 0.48 kB
64
66
  dist/layout/PlBlockPage/pl-block-page.css 1.32 kB │ gzip: 0.51 kB
65
- dist/components/PlAlert/pl-alert.css 1.38 kB │ gzip: 0.54 kB
67
+ dist/components/PlAlert/pl-alert.css 1.46 kB │ gzip: 0.56 kB
66
68
  dist/components/PlChip/pl-chip.css 1.55 kB │ gzip: 0.70 kB
67
69
  dist/layout/PlPlaceholder/PlPlaceholder.vue_vue_type_style_index_0_lang.css 1.56 kB │ gzip: 0.68 kB
68
70
  dist/components/PlBtnSplit/pl-btn-split.css 1.57 kB │ gzip: 0.45 kB
@@ -81,7 +83,7 @@ dist/components/PlLogView/pl-log-view.css
81
83
  dist/components/PlNumberField/pl-number-field.css 2.81 kB │ gzip: 0.88 kB
82
84
  dist/components/PlTextArea/pl-textarea.css 2.96 kB │ gzip: 0.86 kB
83
85
  dist/components/PlTextField/pl-text-field.css 3.27 kB │ gzip: 0.92 kB
84
- dist/components/PlTooltip/PlTooltip.vue_vue_type_style_index_0_lang.css 3.46 kB │ gzip: 0.82 kB
86
+ dist/components/PlTooltip/PlTooltip.vue_vue_type_style_index_0_lang.css 3.50 kB │ gzip: 0.82 kB
85
87
  dist/components/PlDropdownLine/pl-dropdown-line.css 4.55 kB │ gzip: 1.24 kB
86
88
  dist/components/PlFileInput/pl-file-input.css 4.63 kB │ gzip: 1.23 kB
87
89
  dist/components/PlSidebar/PlSidebarGroup.vue_vue_type_style_index_0_lang.css 4.78 kB │ gzip: 1.30 kB
@@ -123,6 +125,7 @@ dist/layout/PlContainer/index.js
123
125
  dist/components/PlBtnPrimary/index.js 0.06 kB │ gzip: 0.07 kB
124
126
  dist/components/PlErrorAlert/index.js 0.06 kB │ gzip: 0.07 kB
125
127
  dist/components/PlFileDialog/index.js 0.06 kB │ gzip: 0.07 kB
128
+ dist/components/PlValueLabel/index.js 0.06 kB │ gzip: 0.07 kB
126
129
  dist/components/PlColumnLabel/index.js 0.06 kB │ gzip: 0.07 kB
127
130
  dist/components/PlDialogModal/index.js 0.06 kB │ gzip: 0.07 kB
128
131
  dist/components/PlDropdownRef/index.js 0.06 kB │ gzip: 0.07 kB
@@ -175,7 +178,7 @@ dist/components/DataTable/ThCell.js
175
178
  dist/components/DataTable/TrBody.js 0.17 kB │ gzip: 0.15 kB │ map: 0.87 kB
176
179
  dist/components/DataTable/TrHead.js 0.17 kB │ gzip: 0.15 kB │ map: 0.34 kB
177
180
  dist/components/PlFileDialog/Local.js 0.17 kB │ gzip: 0.15 kB │ map: 3.20 kB
178
- dist/components/PlAlert/PlAlert.js 0.17 kB │ gzip: 0.15 kB │ map: 2.95 kB
181
+ dist/components/PlAlert/PlAlert.js 0.17 kB │ gzip: 0.15 kB │ map: 3.50 kB
179
182
  dist/layout/PlSpacer/PlSpacer.js 0.17 kB │ gzip: 0.15 kB │ map: 0.49 kB
180
183
  dist/components/InputRange.js 0.17 kB │ gzip: 0.15 kB │ map: 2.89 kB
181
184
  dist/components/Scrollable.js 0.17 kB │ gzip: 0.15 kB │ map: 2.37 kB
@@ -193,7 +196,6 @@ dist/components/PlBtnGroup/PlBtnGroup.js
193
196
  dist/components/PlBtnSplit/PlBtnSplit.js 0.18 kB │ gzip: 0.15 kB │ map: 6.20 kB
194
197
  dist/components/PlCheckbox/PlCheckbox.js 0.18 kB │ gzip: 0.15 kB │ map: 1.64 kB
195
198
  dist/components/PlDropdown/OptionList.js 0.18 kB │ gzip: 0.16 kB │ map: 2.84 kB
196
- dist/components/PlDropdown/PlDropdown.js 0.18 kB │ gzip: 0.15 kB │ map: 13.82 kB
197
199
  dist/components/PlTextArea/PlTextArea.js 0.18 kB │ gzip: 0.15 kB │ map: 5.26 kB
198
200
  dist/layout/PlContainer/PlContainer.js 0.18 kB │ gzip: 0.15 kB │ map: 1.06 kB
199
201
  dist/components/PlSlideModal/props.js 0.18 kB │ gzip: 0.17 kB │ map: 0.77 kB
@@ -213,7 +215,7 @@ dist/components/SliderRangeTriple.js
213
215
  dist/components/DataTable/TableComponent.js 0.19 kB │ gzip: 0.16 kB │ map: 3.87 kB
214
216
  dist/components/PlCheckbox/PlCheckboxBase.js 0.20 kB │ gzip: 0.16 kB │ map: 0.87 kB
215
217
  dist/components/PlDialogModal/PlDialogModal.js 0.20 kB │ gzip: 0.15 kB │ map: 5.08 kB
216
- dist/components/PlDropdownRef/PlDropdownRef.js 0.20 kB │ gzip: 0.15 kB │ map: 3.40 kB
218
+ dist/components/PlDropdownRef/PlDropdownRef.js 0.20 kB │ gzip: 0.15 kB │ map: 3.79 kB
217
219
  dist/components/PlNumberField/PlNumberField.js 0.20 kB │ gzip: 0.15 kB │ map: 10.81 kB
218
220
  dist/components/PlProgressBar/PlProgressBar.js 0.20 kB │ gzip: 0.15 kB │ map: 1.24 kB
219
221
  dist/layout/PlBlockPage/index.js 0.20 kB │ gzip: 0.11 kB
@@ -228,7 +230,7 @@ dist/components/PlToggleSwitch/PlToggleSwitch.js
228
230
  dist/components/TransitionSlidePanel.js 0.20 kB │ gzip: 0.15 kB │ map: 0.62 kB
229
231
  dist/components/DataTable/BaseCellComponent.js 0.20 kB │ gzip: 0.16 kB │ map: 1.77 kB
230
232
  dist/components/PlCheckboxGroup/PlCheckboxGroup.js 0.20 kB │ gzip: 0.16 kB │ map: 2.70 kB
231
- dist/components/PlDropdownMulti/PlDropdownMulti.js 0.20 kB │ gzip: 0.15 kB │ map: 12.70 kB
233
+ dist/components/PlDropdownMulti/PlDropdownMulti.js 0.20 kB │ gzip: 0.15 kB │ map: 14.79 kB
232
234
  dist/components/PlEditableTitle/PlEditableTitle.js 0.20 kB │ gzip: 0.15 kB │ map: 3.31 kB
233
235
  dist/components/PlErrorBoundary/PlErrorBoundary.js 0.20 kB │ gzip: 0.16 kB │ map: 1.90 kB
234
236
  dist/components/PlSlideModal/PlPureSlideModal.js 0.20 kB │ gzip: 0.16 kB │ map: 2.18 kB
@@ -237,7 +239,7 @@ dist/components/PlDropdownLegacy/PlDropdownLegacy.js
237
239
  dist/components/PlLoaderCircular/PlLoaderCircular.js 0.21 kB │ gzip: 0.15 kB │ map: 1.15 kB
238
240
  dist/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.js 0.21 kB │ gzip: 0.15 kB │ map: 0.35 kB
239
241
  dist/helpers/index.js 0.21 kB │ gzip: 0.18 kB │ map: 0.63 kB
240
- dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js 0.22 kB │ gzip: 0.16 kB │ map: 2.56 kB
242
+ dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js 0.22 kB │ gzip: 0.16 kB │ map: 2.96 kB
241
243
  dist/components/PlAutocompleteMulti/PlAutocompleteMulti.js 0.22 kB │ gzip: 0.16 kB │ map: 14.66 kB
242
244
  dist/components/PlNotificationAlert/PlNotificationAlert.js 0.22 kB │ gzip: 0.16 kB │ map: 1.69 kB
243
245
  dist/helpers/iterators.js 0.23 kB │ gzip: 0.18 kB │ map: 0.76 kB
@@ -254,6 +256,7 @@ dist/components/PlIcon16/PlIcon16.vue_vue_type_style_index_0_lang.module.js
254
256
  dist/components/PlIcon24/PlIcon24.vue_vue_type_style_index_0_lang.module.js 0.28 kB │ gzip: 0.20 kB │ map: 2.09 kB
255
257
  dist/components/PlChartHistogram/logspace.js 0.29 kB │ gzip: 0.23 kB │ map: 0.81 kB
256
258
  dist/components/DataTable/composition/useMouseUp.js 0.29 kB │ gzip: 0.20 kB │ map: 0.59 kB
259
+ dist/components/PlDropdown/PlDropdown.vue_vue_type_style_index_0_lang.module.js 0.29 kB │ gzip: 0.20 kB │ map: 15.64 kB
257
260
  dist/components/PlClipboard/PlClipboard.vue_vue_type_style_index_0_lang.module.js 0.30 kB │ gzip: 0.20 kB │ map: 1.30 kB
258
261
  dist/composition/useEventListener.js 0.30 kB │ gzip: 0.20 kB │ map: 1.10 kB
259
262
  dist/assets/icons/icon-assets-min/24_color-fill.js 0.30 kB │ gzip: 0.23 kB │ map: 0.10 kB
@@ -264,6 +267,7 @@ dist/assets/icons/icon-assets-min/24_radio-button.js
264
267
  dist/assets/icons/icon-assets-min/24_minus.js 0.31 kB │ gzip: 0.24 kB │ map: 0.09 kB
265
268
  dist/utils/PlCloseModalBtn.vue_vue_type_style_index_0_lang.module.js 0.31 kB │ gzip: 0.20 kB │ map: 0.81 kB
266
269
  dist/components/PlSvg/PlSvg.js 0.31 kB │ gzip: 0.22 kB │ map: 3.14 kB
270
+ dist/components/PlValueLabel/PlValueLabel.vue_vue_type_style_index_0_lang.module.js 0.31 kB │ gzip: 0.20 kB │ map: 3.02 kB
267
271
  dist/assets/icons/icon-assets-min/16_minus.js 0.31 kB │ gzip: 0.24 kB │ map: 0.09 kB
268
272
  dist/components/PlChartStackedBar/Legends.js 0.32 kB │ gzip: 0.22 kB │ map: 2.30 kB
269
273
  dist/components/PlRadio/PlRadio.js 0.32 kB │ gzip: 0.22 kB │ map: 2.74 kB
@@ -271,9 +275,10 @@ dist/components/PlIcon16/PlIcon16.js
271
275
  dist/components/PlIcon24/PlIcon24.js 0.32 kB │ gzip: 0.23 kB │ map: 2.19 kB
272
276
  dist/assets/icons/icon-assets-min/24_arrow-up.js 0.32 kB │ gzip: 0.25 kB │ map: 0.09 kB
273
277
  dist/components/PlFileDialog/Shortcuts.js 0.32 kB │ gzip: 0.23 kB │ map: 2.54 kB
274
- dist/components/PlTooltip/PlTooltip.js 0.32 kB │ gzip: 0.23 kB │ map: 9.41 kB
278
+ dist/components/PlTooltip/PlTooltip.js 0.32 kB │ gzip: 0.23 kB │ map: 9.45 kB
275
279
  dist/assets/icons/icon-assets-min/24_linetype-solid.js 0.32 kB │ gzip: 0.25 kB │ map: 0.10 kB
276
280
  dist/components/PlChartStackedBar/StackedRow.js 0.32 kB │ gzip: 0.23 kB │ map: 3.27 kB
281
+ dist/components/PlDropdown/PlDropdown.js 0.32 kB │ gzip: 0.23 kB │ map: 15.74 kB
277
282
  dist/assets/icons/icon-assets-min/16_add.js 0.33 kB │ gzip: 0.25 kB │ map: 0.08 kB
278
283
  dist/assets/icons/icon-assets-min/24_arrow-left.js 0.33 kB │ gzip: 0.26 kB │ map: 0.10 kB
279
284
  dist/components/PlClipboard/PlClipboard.js 0.33 kB │ gzip: 0.23 kB │ map: 1.41 kB
@@ -286,6 +291,7 @@ dist/components/PlAccordion/ExpandTransition.js
286
291
  dist/components/PlErrorAlert/PlErrorAlert.js 0.33 kB │ gzip: 0.23 kB │ map: 2.74 kB
287
292
  dist/components/PlRadio/PlRadioGroup.js 0.33 kB │ gzip: 0.23 kB │ map: 2.43 kB
288
293
  dist/components/PlSlideModal/PlSlideModal.js 0.33 kB │ gzip: 0.23 kB │ map: 1.68 kB
294
+ dist/components/PlValueLabel/PlValueLabel.js 0.33 kB │ gzip: 0.23 kB │ map: 3.12 kB
289
295
  dist/components/PlElementList/utils.js 0.33 kB │ gzip: 0.26 kB │ map: 0.85 kB
290
296
  dist/helpers/functions.js 0.33 kB │ gzip: 0.22 kB │ map: 1.17 kB
291
297
  dist/components/PlColumnLabel/PlColumnLabel.js 0.33 kB │ gzip: 0.23 kB │ map: 1.71 kB
@@ -474,6 +480,7 @@ dist/assets/icons/icon-assets-min/24_success.js
474
480
  dist/composition/useFormState.js 0.52 kB │ gzip: 0.33 kB │ map: 1.57 kB
475
481
  dist/assets/icons/icon-assets-min/24_table-add.js 0.53 kB │ gzip: 0.36 kB │ map: 0.09 kB
476
482
  dist/assets/icons/icon-assets-min/16_time.js 0.53 kB │ gzip: 0.35 kB │ map: 0.08 kB
483
+ dist/helpers/columnValue.js 0.53 kB │ gzip: 0.32 kB │ map: 2.51 kB
477
484
  dist/assets/icons/icon-assets-min/24_frame-type-left-bottom.js 0.53 kB │ gzip: 0.32 kB │ map: 0.12 kB
478
485
  dist/assets/icons/icon-assets-min/16_lock.js 0.54 kB │ gzip: 0.36 kB │ map: 0.08 kB
479
486
  dist/assets/icons/icon-assets-min/24_table-import.js 0.54 kB │ gzip: 0.36 kB │ map: 0.10 kB
@@ -617,7 +624,7 @@ dist/assets/icons/icon-assets-min/24_container.js
617
624
  dist/assets/icons/icon-assets-min/24_cloud-download.js 0.87 kB │ gzip: 0.52 kB │ map: 0.10 kB
618
625
  dist/assets/icons/icon-assets-min/24_color.js 0.88 kB │ gzip: 0.47 kB │ map: 0.09 kB
619
626
  dist/assets/icons/icon-assets-min/24_cookie.js 0.88 kB │ gzip: 0.51 kB │ map: 0.09 kB
620
- dist/components/PlTooltip/PlTooltip.vue_vue_type_style_index_0_lang.module.js 0.88 kB │ gzip: 0.42 kB │ map: 9.44 kB
627
+ dist/components/PlTooltip/PlTooltip.vue_vue_type_style_index_0_lang.module.js 0.88 kB │ gzip: 0.42 kB │ map: 9.48 kB
621
628
  dist/assets/icons/icon-assets-min/24_cloud-offline.js 0.88 kB │ gzip: 0.55 kB │ map: 0.10 kB
622
629
  dist/assets/icons/icon-assets-min/24_rotation-45.js 0.89 kB │ gzip: 0.52 kB │ map: 0.10 kB
623
630
  dist/assets/icons/icon-assets-min/24_view-hide.js 0.89 kB │ gzip: 0.54 kB │ map: 0.09 kB
@@ -685,7 +692,6 @@ dist/components/DataTable/TScroll.vue_vue_type_script_setup_true_lang.js
685
692
  dist/components/PlRadio/PlRadio.vue_vue_type_script_setup_true_lang.js 1.31 kB │ gzip: 0.72 kB │ map: 3.76 kB
686
693
  dist/components/PlSplash/PlSplash.vue_vue_type_script_setup_true_lang.js 1.31 kB │ gzip: 0.63 kB │ map: 2.36 kB
687
694
  dist/assets/icons/icon-assets-min/24_annotate.js 1.31 kB │ gzip: 0.72 kB │ map: 0.09 kB
688
- dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js 1.34 kB │ gzip: 0.68 kB │ map: 3.26 kB
689
695
  dist/composition/useScroll.js 1.35 kB │ gzip: 0.57 kB │ map: 3.65 kB
690
696
  dist/assets/icons/icon-assets-min/24_dna.js 1.36 kB │ gzip: 0.76 kB │ map: 0.08 kB
691
697
  dist/components/DataTable/BaseCellComponent.vue_vue_type_script_setup_true_lang.js 1.39 kB │ gzip: 0.80 kB │ map: 2.88 kB
@@ -695,19 +701,21 @@ dist/components/PlChartStackedBar/Legends.vue_vue_type_script_setup_true_lang.js
695
701
  dist/components/DataTable/ThCell.vue_vue_type_script_setup_true_lang.js 1.42 kB │ gzip: 0.78 kB │ map: 2.54 kB
696
702
  dist/assets/icons/icon-assets-min/24_sina.js 1.43 kB │ gzip: 0.42 kB │ map: 0.08 kB
697
703
  dist/assets/icons/icon-assets-min/24_color-none.js 1.43 kB │ gzip: 0.67 kB │ map: 0.10 kB
704
+ dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js 1.44 kB │ gzip: 0.70 kB │ map: 3.66 kB
698
705
  dist/components/HScroll.vue_vue_type_script_setup_true_lang.js 1.46 kB │ gzip: 0.77 kB │ map: 2.92 kB
699
706
  dist/components/VScroll.vue_vue_type_script_setup_true_lang.js 1.46 kB │ gzip: 0.77 kB │ map: 2.93 kB
700
707
  dist/components/DataTable/composition/useResize.js 1.48 kB │ gzip: 0.73 kB │ map: 3.93 kB
701
708
  dist/components/PlErrorBoundary/PlErrorBoundary.vue_vue_type_script_setup_true_lang.js 1.49 kB │ gzip: 0.79 kB │ map: 3.08 kB
702
709
  dist/components/PlRadio/PlRadioGroup.vue_vue_type_script_setup_true_lang.js 1.51 kB │ gzip: 0.79 kB │ map: 3.50 kB
703
710
  dist/assets/icons/icon-assets-min/24_social-youtube.js 1.56 kB │ gzip: 0.80 kB │ map: 0.10 kB
704
- dist/components/PlDropdownRef/PlDropdownRef.vue_vue_type_script_setup_true_lang.js 1.58 kB │ gzip: 0.76 kB │ map: 4.19 kB
705
711
  dist/components/PlNumberField/parseNumber.js 1.58 kB │ gzip: 0.72 kB │ map: 9.08 kB
706
712
  dist/assets/icons/icon-assets-min/24_social-github.js 1.62 kB │ gzip: 0.91 kB │ map: 0.10 kB
707
713
  dist/components/PlLogView/useLogHandle.js 1.62 kB │ gzip: 0.87 kB │ map: 5.25 kB
708
714
  dist/components/PlChartStackedBar/StackedRowCompact.vue_vue_type_script_setup_true_lang.js 1.63 kB │ gzip: 0.80 kB │ map: 3.60 kB
709
715
  dist/components/PlErrorAlert/PlErrorAlert.vue_vue_type_script_setup_true_lang.js 1.63 kB │ gzip: 0.70 kB │ map: 3.81 kB
710
716
  dist/components/PlSlideModal/PlSlideModal.vue_vue_type_script_setup_true_lang.js 1.64 kB │ gzip: 0.77 kB │ map: 2.62 kB
717
+ dist/components/PlValueLabel/PlValueLabel.vue_vue_type_script_setup_true_lang.js 1.66 kB │ gzip: 0.75 kB │ map: 4.37 kB
718
+ dist/components/PlDropdownRef/PlDropdownRef.vue_vue_type_script_setup_true_lang.js 1.67 kB │ gzip: 0.77 kB │ map: 4.60 kB
711
719
  dist/components/PlTabs/PlTabs.vue_vue_type_script_setup_true_lang.js 1.69 kB │ gzip: 0.87 kB │ map: 3.52 kB
712
720
  dist/components/PlFileDialog/Shortcuts.vue_vue_type_script_setup_true_lang.js 1.69 kB │ gzip: 0.71 kB │ map: 3.54 kB
713
721
  dist/components/PlChip/PlChip.vue_vue_type_script_setup_true_lang.js 1.70 kB │ gzip: 0.86 kB │ map: 2.61 kB
@@ -727,7 +735,6 @@ dist/assets/icons/icon-assets-min/24_pen-tool.js
727
735
  dist/components/PlChartStackedBar/StackedRow.vue_vue_type_script_setup_true_lang.js 2.02 kB │ gzip: 0.92 kB │ map: 4.76 kB
728
736
  dist/components/PlSlideModal/PlPureSlideModal.vue_vue_type_script_setup_true_lang.js 2.02 kB │ gzip: 0.92 kB │ map: 3.58 kB
729
737
  dist/assets/icons/icon-assets-min/16_sorter.js 2.03 kB │ gzip: 0.54 kB │ map: 0.09 kB
730
- dist/components/PlAlert/PlAlert.vue_vue_type_script_setup_true_lang.js 2.03 kB │ gzip: 0.91 kB │ map: 4.13 kB
731
738
  dist/components/PlLoaderLogo.vue_vue_type_script_setup_true_lang.js 2.14 kB │ gzip: 1.21 kB │ map: 3.27 kB
732
739
  dist/components/PlAccordion/PlAccordionSection.vue_vue_type_script_setup_true_lang.js 2.14 kB │ gzip: 1.00 kB │ map: 4.28 kB
733
740
  dist/assets/icons/icon-assets-min/24_violin-jitter.js 2.15 kB │ gzip: 1.02 kB │ map: 0.10 kB
@@ -740,6 +747,7 @@ dist/assets/icons/icon-assets-min/24_annotation.js
740
747
  dist/components/PlCheckboxGroup/PlCheckboxGroup.vue_vue_type_script_setup_true_lang.js 2.22 kB │ gzip: 1.01 kB │ map: 4.43 kB
741
748
  dist/assets/icons/icon-assets-min/24_file-logs.js 2.22 kB │ gzip: 1.17 kB │ map: 0.09 kB
742
749
  dist/components/DropdownListItem.vue_vue_type_script_setup_true_lang.js 2.30 kB │ gzip: 0.91 kB │ map: 4.14 kB
750
+ dist/components/PlAlert/PlAlert.vue_vue_type_script_setup_true_lang.js 2.32 kB │ gzip: 0.99 kB │ map: 4.98 kB
743
751
  dist/components/PlSearchField/PlSearchField.vue_vue_type_script_setup_true_lang.js 2.34 kB │ gzip: 1.07 kB │ map: 4.95 kB
744
752
  dist/components/PlProgressCell/PlProgressCell.vue_vue_type_script_setup_true_lang.js 2.38 kB │ gzip: 1.01 kB │ map: 3.95 kB
745
753
  dist/assets/icons/icon-assets-min/24_violin.js 2.38 kB │ gzip: 1.24 kB │ map: 0.09 kB
@@ -756,7 +764,7 @@ dist/components/DataTable/state.js
756
764
  dist/layout/PlBlockPage/PlBlockPage.vue_vue_type_script_setup_true_lang.js 3.33 kB │ gzip: 1.38 kB │ map: 7.17 kB
757
765
  dist/composition/useSortable.js 3.34 kB │ gzip: 1.24 kB │ map: 10.44 kB
758
766
  dist/components/PlFileDialog/PlFileDialog.vue_vue_type_script_setup_true_lang.js 3.35 kB │ gzip: 1.41 kB │ map: 6.66 kB
759
- dist/components/PlTooltip/PlTooltip.vue_vue_type_script_setup_true_lang.js 3.43 kB │ gzip: 1.47 kB │ map: 12.12 kB
767
+ dist/components/PlTooltip/PlTooltip.vue_vue_type_script_setup_true_lang.js 3.43 kB │ gzip: 1.47 kB │ map: 12.16 kB
760
768
  dist/layout/PlPlaceholder/paint-worklet.js 3.45 kB │ gzip: 0.70 kB │ map: 0.10 kB
761
769
  dist/components/PlDialogModal/PlDialogModal.vue_vue_type_script_setup_true_lang.js 3.50 kB │ gzip: 1.33 kB │ map: 7.20 kB
762
770
  dist/components/DataTable/TableComponent.vue_vue_type_script_setup_true_lang.js 3.59 kB │ gzip: 1.53 kB │ map: 7.10 kB
@@ -775,26 +783,26 @@ dist/components/PlNumberField/PlNumberField.vue_vue_type_script_setup_true_lang.
775
783
  dist/components/PlDropdownLine/PlDropdownLine.vue_vue_type_script_setup_true_lang.js 7.61 kB │ gzip: 2.55 kB │ map: 16.79 kB
776
784
  dist/components/SliderRangeTriple.vue_vue_type_script_setup_true_lang.js 7.84 kB │ gzip: 2.49 kB │ map: 18.15 kB
777
785
  dist/components/PlFileDialog/Remote.vue_vue_type_script_setup_true_lang.js 7.84 kB │ gzip: 2.84 kB │ map: 18.24 kB
778
- dist/components/PlDropdownMulti/PlDropdownMulti.vue_vue_type_script_setup_true_lang.js 8.72 kB │ gzip: 2.96 kB │ map: 19.70 kB
779
786
  dist/components/PlDropdownLegacy/PlDropdownLegacy.vue_vue_type_script_setup_true_lang.js 8.78 kB │ gzip: 2.93 kB │ map: 19.81 kB
780
- dist/components/PlDropdown/PlDropdown.vue_vue_type_script_setup_true_lang.js 8.98 kB │ gzip: 3.01 kB │ map: 21.00 kB
781
787
  dist/components/PlElementList/PlElementList.vue_vue_type_script_setup_true_lang.js 9.12 kB │ gzip: 2.40 kB │ map: 22.69 kB
782
788
  dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js 9.18 kB │ gzip: 3.13 kB │ map: 22.15 kB
783
789
  dist/components/PlAutocomplete/PlAutocomplete.vue_vue_type_script_setup_true_lang.js 9.58 kB │ gzip: 3.22 kB │ map: 22.61 kB
784
790
  dist/demo-site-data/all-css-variables.js 9.66 kB │ gzip: 1.74 kB │ map: 17.56 kB
791
+ dist/components/PlDropdown/PlDropdown.vue_vue_type_script_setup_true_lang.js 9.89 kB │ gzip: 3.19 kB │ map: 23.56 kB
792
+ dist/components/PlDropdownMulti/PlDropdownMulti.vue_vue_type_script_setup_true_lang.js 9.95 kB │ gzip: 3.20 kB │ map: 22.85 kB
785
793
  dist/composition/filters/metadata.js 11.35 kB │ gzip: 1.19 kB │ map: 22.29 kB
786
- dist/index.js 12.64 kB │ gzip: 2.98 kB │ map: 8.92 kB
794
+ dist/index.js 12.77 kB │ gzip: 3.01 kB │ map: 9.08 kB
787
795
  dist/components/PlSvg/PlSvg.vue_vue_type_script_setup_true_lang.js 39.39 kB │ gzip: 3.39 kB │ map: 9.23 kB
788
796
 
789
- ✓ built in 7.98s
790
- [PLUGIN_TIMINGS] JavaScript callbacks ran for 7.8s of this 8.0s build (98%).
797
+ ✓ built in 7.77s
798
+ [PLUGIN_TIMINGS] JavaScript callbacks ran for 7.6s of this 7.7s build (98%).
791
799
  The slowest callbacks, timed inside each callback (the wait before a callback starts is excluded, the time it awaits is included):
792
- - plugin unplugin-dts buildStart (69%, 5.5s, 1 call)
800
+ - plugin unplugin-dts buildStart (71%, 5.5s, 1 call)
793
801
  Additional callback time came from the callbacks below and from callbacks under 1s.
794
802
  3 callbacks are listed without a time. Their calls overlapped, so the time inside one call includes work from other calls. To find their cost, profile the build with `node --cpu-prof`:
795
803
  - plugin vite:asset load (298 calls)
796
- - plugin sourcemaps load (302 calls)
797
- - plugin vite:css transform (75 calls)
804
+ - plugin sourcemaps load (305 calls)
805
+ - plugin vite:css transform (77 calls)
798
806
  See https://rolldown.rs/reference/InputOptions.checks#bundlertimings for more details.
799
807
  
800
808
  Build completed successfully
package/.turbo/turbo-formatter$colon$check.log CHANGED
@@ -6,5 +6,5 @@ Checking formatting...
6
6
  Checking formatting...
7
7
 
8
8
  All matched files use the correct format.
9
- Finished in 875ms on 386 files using 16 threads.
9
+ Finished in 1239ms on 390 files using 16 threads.
10
10
  Format check completed successfully
package/.turbo/turbo-linter$colon$check.log CHANGED
@@ -4,5 +4,5 @@ $ ts-builder linter --check
4
4
  Linting project...
5
5
  ↳ oxlint --config /home/runner/_work/platforma/platforma/lib/ui/uikit/.oxlintrc.json --deny-warnings
6
6
  Found 0 warnings and 0 errors.
7
- Finished in 23ms on 313 files with 108 rules using 16 threads.
7
+ Finished in 38ms on 317 files with 108 rules using 16 threads.
8
8
  Linting completed successfully
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @milaboratories/uikit
2
2
 
3
+ ## 2.17.1
4
+
5
+ ### Patch Changes
6
+
7
+ - ad84d77: PlAlert draws its `icon` with PlIcon24, in the text colour, centred on the first row; the global icon classes it used are gone, so it showed none.
8
+
9
+ ## 2.17.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 8d28bcd: Column value references: `ColumnValueId` names one value of a column a block picked, and template relocation repoints the producer block inside it. The value is always a string: a value of a number column is its decimal string (`String(cell)`), so the same value picked from a number cell and from a text cell is the same id, and ids compare with `===`. `createColumnValueId` refuses a value that is not a string, and an id whose value is not a string is not a `ColumnValueId`.
14
+ A value picker is made like a data table, in two halves. The model gives `createColumnValueOptions({ valueColumn, labelColumn? }, { ctx? })` as an output — each column an id, a column or a recipe — a frame holding the value column and the label column, `resolving` while either is, `absent` once the value column is gone (a gone label column leaves the values to label themselves), each with the value column it was made for. The UI reads it through the frame, so a column of any storage format can be picked from: `readColumnValueOptions(model)` gives the distinct non-missing values as `{ value: ColumnValueId, label }` options in natural order of labels, each labelled by the label column in its row or by itself (`deriveColumnValueOptions`, `deriveLabelledColumnValueOptions`). In Vue, as with a table, the output reaches the dropdown through settings: `usePlColumnValueSettings({ source, valueColumn })` makes them out of the output and the column picked now — `none`, `pending` until the output is computed for that pick, `absent`, or `present` — and `<PlColumnValueDropdown>` and `<PlColumnValueDropdownMulti>` take them as `settings`: `PlDropdown` and `PlDropdownMulti` over the values, loading until they are read and telling why a column offers none; `exclude` leaves out values, and other attributes and the slots go to the dropdown.
15
+ `columnValueLabel(picked)` names a picked value to the user: the value a column value id picks, or the string as is when it is not such an id.
16
+ In workflows, `workflow.column-value` reads such ids back into plain values, always strings: `valueOf` for one id, `valuesOf` for an array of them.
17
+ The middle layer computes the column links of each block: `dependencies` — outputs of other blocks the block's args reference: its current args, else those of its last run — and `dependents` — blocks whose args reference the block's outputs. They reach the app and the block UI as `columnLinks` of the block state (`BlockStateInternalV3`, `BlockStateV3`): `BlockColumnLinks` with `blockId`, the block they are of, the two sides as lists of `ColumnLink` — the referenced block output (`producer`), the block holding the reference (`holderBlockId`), the column id, the picked values, the check and the column label — and `labels` of the other blocks they name; `undefined` while they are not computed, and in app versions that do not compute them. They are computed only for blocks whose model declares the `supportsColumnLinks` feature flag, which `BlockModelV3` sets, so blocks built with an earlier SDK add no work. Each block's links are computed on their own: its dependencies read its args and the last runs of the blocks they reference; its dependents read the args of every block below it — those of its last run for a block without current args — and its own last run. So a run of a block recomputes its dependents and the dependencies of the blocks that reference it — and, while it has no current args, the dependents of every block above it; an edit of a block's args recomputes its own dependencies and the dependents of every block above it, whether it references them or not. Each reference carries the picked values and a `LinkCheck`, read the same on both sides, checked against what the producer's last run exports: whether the column is exported and whether it holds the picked values. A reference to a block that has no last run is `notRun`: the block has to be run first. A reference to a block whose last run is still rendering its results is `pending`; one whose last run failed to render them is `unavailable`. A reference to an output its producer does not export is `unavailable`: among `dependents`, the dependent block cannot run against it. A reference to a block that is not above the block holding it is `unavailable` too. A column counts as exported once its spec is in the producer's last run; picked values are checked against those its `pl7.app/discreteValues` annotation lists, else against its data. A reference whose column values cannot be read is `unreadable`; one whose column lacks picked values is `missingValues`, with the values it lacks. Each reference carries the column's label: the exported column's, or, when the producer's last run does not export it, that of the column the producer prepares before it is run; the status is still judged by the last run alone. The middle layer labels the blocks by their titles, the names the project shows.
18
+ `PlBlockDependencies` turns column links into the alerts shown above a block, one per side, for the links that need attention: an error when an output this block uses is unavailable or lacks picked values; a warning, noting that the links are checked against this block's last run, with advice to add the missing data and run the block or reconfigure those blocks, when blocks using this block's outputs use an output it does not export or pick values it lacks; a block that has not been run yet provides no output, so links to it raise these alerts as to an output that is not provided. Columns are named by their label; output names are shown only as hints. Outputs of one block that are not exported and have no known label share one alert line ("uses 2 outputs this block does not export"). Value pickers tell, from the same links, which block was to provide a missing column or column value and what went wrong, or, when its column is provided while other inputs of the block are not, that it waits for them: the options of one input may be made from another. `computeDependencies` and `computeDependents` are in `@milaboratories/pl-model-common`; turning links into alerts and picker tooltips stays inside `@platforma-sdk/ui-vue`.
19
+ `PlBlockDependencies` (`<PlBlockDependencies />`) shows those alerts in a block UI that places it, from the column links the app provides, and nothing when it provides none; each other block is named by `PlBlockName`. The reader can fold the warning about blocks using this block's outputs to its title by clicking the title, which then counts the blocks ("2 blocks"); the fold is the reader's own, kept in the browser storage under the block id, and a folded warning is marked "Updated" once it says something else than when it was folded. The error about this block's own inputs does not fold. `PlAlert` takes a `label` slot in place of the `label` text, and leaves out the text area when given no text.
20
+ `PlBlockName` (`<PlBlockName :block-id="id" :name="label" />`) shows the name of another block of the project: a link opening that block when the app can open blocks, and plain text otherwise.
21
+ Block UIs can ask the app to open another block of the same project: `PlatformaV3` has an optional `openBlock(blockId)`, absent in app versions that cannot do it; in Vue, `useOpenBlock()` returns a function opening a block by id, or `undefined` when the app cannot.
22
+ `PlDropdown` and `PlDropdownMulti` show a selected column value id by the value it picks: as is while the options load, and as "<value> — not available" when the options lack it, unless `missingValueLabel` is given.
23
+ `PlValueLabel` (`<PlValueLabel :value="item" :options="options" />`) shows a selected value as text the way a dropdown does: by its option's label, a column value id by the value it picks, and a value the options lack as not available, in error color.
24
+ `PlDropdown`, `PlDropdownMulti`, `PlDropdownRef`, `PlDropdownMultiRef` and `PlValueLabel` take `missingValueTooltip`, a tooltip explaining a selected value missing from the options, and `missingValueLabel`, the text shown in its place: each one text for every such value, or a function giving it — the tooltip content — per value, `undefined` when there is nothing to tell. The ones `@platforma-sdk/ui-vue` exports pass both themselves when the app provides column links, for a missing column — selected by id or by ref — and a missing column value: the tooltip names the block that was to provide the column, as a link to it, and what went wrong — it does not provide the column (a block that has not been run yet provides none), the column lacks the value, or the block is still computing it; when the column is provided while other inputs of the block are not, the tooltip says it waits for them. The value is shown by the picked value, or by the label of a column selected as a whole: alone while it waits, as "<name> — not available" otherwise.
25
+ `PlDatasetSelector` explains a selected dataset or filter the options lack the same way, by the column it selects: the dataset first, then its filter.
26
+ `PlDropdownRef` and `PlDropdownMultiRef` show a missing value as "Value not available", like the other dropdowns, instead of "Upstream value removed".
27
+ Inside a `PlTooltip`, `--txt-link` is the tooltip link color, so links drawn with it — `PlBlockName` among them — read on the dark tooltip background like the tooltip's own links.
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies [9901322]
32
+ - Updated dependencies [8d28bcd]
33
+ - @platforma-sdk/model@1.88.0
34
+
3
35
  ## 2.16.3
4
36
 
5
37
  ### Patch Changes
package/dist/components/PlAlert/PlAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAlert.js","names":["_sfc_main","PlAlert_vue_vue_type_script_setup_true_lang_default","PlAlert_default"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n /**\n * Emitted when the model value is updated, typically when the close button is clicked.\n *\n * @param value - The new value of the model, generally `false` when the alert is closed.\n */\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n defineProps<{\n /**\n * Controls the visibility of the alert component. If `true`, the alert is visible.\n *\n * @default true\n */\n modelValue?: boolean;\n /**\n * The type of alert, which determines the alert's style and icon.\n * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n */\n type?: \"success\" | \"info\" | \"warn\" | \"error\";\n /**\n * An optional label that appears at the top of the alert.\n */\n label?: string;\n /**\n * If `true`, an icon corresponding to the alert type is displayed.\n */\n icon?: boolean;\n /**\n * If `true`, a close button is displayed in the alert, allowing the user to close it.\n */\n closeable?: boolean;\n /**\n * If `true`, the alert text is displayed in a monospace font.\n */\n monospace?: boolean;\n /**\n * If `true`, the alert content will preserve whitespace and line breaks.\n */\n whiteSpacePre?: boolean;\n\n /**\n * Max height (css value like '120px or 30%')\n */\n maxHeight?: string;\n }>(),\n {\n modelValue: true,\n type: undefined,\n label: undefined,\n icon: undefined,\n closeable: undefined,\n monospace: undefined,\n whiteSpacePre: undefined,\n maxHeight: undefined,\n },\n);\n\nconst iconMap = {\n success: \"success\",\n warn: \"warning\",\n info: \"edit\",\n error: \"error\",\n};\n</script>\n\n<template>\n <div\n v-if=\"modelValue\"\n data-testid=\"pl-alert\"\n class=\"pl-alert\"\n :style=\"{ maxHeight }\"\n :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n >\n <div v-if=\"icon && type\" data-testid=\"pl-alert-icon\" class=\"pl-alert__icon\">\n <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n </div>\n <div class=\"pl-alert__main\">\n <label v-if=\"label\" data-testid=\"pl-alert-label\">{{ label }}</label>\n <div data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\"><slot /></div>\n </div>\n <PlCloseModalBtn\n v-if=\"closeable\"\n data-testid=\"pl-alert-close\"\n class=\"pl-alert__close-btn\"\n @click=\"$emit('update:modelValue', false)\"\n />\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"PlAlert.js","names":["_sfc_main","PlAlert_vue_vue_type_script_setup_true_lang_default","PlAlert_default"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport type { MaskIconName24 } from \"../../types\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\ndefineEmits<{\n /**\n * Emitted when the model value is updated, typically when the close button is clicked.\n *\n * @param value - The new value of the model, generally `false` when the alert is closed.\n */\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineSlots<{\n /** The alert text; the alert is the label alone without it. */\n default?: () => unknown;\n /** Content in place of the `label` text, such as a control that folds the alert. */\n label?: () => unknown;\n}>();\n\nwithDefaults(\n defineProps<{\n /**\n * Controls the visibility of the alert component. If `true`, the alert is visible.\n *\n * @default true\n */\n modelValue?: boolean;\n /**\n * The type of alert, which determines the alert's style and icon.\n * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n */\n type?: \"success\" | \"info\" | \"warn\" | \"error\";\n /**\n * An optional label that appears at the top of the alert.\n */\n label?: string;\n /**\n * If `true`, an icon corresponding to the alert type is displayed.\n */\n icon?: boolean;\n /**\n * If `true`, a close button is displayed in the alert, allowing the user to close it.\n */\n closeable?: boolean;\n /**\n * If `true`, the alert text is displayed in a monospace font.\n */\n monospace?: boolean;\n /**\n * If `true`, the alert content will preserve whitespace and line breaks.\n */\n whiteSpacePre?: boolean;\n\n /**\n * Max height (css value like '120px or 30%')\n */\n maxHeight?: string;\n }>(),\n {\n modelValue: true,\n type: undefined,\n label: undefined,\n icon: undefined,\n closeable: undefined,\n monospace: undefined,\n whiteSpacePre: undefined,\n maxHeight: undefined,\n },\n);\n\nconst iconMap = {\n success: \"success\",\n warn: \"warning\",\n info: \"edit\",\n error: \"error\",\n} satisfies Record<string, MaskIconName24>;\n</script>\n\n<template>\n <div\n v-if=\"modelValue\"\n data-testid=\"pl-alert\"\n class=\"pl-alert\"\n :style=\"{ maxHeight }\"\n :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n >\n <div\n v-if=\"icon && type\"\n data-testid=\"pl-alert-icon\"\n class=\"pl-alert__icon\"\n :class=\"{ 'pl-alert__icon--text': !label && !$slots.label }\"\n >\n <PlIcon24 :name=\"iconMap[type]\" />\n </div>\n <div class=\"pl-alert__main\">\n <label v-if=\"label || $slots.label\" data-testid=\"pl-alert-label\">\n <slot name=\"label\">{{ label }}</slot>\n </label>\n <div v-if=\"$slots.default\" data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\">\n <slot />\n </div>\n </div>\n <PlCloseModalBtn\n v-if=\"closeable\"\n data-testid=\"pl-alert-close\"\n class=\"pl-alert__close-btn\"\n @click=\"$emit('update:modelValue', false)\"\n />\n </div>\n</template>\n"],"mappings":""}
package/dist/components/PlAlert/PlAlert.vue.d.ts CHANGED
@@ -86,7 +86,10 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
86
86
  monospace: boolean;
87
87
  whiteSpacePre: boolean;
88
88
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
89
- default?: (props: {}) => any;
89
+ /** The alert text; the alert is the label alone without it. */
90
+ default?: () => unknown;
91
+ /** Content in place of the `label` text, such as a control that folds the alert. */
92
+ label?: () => unknown;
90
93
  }>;
91
94
  type __VLS_WithSlots<T, S> = T & {
92
95
  new (): {
package/dist/components/PlAlert/PlAlert.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAlert/PlAlert.vue"],"names":[],"mappings":"AAyGA,OAAO,iBAAiB,CAAC;wBAKJ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYd;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;IAnClB;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;WArBV,MAAM;gBATD,OAAO;UAab,OAAO;UARP,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;eAyBhC,MAAM;eAbN,OAAO;eAIP,OAAO;mBAIH,OAAO;;cA8Hb,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"PlAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAlert/PlAlert.vue"],"names":[],"mappings":"AA2HA,OAAO,iBAAiB,CAAC;wBAOJ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAoBd;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;IAnClB;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;WArBV,MAAM;gBATD,OAAO;UAab,OAAO;UARP,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;eAyBhC,MAAM;eAbN,OAAO;eAIP,OAAO;mBAIH,OAAO;;IAtCzB,+DAA+D;cACrD,MAAM,OAAO;IACvB,oFAAoF;YAC5E,MAAM,OAAO;EAsLnB,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
package/dist/components/PlAlert/PlAlert.vue2.js CHANGED
@@ -1,18 +1,17 @@
1
+ import e from "../PlIcon24/PlIcon24.js";
2
+ import "../PlIcon24/index.js";
1
3
  import './pl-alert.css';/* empty css */
2
- import e from "../../utils/PlCloseModalBtn.js";
3
- import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
4
+ import t from "../../utils/PlCloseModalBtn.js";
5
+ import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
4
6
  // src/components/PlAlert/PlAlert.vue?vue&type=script&setup=true&lang.ts
5
- var d = {
6
- key: 0,
7
- "data-testid": "pl-alert-icon",
8
- class: "pl-alert__icon"
9
- }, f = { class: "pl-alert__main" }, p = {
7
+ var h = { class: "pl-alert__main" }, g = {
10
8
  key: 0,
11
9
  "data-testid": "pl-alert-label"
12
- }, m = {
10
+ }, _ = {
11
+ key: 1,
13
12
  "data-testid": "pl-alert-message",
14
13
  class: "pl-alert__main__text"
15
- }, h = /*@__PURE__*/ a({
14
+ }, v = /*@__PURE__*/ c({
16
15
  name: "PlAlert",
17
16
  props: {
18
17
  modelValue: {
@@ -40,33 +39,37 @@ var d = {
40
39
  maxHeight: { default: void 0 }
41
40
  },
42
41
  emits: ["update:modelValue"],
43
- setup(a) {
44
- let h = {
42
+ setup(c) {
43
+ let v = {
45
44
  success: "success",
46
45
  warn: "warning",
47
46
  info: "edit",
48
47
  error: "error"
49
48
  };
50
- return (g, _) => a.modelValue ? (c(), r("div", {
49
+ return (y, b) => c.modelValue ? (d(), i("div", {
51
50
  key: 0,
52
51
  "data-testid": "pl-alert",
53
- class: o(["pl-alert", [{
54
- monospace: a.monospace,
55
- whiteSpacePre: a.whiteSpacePre
56
- }, a.type ? `pl-alert__${a.type}` : ""]]),
57
- style: s({ maxHeight: a.maxHeight })
52
+ class: l(["pl-alert", [{
53
+ monospace: c.monospace,
54
+ whiteSpacePre: c.whiteSpacePre
55
+ }, c.type ? `pl-alert__${c.type}` : ""]]),
56
+ style: u({ maxHeight: c.maxHeight })
58
57
  }, [
59
- a.icon && a.type ? (c(), r("div", d, [i("div", { class: o(`icon-24 icon-${h[a.type]}`) }, null, 2)])) : n("", !0),
60
- i("div", f, [a.label ? (c(), r("label", p, u(a.label), 1)) : n("", !0), i("div", m, [l(g.$slots, "default")])]),
61
- a.closeable ? (c(), t(e, {
58
+ c.icon && c.type ? (d(), i("div", {
59
+ key: 0,
60
+ "data-testid": "pl-alert-icon",
61
+ class: l(["pl-alert__icon", { "pl-alert__icon--text": !c.label && !y.$slots.label }])
62
+ }, [s(m(e), { name: v[c.type] }, null, 8, ["name"])], 2)) : r("", !0),
63
+ a("div", h, [c.label || y.$slots.label ? (d(), i("label", g, [f(y.$slots, "label", {}, () => [o(p(c.label), 1)])])) : r("", !0), y.$slots.default ? (d(), i("div", _, [f(y.$slots, "default")])) : r("", !0)]),
64
+ c.closeable ? (d(), n(t, {
62
65
  key: 1,
63
66
  "data-testid": "pl-alert-close",
64
67
  class: "pl-alert__close-btn",
65
- onClick: _[0] ||= (e) => g.$emit("update:modelValue", !1)
66
- })) : n("", !0)
67
- ], 6)) : n("", !0);
68
+ onClick: b[0] ||= (e) => y.$emit("update:modelValue", !1)
69
+ })) : r("", !0)
70
+ ], 6)) : r("", !0);
68
71
  }
69
72
  });
70
- export { h as default };
73
+ export { v as default };
71
74
 
72
75
  //# sourceMappingURL=PlAlert.vue2.js.map
package/dist/components/PlAlert/PlAlert.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_createCommentVNode","_toDisplayString","_renderSlot","_createBlock","PlCloseModalBtn","PlCloseModalBtn_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","PlAlert_vue_vue_type_script_setup_true_lang_default","iconMap","__props","openBlock","createElementBlock","normalizeClass","normalizeStyle","createElementVNode","createCommentVNode","toDisplayString","renderSlot","_ctx","createBlock","_cache"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n /**\n * Emitted when the model value is updated, typically when the close button is clicked.\n *\n * @param value - The new value of the model, generally `false` when the alert is closed.\n */\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n defineProps<{\n /**\n * Controls the visibility of the alert component. If `true`, the alert is visible.\n *\n * @default true\n */\n modelValue?: boolean;\n /**\n * The type of alert, which determines the alert's style and icon.\n * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n */\n type?: \"success\" | \"info\" | \"warn\" | \"error\";\n /**\n * An optional label that appears at the top of the alert.\n */\n label?: string;\n /**\n * If `true`, an icon corresponding to the alert type is displayed.\n */\n icon?: boolean;\n /**\n * If `true`, a close button is displayed in the alert, allowing the user to close it.\n */\n closeable?: boolean;\n /**\n * If `true`, the alert text is displayed in a monospace font.\n */\n monospace?: boolean;\n /**\n * If `true`, the alert content will preserve whitespace and line breaks.\n */\n whiteSpacePre?: boolean;\n\n /**\n * Max height (css value like '120px or 30%')\n */\n maxHeight?: string;\n }>(),\n {\n modelValue: true,\n type: undefined,\n label: undefined,\n icon: undefined,\n closeable: undefined,\n monospace: undefined,\n whiteSpacePre: undefined,\n maxHeight: undefined,\n },\n);\n\nconst iconMap = {\n success: \"success\",\n warn: \"warning\",\n info: \"edit\",\n error: \"error\",\n};\n</script>\n\n<template>\n <div\n v-if=\"modelValue\"\n data-testid=\"pl-alert\"\n class=\"pl-alert\"\n :style=\"{ maxHeight }\"\n :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n >\n <div v-if=\"icon && type\" data-testid=\"pl-alert-icon\" class=\"pl-alert__icon\">\n <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n </div>\n <div class=\"pl-alert__main\">\n <label v-if=\"label\" data-testid=\"pl-alert-label\">{{ label }}</label>\n <div data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\"><slot /></div>\n </div>\n <PlCloseModalBtn\n v-if=\"closeable\"\n data-testid=\"pl-alert-close\"\n class=\"pl-alert__close-btn\"\n @click=\"$emit('update:modelValue', false)\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqER,IAAMiB,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;EACT;E,iBAKUC,EAAA,cADRjB,EAAA,GAAAC,EAoBM,OAAA;;GAlBJ,eAAY;GACZ,OAAKC,EAAA,CAAC,YAAU,CAAA;IAAA,WAELe,EAAA;IAAS,eAAEA,EAAA;GAAa,GAAIA,EAAA,OAAI,aAAgBA,EAAA,SAAI,EAAA,CAAA,CAAA;GAD9D,OAAKd,EAAA,EAAA,WAAIc,EAAA,UAAS,CAAA;;GAGRA,EAAA,QAAQA,EAAA,QAAnBjB,EAAA,GAAAC,EAEM,OAFNU,GAEM,CADJP,EAAgD,OAAA,EAA1C,OAAKF,EAAA,gBAAkBc,EAAQC,EAAA,OAAI,E;GAE3Cb,EAGM,OAHNQ,GAGM,CAFSK,EAAA,SAAbjB,EAAA,GAAAC,EAAoE,SAApEY,GAAoEP,EAAhBW,EAAA,KAAK,GAAA,CAAA,K,WACzDb,EAA+E,OAA/EU,GAA+E,CAAdP,EAAQmB,EAAA,QAAA,SAAA,C;GAGnET,EAAA,aADRjB,EAAA,GAAAQ,EAKEC,GAAA;;IAHA,eAAY;IACZ,OAAM;IACL,SAAK,AAAAmB,EAAA,QAAA,MAAE7B,EAAAA,MAAK,qBAAA,EAAA"}
1
+ {"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots","$emit","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createVNode","_unref","PlIcon24","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","_createBlock","PlCloseModalBtn","PlIcon24_default","PlCloseModalBtn_default","_hoisted_1","_hoisted_2","_hoisted_3","PlAlert_vue_vue_type_script_setup_true_lang_default","iconMap","__props","openBlock","createElementBlock","normalizeClass","normalizeStyle","_ctx","createVNode","unref","createCommentVNode","createElementVNode","renderSlot","createTextVNode","toDisplayString","createBlock","_cache"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport type { MaskIconName24 } from \"../../types\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\ndefineEmits<{\n /**\n * Emitted when the model value is updated, typically when the close button is clicked.\n *\n * @param value - The new value of the model, generally `false` when the alert is closed.\n */\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineSlots<{\n /** The alert text; the alert is the label alone without it. */\n default?: () => unknown;\n /** Content in place of the `label` text, such as a control that folds the alert. */\n label?: () => unknown;\n}>();\n\nwithDefaults(\n defineProps<{\n /**\n * Controls the visibility of the alert component. If `true`, the alert is visible.\n *\n * @default true\n */\n modelValue?: boolean;\n /**\n * The type of alert, which determines the alert's style and icon.\n * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n */\n type?: \"success\" | \"info\" | \"warn\" | \"error\";\n /**\n * An optional label that appears at the top of the alert.\n */\n label?: string;\n /**\n * If `true`, an icon corresponding to the alert type is displayed.\n */\n icon?: boolean;\n /**\n * If `true`, a close button is displayed in the alert, allowing the user to close it.\n */\n closeable?: boolean;\n /**\n * If `true`, the alert text is displayed in a monospace font.\n */\n monospace?: boolean;\n /**\n * If `true`, the alert content will preserve whitespace and line breaks.\n */\n whiteSpacePre?: boolean;\n\n /**\n * Max height (css value like '120px or 30%')\n */\n maxHeight?: string;\n }>(),\n {\n modelValue: true,\n type: undefined,\n label: undefined,\n icon: undefined,\n closeable: undefined,\n monospace: undefined,\n whiteSpacePre: undefined,\n maxHeight: undefined,\n },\n);\n\nconst iconMap = {\n success: \"success\",\n warn: \"warning\",\n info: \"edit\",\n error: \"error\",\n} satisfies Record<string, MaskIconName24>;\n</script>\n\n<template>\n <div\n v-if=\"modelValue\"\n data-testid=\"pl-alert\"\n class=\"pl-alert\"\n :style=\"{ maxHeight }\"\n :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n >\n <div\n v-if=\"icon && type\"\n data-testid=\"pl-alert-icon\"\n class=\"pl-alert__icon\"\n :class=\"{ 'pl-alert__icon--text': !label && !$slots.label }\"\n >\n <PlIcon24 :name=\"iconMap[type]\" />\n </div>\n <div class=\"pl-alert__main\">\n <label v-if=\"label || $slots.label\" data-testid=\"pl-alert-label\">\n <slot name=\"label\">{{ label }}</slot>\n </label>\n <div v-if=\"$slots.default\" data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\">\n <slot />\n </div>\n </div>\n <PlCloseModalBtn\n v-if=\"closeable\"\n data-testid=\"pl-alert-close\"\n class=\"pl-alert__close-btn\"\n @click=\"$emit('update:modelValue', false)\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ER,IAAMsB,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;EACT;E,iBAKUC,EAAA,cADRrB,EAAA,GAAAC,EA6BM,OAAA;;GA3BJ,eAAY;GACZ,OAAKC,EAAA,CAAC,YAAU,CAAA;IAAA,WAELmB,EAAA;IAAS,eAAEA,EAAA;GAAa,GAAIA,EAAA,OAAI,aAAgBA,EAAA,SAAI,EAAA,CAAA,CAAA;GAD9D,OAAKlB,EAAA,EAAA,WAAIkB,EAAA,UAAS,CAAA;;GAIXA,EAAA,QAAQA,EAAA,QADhBrB,EAAA,GAAAC,EAOM,OAAA;;IALJ,eAAY;IACZ,OAAKC,EAAA,CAAC,kBAAgB,EAAA,wBAAA,CACamB,EAAA,SAAK,CAAKvB,EAAAA,OAAO,MAAK,CAAA,CAAA;G,IAEzDM,EAAkCC,EAAAC,CAAA,GAAA,EAAvB,MAAMc,EAAQC,EAAA,M;GAE3Bb,EAOM,OAPNQ,GAOM,CANSK,EAAA,SAASvB,EAAAA,OAAO,SAA7BE,EAAA,GAAAC,EAEQ,SAFRgB,GAEQ,CADNR,EAAqCiB,EAAA,QAAA,SAAA,CAAA,SAAA,CAAfhB,EAAAC,EAAAU,EAAA,KAAK,GAAA,CAAA,C,mBAElBvB,EAAAA,OAAO,WAAlBE,EAAA,GAAAC,EAEM,OAFNiB,GAEM,CADJT,EAAQiB,EAAA,QAAA,SAAA,C;GAIJL,EAAA,aADRrB,EAAA,GAAAY,EAKEC,GAAA;;IAHA,eAAY;IACZ,OAAM;IACL,SAAK,AAAAsB,EAAA,QAAA,MAAEpC,EAAAA,MAAK,qBAAA,EAAA"}
package/dist/components/PlAlert/pl-alert.css CHANGED
@@ -1 +1 @@
1
- .pl-alert{--text-font-family:var(--font-family-base);--text-white-space:normal;--indent:24px;border:1px solid var(--border-color-default);color:var(--txt-01);border-radius:6px;flex-wrap:nowrap;gap:12px;padding:12px;display:flex;position:relative}.pl-alert.monospace{--text-font-family:var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space:pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{width:24px}.pl-alert__main{flex-direction:column;flex:1;gap:6px;width:100%;min-height:24px;display:flex;overflow:hidden}.pl-alert__main label{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);--thumb-color:var(--ic-02);flex:1;max-width:100%;overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-alert__close-btn{position:absolute;top:4px;right:12px}
1
+ .pl-alert{--text-font-family:var(--font-family-base);--text-white-space:normal;--indent:24px;border:1px solid var(--border-color-default);color:var(--txt-01);border-radius:6px;flex-wrap:nowrap;gap:12px;padding:12px;display:flex;position:relative}.pl-alert.monospace{--text-font-family:var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space:pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{--icon-color:var(--ic-01);width:24px;height:24px}.pl-alert__icon--text{margin-top:-2px}.pl-alert__main{flex-direction:column;flex:1;gap:6px;width:100%;min-height:24px;display:flex;overflow:hidden}.pl-alert__main label{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);--thumb-color:var(--ic-02);flex:1;max-width:100%;overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-alert__close-btn{position:absolute;top:4px;right:12px}
package/dist/components/PlDropdown/PlDropdown.js CHANGED
@@ -1,6 +1,7 @@
1
- import e from "./PlDropdown.vue2.js";
2
- // src/components/PlDropdown/PlDropdown.vue
3
- var t = e;
4
- export { t as default };
1
+ import e from "../../_virtual/_plugin-vue_export-helper.js";
2
+ import t from "./PlDropdown.vue2.js";
3
+ import n from "./PlDropdown.style.js";
4
+ var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
5
+ export { r as default };
5
6
 
6
7
  //# sourceMappingURL=PlDropdown.js.map
package/dist/components/PlDropdown/PlDropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlDropdown.js","names":["_sfc_main","PlDropdown_vue_vue_type_script_setup_true_lang_default","PlDropdown_default"],"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 { PlColumnLabel } from \"../PlColumnLabel\";\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 * Text shown in the field when `modelValue` has no matching option — e.g. its\n * upstream block was deleted. Rendered italic in error color.\n */\n missingValueLabel?: 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?:\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"middle\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n missingValueLabel: \"Value not available\",\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 hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n // The field renders the missing state via `missingValueLabel`; no need to\n // duplicate it as a helper error.\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 selectedOption = computed(() =>\n unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n if (data.open) return undefined;\n if (isMissing.value) return props.missingValueLabel;\n if (textValue.value === undefined) return undefined;\n const hint = selectedOption.value?.linkHint;\n return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && hasValue.value) {\n return \"\";\n }\n\n return textValue.value ? String(textValue.value) : props.placeholder;\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 (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\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\" data-testid=\"pl-dropdown\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n data-testid=\"pl-dropdown-control\"\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\" :title=\"fieldTitle\">\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 data-testid=\"pl-dropdown-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n <LongText\n v-if=\"isMissing\"\n class=\"input-value--missing\"\n data-testid=\"pl-dropdown-value-missing\"\n >\n {{ missingValueLabel }}\n </LongText>\n <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n <LongText>{{ textValue }}</LongText>\n </PlColumnLabel>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-dropdown-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown__arrow-wrapper\"\n data-testid=\"pl-dropdown-arrow\"\n @click.stop=\"toggleOpen\"\n >\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\" data-testid=\"pl-dropdown-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"$slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-tooltip\"\n >\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\" data-testid=\"pl-dropdown-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n class=\"pl-dropdown__helper\"\n data-testid=\"pl-dropdown-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"PlDropdown.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlDropdown_vue_vue_type_script_setup_true_lang_default","PlDropdown_vue_vue_type_style_index_0_lang_module_default","PlDropdown_default","\"$style\""],"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 { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\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 { PlColumnLabel } from \"../PlColumnLabel\";\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 * Text shown in the field when `modelValue` has no matching option — e.g. its\n * upstream block was deleted. Rendered italic in error color. One text for every such value,\n * or a function giving it per value. By default, the value a column value id picks, marked\n * as not available, or \"Value not available\".\n */\n missingValueLabel?: MissingValueLabel;\n /**\n * Explains a selected value missing from the options in a tooltip over it: one text for every\n * such value, or a function giving the content per value.\n */\n missingValueTooltip?: MissingValueTooltip;\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?:\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"middle\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n missingValueLabel: undefined,\n missingValueTooltip: undefined,\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 hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n // The field renders the missing state via `missingValueLabel`; no need to\n // duplicate it as a helper error.\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 selectedOption = computed(() =>\n unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => {\n const option = selectedOption.value;\n if (option !== undefined) return option.label;\n // A picked column value is shown by its own label while the options load.\n return isLoadingOptions.value ? pickedValueText(props.modelValue) : undefined;\n});\n\nconst missingText = computed(() => missingValueText(props.modelValue, props.missingValueLabel));\n\nconst missingHint = computed(() =>\n isMissing.value ? missingValueTooltip(props.modelValue, props.missingValueTooltip) : undefined,\n);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover. A missing value with a hint has its own tooltip.\nconst fieldTitle = computed(() => {\n if (data.open) return undefined;\n if (isMissing.value) return missingHint.value === undefined ? missingText.value : undefined;\n if (textValue.value === undefined) return undefined;\n const hint = selectedOption.value?.linkHint;\n return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && hasValue.value) {\n return \"\";\n }\n\n return textValue.value ? String(textValue.value) : props.placeholder;\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 (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\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\" data-testid=\"pl-dropdown\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n data-testid=\"pl-dropdown-control\"\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\" :title=\"fieldTitle\">\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 data-testid=\"pl-dropdown-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n <PlTooltip\n v-if=\"isMissing && missingHint !== undefined\"\n :class=\"$style.hint\"\n position=\"top\"\n data-testid=\"pl-dropdown-value-hint\"\n >\n <LongText class=\"input-value--missing\" data-testid=\"pl-dropdown-value-missing\">\n {{ missingText }}\n </LongText>\n <template #tooltip>\n <component :is=\"missingHint\" />\n </template>\n </PlTooltip>\n <LongText\n v-else-if=\"isMissing\"\n class=\"input-value--missing\"\n data-testid=\"pl-dropdown-value-missing\"\n >\n {{ missingText }}\n </LongText>\n <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n <LongText>{{ textValue }}</LongText>\n </PlColumnLabel>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-dropdown-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown__arrow-wrapper\"\n data-testid=\"pl-dropdown-arrow\"\n @click.stop=\"toggleOpen\"\n >\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\" data-testid=\"pl-dropdown-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"$slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-tooltip\"\n >\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\" data-testid=\"pl-dropdown-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n class=\"pl-dropdown__helper\"\n data-testid=\"pl-dropdown-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n\n<style module>\n.hint {\n min-width: 0;\n pointer-events: auto;\n}\n</style>\n"],"mappings":""}
package/dist/components/PlDropdown/PlDropdown.style.css ADDED
@@ -0,0 +1 @@
1
+ ._hint_2mjeo_2{pointer-events:auto;min-width:0}
package/dist/components/PlDropdown/PlDropdown.style.js ADDED
@@ -0,0 +1,5 @@
1
+ import './PlDropdown.style.css';// src/components/PlDropdown/PlDropdown.vue?vue&type=style&index=0&lang.module.css
2
+ var e = "_hint_2mjeo_2", t = { hint: e };
3
+ export { t as default, e as hint };
4
+
5
+ //# sourceMappingURL=PlDropdown.style.js.map