@milaboratories/uikit 2.15.43 → 2.16.1

package/dist/layout/PlRow/PlRow.js

@@ -1,7 +1,6 @@
 import e from "./PlRow.vue2.js";
-//#region src/layout/PlRow/PlRow.vue
+// src/layout/PlRow/PlRow.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlRow.js.map

package/dist/layout/PlRow/PlRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRow.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlRow.js","names":["_sfc_main","PlRow_vue_vue_type_script_setup_true_lang_default","PlRow_default"],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/layout/PlRow/PlRow.vue2.js

@@ -1,6 +1,6 @@
 import './pl-row.css';/* empty css       */
 import { createElementBlock as e, defineComponent as t, normalizeClass as n, openBlock as r, renderSlot as i } from "vue";
-var a = /* @__PURE__ */ t({
+var a = /*@__PURE__*/ t({
 	name: "PlRow",
 	props: {
 		wrap: { type: Boolean },
@@ -17,7 +17,6 @@ var a = /* @__PURE__ */ t({
 		}, [i(a.$slots, "default")], 2));
 	}
 });
-//#endregion
 export { a as default };
 
 //# sourceMappingURL=PlRow.vue2.js.map

package/dist/layout/PlRow/PlRow.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;;;;;yBAeN,EAMM,OAAA;GALJ,OAAK,EAAA,CAAC,8BAA4B;IAAA,MAExB,EAAA;IAAI,gBAAkB,EAAA;IAAW,CAAA,CAAA;GAD3C,eAAY;MAGZ,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","PlRow_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","renderSlot","_ctx"],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;;;;;E,kBAeNA,EAAA,GAAAC,EAMM,OAAA;GALJ,OAAKC,EAAA,CAAC,8BAA4B;IAAA,MAExBM,EAAA;IAAI,gBAAkBA,EAAA;GAAW,CAAA,CAAA;GAD3C,eAAY;E,IAGZL,EAAQO,EAAA,QAAA,SAAA,C"}

package/dist/layout/PlRow/index.js

@@ -1 +1 @@
-import "./PlRow.js";
+export { default as PlRow } from "./PlRow.js";

package/dist/layout/PlSpacer/PlSpacer.js

@@ -1,7 +1,6 @@
 import e from "./PlSpacer.vue2.js";
-//#region src/layout/PlSpacer/PlSpacer.vue
+// src/layout/PlSpacer/PlSpacer.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlSpacer.js.map

package/dist/layout/PlSpacer/PlSpacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSpacer.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlSpacer.js","names":["_sfc_main","PlSpacer_vue_vue_type_script_setup_true_lang_default","PlSpacer_default"],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":""}

package/dist/layout/PlSpacer/PlSpacer.vue2.js

@@ -1,16 +1,15 @@
 import { createElementBlock as e, defineComponent as t, openBlock as n } from "vue";
-//#region src/layout/PlSpacer/PlSpacer.vue?vue&type=script&setup=true&lang.ts
+// src/layout/PlSpacer/PlSpacer.vue?vue&type=script&setup=true&lang.ts
 var r = {
 	class: "pl-layout-component",
 	"data-testid": "pl-spacer",
 	style: { "flex-grow": "1" }
-}, i = /* @__PURE__ */ t({
+}, i = /*@__PURE__*/ t({
 	name: "PlSpacer",
 	setup(t) {
 		return (t, i) => (n(), e("div", r));
 	}
 });
-//#endregion
 export { i as default };
 
 //# sourceMappingURL=PlSpacer.vue2.js.map

package/dist/layout/PlSpacer/PlSpacer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSpacer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":";;;;;;;CAGE,MAAM;;yBASN,EAAgF,OAAhF,EAAgF"}
+{"version":3,"file":"PlSpacer.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_hoisted_1","PlSpacer_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock"],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":";;;;;;;CAGE,MAAM;;E,kBASNA,EAAA,GAAAC,EAAgF,OAAhFC,CAAgF"}

package/dist/layout/PlSpacer/index.js

@@ -1 +1 @@
-import "./PlSpacer.js";
+export { default as PlSpacer } from "./PlSpacer.js";

package/dist/utils/DoubleContour.js

@@ -1,8 +1,7 @@
 import e from "./DoubleContour.vue2.js";
 import './DoubleContour.style.css';/* empty css                                              */
-//#region src/utils/DoubleContour.vue
+// src/utils/DoubleContour.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=DoubleContour.js.map

package/dist/utils/DoubleContour.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleContour.js","names":[],"sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(\n  defineProps<{\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    groupPosition: undefined,\n  },\n);\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"props.groupPosition\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"DoubleContour.js","names":["_sfc_main","DoubleContour_vue_vue_type_script_setup_true_lang_default","DoubleContour_default"],"sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(\n  defineProps<{\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    groupPosition: undefined,\n  },\n);\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"props.groupPosition\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/utils/DoubleContour.vue2.js

@@ -1,5 +1,5 @@
 import { createElementBlock as e, createElementVNode as t, defineComponent as n, guardReactiveProps as r, normalizeClass as i, normalizeProps as a, openBlock as o, renderSlot as s } from "vue";
-var c = /* @__PURE__ */ n({
+var c = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "DoubleContour",
 	props: { groupPosition: { default: void 0 } },
@@ -8,7 +8,6 @@ var c = /* @__PURE__ */ n({
 		return (n, l) => (o(), e("div", { class: i(["double-contour", c.groupPosition]) }, [t("div", a(r(n.$attrs)), [s(n.$slots, "default")], 16)], 2));
 	}
 });
-//#endregion
 export { c as default };
 
 //# sourceMappingURL=DoubleContour.vue2.js.map

package/dist/utils/DoubleContour.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleContour.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(\n  defineProps<{\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    groupPosition: undefined,\n  },\n);\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"props.groupPosition\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"mappings":";;CAsBE,cAAc;;;;EArBhB,IAAM,IAAQ;yBA0BZ,EAIM,OAAA,EAJD,OAAK,EAAA,CAAC,kBAAyB,EAAM,cAAa,CAAA,EAAA,EAAA,CACrD,EAEM,OAAA,EAAA,EAFOA,EAAAA,OAAM,CAAA,EAAA,CACjB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"DoubleContour.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","DoubleContour_vue_vue_type_script_setup_true_lang_default","props","__props","openBlock","createElementBlock","normalizeClass","createElementVNode","normalizeProps","guardReactiveProps","_ctx","renderSlot"],"sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(\n  defineProps<{\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    groupPosition: undefined,\n  },\n);\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"props.groupPosition\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"mappings":";;CAsBE,cAAc;;;;EArBhB,IAAMS,IAAQC;E,kBA0BZT,EAAA,GAAAC,EAIM,OAAA,EAJD,OAAKC,EAAA,CAAC,kBAAyBM,EAAM,aAAa,CAAA,E,IACrDL,EAEM,OAAAC,EAAAC,EAFON,EAAAA,MAAM,CAAA,GAAA,CACjBO,EAAQU,EAAA,QAAA,SAAA,C"}

package/dist/utils/DropdownOverlay/DropdownOverlay.js

@@ -1,7 +1,6 @@
 import e from "./DropdownOverlay.vue2.js";
-//#region src/utils/DropdownOverlay/DropdownOverlay.vue
+// src/utils/DropdownOverlay/DropdownOverlay.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=DropdownOverlay.js.map

package/dist/utils/DropdownOverlay/DropdownOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.js","names":[],"sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { reactive, ref, toRef, watch } from \"vue\";\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive<Record<string, string | undefined>>({\n  top: undefined,\n  bottom: undefined,\n  left: \"0px\",\n  width: \"0px\",\n});\n\nconst rootRef = toRef(props, \"root\");\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    const bottom = bodyRect.bottom - pos.bottom;\n    const upBottomOffset = bottom + pos.height + gap;\n    optionsStyle.bottom = upBottomOffset + \"px\";\n    optionsStyle.top = undefined;\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n    optionsStyle.bottom = undefined;\n  }\n\n  optionsStyle.left = left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      ref=\"listRef\"\n      v-bind=\"$attrs\"\n      :style=\"optionsStyle\"\n      tabindex=\"-1\"\n      @mousedown.prevent\n      @click.stop\n    >\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownOverlay.js","names":["_sfc_main","DropdownOverlay_vue_vue_type_script_setup_true_lang_default","DropdownOverlay_default"],"sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { reactive, ref, toRef, watch } from \"vue\";\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive<Record<string, string | undefined>>({\n  top: undefined,\n  bottom: undefined,\n  left: \"0px\",\n  width: \"0px\",\n});\n\nconst rootRef = toRef(props, \"root\");\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    const bottom = bodyRect.bottom - pos.bottom;\n    const upBottomOffset = bottom + pos.height + gap;\n    optionsStyle.bottom = upBottomOffset + \"px\";\n    optionsStyle.top = undefined;\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n    optionsStyle.bottom = undefined;\n  }\n\n  optionsStyle.left = left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      ref=\"listRef\"\n      v-bind=\"$attrs\"\n      :style=\"optionsStyle\"\n      tabindex=\"-1\"\n      @mousedown.prevent\n      @click.stop\n    >\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/utils/DropdownOverlay/DropdownOverlay.vue2.js

@@ -2,8 +2,8 @@ import { scrollIntoView as e } from "../../helpers/dom.js";
 import { useElementPosition as t } from "../../composition/usePosition.js";
 import { Teleport as n, createBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, openBlock as s, reactive as c, ref as l, renderSlot as u, toRef as d, watch as f, withModifiers as p } from "vue";
 import { tapIf as m } from "@milaboratories/helpers";
-//#region src/utils/DropdownOverlay/DropdownOverlay.vue?vue&type=script&setup=true&lang.ts
-var h = /* @__PURE__ */ a({
+// src/utils/DropdownOverlay/DropdownOverlay.vue?vue&type=script&setup=true&lang.ts
+var h = /*@__PURE__*/ a({
 	__name: "DropdownOverlay",
 	props: {
 		root: {},
@@ -26,11 +26,16 @@ var h = /* @__PURE__ */ a({
 			listRef: b
 		}), f(b, (e) => {
 			e && requestAnimationFrame(() => {
-				_.optionsHeight = e.getBoundingClientRect().height, window.dispatchEvent(new CustomEvent("adjust"));
+				let t = e.getBoundingClientRect();
+				_.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
 			});
 		}), t(y, (e) => {
 			let t = document.body.getBoundingClientRect(), n = e.top - t.top, r = e.left - t.left, i = g.gap ?? 0, a = n + e.height + i;
-			a + _.optionsHeight > e.clientHeight ? (v.bottom = t.bottom - e.bottom + e.height + i + "px", v.top = void 0) : (v.top = a + "px", v.bottom = void 0), v.left = r + "px", v.width = e.width + "px";
+			if (a + _.optionsHeight > e.clientHeight) {
+				let n = t.bottom - e.bottom + e.height + i;
+				v.bottom = n + "px", v.top = void 0;
+			} else v.top = a + "px", v.bottom = void 0;
+			v.left = r + "px", v.width = e.width + "px";
 		}), (e, t) => (s(), r(n, { to: "body" }, [i("div", o({
 			ref_key: "listRef",
 			ref: b
@@ -42,7 +47,6 @@ var h = /* @__PURE__ */ a({
 		}), [u(e.$slots, "default", { ref: "list" })], 16)]));
 	}
 });
-//#endregion
 export { h as default };
 
 //# sourceMappingURL=DropdownOverlay.vue2.js.map

package/dist/utils/DropdownOverlay/DropdownOverlay.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { reactive, ref, toRef, watch } from \"vue\";\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive<Record<string, string | undefined>>({\n  top: undefined,\n  bottom: undefined,\n  left: \"0px\",\n  width: \"0px\",\n});\n\nconst rootRef = toRef(props, \"root\");\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    const bottom = bodyRect.bottom - pos.bottom;\n    const upBottomOffset = bottom + pos.height + gap;\n    optionsStyle.bottom = upBottomOffset + \"px\";\n    optionsStyle.top = undefined;\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n    optionsStyle.bottom = undefined;\n  }\n\n  optionsStyle.left = left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      ref=\"listRef\"\n      v-bind=\"$attrs\"\n      :style=\"optionsStyle\"\n      tabindex=\"-1\"\n      @mousedown.prevent\n      @click.stop\n    >\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;EAMA,IAAM,IAAQ,GAKR,IAAO,EAAS,EACpB,eAAe,GAChB,CAAC,EAEI,IAAe,EAA6C;GAChE,KAAK,KAAA;GACL,QAAQ,KAAA;GACR,MAAM;GACN,OAAO;GACR,CAAC,EAEI,IAAU,EAAM,GAAO,OAAO,EAE9B,IAAU,GAAkB;SAclC,EAAa;GACX,wBAb6B;IAC7B,IAAM,IAAQ,EAAQ;AAEjB,SAIL,EAAM,EAAM,cAAc,gBAAgB,GAAkB,MAAQ;AAClE,OAAe,GAAO,EAAI;MAC1B;;GAKF;GACD,CAAC,EAEF,EAAM,IAAU,MAAO;AACrB,GAAI,KACF,4BAA4B;AAG1B,IADA,EAAK,gBADQ,EAAG,uBAAuB,CACb,QAC1B,OAAO,cAAc,IAAI,YAAY,SAAS,CAAC;KAC/C;IAEJ,EAEF,EAAmB,IAAU,MAAQ;GACnC,IAAM,IAAW,SAAS,KAAK,uBAAuB,EAEhD,IAAM,EAAI,MAAM,EAAS,KAEzB,IAAO,EAAI,OAAO,EAAS,MAE3B,IAAM,EAAM,OAAO,GAEnB,IAAgB,IAAM,EAAI,SAAS;AAazC,GAXI,IAAgB,EAAK,gBAAgB,EAAI,gBAG3C,EAAa,SAFE,EAAS,SAAS,EAAI,SACL,EAAI,SAAS,IACN,MACvC,EAAa,MAAM,KAAA,MAEnB,EAAa,MAAM,IAAgB,MACnC,EAAa,SAAS,KAAA,IAGxB,EAAa,OAAO,IAAO,MAC3B,EAAa,QAAQ,EAAI,QAAQ;IACjC,kBAIA,EAWW,GAAA,EAXD,IAAG,QAAM,EAAA,CACjB,EASM,OATN,EASM;YARA;GAAJ,KAAI;KACIA,EAAAA,QAAM;GACb,OAAO;GACR,UAAS;GACR,aAAS,AAAA,EAAA,OAAA,QAAV,IAAkB,CAAA,UAAA,CAAA;GACjB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;OAEX,EAAmB,EAAA,QAAA,WAAA,EAAb,KAAI,QAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"DropdownOverlay.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_Teleport","_createElementVNode","_mergeProps","_withModifiers","_renderSlot","DropdownOverlay_vue_vue_type_script_setup_true_lang_default","__expose","props","__props","data","reactive","optionsStyle","rootRef","toRef","listRef","ref","$list","tapIf","opt","watch","el","rect","useElementPosition","bodyRect","top","pos","left","gap","downTopOffset","upBottomOffset","openBlock","createBlock","Teleport","createElementVNode","mergeProps","_ctx","_cache","withModifiers","renderSlot"],"sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { reactive, ref, toRef, watch } from \"vue\";\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive<Record<string, string | undefined>>({\n  top: undefined,\n  bottom: undefined,\n  left: \"0px\",\n  width: \"0px\",\n});\n\nconst rootRef = toRef(props, \"root\");\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    const bottom = bodyRect.bottom - pos.bottom;\n    const upBottomOffset = bottom + pos.height + gap;\n    optionsStyle.bottom = upBottomOffset + \"px\";\n    optionsStyle.top = undefined;\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n    optionsStyle.bottom = undefined;\n  }\n\n  optionsStyle.left = left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      ref=\"listRef\"\n      v-bind=\"$attrs\"\n      :style=\"optionsStyle\"\n      tabindex=\"-1\"\n      @mousedown.prevent\n      @click.stop\n    >\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;EAMA,IAAMU,IAAQC,GAKRC,IAAOC,EAAS,EACpB,eAAe,EACjB,CAAC,GAEKC,IAAeD,EAA6C;GAChE,KAAK,KAAA;GACL,QAAQ,KAAA;GACR,MAAM;GACN,OAAO;EACT,CAAC,GAEKE,IAAUC,EAAMN,GAAO,MAAM,GAE7BO,IAAUC,EAAiB;E,OAcjCT,EAAa;GACX,wBAb6B;IAC7B,IAAMU,IAAQF,EAAQ;IAEtB,AAAKE,KAILC,EAAMD,EAAM,cAAc,eAAe,IAAmB,MAAQ;KAClE,EAAeA,GAAOE,CAAG;IAC3B,CAAC;GACH;GAIE;EACF,CAAC,GAEDC,EAAML,IAAU,MAAO;GACrB,AAAIM,KACF,4BAA4B;IAC1B,IAAMC,IAAOD,EAAG,sBAAsB;IAEtC,AADA,EAAK,gBAAgBC,EAAK,QAC1B,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;GAChD,CAAC;EAEL,CAAC,GAEDC,EAAmBV,IAAU,MAAQ;GACnC,IAAMW,IAAW,SAAS,KAAK,sBAAsB,GAE/CC,IAAMC,EAAI,MAAMF,EAAS,KAEzBG,IAAOD,EAAI,OAAOF,EAAS,MAE3BI,IAAMpB,EAAM,OAAO,GAEnBqB,IAAgBJ,IAAMC,EAAI,SAASE;GAEzC,IAAIC,IAAgBnB,EAAK,gBAAgBgB,EAAI,cAAc;IAEzD,IAAMI,IADSN,EAAS,SAASE,EAAI,SACLA,EAAI,SAASE;IAE7C,AADA,EAAa,SAASE,IAAiB,MACvC,EAAa,MAAM,KAAA;GACrB,OAEE,AADA,EAAa,MAAMD,IAAgB,MACnC,EAAa,SAAS,KAAA;GAIxB,AADA,EAAa,OAAOF,IAAO,MAC3B,EAAa,QAAQD,EAAI,QAAQ;EACnC,CAAC,I,UAIC3B,EAAA,GAAAC,EAWWC,GAAA,EAXD,IAAG,OAAM,GAAA,CACjBC,EASM,OATNC,EASM;GARA,SAAA;GAAJ,KAAIY;EACIjB,GAAAA,EAAAA,QAAM;GACb,OAAOc;GACR,UAAS;GACR,aAAS,AAAAyB,EAAA,OAAAjC,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;GACjB,SAAK,AAAAiC,EAAA,OAAAjC,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;E,KAEXC,EAAmB+B,EAAA,QAAA,WAAA,EAAb,KAAI,OAAM,CAAA,C"}

package/dist/utils/DropdownOverlay/index.js

@@ -1 +1 @@
-import "./DropdownOverlay.js";
+export { default as DropdownOverlay } from "./DropdownOverlay.js";

package/dist/utils/InnerBorder.js

@@ -1,13 +1,12 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./InnerBorder.vue2.js";
 import { createElementBlock as n, openBlock as r, renderSlot as i } from "vue";
-//#region src/utils/InnerBorder.vue
+// src/utils/InnerBorder.vue
 var a = { class: "inner-border" };
 function o(e, t, o, s, c, l) {
 	return r(), n("div", a, [i(e.$slots, "default")]);
 }
-var s = /* @__PURE__ */ e(t, [["render", o]]);
-//#endregion
+var s = /*#__PURE__*/ e(t, [["render", o]]);
 export { s as default };
 
 //# sourceMappingURL=InnerBorder.js.map

package/dist/utils/InnerBorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"InnerBorder.js","names":[],"sources":["../../src/utils/InnerBorder.vue"],"sourcesContent":["<template>\n  <div class=\"inner-border\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  // inheritAttrs: false\n};\n</script>\n"],"mappings":";;;;UACO,OAAM,gBAAc;;aAAzB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"InnerBorder.js","names":["_openBlock","_createElementBlock","_renderSlot","_sfc_main","_plugin_vue_export_helper_default","InnerBorder_vue_vue_type_script_lang_default","_hoisted_1","_sfc_render","openBlock","createElementBlock","renderSlot","_ctx","InnerBorder_default"],"sources":["../../src/utils/InnerBorder.vue"],"sourcesContent":["<template>\n  <div class=\"inner-border\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  // inheritAttrs: false\n};\n</script>\n"],"mappings":";;;;AACO,IAAAM,IAAA,EAAA,OAAM,eAAc;;CAAzB,OAAAN,EAAA,GAAAC,EAEM,OAFNK,GAEM,CADJJ,EAAQS,EAAA,QAAA,SAAA,C"}

package/dist/utils/InnerBorder.vue2.js

@@ -1,6 +1,5 @@
-//#region src/utils/InnerBorder.vue?vue&type=script&lang.ts
+// src/utils/InnerBorder.vue?vue&type=script&lang.ts
 var e = {};
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=InnerBorder.vue2.js.map

package/dist/utils/InnerBorder.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"InnerBorder.vue_vue_type_script_lang.js","names":[],"sources":["../../src/utils/InnerBorder.vue"],"sourcesContent":["<template>\n  <div class=\"inner-border\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  // inheritAttrs: false\n};\n</script>\n"],"mappings":";AAOA,IAAA,IAAe,EAEd"}
+{"version":3,"file":"InnerBorder.vue_vue_type_script_lang.js","names":["InnerBorder_vue_vue_type_script_lang_default"],"sources":["../../src/utils/InnerBorder.vue"],"sourcesContent":["<template>\n  <div class=\"inner-border\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  // inheritAttrs: false\n};\n</script>\n"],"mappings":";AAOA,IAAAA,IAAe,CAEf"}

package/dist/utils/PlCloseModalBtn.js

@@ -1,13 +1,12 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlCloseModalBtn.style.js";
 import { createElementBlock as n, createElementVNode as r, normalizeClass as i, openBlock as a } from "vue";
-//#region src/utils/PlCloseModalBtn.vue
+// src/utils/PlCloseModalBtn.vue
 var o = {};
 function s(e, t) {
 	return a(), n("div", { class: i(e.$style.component) }, [...t[0] ||= [r("div", null, null, -1)]], 2);
 }
-var c = /* @__PURE__ */ e(o, [["render", s], ["__cssModules", { $style: t }]]);
-//#endregion
+var c = /*#__PURE__*/ e(o, [["render", s], ["__cssModules", { $style: t }]]);
 export { c as default };
 
 //# sourceMappingURL=PlCloseModalBtn.js.map

package/dist/utils/PlCloseModalBtn.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlCloseModalBtn.js","names":[],"sources":["../../src/utils/PlCloseModalBtn.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.component\">\n    <div />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use \"../assets/mixins\" as *;\n\n.component {\n  display: flex;\n  place-content: center;\n  place-items: center;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n  border-radius: 12px; // slide-modal 6px\n  &:hover {\n    background-color: var(--btn-sec-hover-grey);\n    transition: all 0.1s ease-in-out;\n  }\n  > div {\n    background-color: var(--ic-01);\n    @include mask(url(../assets/images/24_close.svg), 24px);\n  }\n}\n</style>\n"],"mappings":";;;;;;aACE,EAEM,OAAA,EAFA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAC3B,EAAO,OAAA,MAAA,MAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlCloseModalBtn.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","style0","_plugin_vue_export_helper_default","PlCloseModalBtn_vue_vue_type_style_index_0_lang_module_default","_sfc_main","_sfc_render","openBlock","createElementBlock","normalizeClass","_ctx","_cache","createElementVNode","PlCloseModalBtn_default","\"$style\""],"sources":["../../src/utils/PlCloseModalBtn.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.component\">\n    <div />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use \"../assets/mixins\" as *;\n\n.component {\n  display: flex;\n  place-content: center;\n  place-items: center;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n  border-radius: 12px; // slide-modal 6px\n  &:hover {\n    background-color: var(--btn-sec-hover-grey);\n    transition: all 0.1s ease-in-out;\n  }\n  > div {\n    background-color: var(--ic-01);\n    @include mask(url(../assets/images/24_close.svg), 24px);\n  }\n}\n</style>\n"],"mappings":";;;;;;CACE,OAAAA,EAAA,GAAAC,EAEM,OAAA,EAFA,OAAKC,EAAEU,EAAA,OAAO,SAAS,E,iBAC3BT,EAAO,OAAA,MAAA,MAAA,EAAA,C"}

package/dist/utils/PlCloseModalBtn.style.js

@@ -1,5 +1,5 @@
-import './PlCloseModalBtn.vue.css';var e = { component: "_component_grelk_1" };
-//#endregion
-export { e as default };
+import './PlCloseModalBtn.style.css';// src/utils/PlCloseModalBtn.vue?vue&type=style&index=0&lang.module.scss
+var e = "_component_grelk_1", t = { component: e };
+export { e as component, t as default };
 
 //# sourceMappingURL=PlCloseModalBtn.style.js.map

package/dist/utils/PlCloseModalBtn.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlCloseModalBtn.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../src/utils/PlCloseModalBtn.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.component\">\n    <div />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use \"../assets/mixins\" as *;\n\n.component {\n  display: flex;\n  place-content: center;\n  place-items: center;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n  border-radius: 12px; // slide-modal 6px\n  &:hover {\n    background-color: var(--btn-sec-hover-grey);\n    transition: all 0.1s ease-in-out;\n  }\n  > div {\n    background-color: var(--ic-01);\n    @include mask(url(../assets/images/24_close.svg), 24px);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlCloseModalBtn.vue_vue_type_style_index_0_lang.module.js","names":["component","PlCloseModalBtn_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../src/utils/PlCloseModalBtn.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.component\">\n    <div />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use \"../assets/mixins\" as *;\n\n.component {\n  display: flex;\n  place-content: center;\n  place-items: center;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n  border-radius: 12px; // slide-modal 6px\n  &:hover {\n    background-color: var(--btn-sec-hover-grey);\n    transition: all 0.1s ease-in-out;\n  }\n  > div {\n    background-color: var(--ic-01);\n    @include mask(url(../assets/images/24_close.svg), 24px);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/utils/TextLabel.js

@@ -1,13 +1,12 @@
 import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./TextLabel.style.js";
 import { createElementBlock as n, createElementVNode as r, normalizeClass as i, openBlock as a, renderSlot as o } from "vue";
-//#region src/utils/TextLabel.vue
+// src/utils/TextLabel.vue
 var s = {};
 function c(e, t) {
 	return a(), n("div", { class: i(e.$style.textLabel) }, [r("div", { class: i(e.$style.label) }, [r("div", { class: i(e.$style.labelText) }, [o(e.$slots, "default")], 2)], 2)], 2);
 }
-var l = /* @__PURE__ */ e(s, [["render", c], ["__cssModules", { $style: t }]]);
-//#endregion
+var l = /*#__PURE__*/ e(s, [["render", c], ["__cssModules", { $style: t }]]);
 export { l as default };
 
 //# sourceMappingURL=TextLabel.js.map

package/dist/utils/TextLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLabel.js","names":[],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;aACE,EAMM,OAAA,EANA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAIM,OAAA,EAJA,OAAK,EAAE,EAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAEM,OAAA,EAFA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"TextLabel.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","style0","_plugin_vue_export_helper_default","TextLabel_vue_vue_type_style_index_0_lang_module_default","_sfc_main","_sfc_render","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","renderSlot","TextLabel_default","\"$style\""],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;CACE,OAAAA,EAAA,GAAAC,EAMM,OAAA,EANA,OAAKC,EAAEW,EAAA,OAAO,SAAS,E,IAC3BV,EAIM,OAAA,EAJA,OAAKD,EAAEW,EAAA,OAAO,KAAK,E,IACvBV,EAEM,OAAA,EAFA,OAAKD,EAAEW,EAAA,OAAO,SAAS,E,IAC3BT,EAAQS,EAAA,QAAA,SAAA,C"}

package/dist/utils/TextLabel.style.js

@@ -1,9 +1,9 @@
-import './TextLabel.vue.css';var e = {
-	textLabel: "_textLabel_v2o3d_1",
-	label: "_label_v2o3d_5",
-	labelText: "_labelText_v2o3d_15"
+import './TextLabel.style.css';// src/utils/TextLabel.vue?vue&type=style&index=0&lang.module.scss
+var e = "_textLabel_v2o3d_1", t = "_label_v2o3d_5", n = "_labelText_v2o3d_15", r = {
+	textLabel: e,
+	label: t,
+	labelText: n
 };
-//#endregion
-export { e as default };
+export { r as default, t as label, n as labelText, e as textLabel };
 
 //# sourceMappingURL=TextLabel.style.js.map

package/dist/utils/TextLabel.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLabel.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"TextLabel.vue_vue_type_style_index_0_lang.module.js","names":["textLabel","label","labelText","TextLabel_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/utils/useLabelNotch.js

@@ -1,25 +1,24 @@
-import { tap as e, tapIf as t } from "../helpers/functions.js";
-import { call as n } from "../helpers/utils.js";
+import { call as e } from "../helpers/utils.js";
+import { tap as t, tapIf as n } from "../helpers/functions.js";
 import { onChanged as r } from "../composition/utils.js";
 import { startResizeObserving as i, stopResizeObserving as a } from "../global/resizeObserver.js";
 import { onBeforeUnmount as o } from "vue";
-//#region src/utils/useLabelNotch.ts
+// src/utils/useLabelNotch.ts
 var s = 8, c = 4;
 function l(l, u = "label") {
 	let d = /* @__PURE__ */ new Set();
 	r(() => {
-		t(l?.value, (t) => {
-			let r = t.querySelector(u);
+		n(l?.value, (n) => {
+			let r = n.querySelector(u);
 			r && (d.add(r), i(r, () => {
-				let i = n(() => r.getBoundingClientRect().width + e(s, (e) => Number.isNaN(e) ? c : e + c));
-				t.style.getPropertyValue("--label-offset-right-x") !== `${i}px` && t.style.setProperty("--label-offset-right-x", `${i}px`);
+				let i = e(() => r.getBoundingClientRect().width + t(s, (e) => Number.isNaN(e) ? c : e + c));
+				n.style.getPropertyValue("--label-offset-right-x") !== `${i}px` && n.style.setProperty("--label-offset-right-x", `${i}px`);
 			}));
 		});
 	}), o(() => {
 		Array.from(d.values()).map((e) => a(e));
 	});
 }
-//#endregion
 export { l as useLabelNotch };
 
 //# sourceMappingURL=useLabelNotch.js.map

package/dist/utils/useLabelNotch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLabelNotch.js","names":[],"sources":["../../src/utils/useLabelNotch.ts"],"sourcesContent":["import { onBeforeUnmount, type Ref } from \"vue\";\nimport { tap, tapIf } from \"../helpers/functions\";\nimport { onChanged } from \"../composition/utils\";\nimport { call } from \"../helpers/utils\";\nimport { startResizeObserving, stopResizeObserving } from \"../global/resizeObserver\";\n\nconst offset = 8; // see --label-offset-left-x css var\n\nconst contourOffset = 4; // see --contour-offset css var\n\n/**\n * Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)\n */\nexport function useLabelNotch(root: Ref<HTMLElement | undefined>, labelSelector = \"label\") {\n  const labels = new Set<Element>();\n\n  onChanged(() => {\n    tapIf(root?.value, (el) => {\n      const label = el.querySelector(labelSelector);\n\n      if (!label) {\n        return;\n      }\n\n      labels.add(label);\n\n      startResizeObserving(label, () => {\n        const rightOffset = call(() => {\n          return (\n            label.getBoundingClientRect().width +\n            tap(offset, (n) => (Number.isNaN(n) ? contourOffset : n + contourOffset))\n          ); //\n        });\n\n        if (el.style.getPropertyValue(\"--label-offset-right-x\") !== `${rightOffset}px`) {\n          el.style.setProperty(\"--label-offset-right-x\", `${rightOffset}px`);\n        }\n      });\n    });\n  });\n\n  onBeforeUnmount(() => {\n    Array.from(labels.values()).map((el) => stopResizeObserving(el));\n  });\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAS,GAET,IAAgB;AAKtB,SAAgB,EAAc,GAAoC,IAAgB,SAAS;CACzF,IAAM,oBAAS,IAAI,KAAc;AA2BjC,CAzBA,QAAgB;AACd,IAAM,GAAM,QAAQ,MAAO;GACzB,IAAM,IAAQ,EAAG,cAAc,EAAc;AAExC,SAIL,EAAO,IAAI,EAAM,EAEjB,EAAqB,SAAa;IAChC,IAAM,IAAc,QAEhB,EAAM,uBAAuB,CAAC,QAC9B,EAAI,IAAS,MAAO,OAAO,MAAM,EAAE,GAAG,IAAgB,IAAI,EAAe,CAE3E;AAEF,IAAI,EAAG,MAAM,iBAAiB,yBAAyB,KAAK,GAAG,EAAY,OACzE,EAAG,MAAM,YAAY,0BAA0B,GAAG,EAAY,IAAI;KAEpE;IACF;GACF,EAEF,QAAsB;AACpB,QAAM,KAAK,EAAO,QAAQ,CAAC,CAAC,KAAK,MAAO,EAAoB,EAAG,CAAC;GAChE"}
+{"version":3,"file":"useLabelNotch.js","names":["offset","contourOffset","useLabelNotch","labels","onChanged","root","label","el","labelSelector","startResizeObserving","rightOffset","call","tap","n","onBeforeUnmount","stopResizeObserving"],"sources":["../../src/utils/useLabelNotch.ts"],"sourcesContent":["import { onBeforeUnmount, type Ref } from \"vue\";\nimport { tap, tapIf } from \"../helpers/functions\";\nimport { onChanged } from \"../composition/utils\";\nimport { call } from \"../helpers/utils\";\nimport { startResizeObserving, stopResizeObserving } from \"../global/resizeObserver\";\n\nconst offset = 8; // see --label-offset-left-x css var\n\nconst contourOffset = 4; // see --contour-offset css var\n\n/**\n * Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)\n */\nexport function useLabelNotch(root: Ref<HTMLElement | undefined>, labelSelector = \"label\") {\n  const labels = new Set<Element>();\n\n  onChanged(() => {\n    tapIf(root?.value, (el) => {\n      const label = el.querySelector(labelSelector);\n\n      if (!label) {\n        return;\n      }\n\n      labels.add(label);\n\n      startResizeObserving(label, () => {\n        const rightOffset = call(() => {\n          return (\n            label.getBoundingClientRect().width +\n            tap(offset, (n) => (Number.isNaN(n) ? contourOffset : n + contourOffset))\n          ); //\n        });\n\n        if (el.style.getPropertyValue(\"--label-offset-right-x\") !== `${rightOffset}px`) {\n          el.style.setProperty(\"--label-offset-right-x\", `${rightOffset}px`);\n        }\n      });\n    });\n  });\n\n  onBeforeUnmount(() => {\n    Array.from(labels.values()).map((el) => stopResizeObserving(el));\n  });\n}\n"],"mappings":";;;;;;AAMA,IAAMA,IAAS,GAETC,IAAgB;AAKtB,SAAgBC,EAAc,GAAoC,IAAgB,SAAS;CACzF,IAAMC,oBAAS,IAAI,IAAa;CA2BhC,AAzBAC,QAAgB;EACd,EAAMC,GAAM,QAAQ,MAAO;GACzB,IAAMC,IAAQC,EAAG,cAAcC,CAAa;GAE5C,AAAKF,MAILH,EAAO,IAAIG,CAAK,GAEhBG,EAAqBH,SAAa;IAChC,IAAMI,IAAcC,QAEhBL,EAAM,sBAAsB,CAAC,CAAC,QAC9BM,EAAIZ,IAAS,MAAO,OAAO,MAAMa,CAAC,IAAIZ,IAAgBY,IAAIZ,CAAc,CAE3E;IAED,AAAIM,EAAG,MAAM,iBAAiB,wBAAwB,MAAM,GAAGG,EAAY,OACzEH,EAAG,MAAM,YAAY,0BAA0B,GAAGG,EAAY,GAAG;GAErE,CAAC;EACH,CAAC;CACH,CAAC,GAEDI,QAAsB;EACpB,MAAM,KAAKX,EAAO,OAAO,CAAC,CAAC,CAAC,KAAK,MAAOY,EAAoBR,CAAE,CAAC;CACjE,CAAC;AACH"}

package/dist/utils/useValidation.js

@@ -1,5 +1,5 @@
 import { computed as e } from "vue";
-//#region src/utils/useValidation.ts
+// src/utils/useValidation.ts
 function t(e, t) {
 	let n = [];
 	return t && t.length > 0 && t.forEach((t) => {
@@ -13,7 +13,6 @@ function t(e, t) {
 function n(n, r) {
 	return e(() => t(n.value, r));
 }
-//#endregion
-export { n as useValidation };
+export { n as useValidation, t as validateFormValue };
 
 //# sourceMappingURL=useValidation.js.map

package/dist/utils/useValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValidation.js","names":[],"sources":["../../src/utils/useValidation.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\n\n// Validation rules similar to those in Vuetify\n\nexport function validateFormValue<T>(value: T, rules: ((v: T) => boolean | string)[]) {\n  const errors: string[] = [];\n  if (rules && rules.length > 0) {\n    rules.forEach((rule) => {\n      const err = rule(value);\n      if (typeof err === \"string\") {\n        errors.push(err);\n      }\n    });\n  }\n  return {\n    isValid: errors.length === 0,\n    errors: errors,\n  };\n}\n\nexport function useValidation<T>(val: Ref<T>, rules: ((v: T) => boolean | string)[]) {\n  return computed(() => {\n    return validateFormValue(val.value, rules);\n  });\n}\n"],"mappings":";;AAIA,SAAgB,EAAqB,GAAU,GAAuC;CACpF,IAAM,IAAmB,EAAE;AAS3B,QARI,KAAS,EAAM,SAAS,KAC1B,EAAM,SAAS,MAAS;EACtB,IAAM,IAAM,EAAK,EAAM;AACvB,EAAI,OAAO,KAAQ,YACjB,EAAO,KAAK,EAAI;GAElB,EAEG;EACL,SAAS,EAAO,WAAW;EACnB;EACT;;AAGH,SAAgB,EAAiB,GAAa,GAAuC;AACnF,QAAO,QACE,EAAkB,EAAI,OAAO,EAAM,CAC1C"}
+{"version":3,"file":"useValidation.js","names":["validateFormValue","errors","rules","err","rule","value","useValidation","computed","val"],"sources":["../../src/utils/useValidation.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\n\n// Validation rules similar to those in Vuetify\n\nexport function validateFormValue<T>(value: T, rules: ((v: T) => boolean | string)[]) {\n  const errors: string[] = [];\n  if (rules && rules.length > 0) {\n    rules.forEach((rule) => {\n      const err = rule(value);\n      if (typeof err === \"string\") {\n        errors.push(err);\n      }\n    });\n  }\n  return {\n    isValid: errors.length === 0,\n    errors: errors,\n  };\n}\n\nexport function useValidation<T>(val: Ref<T>, rules: ((v: T) => boolean | string)[]) {\n  return computed(() => {\n    return validateFormValue(val.value, rules);\n  });\n}\n"],"mappings":";;AAIA,SAAgBA,EAAqB,GAAU,GAAuC;CACpF,IAAMC,IAAmB,CAAC;CAS1B,OARIC,KAASA,EAAM,SAAS,KAC1BA,EAAM,SAAS,MAAS;EACtB,IAAMC,IAAMC,EAAKC,CAAK;EACtB,AAAI,OAAOF,KAAQ,YACjBF,EAAO,KAAKE,CAAG;CAEnB,CAAC,GAEI;EACL,SAASF,EAAO,WAAW;EACnB;CACV;AACF;AAEA,SAAgBK,EAAiB,GAAa,GAAuC;CACnF,OAAOC,QACEP,EAAkBQ,EAAI,OAAON,CAAK,CAC1C;AACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.15.43",
+  "version": "2.16.1",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -15,14 +15,16 @@
     "./svg/images/*": "./src/assets/images/*"
   },
   "dependencies": {
+    "@milaboratories/helpers": "1.14.6",
+    "@platforma-sdk/model": "1.86.3",
     "@types/d3-array": "^3.2.1",
     "@types/d3-axis": "^3.0.6",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
     "@types/sortablejs": "^1.15.6",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^13.3.0",
-    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/integrations": "^13.9.0",
     "canonicalize": "~2.1.0",
     "d3-array": "^3.0.0",
     "d3-axis": "^3.0.0",
@@ -30,19 +32,22 @@
     "d3-selection": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.6",
-    "vue": "3.5.24",
-    "@milaboratories/helpers": "1.14.5",
-    "@platforma-sdk/model": "1.85.2"
+    "vue": "3.5.44"
   },
   "devDependencies": {
-    "@vitest/coverage-istanbul": "^4.1.3",
-    "jsdom": "^25.0.1",
-    "svgo": "^3.3.2",
-    "typescript": "7.0.2",
-    "vitest": "^4.1.3",
-    "@milaboratories/ts-builder": "1.7.2",
     "@milaboratories/build-configs": "2.0.2",
-    "@milaboratories/ts-configs": "1.4.0"
+    "@milaboratories/ts-builder": "1.7.3",
+    "@milaboratories/ts-configs": "1.4.0",
+    "@vitest/coverage-istanbul": "^4.1.12",
+    "jsdom": "^27.4.0",
+    "svgo": "^3.3.5",
+    "typescript": "7.0.2",
+    "vitest": "^4.1.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/milaboratory/platforma.git",
+    "directory": "lib/ui/uikit"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/DropdownListItem.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import CheckboxUncheckedSvg from "../assets/images/24_checkbox-light-enabled-unchecked.svg?raw";
 import CheckboxCheckedSvg from "../assets/images/24_checkbox-light-enabled-checked.svg?raw";
 import type { ListOptionNormalized } from "../types";
+import { PlColumnLabel } from "./PlColumnLabel";
 
 const props = withDefaults(
   defineProps<{
@@ -58,7 +59,7 @@ const checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : Chec
     <!--eslint-enable-->
     <div class="dropdown-list-item__title-container">
       <div class="dropdown-list-item__title text-s" data-testid="pl-dropdown-list-item-title">
-        {{ option.label }}
+        <PlColumnLabel :option="option" />
       </div>
       <div
         v-if="option.description"

package/src/components/PlColumnLabel/PlColumnLabel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ListOptionBase } from "@platforma-sdk/model";
+import { PlIcon16 } from "../PlIcon16";
+import { PlTooltip } from "../PlTooltip";
+
+/**
+ * A column's name as every table and dropdown shows it. A column reached through a link to
+ * another dataset gets a link icon in front, with `linkHint` on hover. Takes the whole option, so
+ * a new option field only needs handling here.
+ */
+defineProps<{
+  option?: Pick<ListOptionBase, "label" | "linkHint">;
+}>();
+</script>
+
+<template>
+  <span :class="$style.root" data-testid="pl-column-label">
+    <PlTooltip v-if="option?.linkHint" :class="$style.link" data-testid="pl-column-label-link">
+      <template #tooltip>{{ option.linkHint }}</template>
+      <PlIcon16 name="link" />
+    </PlTooltip>
+    <!-- For a label the caller renders itself, e.g. with search matches highlighted. -->
+    <slot>{{ option?.label }}</slot>
+  </span>
+</template>
+
+<style module>
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Lets a long label shrink, so it can truncate. */
+.root > * {
+  min-width: 0;
+}
+
+/* PlTooltip's inline-block wrapper would lift the icon above the text's centre. */
+.root > .link {
+  display: flex;
+  flex-shrink: 0;
+}
+</style>

package/src/components/PlColumnLabel/index.ts

@@ -0,0 +1 @@
+export { default as PlColumnLabel } from "./PlColumnLabel.vue";