@milaboratories/uikit 2.16.2 → 2.17.0

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts

@@ -1,3 +1,4 @@
+import { MissingValueLabel, MissingValueTooltip } from '../../helpers/columnValue';
 import { ModelRef, RefOption } from '../../types';
 type __VLS_Props = {
     /**
@@ -26,9 +27,14 @@ type __VLS_Props = {
     placeholder?: string;
     /**
      * Text shown in a chip when a `modelValue` entry's upstream block no longer
-     * exists. Defaults to "Upstream value removed".
+     * exists: one text, or a function giving it per value. Defaults to "Value not available".
      */
-    missingValueLabel?: string;
+    missingValueLabel?: MissingValueLabel;
+    /**
+     * Explains a selected value missing from the options in a tooltip over it: one text for every
+     * such value, or a function giving the content per value.
+     */
+    missingValueTooltip?: MissingValueTooltip;
     /**
      * If `true`, the dropdown component is marked as required.
      */
@@ -44,16 +50,16 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: Readonly<{
-        __isRef: true;
         blockId: string;
         name: string;
+        __isRef: true;
         requireEnrichments?: true | undefined;
     }>[] | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: Readonly<{
-        __isRef: true;
         blockId: string;
         name: string;
+        __isRef: true;
         requireEnrichments?: true | undefined;
     }>[] | undefined) => any) | undefined;
 }>, {
@@ -65,7 +71,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     required: boolean;
     helper: string;
     placeholder: string;
-    missingValueLabel: string;
+    missingValueLabel: MissingValueLabel;
+    missingValueTooltip: MissingValueTooltip;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAevD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6FJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;aA9HF,QAAQ,CAAC,SAAS,EAAE,CAAC;WAJvB,MAAM;;gBAJF,QAAQ,EAAE,GAAG,SAAS;cAiCvB,OAAO;cAJP,OAAO;YAjBT,MAAM;iBAQD,MAAM;uBAKA,MAAM;6EAiH5B,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlDropdownMultiRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAevD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+FJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;aArIF,QAAQ,CAAC,SAAS,EAAE,CAAC;WAJvB,MAAM;;gBAJF,QAAQ,EAAE,GAAG,SAAS;cAsCvB,OAAO;cAJP,OAAO;YAtBT,MAAM;iBAQD,MAAM;uBAKA,iBAAiB;yBAKf,mBAAmB;6EAmH3C,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js

@@ -10,7 +10,14 @@ var d = /*@__PURE__*/ i({
 		helper: { default: void 0 },
 		error: { default: void 0 },
 		placeholder: { default: "..." },
-		missingValueLabel: { default: "Upstream value removed" },
+		missingValueLabel: {
+			type: [String, Function],
+			default: void 0
+		},
+		missingValueTooltip: {
+			type: [String, Function],
+			default: void 0
+		},
 		required: {
 			type: Boolean,
 			default: !1

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","PlDropdownMulti","_mergeProps","_createSlots","_unref","_withCtx","_renderSlot","PlDropdownMulti_default","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","mergeProps","_cache","_ctx","$event","createSlots","unref","withCtx","renderSlot"],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in a chip when a `modelValue` entry's upstream block no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    data-testid=\"pl-dropdown-multi-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GAqDRC,IAAUC,QACdH,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAOI,EAAI;GACX,OAAOA,EAAI;EACb,EAAE,CACJ;E,kBAIEhB,EAAA,GAAAC,EASkBC,GATlBC,EASkB,EARhB,eAAY,wBAAuB,GAC3BS,GAAK;GACZ,SAASE,EAAA;GACT,uBAAkB,AAAAM,EAAA,QAAA,MAAErB,EAAAA,MAAK,qBAAsBuB,CAAM;E,iBAEtCjB,EAAAK,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBc,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","PlDropdownMulti","_mergeProps","_createSlots","_unref","_withCtx","_renderSlot","PlDropdownMulti_default","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","mergeProps","_cache","_ctx","$event","createSlots","unref","withCtx","renderSlot"],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in a chip when a `modelValue` entry's upstream block no longer\n     * exists: one text, or a function giving it per value. Defaults to \"Value not available\".\n     */\n    missingValueLabel?: MissingValueLabel;\n    /**\n     * Explains a selected value missing from the options in a tooltip over it: one text for every\n     * such value, or a function giving the content per value.\n     */\n    missingValueTooltip?: MissingValueTooltip;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: undefined,\n    missingValueTooltip: undefined,\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    data-testid=\"pl-dropdown-multi-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GA2DRC,IAAUC,QACdH,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAOI,EAAI;GACX,OAAOA,EAAI;EACb,EAAE,CACJ;E,kBAIEhB,EAAA,GAAAC,EASkBC,GATlBC,EASkB,EARhB,eAAY,wBAAuB,GAC3BS,GAAK;GACZ,SAASE,EAAA;GACT,uBAAkB,AAAAM,EAAA,QAAA,MAAErB,EAAAA,MAAK,qBAAsBuB,CAAM;E,iBAEtCjB,EAAAK,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBc,EAAA,QAAA,SAAA,C"}

package/dist/components/PlDropdownRef/PlDropdownRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.js","names":["_sfc_main","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","PlDropdownRef_default"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDropdownRef.js","names":["_sfc_main","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","PlDropdownRef_default"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists: one text, or a function giving it per value. Defaults to \"Value not available\".\n     */\n    missingValueLabel?: MissingValueLabel;\n    /**\n     * Explains a selected value missing from the options in a tooltip over it: one text for every\n     * such value, or a function giving the content per value.\n     */\n    missingValueTooltip?: MissingValueTooltip;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: undefined,\n    missingValueTooltip: undefined,\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts

@@ -1,3 +1,4 @@
+import { MissingValueLabel, MissingValueTooltip } from '../../helpers/columnValue';
 import { ListOption, ModelRef, RefOption } from '../../types';
 /**
  * A component for selecting one value from a list of options
@@ -36,9 +37,14 @@ declare const __VLS_export: <M = ModelRef>(__VLS_props: NonNullable<Awaited<type
         placeholder?: string;
         /**
          * Text shown in the field when the referenced upstream block / output no longer
-         * exists. Defaults to "Upstream value removed".
+         * exists: one text, or a function giving it per value. Defaults to "Value not available".
          */
-        missingValueLabel?: string;
+        missingValueLabel?: MissingValueLabel;
+        /**
+         * Explains a selected value missing from the options in a tooltip over it: one text for every
+         * such value, or a function giving the content per value.
+         */
+        missingValueTooltip?: MissingValueTooltip;
         /**
          * Enables a button to clear the selected value (default: false)
          */

package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AA2HA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAInE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,QAAQ,EAClC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAqLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAxKpD;;WAEG;oBACS,CAAC,GAAG,SAAS;QACzB;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;qBACU,OAAO,GAAG,QAAQ;;;KAwHwD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBARG,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAvKvC,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EAmLlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AAkIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAInE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,QAAQ,EAClC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA4LO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA/KpD;;WAEG;oBACS,CAAC,GAAG,SAAS;QACzB;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,iBAAiB;QACrC;;;WAGG;8BACmB,mBAAmB;QACzC;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;qBACU,OAAO,GAAG,QAAQ;;;KA0HwD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBARG,CAAC,KAAK,IAAiB,KAAK,GAAG;;cA9KvC,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EA0LlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js

@@ -11,7 +11,14 @@ var d = /*@__PURE__*/ i({
 		loadingOptionsHelper: { default: void 0 },
 		error: { default: void 0 },
 		placeholder: { default: "..." },
-		missingValueLabel: { default: "Upstream value removed" },
+		missingValueLabel: {
+			type: [String, Function],
+			default: void 0
+		},
+		missingValueTooltip: {
+			type: [String, Function],
+			default: void 0
+		},
 		clearable: {
 			type: Boolean,
 			default: !1

package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","_unref","PlDropdown","_mergeProps","_createSlots","_withCtx","_renderSlot","PlDropdown_default","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","unref","mergeProps","_cache","_ctx","$event","createSlots","withCtx","renderSlot"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists. Defaults to \"Upstream value removed\".\n     */\n    missingValueLabel?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Upstream value removed\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GAoERC,IAAUC,QACdH,EAAM,SAAS,KAAK,MAClB,SAASI,IACJ;GACC,OAAOA,EAAI;GACX,OAAOA,EAAI;GACX,OAAOA,EAAI;EACb,IACAA,CACN,CACF;E,kBAIEhB,EAAA,GAAAC,EAWaC,EAAAC,CAAA,GAXbC,EAWa,EAVX,eAAY,kBAAiB,GACrBQ,GAAK;GACZ,SAASE,EAAA;GACT,0BAAwBD,EAAA;GACxB,oBAAkBA,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAAQ,EAAA,QAAA,MAAEtB,EAAAA,MAAK,qBAAsBwB,CAAM;E,iBAEtCrB,EAAAQ,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBe,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","_unref","PlDropdown","_mergeProps","_createSlots","_withCtx","_renderSlot","PlDropdown_default","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","unref","mergeProps","_cache","_ctx","$event","createSlots","withCtx","renderSlot"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when the referenced upstream block / output no longer\n     * exists: one text, or a function giving it per value. Defaults to \"Value not available\".\n     */\n    missingValueLabel?: MissingValueLabel;\n    /**\n     * Explains a selected value missing from the options in a tooltip over it: one text for every\n     * such value, or a function giving the content per value.\n     */\n    missingValueTooltip?: MissingValueTooltip;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: undefined,\n    missingValueTooltip: undefined,\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    data-testid=\"pl-dropdown-ref\"\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWR,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GA0ERC,IAAUC,QACdH,EAAM,SAAS,KAAK,MAClB,SAASI,IACJ;GACC,OAAOA,EAAI;GACX,OAAOA,EAAI;GACX,OAAOA,EAAI;EACb,IACAA,CACN,CACF;E,kBAIEhB,EAAA,GAAAC,EAWaC,EAAAC,CAAA,GAXbC,EAWa,EAVX,eAAY,kBAAiB,GACrBQ,GAAK;GACZ,SAASE,EAAA;GACT,0BAAwBD,EAAA;GACxB,oBAAkBA,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAAQ,EAAA,QAAA,MAAEtB,EAAAA,MAAK,qBAAsBwB,CAAM;E,iBAEtCrB,EAAAQ,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBe,EAAA,QAAA,SAAA,C"}

package/dist/components/PlTooltip/PlTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlTooltip_vue_vue_type_script_setup_true_lang_default","PlTooltip_vue_vue_type_style_index_0_lang_module_default","PlTooltip_default","\"$style\""],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlTooltip.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlTooltip_vue_vue_type_script_setup_true_lang_default","PlTooltip_vue_vue_type_style_index_0_lang_module_default","PlTooltip_default","\"$style\""],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  --txt-link: var(--tooltip-link-color);\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.style.css

@@ -1 +1 @@
-._plTooltipAnchorWrapper_ttgyk_2{display:inline-block}._plTooltipAnchorWrapper_ttgyk_2>:first-child,._plTooltipAnchorWrapper_ttgyk_2.info{--anchorName:var(--v65bd5cda);anchor-name:var(--anchorName)}._plTooltipContainer_ttgyk_16{--plTooltipMaxWidth:300px;--gap:8px;--tailWidth:8px;--tailHeight:calc(var(--gap) + 2px);--tailClipTop:polygon(0 0, 100% 0, 100% calc(100% - var(--gap)), 50% calc(100% - 3px), 0 calc(100% - var(--gap)));--tailClipBottom:polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));--tailClipLeft:polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);--tailClipRight:polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);z-index:var(--z-tooltip)}._plTooltipContent_ttgyk_36{background:var(--tooltip-bg);word-break:normal;width:max-content;max-width:var(--plTooltipMaxWidth);color:#fff;border-radius:6px;padding:8px 12px 9px;display:inline-block}._plTooltipBox_ttgyk_47{position-anchor:var(--anchorName);z-index:1;position:absolute}._plTooltipBeak_ttgyk_53{position-anchor:var(--anchorName);z-index:0;background:var(--tooltip-bg);width:var(--tailWidth);height:var(--tailHeight);position:absolute}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBox_ttgyk_47{position-area:bottom;top:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBeak_ttgyk_53{position-area:bottom;top:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipBottom)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBox_ttgyk_47{position-area:left;right:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBeak_ttgyk_53{position-area:left;right:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipLeft)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBox_ttgyk_47{position-area:right;left:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBeak_ttgyk_53{position-area:right;left:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipRight)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:anchor(var(--anchorName) left)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}.pl-tooltip-fade-leave-active,.pl-tooltip-fade-enter-active{z-index:var(--z-tooltip);transition:opacity .2s ease-in-out}.pl-tooltip-fade-enter-from,.pl-tooltip-fade-leave-to{opacity:0}._plTooltipContent_ttgyk_36 a{color:var(--tooltip-link-color)}._plTooltipContent_ttgyk_36 p{margin-bottom:8px}._plTooltipContent_ttgyk_36 ul,._plTooltipContent_ttgyk_36 li{margin-left:6px;padding-left:6px}._plTooltipContent_ttgyk_36 li{margin-bottom:4px}
+._plTooltipAnchorWrapper_1n57k_2{display:inline-block}._plTooltipAnchorWrapper_1n57k_2>:first-child,._plTooltipAnchorWrapper_1n57k_2.info{--anchorName:var(--v32bce48c);anchor-name:var(--anchorName)}._plTooltipContainer_1n57k_16{--plTooltipMaxWidth:300px;--gap:8px;--tailWidth:8px;--tailHeight:calc(var(--gap) + 2px);--tailClipTop:polygon(0 0, 100% 0, 100% calc(100% - var(--gap)), 50% calc(100% - 3px), 0 calc(100% - var(--gap)));--tailClipBottom:polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));--tailClipLeft:polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);--tailClipRight:polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);z-index:var(--z-tooltip)}._plTooltipContent_1n57k_36{--txt-link:var(--tooltip-link-color);background:var(--tooltip-bg);word-break:normal;width:max-content;max-width:var(--plTooltipMaxWidth);color:#fff;border-radius:6px;padding:8px 12px 9px;display:inline-block}._plTooltipBox_1n57k_48{position-anchor:var(--anchorName);z-index:1;position:absolute}._plTooltipBeak_1n57k_54{position-anchor:var(--anchorName);z-index:0;background:var(--tooltip-bg);width:var(--tailWidth);height:var(--tailHeight);position:absolute}._plTooltipContainer_1n57k_16._top_1n57k_64 ._plTooltipBox_1n57k_48{position-area:top;bottom:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_1n57k_16._top_1n57k_64 ._plTooltipBeak_1n57k_54{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}._plTooltipContainer_1n57k_16._bottom_1n57k_78 ._plTooltipBox_1n57k_48{position-area:bottom;top:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_1n57k_16._bottom_1n57k_78 ._plTooltipBeak_1n57k_54{position-area:bottom;top:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipBottom)}._plTooltipContainer_1n57k_16._left_1n57k_92 ._plTooltipBox_1n57k_48{position-area:left;right:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_1n57k_16._left_1n57k_92 ._plTooltipBeak_1n57k_54{position-area:left;right:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipLeft)}._plTooltipContainer_1n57k_16._right_1n57k_109 ._plTooltipBox_1n57k_48{position-area:right;left:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_1n57k_16._right_1n57k_109 ._plTooltipBeak_1n57k_54{position-area:right;left:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipRight)}._plTooltipContainer_1n57k_16._topLeft_1n57k_126 ._plTooltipBox_1n57k_48{position-area:top;bottom:var(--gap);left:anchor(var(--anchorName) left)}._plTooltipContainer_1n57k_16._topLeft_1n57k_126 ._plTooltipBeak_1n57k_54{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}.pl-tooltip-fade-leave-active,.pl-tooltip-fade-enter-active{z-index:var(--z-tooltip);transition:opacity .2s ease-in-out}.pl-tooltip-fade-enter-from,.pl-tooltip-fade-leave-to{opacity:0}._plTooltipContent_1n57k_36 a{color:var(--tooltip-link-color)}._plTooltipContent_1n57k_36 p{margin-bottom:8px}._plTooltipContent_1n57k_36 ul,._plTooltipContent_1n57k_36 li{margin-left:6px;padding-left:6px}._plTooltipContent_1n57k_36 li{margin-bottom:4px}

package/dist/components/PlTooltip/PlTooltip.style.js

@@ -1,5 +1,5 @@
 import './PlTooltip.style.css';// src/components/PlTooltip/PlTooltip.vue?vue&type=style&index=0&lang.module.css
-var e = "_plTooltipAnchorWrapper_ttgyk_2", t = "_plTooltipContainer_ttgyk_16", n = "_plTooltipContent_ttgyk_36", r = "_plTooltipBox_ttgyk_47", i = "_plTooltipBeak_ttgyk_53", a = "_top_ttgyk_63", o = "_bottom_ttgyk_77", s = "_left_ttgyk_91", c = "_right_ttgyk_108", l = "_topLeft_ttgyk_125", u = {
+var e = "_plTooltipAnchorWrapper_1n57k_2", t = "_plTooltipContainer_1n57k_16", n = "_plTooltipContent_1n57k_36", r = "_plTooltipBox_1n57k_48", i = "_plTooltipBeak_1n57k_54", a = "_top_1n57k_64", o = "_bottom_1n57k_78", s = "_left_1n57k_92", c = "_right_1n57k_109", l = "_topLeft_1n57k_126", u = {
 	plTooltipAnchorWrapper: e,
 	plTooltipContainer: t,
 	plTooltipContent: n,

package/dist/components/PlTooltip/PlTooltip.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue_vue_type_style_index_0_lang.module.js","names":["plTooltipAnchorWrapper","plTooltipContainer","plTooltipContent","plTooltipBox","plTooltipBeak","top","bottom","left","right","topLeft","PlTooltip_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlTooltip.vue_vue_type_style_index_0_lang.module.js","names":["plTooltipAnchorWrapper","plTooltipContainer","plTooltipContent","plTooltipBox","plTooltipBeak","top","bottom","left","right","topLeft","PlTooltip_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  --txt-link: var(--tooltip-link-color);\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"names":[],"mappings":"AAqYA,kCAAkC;wBACb,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAMd;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;IAxCnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;SArBb,MAAM;eAiBA,MAAM,GAAG,WAAW;eAjCpB,MAAM;gBAIL,MAAM;cAIR,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;qBAazC,MAAM;aAId,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAI9C,MAAM;eAQL,OAAO;;cA6ST,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAczC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"names":[],"mappings":"AAsYA,kCAAkC;wBACb,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAMd;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;IAxCnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;SArBb,MAAM;eAiBA,MAAM,GAAG,WAAW;eAjCpB,MAAM;gBAIL,MAAM;cAIR,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;qBAazC,MAAM;aAId,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAI9C,MAAM;eAQL,OAAO;;cA6ST,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAczC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlTooltip/PlTooltip.vue2.js

@@ -22,7 +22,7 @@ var T = /*@__PURE__*/ u({
 	},
 	emits: ["tooltip:close"],
 	setup(u, { emit: T }) {
-		b((e) => ({ v65bd5cda: L }));
+		b((e) => ({ v32bce48c: L }));
 		let E = T, D = Symbol(), O = u, k = g({
 			open: !1,
 			over: !1,

package/dist/components/PlTooltip/PlTooltip.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs","$slots","utils.delay","utils.timeout","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_createVNode","_Transition","_Teleport","_createElementVNode","_normalizeClass","_normalizeStyle","_withModifiers","_createCommentVNode","delay$1","PlTooltip_vue_vue_type_script_setup_true_lang_default","__emit","\"v65bd5cda\"","anchorName","emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","showTooltip","k","f","onOver","onLeave","timeout","hide","rootRef","ref","tooltip","useClickOutside","onUnmounted","uniqueId","openBlock","createBlock","resolveDynamicComponent","mergeProps","_ctx","withCtx","renderSlot","createVNode","Transition","\"tooltip\"","Teleport","createElementVNode","normalizeClass","normalizeStyle","_cache","withModifiers","createCommentVNode"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":";;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;;;EAWR,IAAMwB,IAAOH,GAEPI,IAAO,OAAO,GAEdC,IAAQC,GAyDRC,IAAOC,EAAS;GACpB,MAAM;GACN,MAAM;GACN,aAAa;GACb,KAAK,OAAO;EACd,CAAC;EAKD,AAHAC,EAAK,IAAIL,SAAYM,EAAa,CAAC,GAGnCC,QACQJ,EAAK,OACV,MAAM;GACL,4BAA4B;IAC1B,EAAK,cAAcK;GACrB,CAAC;EACH,CACF;EAEA,IAAIC,UAAqB,CAAC,GAEpBC,UAAoB;GACxB,EAAK,OAAO;GAEZ,KAAK,IAAM,CAACC,GAAGC,MAAMP,EAAK,QAAQ,GAChC,AAAIM,MAAMX,KACRY,EAAE;EAGR,GAEMN,UAAqB;GAEzB,AADA,EAAK,OAAO,IACZP,EAAK,eAAe;EACtB,GAEMc,IAAS,YAAY;GACzB,AAAI,GAAM,QAASZ,EAAM,cAIzB,EAAK,OAAO,IAEZQ,EAAa,GAEb,MAAM/B,EAAYuB,EAAM,aAAa,GAAG,GAEpCE,EAAK,QACPO,EAAY;EAEhB,GAEMI,UAAgB;GACpB,AAAKb,EAAM,cAIX,EAAK,OAAO,IACZ,IAAetB,QAAoB;IACjC,AAAKwB,EAAK,QACRG,EAAa;GAEjB,GAAGL,EAAM,UAAU;EACrB;EAEA,QACQA,EAAM,OACX,MAAS;GACR,AAAIe,IACFV,EAAa,IACHL,EAAM,aAChBS,EAAY;EAEhB,CACF;EAEA,IAAMO,IAAUC,EAA6B,GACvCC,IAAUD,EAA6B;EAI7C,AAFAE,EAAgB,CAACH,GAASE,CAAO,SAASb,EAAa,CAAC,GAExDe,QAAkB;GAChB,EAAK,OAAOrB,CAAI;EAClB,CAAC;EACD,IAAMF,IAAa,YAAYwB,EAAS;E,kBAItC1C,EAAA,GAAAC,EAiDYC,EA/CLoB,EAAA,OAAO,GAFdnB,EAiDY;GAhDT,OAAOR,EAAAA,OAAO;GAEf,eAAY;EACJC,GAAAA,EAAAA,QAAM;GACV,SAAA;GAAJ,KAAIyC;GACH,SAAOJ;GACP,aAAWA;GACX,cAAYC;;GAGb,SAAA9B,QAAQ,CAARC,EAAQ0C,EAAA,QAAA,SAAA,GACRzC,EAoCaC,GAAA,EApCD,MAAK,kBAAiB,GAAA;IAChC,SAAAH,QAkCW,CAlCKP,EAAAA,OAAMuD,WAAe7B,EAAK,eAA1CvB,EAAA,GAAAC,EAkCWO,GAAA;;KAlC6C,IAAIc,EAAA;I,IAC1Db,EAgCM,OAAA;KA/BJ,eAAY;KACX,OAAKC,EAAA,CAAgBf,EAAAA,OAAO,oB;OAAiDA,EAAAA,OAAO,MAAM0B,EAAM,aAAQ;OAA2B1B,EAAAA,OAAO,SAAS0B,EAAM,aAAQ;OAA8B1B,EAAAA,OAAO,OAAO0B,EAAM,aAAQ;OAA4B1B,EAAAA,OAAO,QAAQ0B,EAAM,aAAQ;OAA6B1B,EAAAA,OAAO,UAAU0B,EAAM,aAAQ;;KAUhV,OAAKV,EAAA;MAAgC,gBAAAO;MAAiC,SAAAI,EAAA,MAAG;MAA0C,qBAAAA,EAAA,kBAAe;MAA4C,uBAAAA,EAAA;;I,IAO/Kb,EAWM,OAAA;KAXA,OAAKC,EAAEf,EAAAA,OAAO,YAAY;KAAG,SAAK,AAAA8D,EAAA,OAAA7C,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;I,IAC3CH,EASM,OAAA;KARA,SAAA;KAAJ,KAAI8B;KACJ,eAAY;KACX,OAAK7B,EAAA,CAAGf,EAAAA,OAAO,kBAAkB2B,EAAA,QAAQ,CAAA;KACzC,aAAWW;KACX,cAAYC;I,IAGbzB,EAAkC,OAAA,MAAA,CAA7BJ,EAAuB0C,EAAA,QAAA,SAAA,C,eAGhCtC,EAAqC,OAAA,EAA/B,OAAKC,EAAEf,EAAAA,OAAO,aAAa,E"}
+{"version":3,"file":"PlTooltip.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs","$slots","utils.delay","utils.timeout","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_createVNode","_Transition","_Teleport","_createElementVNode","_normalizeClass","_normalizeStyle","_withModifiers","_createCommentVNode","delay$1","PlTooltip_vue_vue_type_script_setup_true_lang_default","__emit","\"v32bce48c\"","anchorName","emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","showTooltip","k","f","onOver","onLeave","timeout","hide","rootRef","ref","tooltip","useClickOutside","onUnmounted","uniqueId","openBlock","createBlock","resolveDynamicComponent","mergeProps","_ctx","withCtx","renderSlot","createVNode","Transition","\"tooltip\"","Teleport","createElementVNode","normalizeClass","normalizeStyle","_cache","withModifiers","createCommentVNode"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  --txt-link: var(--tooltip-link-color);\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":";;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;;;EAWR,IAAMwB,IAAOH,GAEPI,IAAO,OAAO,GAEdC,IAAQC,GAyDRC,IAAOC,EAAS;GACpB,MAAM;GACN,MAAM;GACN,aAAa;GACb,KAAK,OAAO;EACd,CAAC;EAKD,AAHAC,EAAK,IAAIL,SAAYM,EAAa,CAAC,GAGnCC,QACQJ,EAAK,OACV,MAAM;GACL,4BAA4B;IAC1B,EAAK,cAAcK;GACrB,CAAC;EACH,CACF;EAEA,IAAIC,UAAqB,CAAC,GAEpBC,UAAoB;GACxB,EAAK,OAAO;GAEZ,KAAK,IAAM,CAACC,GAAGC,MAAMP,EAAK,QAAQ,GAChC,AAAIM,MAAMX,KACRY,EAAE;EAGR,GAEMN,UAAqB;GAEzB,AADA,EAAK,OAAO,IACZP,EAAK,eAAe;EACtB,GAEMc,IAAS,YAAY;GACzB,AAAI,GAAM,QAASZ,EAAM,cAIzB,EAAK,OAAO,IAEZQ,EAAa,GAEb,MAAM/B,EAAYuB,EAAM,aAAa,GAAG,GAEpCE,EAAK,QACPO,EAAY;EAEhB,GAEMI,UAAgB;GACpB,AAAKb,EAAM,cAIX,EAAK,OAAO,IACZ,IAAetB,QAAoB;IACjC,AAAKwB,EAAK,QACRG,EAAa;GAEjB,GAAGL,EAAM,UAAU;EACrB;EAEA,QACQA,EAAM,OACX,MAAS;GACR,AAAIe,IACFV,EAAa,IACHL,EAAM,aAChBS,EAAY;EAEhB,CACF;EAEA,IAAMO,IAAUC,EAA6B,GACvCC,IAAUD,EAA6B;EAI7C,AAFAE,EAAgB,CAACH,GAASE,CAAO,SAASb,EAAa,CAAC,GAExDe,QAAkB;GAChB,EAAK,OAAOrB,CAAI;EAClB,CAAC;EACD,IAAMF,IAAa,YAAYwB,EAAS;E,kBAItC1C,EAAA,GAAAC,EAiDYC,EA/CLoB,EAAA,OAAO,GAFdnB,EAiDY;GAhDT,OAAOR,EAAAA,OAAO;GAEf,eAAY;EACJC,GAAAA,EAAAA,QAAM;GACV,SAAA;GAAJ,KAAIyC;GACH,SAAOJ;GACP,aAAWA;GACX,cAAYC;;GAGb,SAAA9B,QAAQ,CAARC,EAAQ0C,EAAA,QAAA,SAAA,GACRzC,EAoCaC,GAAA,EApCD,MAAK,kBAAiB,GAAA;IAChC,SAAAH,QAkCW,CAlCKP,EAAAA,OAAMuD,WAAe7B,EAAK,eAA1CvB,EAAA,GAAAC,EAkCWO,GAAA;;KAlC6C,IAAIc,EAAA;I,IAC1Db,EAgCM,OAAA;KA/BJ,eAAY;KACX,OAAKC,EAAA,CAAgBf,EAAAA,OAAO,oB;OAAiDA,EAAAA,OAAO,MAAM0B,EAAM,aAAQ;OAA2B1B,EAAAA,OAAO,SAAS0B,EAAM,aAAQ;OAA8B1B,EAAAA,OAAO,OAAO0B,EAAM,aAAQ;OAA4B1B,EAAAA,OAAO,QAAQ0B,EAAM,aAAQ;OAA6B1B,EAAAA,OAAO,UAAU0B,EAAM,aAAQ;;KAUhV,OAAKV,EAAA;MAAgC,gBAAAO;MAAiC,SAAAI,EAAA,MAAG;MAA0C,qBAAAA,EAAA,kBAAe;MAA4C,uBAAAA,EAAA;;I,IAO/Kb,EAWM,OAAA;KAXA,OAAKC,EAAEf,EAAAA,OAAO,YAAY;KAAG,SAAK,AAAA8D,EAAA,OAAA7C,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;I,IAC3CH,EASM,OAAA;KARA,SAAA;KAAJ,KAAI8B;KACJ,eAAY;KACX,OAAK7B,EAAA,CAAGf,EAAAA,OAAO,kBAAkB2B,EAAA,QAAQ,CAAA;KACzC,aAAWW;KACX,cAAYC;I,IAGbzB,EAAkC,OAAA,MAAA,CAA7BJ,EAAuB0C,EAAA,QAAA,SAAA,C,eAGhCtC,EAAqC,OAAA,EAA/B,OAAKC,EAAEf,EAAAA,OAAO,aAAa,E"}

package/dist/components/PlValueLabel/PlValueLabel.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./PlValueLabel.vue2.js";
+import n from "./PlValueLabel.style.js";
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=PlValueLabel.js.map

package/dist/components/PlValueLabel/PlValueLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlValueLabel.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlValueLabel_vue_vue_type_script_setup_true_lang_default","PlValueLabel_vue_vue_type_style_index_0_lang_module_default","PlValueLabel_default","\"$style\""],"sources":["../../../src/components/PlValueLabel/PlValueLabel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A selected value shown as text, the way a dropdown shows it: by the label of its option, or,\n * for a column value id, by the value it picks. A value the options lack is marked as not\n * available, in error color, with the reason in a tooltip when there is a hint for it.\n */\nexport default {\n  name: \"PlValueLabel\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed } from \"vue\";\nimport { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nconst props = defineProps<{\n  /** The value to show. */\n  value: M;\n  /**\n   * Options the value is picked from. While they are `undefined` — not loaded yet — the value\n   * is never marked as not available.\n   */\n  options?: Readonly<ListOption<M>[]>;\n  /**\n   * Text shown when the options lack the value: one text, or a function giving it per value. By\n   * default, the value a column value id picks, marked as not available, or \"Value not\n   * available\".\n   */\n  missingValueLabel?: MissingValueLabel;\n  /**\n   * Explains the value in a tooltip over it while the options lack it: one text, or a function\n   * giving the content per value.\n   */\n  missingValueTooltip?: MissingValueTooltip;\n}>();\n\nconst option = computed(() =>\n  props.options === undefined\n    ? undefined\n    : normalizeListOptions(props.options).find((o) => deepEqual(o.value, props.value)),\n);\n\nconst isMissing = computed(() => props.options !== undefined && option.value === undefined);\n\nconst hint = computed(() =>\n  isMissing.value ? missingValueTooltip(props.value, props.missingValueTooltip) : undefined,\n);\n\nconst text = computed(() => {\n  if (option.value !== undefined) return option.value.label;\n  if (isMissing.value) {\n    return missingValueText(props.value, props.missingValueLabel);\n  }\n  return pickedValueText(props.value) ?? String(props.value);\n});\n</script>\n\n<template>\n  <PlTooltip v-if=\"hint !== undefined\" element=\"span\" position=\"top\">\n    <span :class=\"$style.missing\" data-testid=\"pl-value-label\">{{ text }}</span>\n    <template #tooltip>\n      <component :is=\"hint\" />\n    </template>\n  </PlTooltip>\n  <span v-else :class=\"{ [$style.missing]: isMissing }\" data-testid=\"pl-value-label\">{{\n    text\n  }}</span>\n</template>\n\n<style module>\n.missing {\n  font-style: italic;\n  color: var(--txt-error);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlValueLabel/PlValueLabel.style.css

@@ -0,0 +1 @@
+._missing_qzmq8_2{color:var(--txt-error);font-style:italic}

package/dist/components/PlValueLabel/PlValueLabel.style.js

@@ -0,0 +1,5 @@
+import './PlValueLabel.style.css';// src/components/PlValueLabel/PlValueLabel.vue?vue&type=style&index=0&lang.module.css
+var e = "_missing_qzmq8_2", t = { missing: e };
+export { t as default, e as missing };
+
+//# sourceMappingURL=PlValueLabel.style.js.map

package/dist/components/PlValueLabel/PlValueLabel.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlValueLabel.vue_vue_type_style_index_0_lang.module.js","names":["missing","PlValueLabel_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../../src/components/PlValueLabel/PlValueLabel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A selected value shown as text, the way a dropdown shows it: by the label of its option, or,\n * for a column value id, by the value it picks. A value the options lack is marked as not\n * available, in error color, with the reason in a tooltip when there is a hint for it.\n */\nexport default {\n  name: \"PlValueLabel\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed } from \"vue\";\nimport { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nconst props = defineProps<{\n  /** The value to show. */\n  value: M;\n  /**\n   * Options the value is picked from. While they are `undefined` — not loaded yet — the value\n   * is never marked as not available.\n   */\n  options?: Readonly<ListOption<M>[]>;\n  /**\n   * Text shown when the options lack the value: one text, or a function giving it per value. By\n   * default, the value a column value id picks, marked as not available, or \"Value not\n   * available\".\n   */\n  missingValueLabel?: MissingValueLabel;\n  /**\n   * Explains the value in a tooltip over it while the options lack it: one text, or a function\n   * giving the content per value.\n   */\n  missingValueTooltip?: MissingValueTooltip;\n}>();\n\nconst option = computed(() =>\n  props.options === undefined\n    ? undefined\n    : normalizeListOptions(props.options).find((o) => deepEqual(o.value, props.value)),\n);\n\nconst isMissing = computed(() => props.options !== undefined && option.value === undefined);\n\nconst hint = computed(() =>\n  isMissing.value ? missingValueTooltip(props.value, props.missingValueTooltip) : undefined,\n);\n\nconst text = computed(() => {\n  if (option.value !== undefined) return option.value.label;\n  if (isMissing.value) {\n    return missingValueText(props.value, props.missingValueLabel);\n  }\n  return pickedValueText(props.value) ?? String(props.value);\n});\n</script>\n\n<template>\n  <PlTooltip v-if=\"hint !== undefined\" element=\"span\" position=\"top\">\n    <span :class=\"$style.missing\" data-testid=\"pl-value-label\">{{ text }}</span>\n    <template #tooltip>\n      <component :is=\"hint\" />\n    </template>\n  </PlTooltip>\n  <span v-else :class=\"{ [$style.missing]: isMissing }\" data-testid=\"pl-value-label\">{{\n    text\n  }}</span>\n</template>\n\n<style module>\n.missing {\n  font-style: italic;\n  color: var(--txt-error);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts

@@ -0,0 +1,45 @@
+import { MissingValueLabel, MissingValueTooltip } from '../../helpers/columnValue';
+import { ListOption } from '../../types';
+/**
+ * A selected value shown as text, the way a dropdown shows it: by the label of its option, or,
+ * for a column value id, by the value it picks. A value the options lack is marked as not
+ * available, in error color, with the reason in a tooltip when there is a hint for it.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        /** The value to show. */
+        value: M;
+        /**
+         * Options the value is picked from. While they are `undefined` — not loaded yet — the value
+         * is never marked as not available.
+         */
+        options?: Readonly<ListOption<M>[]>;
+        /**
+         * Text shown when the options lack the value: one text, or a function giving it per value. By
+         * default, the value a column value id picks, marked as not available, or "Value not
+         * available".
+         */
+        missingValueLabel?: MissingValueLabel;
+        /**
+         * Explains the value in a tooltip over it while the options lack it: one text, or a function
+         * giving the content per value.
+         */
+        missingValueTooltip?: MissingValueTooltip;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+//# sourceMappingURL=PlValueLabel.vue.d.ts.map

package/dist/components/PlValueLabel/PlValueLabel.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlValueLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlValueLabel/PlValueLabel.vue"],"names":[],"mappings":"AAqFA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGxF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAsHO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;QApHrD,yBAAyB;eAClB,CAAC;QACR;;;WAGG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;;;WAIG;4BACiB,iBAAiB;QACrC;;;WAGG;8BACmB,mBAAmB;MAmG+B,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;UACH,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlValueLabel/PlValueLabel.vue2.js

@@ -0,0 +1,37 @@
+import { normalizeListOptions as e } from "../../helpers/utils.js";
+import t from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
+import { deepEqual as n } from "../../helpers/objects.js";
+import { missingValueText as r, missingValueTooltip as i, pickedValueText as a } from "../../helpers/columnValue.js";
+import { computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+var _ = /*@__PURE__*/ u({
+	name: "PlValueLabel",
+	props: {
+		value: {},
+		options: {},
+		missingValueLabel: { type: [String, Function] },
+		missingValueTooltip: { type: [String, Function] }
+	},
+	setup(u) {
+		let _ = u, v = o(() => _.options === void 0 ? void 0 : e(_.options).find((e) => n(e.value, _.value))), y = o(() => _.options !== void 0 && v.value === void 0), b = o(() => y.value ? i(_.value, _.missingValueTooltip) : void 0), x = o(() => v.value === void 0 ? y.value ? r(_.value, _.missingValueLabel) : a(_.value) ?? String(_.value) : v.value.label);
+		return (e, n) => b.value === void 0 ? (f(), c("span", {
+			key: 1,
+			class: d({ [e.$style.missing]: y.value }),
+			"data-testid": "pl-value-label"
+		}, m(x.value), 3)) : (f(), s(h(t), {
+			key: 0,
+			element: "span",
+			position: "top"
+		}, {
+			tooltip: g(() => [(f(), s(p(b.value)))]),
+			default: g(() => [l("span", {
+				class: d(e.$style.missing),
+				"data-testid": "pl-value-label"
+			}, m(x.value), 3)]),
+			_: 1
+		}));
+	}
+});
+export { _ as default };
+
+//# sourceMappingURL=PlValueLabel.vue2.js.map

package/dist/components/PlValueLabel/PlValueLabel.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlValueLabel.vue_vue_type_script_setup_true_lang.js","names":["$style","_openBlock","_createBlock","_unref","PlTooltip","_withCtx","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_toDisplayString","_createElementBlock","PlTooltip_default","PlValueLabel_vue_vue_type_script_setup_true_lang_default","props","__props","option","computed","normalizeListOptions","deepEqual","o","isMissing","hint","missingValueTooltip","text","missingValueText","pickedValueText","openBlock","createElementBlock","normalizeClass","_ctx","toDisplayString","createBlock","unref","withCtx","resolveDynamicComponent","createElementVNode"],"sources":["../../../src/components/PlValueLabel/PlValueLabel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A selected value shown as text, the way a dropdown shows it: by the label of its option, or,\n * for a column value id, by the value it picks. A value the options lack is marked as not\n * available, in error color, with the reason in a tooltip when there is a hint for it.\n */\nexport default {\n  name: \"PlValueLabel\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed } from \"vue\";\nimport { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nconst props = defineProps<{\n  /** The value to show. */\n  value: M;\n  /**\n   * Options the value is picked from. While they are `undefined` — not loaded yet — the value\n   * is never marked as not available.\n   */\n  options?: Readonly<ListOption<M>[]>;\n  /**\n   * Text shown when the options lack the value: one text, or a function giving it per value. By\n   * default, the value a column value id picks, marked as not available, or \"Value not\n   * available\".\n   */\n  missingValueLabel?: MissingValueLabel;\n  /**\n   * Explains the value in a tooltip over it while the options lack it: one text, or a function\n   * giving the content per value.\n   */\n  missingValueTooltip?: MissingValueTooltip;\n}>();\n\nconst option = computed(() =>\n  props.options === undefined\n    ? undefined\n    : normalizeListOptions(props.options).find((o) => deepEqual(o.value, props.value)),\n);\n\nconst isMissing = computed(() => props.options !== undefined && option.value === undefined);\n\nconst hint = computed(() =>\n  isMissing.value ? missingValueTooltip(props.value, props.missingValueTooltip) : undefined,\n);\n\nconst text = computed(() => {\n  if (option.value !== undefined) return option.value.label;\n  if (isMissing.value) {\n    return missingValueText(props.value, props.missingValueLabel);\n  }\n  return pickedValueText(props.value) ?? String(props.value);\n});\n</script>\n\n<template>\n  <PlTooltip v-if=\"hint !== undefined\" element=\"span\" position=\"top\">\n    <span :class=\"$style.missing\" data-testid=\"pl-value-label\">{{ text }}</span>\n    <template #tooltip>\n      <component :is=\"hint\" />\n    </template>\n  </PlTooltip>\n  <span v-else :class=\"{ [$style.missing]: isMissing }\" data-testid=\"pl-value-label\">{{\n    text\n  }}</span>\n</template>\n\n<style module>\n.missing {\n  font-style: italic;\n  color: var(--txt-error);\n}\n</style>\n"],"mappings":";;;;;;;CAOE,MAAM;;;;;;;;EAaR,IAAMa,IAAQC,GAqBRC,IAASC,QACbH,EAAM,YAAY,KAAA,IACd,KAAA,IACAI,EAAqBJ,EAAM,OAAO,CAAC,CAAC,MAAM,MAAMK,EAAUC,EAAE,OAAON,EAAM,KAAK,CAAC,CACrF,GAEMO,IAAYJ,QAAeH,EAAM,YAAY,KAAA,KAAaE,EAAO,UAAU,KAAA,CAAS,GAEpFM,IAAOL,QACXI,EAAU,QAAQE,EAAoBT,EAAM,OAAOA,EAAM,mBAAmB,IAAI,KAAA,CAClF,GAEMU,IAAOP,QACPD,EAAO,UAAU,KAAA,IACjBK,EAAU,QACLI,EAAiBX,EAAM,OAAOA,EAAM,iBAAiB,IAEvDY,EAAgBZ,EAAM,KAAK,KAAK,OAAOA,EAAM,KAAK,IAJlBE,EAAO,MAAM,KAKrD;E,iBAIkBM,EAAA,UAAS,KAAA,KAM1BpB,EAAA,GAAAS,EAES,QAAA;;GAFK,OAAKF,EAAA,GAAKR,EAAAA,OAAO,UAAUoB,EAAA,MAAS,CAAA;GAAI,eAAY;EAChE,GAAAX,EAAAc,EAAA,KAAI,GAAA,CAAA,MAPNtB,EAAA,GAAAC,EAKYC,EAAAC,CAAA,GAAA;;GALyB,SAAQ;GAAO,UAAS;;GAEhD,SAAOC,QACQ,EAAxBJ,EAAA,GAAAC,EAAwBI,EAARe,EAAA,KAAI,CAAA,E;GAFtB,SAAAhB,QAA4E,CAA5EE,EAA4E,QAAA;IAArE,OAAKC,EAAER,EAAAA,OAAO,OAAO;IAAE,eAAY;GAAoB,GAAAS,EAAAc,EAAA,KAAI,GAAA,CAAA,C"}

package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PlValueLabel.spec.d.ts.map

package/dist/components/PlValueLabel/__tests__/PlValueLabel.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlValueLabel.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/PlValueLabel/__tests__/PlValueLabel.spec.ts"],"names":[],"mappings":""}

package/dist/components/PlValueLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PlValueLabel } from './PlValueLabel.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PlValueLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlValueLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/PlValueLabel/index.js

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