@milaboratories/uikit 2.16.3 → 2.17.0

package/dist/components/PlDropdownMulti/PlDropdownMulti.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.js","names":["_sfc_main","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","PlDropdownMulti_default"],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * 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 is missing from `options` —\n     * e.g. its upstream source was deleted. Rendered italic in error color.\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     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    required: false,\n    disabled: false,\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  // While options load (`options === undefined`), hide chips for unresolved values\n  // to avoid a \"missing\" flash that resolves once options arrive.\n  const optionsLoaded = props.options !== undefined;\n  return selectedValuesRef.value\n    .map((v) => {\n      const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n      if (opt) {\n        // Found: render the option's own (normalized) label verbatim — matches\n        // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n        // so there is no raw-value leak to guard against.\n        return { ...opt, isMissing: false };\n      }\n      if (!optionsLoaded) {\n        return undefined;\n      }\n      // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n      return {\n        value: v,\n        label: props.missingValueLabel,\n        isMissing: true,\n      };\n    })\n    .filter((v): v is NonNullable<typeof v> => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown-multi\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      data-testid=\"pl-dropdown-multi-control\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlIcon24\n              v-if=\"showLoadingSpinner\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown-multi__arrow-wrapper\"\n              data-testid=\"pl-dropdown-multi-arrow\"\n              @click.stop=\"toggleModel\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-multi-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          data-testid=\"pl-dropdown-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-dropdown-multi__open-chips-container\"\n            data-testid=\"pl-dropdown-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-dropdown-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-multi-options-empty\"\n          >\n            Nothing found\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\" data-testid=\"pl-dropdown-multi-error\">\n      {{ getErrorMessage(error) }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-dropdown-multi__helper\"\n      data-testid=\"pl-dropdown-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDropdownMulti.js","names":["_sfc_main","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","PlDropdownMulti_default"],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * 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 is missing from `options` —\n     * e.g. its upstream source was deleted. Rendered italic in error color. One text for every\n     * such value, or a function giving it per value. By default, the value a column value id\n     * picks, marked as not available, or \"Value not available\".\n     */\n    missingValueLabel?: MissingValueLabel;\n    /**\n     * Explains a selected value missing from the options in a tooltip over it: one text for every\n     * such value, or a function giving the content per value.\n     */\n    missingValueTooltip?: MissingValueTooltip;\n    /**\n     * 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     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    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    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  // While options load (`options === undefined`), hide chips for unresolved values\n  // to avoid a \"missing\" flash that resolves once options arrive. A picked column value\n  // is shown by its own label meanwhile.\n  const optionsLoaded = props.options !== undefined;\n  return selectedValuesRef.value\n    .map((v) => {\n      const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n      if (opt) {\n        // Found: render the option's own (normalized) label verbatim — matches\n        // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n        // so there is no raw-value leak to guard against.\n        return { ...opt, isMissing: false, hint: undefined };\n      }\n      if (!optionsLoaded) {\n        const label = pickedValueText(v);\n        return label === undefined\n          ? undefined\n          : { value: v, label, isMissing: false, hint: undefined };\n      }\n      // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n      return {\n        value: v,\n        label: missingValueText(v, props.missingValueLabel),\n        isMissing: true,\n        hint: missingValueTooltip(v, props.missingValueTooltip),\n      };\n    })\n    .filter((v): v is NonNullable<typeof v> => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown-multi\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      data-testid=\"pl-dropdown-multi-control\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              <!-- The hover stops here: the tooltip of the chip itself would close this one. -->\n              <PlTooltip\n                v-if=\"opt.hint !== undefined\"\n                element=\"span\"\n                position=\"top\"\n                data-testid=\"pl-dropdown-multi-chip-hint\"\n                @mouseover.stop\n              >\n                <span>{{ opt.label }}</span>\n                <template #tooltip>\n                  <component :is=\"opt.hint\" />\n                </template>\n              </PlTooltip>\n              <template v-else>{{ opt.label }}</template>\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlIcon24\n              v-if=\"showLoadingSpinner\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown-multi__arrow-wrapper\"\n              data-testid=\"pl-dropdown-multi-arrow\"\n              @click.stop=\"toggleModel\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-multi-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          data-testid=\"pl-dropdown-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-dropdown-multi__open-chips-container\"\n            data-testid=\"pl-dropdown-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              <!-- The hover stops here: the tooltip of the chip itself would close this one. -->\n              <PlTooltip\n                v-if=\"opt.hint !== undefined\"\n                element=\"span\"\n                position=\"top\"\n                data-testid=\"pl-dropdown-multi-chip-hint\"\n                @mouseover.stop\n              >\n                <span>{{ opt.label }}</span>\n                <template #tooltip>\n                  <component :is=\"opt.hint\" />\n                </template>\n              </PlTooltip>\n              <template v-else>{{ opt.label }}</template>\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-dropdown-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-multi-options-empty\"\n          >\n            Nothing found\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\" data-testid=\"pl-dropdown-multi-error\">\n      {{ getErrorMessage(error) }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-dropdown-multi__helper\"\n      data-testid=\"pl-dropdown-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { MissingValueLabel, MissingValueTooltip } from '../../helpers/columnValue';
 import { ListOption } from '../../types';
 /**
  * A component for selecting multiple values from a list of options
@@ -32,9 +33,16 @@ declare const __VLS_export: <M = unknown>(__VLS_props: NonNullable<Awaited<typeo
         placeholder?: string;
         /**
          * Text shown in a chip when a `modelValue` entry is missing from `options` —
-         * e.g. its upstream source was deleted. Rendered italic in error color.
+         * e.g. its upstream source was deleted. Rendered italic in error color. One text for every
+         * such value, 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?: 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.
          */

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"AAybA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;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;WAspBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA3oBpD;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;KA0lB2E,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;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cA1oBvC,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EA0pBpC,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":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"AAgeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIxF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;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;WA4vBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAjvBpD;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;;;;WAKG;4BACiB,iBAAiB;QACrC;;;WAGG;8BACmB,mBAAmB;QACzC;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;KAyrB2E,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;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAhvBvC,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EAgwBpC,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/PlDropdownMulti/PlDropdownMulti.vue2.js

@@ -7,39 +7,40 @@ import r from "../DropdownListItem.js";
 import { getErrorMessage as i } from "../../helpers/error.js";
 import a from "../PlIcon24/PlIcon24.js";
 import "../PlIcon24/index.js";
-import o from "../../utils/DoubleContour.js";
-import { useLabelNotch as s } from "../../utils/useLabelNotch.js";
-import { deepEqual as c, deepIncludes as l } from "../../helpers/objects.js";
-import u from "../../utils/DropdownOverlay/DropdownOverlay.js";
-import ee from "../../assets/images/required.js";
-import d from "../PlChip/PlChip.js";
+import ee from "../../utils/DoubleContour.js";
+import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
+import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
+import te from "../../utils/DropdownOverlay/DropdownOverlay.js";
+import ne from "../../assets/images/required.js";
+import l from "../PlChip/PlChip.js";
 import "../PlChip/index.js";
+import { missingValueText as re, missingValueTooltip as u, pickedValueText as ie } from "../../helpers/columnValue.js";
 import './pl-dropdown-multi.css';/* empty css                  */
-import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as te, defineComponent as y, normalizeClass as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useSlots as ne, useTemplateRef as re, vModelText as ie, watch as ae, watchPostEffect as oe, withCtx as O, withDirectives as se, withModifiers as k } from "vue";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as ae, defineComponent as v, normalizeClass as y, openBlock as b, reactive as oe, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useSlots as se, useTemplateRef as ce, vModelText as le, watch as ue, watchPostEffect as de, withCtx as D, withDirectives as fe, withModifiers as O } from "vue";
 // src/components/PlDropdownMulti/PlDropdownMulti.vue?vue&type=script&setup=true&lang.ts
-var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { class: "pl-dropdown-multi__field" }, de = ["disabled", "placeholder"], fe = {
+var pe = ["tabindex"], me = { class: "pl-dropdown-multi__container" }, he = { class: "pl-dropdown-multi__field" }, ge = ["disabled", "placeholder"], k = {
 	key: 0,
 	class: "chips-container",
 	"data-testid": "pl-dropdown-multi-chips"
-}, pe = { class: "pl-dropdown-multi__controls" }, A = {
+}, A = { class: "pl-dropdown-multi__controls" }, j = {
 	key: 0,
 	"data-testid": "pl-dropdown-multi-label"
-}, j = {
+}, M = {
 	class: "pl-dropdown-multi__open-chips-container",
 	"data-testid": "pl-dropdown-multi-chips"
-}, M = {
+}, N = {
 	key: 0,
 	class: "nothing-found",
 	"data-testid": "pl-dropdown-multi-options-empty"
-}, N = {
+}, P = {
 	key: 0,
 	class: "pl-dropdown-multi__error",
 	"data-testid": "pl-dropdown-multi-error"
-}, P = {
+}, F = {
 	key: 1,
 	class: "pl-dropdown-multi__helper",
 	"data-testid": "pl-dropdown-multi-helper"
-}, F = /*@__PURE__*/ y({
+}, I = /*@__PURE__*/ v({
 	name: "PlDropdownMulti",
 	props: {
 		modelValue: { default: () => [] },
@@ -48,7 +49,14 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 		helper: { default: void 0 },
 		error: { default: void 0 },
 		placeholder: { default: "..." },
-		missingValueLabel: { default: "Value not available" },
+		missingValueLabel: {
+			type: [String, Function],
+			default: void 0
+		},
+		missingValueTooltip: {
+			type: [String, Function],
+			default: void 0
+		},
 		required: {
 			type: Boolean,
 			default: !1
@@ -60,139 +68,160 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 		groupPosition: { default: void 0 }
 	},
 	emits: ["update:modelValue"],
-	setup(y, { emit: F }) {
-		let I = F, L = (e) => I("update:modelValue", e), R = ne(), z = y, B = C(), V = C(), H = re("overlay"), U = S({
+	setup(v, { emit: I }) {
+		let L = I, R = (e) => L("update:modelValue", e), _e = se(), z = v, B = x(), V = x(), H = ce("overlay"), U = oe({
 			search: "",
 			activeOption: -1,
 			open: !1,
 			optionsHeight: 0
-		}), W = p(() => Array.isArray(z.modelValue) ? z.modelValue : []), me = p(() => U.open && z.modelValue.length > 0 ? z.placeholder : z.modelValue.length > 0 ? "" : z.placeholder), G = p(() => t(z.options ?? [])), K = p(() => {
+		}), W = f(() => Array.isArray(z.modelValue) ? z.modelValue : []), ve = f(() => U.open && z.modelValue.length > 0 ? z.placeholder : z.modelValue.length > 0 ? "" : z.placeholder), G = f(() => t(z.options ?? [])), K = f(() => {
 			let e = z.options !== void 0;
 			return W.value.map((t) => {
-				let n = G.value.find((e) => c(e.value, t));
+				let n = G.value.find((e) => s(e.value, t));
 				if (n) return {
 					...n,
-					isMissing: !1
+					isMissing: !1,
+					hint: void 0
 				};
-				if (e) return {
+				if (!e) {
+					let e = ie(t);
+					return e === void 0 ? void 0 : {
+						value: t,
+						label: e,
+						isMissing: !1,
+						hint: void 0
+					};
+				}
+				return {
 					value: t,
-					label: z.missingValueLabel,
-					isMissing: !0
+					label: re(t, z.missingValueLabel),
+					isMissing: !0,
+					hint: u(t, z.missingValueTooltip)
 				};
 			}).filter((e) => e !== void 0);
-		}), q = p(() => {
-			let e = D(W), t = D(G);
+		}), q = f(() => {
+			let e = E(W), t = E(G);
 			return (U.search ? t.filter((e) => {
 				let t = U.search.toLowerCase();
 				return e.label.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === U.search;
 			}) : [...t]).map((t) => ({
 				...t,
-				selected: l(e, t.value)
+				selected: c(e, t.value)
 			}));
-		}), J = p(() => z.options === void 0), he = p(() => !z.disabled && J.value), Y = p(() => J.value ? !0 : z.disabled), ge = p(() => Y.value ? void 0 : "0"), _e = () => {
+		}), J = f(() => z.options === void 0), ye = f(() => !z.disabled && J.value), Y = f(() => J.value ? !0 : z.disabled), X = f(() => Y.value ? void 0 : "0"), be = () => {
 			U.activeOption = 0;
-		}, X = (e) => {
-			let t = D(W);
-			L(l(t, e) ? t.filter((t) => !c(t, e)) : [...t, e]), U.search = "", B?.value?.focus();
-		}, Z = (e) => L(D(W).filter((t) => !c(t, e))), Q = () => V.value?.focus(), ve = () => {
+		}, Z = (e) => {
+			let t = E(W);
+			R(c(t, e) ? t.filter((t) => !s(t, e)) : [...t, e]), U.search = "", B?.value?.focus();
+		}, Q = (e) => R(E(W).filter((t) => !s(t, e))), xe = () => V.value?.focus(), Se = () => {
 			U.open = !U.open, U.open || (U.search = "");
 		}, $ = (e) => {
 			let t = e.relatedTarget;
 			!B.value?.contains(t) && !H.value?.listRef?.contains(t) && (U.search = "", U.open = !1);
-		}, ye = (e) => {
+		}, Ce = (e) => {
 			let { open: t, activeOption: n } = U;
 			if (!t) {
 				e.code === "Enter" && (U.open = !0);
 				return;
 			}
 			e.code === "Escape" && (U.open = !1, B.value?.focus());
-			let r = D(q), { length: i } = r;
+			let r = E(q), { length: i } = r;
 			if (!i) return;
 			[
 				"ArrowDown",
 				"ArrowUp",
 				"Enter"
-			].includes(e.code) && e.preventDefault(), e.code === "Enter" && X(r[n].value);
+			].includes(e.code) && e.preventDefault(), e.code === "Enter" && Z(r[n].value);
 			let a = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
 			U.activeOption = Math.abs(n + a + i) % i, requestAnimationFrame(() => H.value?.scrollIntoActive());
 		};
-		return s(B), ae(() => z.modelValue, () => _e(), { immediate: !0 }), oe(() => {
+		return o(B), ue(() => z.modelValue, () => be(), { immediate: !0 }), de(() => {
 			U.search, U.open && H.value?.scrollIntoActive();
-		}), (t, s) => (x(), g("div", {
+		}), (t, o) => (b(), h("div", {
 			class: "pl-dropdown-multi__envelope",
-			onClick: Q,
+			onClick: xe,
 			"data-testid": "pl-dropdown-multi"
-		}, [_("div", {
+		}, [g("div", {
 			ref_key: "rootRef",
 			ref: B,
-			tabindex: ge.value,
-			class: b(["pl-dropdown-multi", {
+			tabindex: X.value,
+			class: y(["pl-dropdown-multi", {
 				open: U.open,
-				error: y.error,
+				error: v.error,
 				disabled: Y.value
 			}]),
 			"data-testid": "pl-dropdown-multi-control",
-			onKeydown: ye,
+			onKeydown: Ce,
 			onFocusout: $
-		}, [_("div", le, [
-			_("div", ue, [
-				se(_("input", {
+		}, [g("div", me, [
+			g("div", he, [
+				fe(g("input", {
 					ref_key: "input",
 					ref: V,
-					"onUpdate:modelValue": s[0] ||= (e) => U.search = e,
+					"onUpdate:modelValue": o[0] ||= (e) => U.search = e,
 					type: "text",
 					tabindex: "-1",
 					disabled: Y.value,
-					placeholder: me.value,
+					placeholder: ve.value,
 					spellcheck: "false",
 					autocomplete: "chrome-off",
 					"data-testid": "pl-dropdown-multi-input",
-					onFocus: s[1] ||= (e) => U.open = !0
-				}, null, 40, de), [[ie, U.search]]),
-				U.open ? h("", !0) : (x(), g("div", fe, [(x(!0), g(f, null, w(K.value, (e, t) => (x(), m(D(d), {
+					onFocus: o[1] ||= (e) => U.open = !0
+				}, null, 40, ge), [[le, U.search]]),
+				U.open ? m("", !0) : (b(), h("div", k, [(b(!0), h(d, null, S(K.value, (e, t) => (b(), p(E(l), {
 					key: t,
-					class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
+					class: y({ "pl-dropdown-multi__chip--missing": e.isMissing }),
 					closeable: "",
 					"data-testid": "pl-dropdown-multi-chip",
 					small: "",
-					onClick: s[2] ||= k((e) => U.open = !0, ["stop"]),
-					onClose: (t) => Z(e.value)
+					onClick: o[3] ||= O((e) => U.open = !0, ["stop"]),
+					onClose: (t) => Q(e.value)
 				}, {
-					default: O(() => [v(E(e.label), 1)]),
+					default: D(() => [e.hint === void 0 ? (b(), h(d, { key: 1 }, [_(T(e.label), 1)], 64)) : (b(), p(E(n), {
+						key: 0,
+						element: "span",
+						position: "top",
+						"data-testid": "pl-dropdown-multi-chip-hint",
+						onMouseover: o[2] ||= O(() => {}, ["stop"])
+					}, {
+						tooltip: D(() => [(b(), p(w(e.hint)))]),
+						default: D(() => [g("span", null, T(e.label), 1)]),
+						_: 2
+					}, 1024))]),
 					_: 2
 				}, 1032, ["class", "onClose"]))), 128))])),
-				_("div", pe, [
-					he.value ? (x(), m(D(a), {
+				g("div", A, [
+					ye.value ? (b(), p(E(a), {
 						key: 0,
 						name: "loading",
 						"data-testid": "pl-dropdown-multi-loading"
-					})) : h("", !0),
-					T(t.$slots, "append"),
-					_("div", {
+					})) : m("", !0),
+					C(t.$slots, "append"),
+					g("div", {
 						class: "pl-dropdown-multi__arrow-wrapper",
 						"data-testid": "pl-dropdown-multi-arrow",
-						onClick: k(ve, ["stop"])
-					}, [...s[3] ||= [_("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
+						onClick: O(Se, ["stop"])
+					}, [...o[5] ||= [g("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
 				])
 			]),
-			y.label ? (x(), g("label", A, [
-				y.required ? (x(), m(D(e), {
+			v.label ? (b(), h("label", j, [
+				v.required ? (b(), p(E(e), {
 					key: 0,
-					uri: D(ee),
+					uri: E(ne),
 					"data-testid": "pl-dropdown-multi-required"
-				}, null, 8, ["uri"])) : h("", !0),
-				_("span", null, E(y.label), 1),
-				D(R).tooltip ? (x(), m(D(n), {
+				}, null, 8, ["uri"])) : m("", !0),
+				g("span", null, T(v.label), 1),
+				E(_e).tooltip ? (b(), p(E(n), {
 					key: 1,
 					class: "info",
 					position: "top",
 					"data-testid": "pl-dropdown-multi-tooltip"
 				}, {
-					tooltip: O(() => [T(t.$slots, "tooltip")]),
+					tooltip: D(() => [C(t.$slots, "tooltip")]),
 					_: 3
-				})) : h("", !0)
-			])) : h("", !0),
-			U.open ? (x(), m(u, {
+				})) : m("", !0)
+			])) : m("", !0),
+			U.open ? (b(), p(te, {
 				key: 1,
 				ref_key: "overlay",
 				ref: H,
@@ -203,19 +232,29 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				tabindex: "-1",
 				onFocusout: $
 			}, {
-				default: O(() => [
-					_("div", j, [(x(!0), g(f, null, w(K.value, (e, t) => (x(), m(D(d), {
+				default: D(() => [
+					g("div", M, [(b(!0), h(d, null, S(K.value, (e, t) => (b(), p(E(l), {
 						key: t,
-						class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
+						class: y({ "pl-dropdown-multi__chip--missing": e.isMissing }),
 						closeable: "",
 						"data-testid": "pl-dropdown-multi-chip",
 						small: "",
-						onClose: (t) => Z(e.value)
+						onClose: (t) => Q(e.value)
 					}, {
-						default: O(() => [v(E(e.label), 1)]),
+						default: D(() => [e.hint === void 0 ? (b(), h(d, { key: 1 }, [_(T(e.label), 1)], 64)) : (b(), p(E(n), {
+							key: 0,
+							element: "span",
+							position: "top",
+							"data-testid": "pl-dropdown-multi-chip-hint",
+							onMouseover: o[4] ||= O(() => {}, ["stop"])
+						}, {
+							tooltip: D(() => [(b(), p(w(e.hint)))]),
+							default: D(() => [g("span", null, T(e.label), 1)]),
+							_: 2
+						}, 1024))]),
 						_: 2
 					}, 1032, ["class", "onClose"]))), 128))]),
-					(x(!0), g(f, null, w(q.value, (e, t) => (x(), m(r, {
+					(b(!0), h(d, null, S(q.value, (e, t) => (b(), p(r, {
 						key: t,
 						option: e,
 						"text-item": "text",
@@ -224,24 +263,24 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 						size: "medium",
 						"use-checkbox": "",
 						"data-testid": "pl-dropdown-multi-option",
-						onClick: k((t) => X(e.value), ["stop"])
+						onClick: O((t) => Z(e.value), ["stop"])
 					}, null, 8, [
 						"option",
 						"is-selected",
 						"is-hovered",
 						"onClick"
 					]))), 128)),
-					q.value.length ? h("", !0) : (x(), g("div", M, " Nothing found "))
+					q.value.length ? m("", !0) : (b(), h("div", N, " Nothing found "))
 				]),
 				_: 1
-			}, 8, ["root"])) : h("", !0),
-			te(o, {
+			}, 8, ["root"])) : m("", !0),
+			ae(ee, {
 				class: "pl-dropdown-multi__contour",
-				"group-position": y.groupPosition
+				"group-position": v.groupPosition
 			}, null, 8, ["group-position"])
-		])], 42, ce), y.error ? (x(), g("div", N, E(D(i)(y.error)), 1)) : y.helper ? (x(), g("div", P, E(y.helper), 1)) : h("", !0)]));
+		])], 42, pe), v.error ? (b(), h("div", P, T(E(i)(v.error)), 1)) : v.helper ? (b(), h("div", F, T(v.helper), 1)) : m("", !0)]));
 	}
 });
-export { F as default };
+export { I as default };
 
 //# sourceMappingURL=PlDropdownMulti.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_withDirectives","_vModelText","_Fragment","_renderList","_createBlock","_unref","PlChip","_withModifiers","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","PlIcon24","_renderSlot","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","DropdownListItem","_createVNode","DoubleContour","PlSvg_default","PlTooltip_default","DropdownListItem_default","PlIcon24_default","DoubleContour_default","DropdownOverlay_default","required_default","PlChip_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","__emit","emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","optionsLoaded","opt","deepEqual","o","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","showLoadingSpinner","isDisabled","tabindex","updateActiveOption","selectOption","values","it","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","relatedTarget","event","handleKeydown","open","filteredOptions","length","activeOption","useLabelNotch","watch","watchPostEffect","openBlock","createElementBlock","createElementVNode","normalizeClass","withDirectives","_cache","$event","vModelText","createCommentVNode","Fragment","renderList","createBlock","i","withModifiers","withCtx","createTextVNode","toDisplayString","renderSlot","_ctx","index","item","createVNode","getErrorMessage"],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * 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 is missing from `options` —\n     * e.g. its upstream source was deleted. Rendered italic in error color.\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     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    required: false,\n    disabled: false,\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  // While options load (`options === undefined`), hide chips for unresolved values\n  // to avoid a \"missing\" flash that resolves once options arrive.\n  const optionsLoaded = props.options !== undefined;\n  return selectedValuesRef.value\n    .map((v) => {\n      const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n      if (opt) {\n        // Found: render the option's own (normalized) label verbatim — matches\n        // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n        // so there is no raw-value leak to guard against.\n        return { ...opt, isMissing: false };\n      }\n      if (!optionsLoaded) {\n        return undefined;\n      }\n      // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n      return {\n        value: v,\n        label: props.missingValueLabel,\n        isMissing: true,\n      };\n    })\n    .filter((v): v is NonNullable<typeof v> => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown-multi\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      data-testid=\"pl-dropdown-multi-control\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlIcon24\n              v-if=\"showLoadingSpinner\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown-multi__arrow-wrapper\"\n              data-testid=\"pl-dropdown-multi-arrow\"\n              @click.stop=\"toggleModel\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-multi-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          data-testid=\"pl-dropdown-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-dropdown-multi__open-chips-container\"\n            data-testid=\"pl-dropdown-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-dropdown-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-multi-options-empty\"\n          >\n            Nothing found\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\" data-testid=\"pl-dropdown-multi-error\">\n      {{ getErrorMessage(error) }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-dropdown-multi__helper\"\n      data-testid=\"pl-dropdown-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_withDirectives","_vModelText","_Fragment","_renderList","_createBlock","_unref","PlChip","_withModifiers","_withCtx","PlTooltip","_resolveDynamicComponent","_toDisplayString","_createTextVNode","_createCommentVNode","PlIcon24","_renderSlot","PlSvg","SvgRequired","DropdownOverlay","DropdownListItem","_createVNode","DoubleContour","PlSvg_default","PlTooltip_default","DropdownListItem_default","PlIcon24_default","DoubleContour_default","DropdownOverlay_default","required_default","PlChip_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","__emit","emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","optionsLoaded","opt","deepEqual","o","label","pickedValueText","missingValueText","missingValueTooltip","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","showLoadingSpinner","isDisabled","tabindex","updateActiveOption","selectOption","values","it","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","relatedTarget","event","handleKeydown","open","filteredOptions","length","activeOption","useLabelNotch","watch","watchPostEffect","openBlock","createElementBlock","createElementVNode","normalizeClass","withDirectives","_cache","$event","vModelText","createCommentVNode","Fragment","renderList","createBlock","i","withModifiers","withCtx","createTextVNode","toDisplayString","resolveDynamicComponent","renderSlot","_ctx","index","item","createVNode","getErrorMessage"],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { missingValueText, missingValueTooltip, pickedValueText } from \"../../helpers/columnValue\";\nimport type { MissingValueLabel, MissingValueTooltip } from \"../../helpers/columnValue\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * 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 is missing from `options` —\n     * e.g. its upstream source was deleted. Rendered italic in error color. One text for every\n     * such value, or a function giving it per value. By default, the value a column value id\n     * picks, marked as not available, or \"Value not available\".\n     */\n    missingValueLabel?: MissingValueLabel;\n    /**\n     * Explains a selected value missing from the options in a tooltip over it: one text for every\n     * such value, or a function giving the content per value.\n     */\n    missingValueTooltip?: MissingValueTooltip;\n    /**\n     * 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     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    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    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  // While options load (`options === undefined`), hide chips for unresolved values\n  // to avoid a \"missing\" flash that resolves once options arrive. A picked column value\n  // is shown by its own label meanwhile.\n  const optionsLoaded = props.options !== undefined;\n  return selectedValuesRef.value\n    .map((v) => {\n      const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n      if (opt) {\n        // Found: render the option's own (normalized) label verbatim — matches\n        // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n        // so there is no raw-value leak to guard against.\n        return { ...opt, isMissing: false, hint: undefined };\n      }\n      if (!optionsLoaded) {\n        const label = pickedValueText(v);\n        return label === undefined\n          ? undefined\n          : { value: v, label, isMissing: false, hint: undefined };\n      }\n      // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n      return {\n        value: v,\n        label: missingValueText(v, props.missingValueLabel),\n        isMissing: true,\n        hint: missingValueTooltip(v, props.missingValueTooltip),\n      };\n    })\n    .filter((v): v is NonNullable<typeof v> => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown-multi\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      data-testid=\"pl-dropdown-multi-control\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              <!-- The hover stops here: the tooltip of the chip itself would close this one. -->\n              <PlTooltip\n                v-if=\"opt.hint !== undefined\"\n                element=\"span\"\n                position=\"top\"\n                data-testid=\"pl-dropdown-multi-chip-hint\"\n                @mouseover.stop\n              >\n                <span>{{ opt.label }}</span>\n                <template #tooltip>\n                  <component :is=\"opt.hint\" />\n                </template>\n              </PlTooltip>\n              <template v-else>{{ opt.label }}</template>\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlIcon24\n              v-if=\"showLoadingSpinner\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown-multi__arrow-wrapper\"\n              data-testid=\"pl-dropdown-multi-arrow\"\n              @click.stop=\"toggleModel\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-multi-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          data-testid=\"pl-dropdown-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-dropdown-multi__open-chips-container\"\n            data-testid=\"pl-dropdown-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n              closeable\n              data-testid=\"pl-dropdown-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              <!-- The hover stops here: the tooltip of the chip itself would close this one. -->\n              <PlTooltip\n                v-if=\"opt.hint !== undefined\"\n                element=\"span\"\n                position=\"top\"\n                data-testid=\"pl-dropdown-multi-chip-hint\"\n                @mouseover.stop\n              >\n                <span>{{ opt.label }}</span>\n                <template #tooltip>\n                  <component :is=\"opt.hint\" />\n                </template>\n              </PlTooltip>\n              <template v-else>{{ opt.label }}</template>\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-dropdown-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-multi-options-empty\"\n          >\n            Nothing found\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\" data-testid=\"pl-dropdown-multi-error\">\n      {{ getErrorMessage(error) }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-dropdown-multi__helper\"\n      data-testid=\"pl-dropdown-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.js","names":["_sfc_main","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","PlDropdownMultiRef_default"],"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":""}
+{"version":3,"file":"PlDropdownMultiRef.js","names":["_sfc_main","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","PlDropdownMultiRef_default"],"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":""}