@milaboratories/uikit 2.16.2 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/.turbo/turbo-build.log +30 -22
  2. package/.turbo/turbo-formatter$colon$check.log +1 -1
  3. package/.turbo/turbo-linter$colon$check.log +1 -1
  4. package/CHANGELOG.md +33 -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 +19 -18
  9. package/dist/components/PlAlert/PlAlert.vue2.js.map +1 -1
  10. package/dist/components/PlDropdown/PlDropdown.js +5 -4
  11. package/dist/components/PlDropdown/PlDropdown.js.map +1 -1
  12. package/dist/components/PlDropdown/PlDropdown.style.css +1 -0
  13. package/dist/components/PlDropdown/PlDropdown.style.js +5 -0
  14. package/dist/components/PlDropdown/PlDropdown.style.js.map +1 -0
  15. package/dist/components/PlDropdown/PlDropdown.vue.d.ts +10 -2
  16. package/dist/components/PlDropdown/PlDropdown.vue.d.ts.map +1 -1
  17. package/dist/components/PlDropdown/PlDropdown.vue2.js +136 -110
  18. package/dist/components/PlDropdown/PlDropdown.vue2.js.map +1 -1
  19. package/dist/components/PlDropdownMulti/PlDropdownMulti.js.map +1 -1
  20. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts +10 -2
  21. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts.map +1 -1
  22. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js +123 -84
  23. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map +1 -1
  24. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js.map +1 -1
  25. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts +12 -5
  26. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts.map +1 -1
  27. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js +8 -1
  28. package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js.map +1 -1
  29. package/dist/components/PlDropdownRef/PlDropdownRef.js.map +1 -1
  30. package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts +8 -2
  31. package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts.map +1 -1
  32. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js +8 -1
  33. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map +1 -1
  34. package/dist/components/PlTooltip/PlTooltip.js.map +1 -1
  35. package/dist/components/PlTooltip/PlTooltip.style.css +1 -1
  36. package/dist/components/PlTooltip/PlTooltip.style.js +1 -1
  37. package/dist/components/PlTooltip/PlTooltip.style.js.map +1 -1
  38. package/dist/components/PlTooltip/PlTooltip.vue.d.ts.map +1 -1
  39. package/dist/components/PlTooltip/PlTooltip.vue2.js +1 -1
  40. package/dist/components/PlTooltip/PlTooltip.vue2.js.map +1 -1
  41. package/dist/components/PlValueLabel/PlValueLabel.js +7 -0
  42. package/dist/components/PlValueLabel/PlValueLabel.js.map +1 -0
  43. package/dist/components/PlValueLabel/PlValueLabel.style.css +1 -0
  44. package/dist/components/PlValueLabel/PlValueLabel.style.js +5 -0
  45. package/dist/components/PlValueLabel/PlValueLabel.style.js.map +1 -0
  46. package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts +45 -0
  47. package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts.map +1 -0
  48. package/dist/components/PlValueLabel/PlValueLabel.vue2.js +37 -0
  49. package/dist/components/PlValueLabel/PlValueLabel.vue2.js.map +1 -0
  50. package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts +2 -0
  51. package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts.map +1 -0
  52. package/dist/components/PlValueLabel/index.d.ts +2 -0
  53. package/dist/components/PlValueLabel/index.d.ts.map +1 -0
  54. package/dist/components/PlValueLabel/index.js +1 -0
  55. package/dist/helpers/columnValue.d.ts +25 -0
  56. package/dist/helpers/columnValue.d.ts.map +1 -0
  57. package/dist/helpers/columnValue.js +17 -0
  58. package/dist/helpers/columnValue.js.map +1 -0
  59. package/dist/index.d.ts +2 -0
  60. package/dist/index.d.ts.map +1 -1
  61. package/dist/index.js +32 -30
  62. package/dist/index.js.map +1 -1
  63. package/package.json +2 -2
  64. package/src/components/PlAlert/PlAlert.vue +13 -2
  65. package/src/components/PlDropdown/PlDropdown.vue +49 -8
  66. package/src/components/PlDropdown/__tests__/PlDropdown.spec.ts +95 -0
  67. package/src/components/PlDropdownMulti/PlDropdownMulti.vue +50 -9
  68. package/src/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.ts +47 -0
  69. package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue +10 -3
  70. package/src/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.ts +2 -2
  71. package/src/components/PlDropdownRef/PlDropdownRef.vue +10 -3
  72. package/src/components/PlDropdownRef/__tests__/PlDropdownRef.spec.ts +2 -2
  73. package/src/components/PlTooltip/PlTooltip.vue +1 -0
  74. package/src/components/PlValueLabel/PlValueLabel.vue +80 -0
  75. package/src/components/PlValueLabel/__tests__/PlValueLabel.spec.ts +64 -0
  76. package/src/components/PlValueLabel/index.ts +1 -0
  77. package/src/helpers/columnValue.ts +43 -0
  78. package/src/index.ts +2 -0
@@ -0,0 +1,25 @@
1
+ import { FunctionalComponent } from 'vue';
2
+ /**
3
+ * Text shown in place of a selected value missing from its options: one for every such value,
4
+ * or one per value, `undefined` leaving the usual text.
5
+ */
6
+ export type MissingValueLabel = string | ((value: unknown) => string | undefined);
7
+ /**
8
+ * Tooltip over a selected value missing from its options: one text for every such value, or
9
+ * content per value, `undefined` when there is nothing to tell about it.
10
+ */
11
+ export type MissingValueTooltip = string | ((value: unknown) => FunctionalComponent | undefined);
12
+ /**
13
+ * The value a column value id picks, as text; `undefined` for any other value. A picked value
14
+ * keeps a readable label while the options that would carry it are not loaded or no longer
15
+ * hold it.
16
+ */
17
+ export declare function pickedValueText(value: unknown): string | undefined;
18
+ /**
19
+ * Text shown for a selected value missing from the options: the one `label` gives for it, else
20
+ * the picked value of a column value id marked as not available, else a generic one.
21
+ */
22
+ export declare function missingValueText(value: unknown, label: MissingValueLabel | undefined): string;
23
+ /** Content of the tooltip `tooltip` gives over a selected value missing from the options. */
24
+ export declare function missingValueTooltip(value: unknown, tooltip: MissingValueTooltip | undefined): FunctionalComponent | undefined;
25
+ //# sourceMappingURL=columnValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"columnValue.d.ts","sourceRoot":"","sources":["../../src/helpers/columnValue.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,KAAK,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAElF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,mBAAmB,GAAG,SAAS,CAAC,CAAC;AAEjG;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAElE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAK7F;AAED,6FAA6F;AAC7F,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,mBAAmB,GAAG,SAAS,GACvC,mBAAmB,GAAG,SAAS,CAGjC"}
@@ -0,0 +1,17 @@
1
+ import { columnValueLabel as e, isColumnValueId as t } from "@platforma-sdk/model";
2
+ // src/helpers/columnValue.ts
3
+ function n(n) {
4
+ return t(n) ? e(n) : void 0;
5
+ }
6
+ function r(e, t) {
7
+ let r = typeof t == "function" ? t(e) : t;
8
+ if (r !== void 0) return r;
9
+ let i = n(e);
10
+ return i === void 0 ? "Value not available" : `${i} — not available`;
11
+ }
12
+ function i(e, t) {
13
+ return typeof t == "string" ? () => t : t?.(e);
14
+ }
15
+ export { r as missingValueText, i as missingValueTooltip, n as pickedValueText };
16
+
17
+ //# sourceMappingURL=columnValue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"columnValue.js","names":["pickedValueText","isColumnValueId","value","columnValueLabel","missingValueText","given","label","picked","missingValueTooltip","tooltip"],"sources":["../../src/helpers/columnValue.ts"],"sourcesContent":["import { columnValueLabel, isColumnValueId } from \"@platforma-sdk/model\";\nimport type { FunctionalComponent } from \"vue\";\n\n/**\n * Text shown in place of a selected value missing from its options: one for every such value,\n * or one per value, `undefined` leaving the usual text.\n */\nexport type MissingValueLabel = string | ((value: unknown) => string | undefined);\n\n/**\n * Tooltip over a selected value missing from its options: one text for every such value, or\n * content per value, `undefined` when there is nothing to tell about it.\n */\nexport type MissingValueTooltip = string | ((value: unknown) => FunctionalComponent | undefined);\n\n/**\n * The value a column value id picks, as text; `undefined` for any other value. A picked value\n * keeps a readable label while the options that would carry it are not loaded or no longer\n * hold it.\n */\nexport function pickedValueText(value: unknown): string | undefined {\n return isColumnValueId(value) ? columnValueLabel(value) : undefined;\n}\n\n/**\n * Text shown for a selected value missing from the options: the one `label` gives for it, else\n * the picked value of a column value id marked as not available, else a generic one.\n */\nexport function missingValueText(value: unknown, label: MissingValueLabel | undefined): string {\n const given = typeof label === \"function\" ? label(value) : label;\n if (given !== undefined) return given;\n const picked = pickedValueText(value);\n return picked === undefined ? \"Value not available\" : `${picked} — not available`;\n}\n\n/** Content of the tooltip `tooltip` gives over a selected value missing from the options. */\nexport function missingValueTooltip(\n value: unknown,\n tooltip: MissingValueTooltip | undefined,\n): FunctionalComponent | undefined {\n if (typeof tooltip === \"string\") return () => tooltip;\n return tooltip?.(value);\n}\n"],"mappings":";;AAoBA,SAAgBA,EAAgB,GAAoC;CAClE,OAAOC,EAAgBC,CAAK,IAAIC,EAAiBD,CAAK,IAAI,KAAA;AAC5D;AAMA,SAAgBE,EAAiB,GAAgB,GAA8C;CAC7F,IAAMC,IAAQ,OAAOC,KAAU,aAAaA,EAAMJ,CAAK,IAAII;CAC3D,IAAID,MAAU,KAAA,GAAW,OAAOA;CAChC,IAAME,IAASP,EAAgBE,CAAK;CACpC,OAAOK,MAAW,KAAA,IAAY,wBAAwB,GAAGA,EAAO;AAClE;AAGA,SAAgBC,EACd,GACA,GACiC;CAEjC,OADI,OAAOC,KAAY,iBAAuBA,IACvCA,IAAUP,CAAK;AACxB"}
package/dist/index.d.ts CHANGED
@@ -61,6 +61,8 @@ export * from './components/PlTextField';
61
61
  export * from './components/PlToggleSwitch';
62
62
  export * from './components/PlTooltip';
63
63
  export * from './components/PlColumnLabel';
64
+ export * from './components/PlValueLabel';
65
+ export type { MissingValueLabel, MissingValueTooltip } from './helpers/columnValue';
64
66
  export * from './components/PlFileDialog';
65
67
  export * from './components/PlFileInput';
66
68
  export * from './components/PlNotificationAlert';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -133,44 +133,46 @@ import He from "./components/PlTextField/PlTextField.js";
133
133
  import "./components/PlTextField/index.js";
134
134
  import Ue from "./components/PlToggleSwitch/PlToggleSwitch.js";
135
135
  import "./components/PlToggleSwitch/index.js";
136
- import We from "./components/PlFileDialog/PlFileDialog.js";
136
+ import We from "./components/PlValueLabel/PlValueLabel.js";
137
+ import "./components/PlValueLabel/index.js";
138
+ import Ge from "./components/PlFileDialog/PlFileDialog.js";
137
139
  import "./components/PlFileDialog/index.js";
138
- import Ge from "./components/PlFileInput/PlFileInput.js";
140
+ import Ke from "./components/PlFileInput/PlFileInput.js";
139
141
  import "./components/PlFileInput/index.js";
140
- import Ke from "./components/PlNotificationAlert/PlNotificationAlert.js";
142
+ import qe from "./components/PlNotificationAlert/PlNotificationAlert.js";
141
143
  import "./components/PlNotificationAlert/index.js";
142
- import qe from "./components/PlSidebar/PlSidebarGroup.js";
143
- import Je from "./components/PlSidebar/PlSidebarItem.js";
144
+ import Je from "./components/PlSidebar/PlSidebarGroup.js";
145
+ import Ye from "./components/PlSidebar/PlSidebarItem.js";
144
146
  import "./components/PlSidebar/index.js";
145
- import Ye from "./components/PlChartHistogram/PlChartHistogram.js";
147
+ import Xe from "./components/PlChartHistogram/PlChartHistogram.js";
146
148
  import "./components/PlChartHistogram/index.js";
147
- import Xe from "./components/PlChartStackedBar/PlChartStackedBar.js";
148
- import Ze from "./components/PlChartStackedBar/PlChartStackedBarCompact.js";
149
+ import Ze from "./components/PlChartStackedBar/PlChartStackedBar.js";
150
+ import Qe from "./components/PlChartStackedBar/PlChartStackedBarCompact.js";
149
151
  import "./components/PlChartStackedBar/index.js";
150
- import Qe from "./components/PlRadio/PlRadio.js";
151
- import $e from "./components/PlRadio/PlRadioGroup.js";
152
+ import $e from "./components/PlRadio/PlRadio.js";
153
+ import et from "./components/PlRadio/PlRadioGroup.js";
152
154
  import "./components/PlRadio/index.js";
153
- import { categoricalColors as et, magma as tt, palettes as nt, viridis as rt } from "./colors/palette.js";
154
- import { Color as it } from "./colors/color.js";
155
- import { Gradient as at, interpolateColor as ot, normalizeGradient as st } from "./colors/gradient.js";
155
+ import { categoricalColors as tt, magma as nt, palettes as rt, viridis as it } from "./colors/palette.js";
156
+ import { Color as at } from "./colors/color.js";
157
+ import { Gradient as ot, interpolateColor as st, normalizeGradient as ct } from "./colors/gradient.js";
156
158
  import "./colors/index.js";
157
- import { useComponentProp as ct } from "./composition/useComponentProp.js";
158
- import { useConfirm as lt } from "./composition/useConfirm.js";
159
- import { useDraggable as ut } from "./composition/useDraggable.js";
160
- import { useFormState as dt } from "./composition/useFormState.js";
161
- import { useInterval as ft } from "./composition/useInterval.js";
162
- import { usePollingQuery as pt } from "./composition/usePollingQuery.js";
163
- import { useQuery as mt } from "./composition/useQuery.js";
164
- import { useScroll as ht } from "./composition/useScroll.js";
165
- import { useSortable as gt } from "./composition/useSortable.js";
166
- import { useSortable2 as _t } from "./composition/useSortable2.js";
167
- import { computedCached as vt } from "./composition/computedCached.js";
168
- import { filterUiMetadata as yt, getFilterUiMetadata as bt, getFilterUiTypeOptions as xt } from "./composition/filters/metadata.js";
169
- import { watchCached as St } from "./composition/watchCached.js";
170
- import { icons16 as Ct } from "./generated/icons-16.js";
171
- import { icons24 as wt } from "./generated/icons-24.js";
159
+ import { useComponentProp as lt } from "./composition/useComponentProp.js";
160
+ import { useConfirm as ut } from "./composition/useConfirm.js";
161
+ import { useDraggable as dt } from "./composition/useDraggable.js";
162
+ import { useFormState as ft } from "./composition/useFormState.js";
163
+ import { useInterval as pt } from "./composition/useInterval.js";
164
+ import { usePollingQuery as mt } from "./composition/usePollingQuery.js";
165
+ import { useQuery as ht } from "./composition/useQuery.js";
166
+ import { useScroll as gt } from "./composition/useScroll.js";
167
+ import { useSortable as _t } from "./composition/useSortable.js";
168
+ import { useSortable2 as vt } from "./composition/useSortable2.js";
169
+ import { computedCached as yt } from "./composition/computedCached.js";
170
+ import { filterUiMetadata as bt, getFilterUiMetadata as xt, getFilterUiTypeOptions as St } from "./composition/filters/metadata.js";
171
+ import { watchCached as Ct } from "./composition/watchCached.js";
172
+ import { icons16 as wt } from "./generated/icons-16.js";
173
+ import { icons24 as Tt } from "./generated/icons-24.js";
172
174
  // src/index.ts
173
- var Tt = { allCssVariables: z() };
174
- export { it as Color, E as ContextProvider, r as DataTable, Tt as DemoData, T as DropdownListItem, le as DropdownOverlay, at as Gradient, O as LongText, U as PL_PLACEHOLDER_TEXTS, ne as PlAccordion, ie as PlAccordionSection, oe as PlAlert, de as PlAutocomplete, pe as PlAutocompleteMulti, W as PlBlockPage, me as PlBtnAccent, he as PlBtnDanger, ge as PlBtnGhost, _e as PlBtnGroup, $ as PlBtnLink, ye as PlBtnPrimary, ve as PlBtnSecondary, be as PlBtnSplit, Ye as PlChartHistogram, Xe as PlChartStackedBar, Ze as PlChartStackedBarCompact, xe as PlCheckbox, Se as PlCheckboxGroup, fe as PlChip, ae as PlCloseModalBtn, w as PlColumnLabel, J as PlContainer, Ce as PlDialogModal, we as PlDropdown, Te as PlDropdownLegacy, Ee as PlDropdownLine, De as PlDropdownMulti, Oe as PlDropdownMultiRef, ke as PlDropdownRef, Ae as PlEditableTitle, je as PlElementList, Q as PlErrorBoundary, We as PlFileDialog, Ge as PlFileInput, Y as PlGrid, c as PlIcon16, B as PlIcon24, K as PlLoaderCircular, V as PlLoaderLogo, Me as PlLogView, c as PlMaskIcon16, B as PlMaskIcon24, Ke as PlNotificationAlert, Ne as PlNumberField, H as PlPlaceholder, Pe as PlProgressBar, Fe as PlProgressCell, Le as PlPureSlideModal, Qe as PlRadio, $e as PlRadioGroup, X as PlRow, Ie as PlSearchField, re as PlSectionSeparator, qe as PlSidebarGroup, Je as PlSidebarItem, Re as PlSlideModal, Z as PlSpacer, q as PlSplash, ze as PlStatusTag, s as PlSvg, Be as PlTabs, Ve as PlTextArea, He as PlTextField, Ue as PlToggleSwitch, C as PlTooltip, I as Scrollable, D as Slider, L as SliderRange, R as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, et as categoricalColors, vt as computedCached, f as delay, A as detectOutside, k as downloadContent, j as eventListener, yt as filterUiMetadata, M as getElementScrollPosition, bt as getFilterUiMetadata, xt as getFilterUiTypeOptions, Ct as icons16, wt as icons24, ot as interpolateColor, N as isElementVisible, p as listToOptions, tt as magma, m as makeEaseInOut, h as makeEaseOut, st as normalizeGradient, g as normalizeListOptions, nt as palettes, _ as randomInt, v as randomString, y as requestTick, P as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, ct as useComponentProp, lt as useConfirm, ut as useDraggable, te as useEventListener, dt as useFormState, t as useHover, ft as useInterval, se as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, G as usePlBlockPageTitleTeleportTarget, pt as usePollingQuery, ce as usePosition, mt as useQuery, F as useResizeObserver, ht as useScroll, gt as useSortable, _t as useSortable2, a as useTheme, ue as useWatchFetch, rt as viridis, St as watchCached };
175
+ var Et = { allCssVariables: z() };
176
+ export { at as Color, E as ContextProvider, r as DataTable, Et as DemoData, T as DropdownListItem, le as DropdownOverlay, ot as Gradient, O as LongText, U as PL_PLACEHOLDER_TEXTS, ne as PlAccordion, ie as PlAccordionSection, oe as PlAlert, de as PlAutocomplete, pe as PlAutocompleteMulti, W as PlBlockPage, me as PlBtnAccent, he as PlBtnDanger, ge as PlBtnGhost, _e as PlBtnGroup, $ as PlBtnLink, ye as PlBtnPrimary, ve as PlBtnSecondary, be as PlBtnSplit, Xe as PlChartHistogram, Ze as PlChartStackedBar, Qe as PlChartStackedBarCompact, xe as PlCheckbox, Se as PlCheckboxGroup, fe as PlChip, ae as PlCloseModalBtn, w as PlColumnLabel, J as PlContainer, Ce as PlDialogModal, we as PlDropdown, Te as PlDropdownLegacy, Ee as PlDropdownLine, De as PlDropdownMulti, Oe as PlDropdownMultiRef, ke as PlDropdownRef, Ae as PlEditableTitle, je as PlElementList, Q as PlErrorBoundary, Ge as PlFileDialog, Ke as PlFileInput, Y as PlGrid, c as PlIcon16, B as PlIcon24, K as PlLoaderCircular, V as PlLoaderLogo, Me as PlLogView, c as PlMaskIcon16, B as PlMaskIcon24, qe as PlNotificationAlert, Ne as PlNumberField, H as PlPlaceholder, Pe as PlProgressBar, Fe as PlProgressCell, Le as PlPureSlideModal, $e as PlRadio, et as PlRadioGroup, X as PlRow, Ie as PlSearchField, re as PlSectionSeparator, Je as PlSidebarGroup, Ye as PlSidebarItem, Re as PlSlideModal, Z as PlSpacer, q as PlSplash, ze as PlStatusTag, s as PlSvg, Be as PlTabs, Ve as PlTextArea, He as PlTextField, Ue as PlToggleSwitch, C as PlTooltip, We as PlValueLabel, I as Scrollable, D as Slider, L as SliderRange, R as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, tt as categoricalColors, yt as computedCached, f as delay, A as detectOutside, k as downloadContent, j as eventListener, bt as filterUiMetadata, M as getElementScrollPosition, xt as getFilterUiMetadata, St as getFilterUiTypeOptions, wt as icons16, Tt as icons24, st as interpolateColor, N as isElementVisible, p as listToOptions, nt as magma, m as makeEaseInOut, h as makeEaseOut, ct as normalizeGradient, g as normalizeListOptions, rt as palettes, _ as randomInt, v as randomString, y as requestTick, P as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, lt as useComponentProp, ut as useConfirm, dt as useDraggable, te as useEventListener, ft as useFormState, t as useHover, pt as useInterval, se as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, G as usePlBlockPageTitleTeleportTarget, mt as usePollingQuery, ce as usePosition, ht as useQuery, F as useResizeObserver, gt as useScroll, _t as useSortable, vt as useSortable2, a as useTheme, ue as useWatchFetch, it as viridis, Ct as watchCached };
175
177
 
176
178
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ThemeSwitcher_default","PlSvg_default","PlIcon16_default","PlTooltip_default","PlColumnLabel_default","DropdownListItem_default","ContextProvider_default","Slider_default","LongText_default","Scrollable_default","SliderRange_default","SliderRangeTriple_default","PlIcon24_default","PlLoaderLogo_default","PlPlaceholder_default","PlBlockPage_default","PlLoaderCircular_default","PlSplash_default","PlContainer_default","PlGrid_default","PlRow_default","PlSpacer_default","PlErrorBoundary_default","PlAccordion_default","PlSectionSeparator_default","PlAccordionSection_default","PlCloseModalBtn_default","PlAlert_default","DropdownOverlay_default","PlAutocomplete_default","PlChip_default","PlAutocompleteMulti_default","PlBtnAccent_default","PlBtnDanger_default","PlBtnGhost_default","PlBtnGroup_default","PlBtnSecondary_default","PlBtnLink_default","PlBtnPrimary_default","PlBtnSplit_default","PlCheckbox_default","PlCheckboxGroup_default","PlDialogModal_default","PlDropdown_default","PlDropdownLegacy_default","PlDropdownLine_default","PlDropdownMulti_default","PlDropdownMultiRef_default","PlDropdownRef_default","PlEditableTitle_default","PlElementList_default","PlLogView_default","PlNumberField_default","PlProgressBar_default","PlProgressCell_default","PlSearchField_default","PlPureSlideModal_default","PlSlideModal_default","PlStatusTag_default","PlTabs_default","PlTextArea_default","PlTextField_default","PlToggleSwitch_default","PlFileDialog_default","PlFileInput_default","PlNotificationAlert_default","PlSidebarGroup_default","PlSidebarItem_default","PlChartHistogram_default","PlChartStackedBar_default","PlChartStackedBarCompact_default","PlRadio_default","PlRadioGroup_default","DemoData","allCssVariables","Color","DataTable_exports","Gradient","PL_PLACEHOLDER_TEXTS","animate","animateInfinite","call","categoricalColors","computedCached","delay","detectOutside","downloadContent","eventListener","filterUiMetadata","getElementScrollPosition","getFilterUiMetadata","getFilterUiTypeOptions","icons16","icons24","interpolateColor","isElementVisible","listToOptions","magma","makeEaseInOut","makeEaseOut","normalizeGradient","normalizeListOptions","palettes","randomInt","randomString","requestTick","scrollIntoView","showContextMenu","throttle","timeout","useClickOutside","useComponentProp","useConfirm","useDraggable","useEventListener","useFormState","useHover","useInterval","useLabelNotch","useLocalStorage","useMouse","useMouseCapture","usePlBlockPageTitleTeleportTarget","usePollingQuery","useElementPosition","useQuery","useResizeObserver","useScroll","useSortable","useSortable2","useTheme","useWatchFetch","viridis","watchCached"],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/**\n * Layout components\n */\n\nexport * from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/**\n * Components\n */\nexport * from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\nexport * from \"./components/PlColumnLabel\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/**\n * Usables\n */\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport * from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/**\n * Utils/Partials\n */\n\nexport * from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/**\n * Technical\n * @TODO move it from here maybe\n */\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type * from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/**\n * @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+JA,IAAMyE,KAAW,EAAE,iBAAiBC,EAAgB,EAAE"}
1
+ {"version":3,"file":"index.js","names":["ThemeSwitcher_default","PlSvg_default","PlIcon16_default","PlTooltip_default","PlColumnLabel_default","DropdownListItem_default","ContextProvider_default","Slider_default","LongText_default","Scrollable_default","SliderRange_default","SliderRangeTriple_default","PlIcon24_default","PlLoaderLogo_default","PlPlaceholder_default","PlBlockPage_default","PlLoaderCircular_default","PlSplash_default","PlContainer_default","PlGrid_default","PlRow_default","PlSpacer_default","PlErrorBoundary_default","PlAccordion_default","PlSectionSeparator_default","PlAccordionSection_default","PlCloseModalBtn_default","PlAlert_default","DropdownOverlay_default","PlAutocomplete_default","PlChip_default","PlAutocompleteMulti_default","PlBtnAccent_default","PlBtnDanger_default","PlBtnGhost_default","PlBtnGroup_default","PlBtnSecondary_default","PlBtnLink_default","PlBtnPrimary_default","PlBtnSplit_default","PlCheckbox_default","PlCheckboxGroup_default","PlDialogModal_default","PlDropdown_default","PlDropdownLegacy_default","PlDropdownLine_default","PlDropdownMulti_default","PlDropdownMultiRef_default","PlDropdownRef_default","PlEditableTitle_default","PlElementList_default","PlLogView_default","PlNumberField_default","PlProgressBar_default","PlProgressCell_default","PlSearchField_default","PlPureSlideModal_default","PlSlideModal_default","PlStatusTag_default","PlTabs_default","PlTextArea_default","PlTextField_default","PlToggleSwitch_default","PlValueLabel_default","PlFileDialog_default","PlFileInput_default","PlNotificationAlert_default","PlSidebarGroup_default","PlSidebarItem_default","PlChartHistogram_default","PlChartStackedBar_default","PlChartStackedBarCompact_default","PlRadio_default","PlRadioGroup_default","DemoData","allCssVariables","Color","DataTable_exports","Gradient","PL_PLACEHOLDER_TEXTS","animate","animateInfinite","call","categoricalColors","computedCached","delay","detectOutside","downloadContent","eventListener","filterUiMetadata","getElementScrollPosition","getFilterUiMetadata","getFilterUiTypeOptions","icons16","icons24","interpolateColor","isElementVisible","listToOptions","magma","makeEaseInOut","makeEaseOut","normalizeGradient","normalizeListOptions","palettes","randomInt","randomString","requestTick","scrollIntoView","showContextMenu","throttle","timeout","useClickOutside","useComponentProp","useConfirm","useDraggable","useEventListener","useFormState","useHover","useInterval","useLabelNotch","useLocalStorage","useMouse","useMouseCapture","usePlBlockPageTitleTeleportTarget","usePollingQuery","useElementPosition","useQuery","useResizeObserver","useScroll","useSortable","useSortable2","useTheme","useWatchFetch","viridis","watchCached"],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/**\n * Layout components\n */\n\nexport * from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/**\n * Components\n */\nexport * from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\nexport * from \"./components/PlColumnLabel\";\nexport * from \"./components/PlValueLabel\";\nexport type { MissingValueLabel, MissingValueTooltip } from \"./helpers/columnValue\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/**\n * Usables\n */\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport * from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/**\n * Utils/Partials\n */\n\nexport * from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/**\n * Technical\n * @TODO move it from here maybe\n */\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type * from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/**\n * @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiKA,IAAM0E,KAAW,EAAE,iBAAiBC,EAAgB,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@milaboratories/uikit",
3
- "version": "2.16.2",
3
+ "version": "2.17.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@milaboratories/helpers": "1.14.6",
19
- "@platforma-sdk/model": "1.86.5",
19
+ "@platforma-sdk/model": "1.88.0",
20
20
  "@types/d3-array": "^3.2.1",
21
21
  "@types/d3-axis": "^3.0.6",
22
22
  "@types/d3-scale": "^4.0.9",
@@ -18,6 +18,13 @@ defineEmits<{
18
18
  (e: "update:modelValue", value: boolean): void;
19
19
  }>();
20
20
 
21
+ defineSlots<{
22
+ /** The alert text; the alert is the label alone without it. */
23
+ default?: () => unknown;
24
+ /** Content in place of the `label` text, such as a control that folds the alert. */
25
+ label?: () => unknown;
26
+ }>();
27
+
21
28
  withDefaults(
22
29
  defineProps<{
23
30
  /**
@@ -89,8 +96,12 @@ const iconMap = {
89
96
  <div :class="`icon-24 icon-${iconMap[type]}`" />
90
97
  </div>
91
98
  <div class="pl-alert__main">
92
- <label v-if="label" data-testid="pl-alert-label">{{ label }}</label>
93
- <div data-testid="pl-alert-message" class="pl-alert__main__text"><slot /></div>
99
+ <label v-if="label || $slots.label" data-testid="pl-alert-label">
100
+ <slot name="label">{{ label }}</slot>
101
+ </label>
102
+ <div v-if="$slots.default" data-testid="pl-alert-message" class="pl-alert__main__text">
103
+ <slot />
104
+ </div>
94
105
  </div>
95
106
  <PlCloseModalBtn
96
107
  v-if="closeable"
@@ -10,6 +10,8 @@ export default {
10
10
  <script lang="ts" setup generic="M = unknown">
11
11
  import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from "vue";
12
12
  import SvgRequired from "../../assets/images/required.svg?raw";
13
+ import { missingValueText, missingValueTooltip, pickedValueText } from "../../helpers/columnValue";
14
+ import type { MissingValueLabel, MissingValueTooltip } from "../../helpers/columnValue";
13
15
  import { getErrorMessage } from "../../helpers/error.ts";
14
16
  import { tap } from "../../helpers/functions";
15
17
  import { deepEqual } from "../../helpers/objects";
@@ -71,9 +73,16 @@ const props = withDefaults(
71
73
  placeholder?: string;
72
74
  /**
73
75
  * Text shown in the field when `modelValue` has no matching option — e.g. its
74
- * upstream block was deleted. Rendered italic in error color.
76
+ * upstream block was deleted. Rendered italic in error color. One text for every such value,
77
+ * or a function giving it per value. By default, the value a column value id picks, marked
78
+ * as not available, or "Value not available".
75
79
  */
76
- missingValueLabel?: string;
80
+ missingValueLabel?: MissingValueLabel;
81
+ /**
82
+ * Explains a selected value missing from the options in a tooltip over it: one text for every
83
+ * such value, or a function giving the content per value.
84
+ */
85
+ missingValueTooltip?: MissingValueTooltip;
77
86
  /**
78
87
  * Enables a button to clear the selected value (default: false)
79
88
  */
@@ -119,7 +128,8 @@ const props = withDefaults(
119
128
  error: undefined,
120
129
  showErrorMessage: true,
121
130
  placeholder: "...",
122
- missingValueLabel: "Value not available",
131
+ missingValueLabel: undefined,
132
+ missingValueTooltip: undefined,
123
133
  clearable: false,
124
134
  required: false,
125
135
  disabled: false,
@@ -210,14 +220,25 @@ const selectedOption = computed(() =>
210
220
  unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),
211
221
  );
212
222
 
213
- const textValue = computed(() => selectedOption.value?.label);
223
+ const textValue = computed(() => {
224
+ const option = selectedOption.value;
225
+ if (option !== undefined) return option.label;
226
+ // A picked column value is shown by its own label while the options load.
227
+ return isLoadingOptions.value ? pickedValueText(props.modelValue) : undefined;
228
+ });
229
+
230
+ const missingText = computed(() => missingValueText(props.modelValue, props.missingValueLabel));
231
+
232
+ const missingHint = computed(() =>
233
+ isMissing.value ? missingValueTooltip(props.modelValue, props.missingValueTooltip) : undefined,
234
+ );
214
235
 
215
236
  // Native tooltip with the full selected value and its link hint. The `.input-value` layer has
216
237
  // `pointer-events: none`, so the title must sit on the field wrapper, which is
217
- // what actually receives the hover.
238
+ // what actually receives the hover. A missing value with a hint has its own tooltip.
218
239
  const fieldTitle = computed(() => {
219
240
  if (data.open) return undefined;
220
- if (isMissing.value) return props.missingValueLabel;
241
+ if (isMissing.value) return missingHint.value === undefined ? missingText.value : undefined;
221
242
  if (textValue.value === undefined) return undefined;
222
243
  const hint = selectedOption.value?.linkHint;
223
244
  return hint ? `${textValue.value}\n${hint}` : String(textValue.value);
@@ -385,12 +406,25 @@ watchPostEffect(() => {
385
406
  />
386
407
 
387
408
  <div v-if="!data.open" class="input-value" data-testid="pl-dropdown-value">
409
+ <PlTooltip
410
+ v-if="isMissing && missingHint !== undefined"
411
+ :class="$style.hint"
412
+ position="top"
413
+ data-testid="pl-dropdown-value-hint"
414
+ >
415
+ <LongText class="input-value--missing" data-testid="pl-dropdown-value-missing">
416
+ {{ missingText }}
417
+ </LongText>
418
+ <template #tooltip>
419
+ <component :is="missingHint" />
420
+ </template>
421
+ </PlTooltip>
388
422
  <LongText
389
- v-if="isMissing"
423
+ v-else-if="isMissing"
390
424
  class="input-value--missing"
391
425
  data-testid="pl-dropdown-value-missing"
392
426
  >
393
- {{ missingValueLabel }}
427
+ {{ missingText }}
394
428
  </LongText>
395
429
  <PlColumnLabel v-else-if="textValue !== undefined" :option="selectedOption">
396
430
  <LongText>{{ textValue }}</LongText>
@@ -459,3 +493,10 @@ watchPostEffect(() => {
459
493
  </div>
460
494
  </div>
461
495
  </template>
496
+
497
+ <style module>
498
+ .hint {
499
+ min-width: 0;
500
+ pointer-events: auto;
501
+ }
502
+ </style>
@@ -1,6 +1,8 @@
1
1
  import { describe, it, expect } from "vitest";
2
2
 
3
3
  import { mount, flushPromises } from "@vue/test-utils";
4
+ import { createColumnValueId, createGlobalPObjectId } from "@platforma-sdk/model";
5
+ import type { MissingValueLabel, MissingValueTooltip } from "../../../helpers/columnValue";
4
6
  import PlDropdown from "../PlDropdown.vue";
5
7
 
6
8
  describe("PlDropdown", () => {
@@ -148,4 +150,97 @@ describe("PlDropdown", () => {
148
150
  await flushPromises();
149
151
  expect(wrapper.props("modelValue")).toBeUndefined();
150
152
  });
153
+
154
+ describe("with a column value id", () => {
155
+ const treated = createColumnValueId({
156
+ column: createGlobalPObjectId("samples", "metadata.condition"),
157
+ value: "treated",
158
+ });
159
+
160
+ it("shows the picked value while options are loading", async () => {
161
+ const wrapper = mount(PlDropdown, { props: { modelValue: treated, options: undefined } });
162
+ await flushPromises();
163
+ expect(wrapper.find(".input-value--missing").exists()).toBe(false);
164
+ expect(wrapper.find("[data-testid='pl-dropdown-value']").text()).toBe("treated");
165
+ expect(wrapper.find("[data-testid='pl-dropdown-loading']").exists()).toBe(true);
166
+ });
167
+
168
+ it("marks the picked value as not available when options lack it", async () => {
169
+ const wrapper = mount(PlDropdown, { props: { modelValue: treated, options: [] } });
170
+ await flushPromises();
171
+ expect(wrapper.find(".input-value--missing").text()).toBe("treated — not available");
172
+ });
173
+
174
+ it("keeps the caller's missingValueLabel", async () => {
175
+ const wrapper = mount(PlDropdown, {
176
+ props: { modelValue: treated, options: [], missingValueLabel: "Gone" },
177
+ });
178
+ await flushPromises();
179
+ expect(wrapper.find(".input-value--missing").text()).toBe("Gone");
180
+ });
181
+
182
+ it("explains a missing value by the hint of the app in a tooltip", async () => {
183
+ const hint: MissingValueTooltip = (value) =>
184
+ value === treated ? () => "Samples does not provide it" : undefined;
185
+ const wrapper = mount(PlDropdown, {
186
+ props: { modelValue: treated, options: [], missingValueTooltip: hint },
187
+ attachTo: document.body,
188
+ });
189
+ await flushPromises();
190
+ expect(
191
+ wrapper.find("[data-testid='pl-dropdown-control'] .pl-dropdown__field").attributes("title"),
192
+ ).toBeUndefined();
193
+
194
+ await wrapper.find("[data-testid='pl-dropdown-value-hint']").trigger("mouseover");
195
+ await new Promise((resolve) => setTimeout(resolve, 200));
196
+ expect(document.body.textContent).toContain("Samples does not provide it");
197
+ wrapper.unmount();
198
+ });
199
+
200
+ it("shows a missing value by the label given for it, as one text or per value", async () => {
201
+ const round = createGlobalPObjectId("samples", "metadata.round");
202
+ const field = async (missingValueLabel: MissingValueLabel) => {
203
+ const wrapper = mount(PlDropdown, {
204
+ props: { modelValue: round, options: [], missingValueLabel },
205
+ });
206
+ await flushPromises();
207
+ return wrapper.find(".input-value--missing").text();
208
+ };
209
+ expect(await field("Gone")).toBe("Gone");
210
+ expect(await field((value) => (value === round ? "Panning Round" : undefined))).toBe(
211
+ "Panning Round",
212
+ );
213
+ expect(await field(() => undefined)).toBe("Value not available");
214
+ });
215
+
216
+ it("shows one tooltip text over a missing value", async () => {
217
+ const wrapper = mount(PlDropdown, {
218
+ props: { modelValue: treated, options: [], missingValueTooltip: "Gone upstream" },
219
+ attachTo: document.body,
220
+ });
221
+ await flushPromises();
222
+ await wrapper.find("[data-testid='pl-dropdown-value-hint']").trigger("mouseover");
223
+ await new Promise((resolve) => setTimeout(resolve, 200));
224
+ expect(document.body.textContent).toContain("Gone upstream");
225
+ wrapper.unmount();
226
+ });
227
+
228
+ it("asks for no hint while the value is among the options", async () => {
229
+ const asked: unknown[] = [];
230
+ const hint: MissingValueTooltip = (value) => {
231
+ asked.push(value);
232
+ return undefined;
233
+ };
234
+ const wrapper = mount(PlDropdown, {
235
+ props: {
236
+ modelValue: treated,
237
+ options: [{ label: "Treated", value: treated }],
238
+ missingValueTooltip: hint,
239
+ },
240
+ });
241
+ await flushPromises();
242
+ expect(asked).toEqual([]);
243
+ expect(wrapper.find("[data-testid='pl-dropdown-value-hint']").exists()).toBe(false);
244
+ });
245
+ });
151
246
  });
@@ -19,6 +19,8 @@ import {
19
19
  watchPostEffect,
20
20
  } from "vue";
21
21
  import SvgRequired from "../../assets/images/required.svg?raw";
22
+ import { missingValueText, missingValueTooltip, pickedValueText } from "../../helpers/columnValue";
23
+ import type { MissingValueLabel, MissingValueTooltip } from "../../helpers/columnValue";
22
24
  import { getErrorMessage } from "../../helpers/error.ts";
23
25
  import { deepEqual, deepIncludes } from "../../helpers/objects";
24
26
  import { normalizeListOptions } from "../../helpers/utils";
@@ -69,9 +71,16 @@ const props = withDefaults(
69
71
  placeholder?: string;
70
72
  /**
71
73
  * Text shown in a chip when a `modelValue` entry is missing from `options` —
72
- * e.g. its upstream source was deleted. Rendered italic in error color.
74
+ * e.g. its upstream source was deleted. Rendered italic in error color. One text for every
75
+ * such value, or a function giving it per value. By default, the value a column value id
76
+ * picks, marked as not available, or "Value not available".
73
77
  */
74
- missingValueLabel?: string;
78
+ missingValueLabel?: MissingValueLabel;
79
+ /**
80
+ * Explains a selected value missing from the options in a tooltip over it: one text for every
81
+ * such value, or a function giving the content per value.
82
+ */
83
+ missingValueTooltip?: MissingValueTooltip;
75
84
  /**
76
85
  * If `true`, the dropdown component is marked as required.
77
86
  */
@@ -100,7 +109,8 @@ const props = withDefaults(
100
109
  helper: undefined,
101
110
  error: undefined,
102
111
  placeholder: "...",
103
- missingValueLabel: "Value not available",
112
+ missingValueLabel: undefined,
113
+ missingValueTooltip: undefined,
104
114
  required: false,
105
115
  disabled: false,
106
116
  options: undefined,
@@ -134,7 +144,8 @@ const normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?
134
144
 
135
145
  const selectedOptionsRef = computed(() => {
136
146
  // While options load (`options === undefined`), hide chips for unresolved values
137
- // to avoid a "missing" flash that resolves once options arrive.
147
+ // to avoid a "missing" flash that resolves once options arrive. A picked column value
148
+ // is shown by its own label meanwhile.
138
149
  const optionsLoaded = props.options !== undefined;
139
150
  return selectedValuesRef.value
140
151
  .map((v) => {
@@ -143,16 +154,20 @@ const selectedOptionsRef = computed(() => {
143
154
  // Found: render the option's own (normalized) label verbatim — matches
144
155
  // PlDropdown. `opt.label` is always a string (possibly ""), never an object,
145
156
  // so there is no raw-value leak to guard against.
146
- return { ...opt, isMissing: false };
157
+ return { ...opt, isMissing: false, hint: undefined };
147
158
  }
148
159
  if (!optionsLoaded) {
149
- return undefined;
160
+ const label = pickedValueText(v);
161
+ return label === undefined
162
+ ? undefined
163
+ : { value: v, label, isMissing: false, hint: undefined };
150
164
  }
151
165
  // Honor empty `missingValueLabel` verbatim — caller's explicit "render nothing".
152
166
  return {
153
167
  value: v,
154
- label: props.missingValueLabel,
168
+ label: missingValueText(v, props.missingValueLabel),
155
169
  isMissing: true,
170
+ hint: missingValueTooltip(v, props.missingValueTooltip),
156
171
  };
157
172
  })
158
173
  .filter((v): v is NonNullable<typeof v> => v !== undefined);
@@ -327,7 +342,20 @@ watchPostEffect(() => {
327
342
  @click.stop="data.open = true"
328
343
  @close="unselectOption(opt.value)"
329
344
  >
330
- {{ opt.label }}
345
+ <!-- The hover stops here: the tooltip of the chip itself would close this one. -->
346
+ <PlTooltip
347
+ v-if="opt.hint !== undefined"
348
+ element="span"
349
+ position="top"
350
+ data-testid="pl-dropdown-multi-chip-hint"
351
+ @mouseover.stop
352
+ >
353
+ <span>{{ opt.label }}</span>
354
+ <template #tooltip>
355
+ <component :is="opt.hint" />
356
+ </template>
357
+ </PlTooltip>
358
+ <template v-else>{{ opt.label }}</template>
331
359
  </PlChip>
332
360
  </div>
333
361
 
@@ -384,7 +412,20 @@ watchPostEffect(() => {
384
412
  small
385
413
  @close="unselectOption(opt.value)"
386
414
  >
387
- {{ opt.label }}
415
+ <!-- The hover stops here: the tooltip of the chip itself would close this one. -->
416
+ <PlTooltip
417
+ v-if="opt.hint !== undefined"
418
+ element="span"
419
+ position="top"
420
+ data-testid="pl-dropdown-multi-chip-hint"
421
+ @mouseover.stop
422
+ >
423
+ <span>{{ opt.label }}</span>
424
+ <template #tooltip>
425
+ <component :is="opt.hint" />
426
+ </template>
427
+ </PlTooltip>
428
+ <template v-else>{{ opt.label }}</template>
388
429
  </PlChip>
389
430
  </div>
390
431
  <DropdownListItem