@leaflink/stash 53.4.1 → 53.4.3

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n\n  // Note: the `trackBy` prop, the `single` prop, and the fact that options can be strings prevents us from knowing the type of the selected options\n\n  type Option = any;\n\n  type SelectedOptions = Option | Option[];\n\n  export interface SelectProps extends FieldProps {\n    /**\n     * If there is only 1 option selected, it prevents that option from being de-selected\n     */\n    preventEmpty?: boolean;\n\n    /**\n     * @deprecated The `allowEmpty` prop is no longer supported; use `preventEmpty` instead.\n     */\n    allowEmpty?: string | boolean | null;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * List of one or more fields to search on. When empty, displayBy will be used\n     */\n    searchBy?: string[];\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n\n    /**\n     * Placeholder text.\n     */\n    placeholder?: string;\n\n    /**\n     * @deprecated Use the `error-text` prop instead\n     */\n    error?: string;\n\n    /**\n     * @deprecated Use the `hint-text` prop instead\n     */\n    hint?: string;\n\n    /**\n     * Sets a custom icon.\n     */\n    icon?: string | boolean;\n\n    /**\n     * Sets a name attribute on the native (hidden) select element\n     *\n     * Setting the default value to `undefined` so the attribute isn't rendered if not explicitly provided to ensure backwards compatibility with MP django forms\n     */\n    name?: string;\n\n    /**\n     * The list of all options to select from.\n     */\n    options?: Option[] | readonly Option[];\n\n    /**\n     * Lazily evaluate and set component `options`. Will execute upon user mouseover.\n     */\n    lazy?: () => Option[];\n\n    /**\n     * Sets the currently-selected value(s) for the component.\n     * Accepts an array of Objects, or a single Object (if `single` is true), or a string\n     */\n    modelValue?: SelectedOptions;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: SelectedOptions | null;\n\n    /**\n     * Hides the search input\n     */\n    hideSearch?: boolean;\n\n    /**\n     * @deprecated The `searchable` prop is no longer supported; Use `hideSearch` instead.\n     */\n    searchable?: string | boolean | null;\n\n    /**\n     * If true, prevents the search term from being cleared when the drawer is dismissed.\n     */\n    preserveSearchTerm?: boolean;\n\n    /**\n     * Prevents the options from being filtered when the search term changes.\n     * Allows the parent to filter the options.\n     */\n    disableFiltering?: boolean;\n\n    /**\n     * Functions as a single select, if true\n     */\n    single?: boolean;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * On an ajaxed request when the dropdown is open, we may be experiencing slower load times.\n     * This flag will drop a loader into the dropdown.  Note: This has never been design reviewed.\n     */\n    loading?: boolean;\n\n    /**\n     * @deprecated Instead, use the `@search` event (the onSearch prop) and ensure its event handler returns a Promise that resolves after the search is complete.\n     */\n    searchLoading?: boolean;\n\n    /**\n     * In the selection text we use this to give more visual distinction to what type of item(s) are selected\n     * E.g. 2 customers selected. An empty string will result in `2 selected`.\n     */\n    selectItemType?: string;\n\n    /**\n     * Hides the \"check\" icon if truthy\n     */\n    hideCheck?: boolean;\n\n    searchPlaceholder?: string;\n\n    /**\n     * Equivalent to emitting a \"search\" event, except this prop can be used to populate the list of `options` using an HTTP request because a prop's return value can be received and awaited, unlike an event.\n     *\n     * **Tip:** to show a loading indicator while searching, return a Promise that resolves after the search is complete.\n     *\n     * **Warning:** the search input is debounced so there is no need to debounce this function.\n     */\n    onSearch?: (searchTerm: string) => Promise<void> | void;\n\n    /**\n     * Uses the \"fuzzy search\" algorithm when searching, if true\n     */\n    useFuzzySearch?: boolean;\n\n    /**\n     * Sets the placement of the dropdown\n     * @default 'bottom-start'\n     */\n    menuPlacement?: Placement;\n\n    /**\n     * Enables teleporting the dropdown\n     * @default false\n     */\n    enableTeleport?: boolean;\n\n    /**\n     * The selector or element to which the dropdown should be teleported\n     * @default `'#stash-menus-mount-node'`\n     */\n    teleportTo?: string | HTMLElement;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { autoUpdate, flip, offset, type Placement, type Side, size, useFloating } from '@floating-ui/vue';\n  import logger from '@leaflink/snitch';\n  import debounce from 'lodash-es/debounce';\n  import isEmpty from 'lodash-es/isEmpty';\n  import isEqual from 'lodash-es/isEqual';\n  import isPlainObject from 'lodash-es/isPlainObject';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onMounted, onUnmounted, type Ref, ref, useAttrs, watch } from 'vue';\n\n  import useSearch from '../../composables/useSearch/useSearch';\n  import { DEBOUNCE, KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import { DEFAULT_MENUS_PLUGIN_NODE_ID } from '../../plugins/MenusPlugin';\n  import Chip from '../Chip/Chip.vue';\n  import Field from '../Field/Field.vue';\n  import Icon, { IconName } from '../Icon/Icon.vue';\n\n  const GAP_HEIGHT = 6;\n\n  const MENU_MAX_HEIGHT_PX = 300;\n\n  defineOptions({\n    name: 'll-select',\n  });\n\n  const props = withDefaults(defineProps<SelectProps>(), {\n    preventEmpty: false,\n    allowEmpty: null,\n    displayBy: 'name',\n    searchBy: () => [],\n    trackBy: 'id',\n    placeholder: 'Select option',\n    error: '',\n    hint: '',\n    icon: 'caret-down',\n    name: undefined,\n    options: () => [],\n    lazy: undefined,\n    modelValue: () => [],\n    value: null,\n    hideSearch: false,\n    searchable: null,\n    preserveSearchTerm: false,\n    disableFiltering: false,\n    single: false,\n    noTruncate: false,\n    loading: false,\n    searchLoading: false,\n    selectItemType: '',\n    hideCheck: false,\n    searchPlaceholder: 'Search',\n    onSearch: undefined,\n    useFuzzySearch: false,\n    menuPlacement: 'bottom-start',\n    enableTeleport: false,\n    teleportTo: `#${DEFAULT_MENUS_PLUGIN_NODE_ID}`,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', selectedOptions: SelectedOptions): void;\n    /**\n     * Emitted the selected value(s) a cleared.\n     */\n    (e: 'clear'): void;\n    /**\n     * Emitted when an option is added.\n     */\n    (e: 'add', optionAdded: Option): void;\n    /**\n     * Emitted when an option is removed.\n     */\n    (e: 'remove', optionRemoved: Option, index: number): void;\n    /**\n     * Emitted when the select is opened.\n     */\n    (e: 'opened'): void;\n    /**\n     * Emitted when the select is closed.\n     */\n    (e: 'closed', selectedOptions: SelectedOptions): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = defineSlots<{\n    /**\n     * Selected value(s) custom text. Exposes the option object and remove function.\n     */\n    selected(props: {\n      /**\n       * The selected option object.\n       */\n      option: Option;\n      /**\n       * Function to remove the selected option from the selection.\n       */\n      onRemove: () => void;\n      /**\n       * Class to apply to the selected chip.\n       */\n      chipSelectedClass: string;\n    }): unknown;\n    /**\n     * Select custom option text. Exposes the option object\n     */\n    option(props: {\n      /**\n       * Option The option instance for this list item.\n       */\n      option: Option;\n    }): unknown;\n    /**\n     * Slot for when there are no options available.\n     */\n    'no-options'(): unknown;\n    /**\n     * Slot to display a helpful hint message below the select field.\n     */\n    hint(): unknown;\n  }>();\n\n  const selectRef = ref<HTMLDivElement | null>(null);\n  const contentRef = ref<HTMLDivElement | null>(null);\n  const optionsWrapperRef = ref<HTMLDivElement | null>(null);\n  const chipsRef = ref<HTMLUListElement | null>(null);\n  const searchRef = ref<HTMLInputElement | null>(null);\n\n  const chipsHeight = ref(0);\n  const contentHeight = ref(0);\n  const internalValue = ref<Option[]>([]) as Ref<Option[]>;\n  const searchFor = ref<(searchTerm: string) => Option[]>(() => []); // initialized in the watch handler for options\n  const searchTerm = ref('');\n  const activeIndex = ref(-1);\n  const isActive = ref(false);\n  const pendingSearchRequests = ref({});\n  const shouldUseLazyOptions = ref(false);\n\n  const { floatingStyles, update: updateFloating } = useFloating(selectRef, optionsWrapperRef, {\n    whileElementsMounted: autoUpdate,\n    placement: props.menuPlacement,\n    middleware: [\n      flip(),\n      offset(({ rects, placement }) => {\n        // gets the current placement side, especially after flip() is run\n        const placementSide = placement.split('-')[0] as Side;\n        const isBottom = placementSide === ('bottom' satisfies Side);\n\n        // if the placement is at the bottom, we need to adjust the offset\n        if (isBottom && chipsHeight.value > contentHeight.value) {\n          return chipsHeight.value - rects.reference.height + GAP_HEIGHT;\n        } else {\n          return GAP_HEIGHT;\n        }\n      }),\n      size({\n        apply({ availableHeight, elements, rects }) {\n          if (props.enableTeleport) {\n            Object.assign(elements.floating.style, {\n              maxWidth: `${rects.reference.width}px`,\n              maxHeight: `${Math.min(availableHeight, MENU_MAX_HEIGHT_PX)}px`,\n            });\n          }\n        },\n      }),\n    ],\n  });\n  const resizeObserverChips = new ResizeObserver(() => debouncedUpdateChipsHeight());\n\n  const isSearchable = computed(() => !props.hideSearch && props.searchable !== 'false' && props.searchable !== false);\n\n  const internalOptions = computed(() => {\n    let OPTIONS = (shouldUseLazyOptions.value && props.lazy ? props.lazy() : props.options).filter(Boolean); // prevent [undefined]\n\n    // if `options` is an array... but not an array of objects\n    if (!isPlainObject(OPTIONS[0])) {\n      OPTIONS = OPTIONS.map((name, id) => ({ name, id }) as unknown as Option);\n    }\n\n    return OPTIONS;\n  });\n\n  const readOnlyValue = computed(() => {\n    if (!internalValue.value.length) {\n      return '';\n    }\n\n    return internalValue.value.map((option) => option[props.displayBy] || option).join(', ');\n  });\n\n  const isSearching = computed(() => props.searchLoading || Object.keys(pendingSearchRequests.value).length > 0);\n\n  const filteredOptions = computed(() => {\n    if (props.disableFiltering || !(searchTerm.value || '').trim()) {\n      return internalOptions.value;\n    }\n\n    return searchFor.value(searchTerm.value);\n  });\n\n  const isChipsOneLine = computed(() => chipsHeight.value <= contentHeight.value);\n\n  const shouldShowTotal = computed(\n    () => !isActive.value && !props.single && !isChipsOneLine.value && internalValue.value.length,\n  );\n\n  const clearSelectionText = computed(() => {\n    return [internalValue.value.length, props.selectItemType, 'selected'].filter(Boolean).join(' ');\n  });\n\n  const shouldPreventEmpty = computed(() => {\n    return props.preventEmpty || props.allowEmpty === 'false' || props.allowEmpty === false;\n  });\n\n  watch(searchTerm, (currentValue, oldValue) => oldValue !== currentValue && setIndex(-1));\n\n  watch(internalValue, () => debouncedUpdateChipsHeight(), { deep: true });\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      // multiple\n      if (Array.isArray(value)) {\n        const newValue = value.filter(Boolean); // sometimes modelValue is [undefined]\n\n        if (!isEqual(newValue, internalValue.value)) {\n          internalValue.value = newValue;\n        }\n\n        return;\n      }\n\n      // single; if value is a non-empty string or a non-empty object\n      if (!isEmpty(value)) {\n        if (!isEqual(value, internalValue.value[0])) {\n          internalValue.value[0] = value;\n        }\n\n        return;\n      }\n\n      // if value is an empty object or falsy\n      internalValue.value = [];\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.options,\n    () => {\n      const { searchFor: searchForFn } = useSearch<Option>({\n        items: computed(() => internalOptions.value),\n        fieldNames: props.searchBy.length ? props.searchBy : [props.displayBy],\n        trackBy: props.trackBy,\n      });\n\n      searchFor.value = (searchTerm) => searchForFn(searchTerm, { fuzzy: props.useFuzzySearch });\n    },\n    { immediate: true },\n  );\n\n  watch(chipsHeight, () => debouncedUpdateFloating());\n\n  const debouncedUpdateFloating = debounce(() => updateFloating(), 50);\n  const debouncedUpdateChipsHeight = debounce(() => updateChipsHeight(), 50);\n\n  const isOptionDisabled = (option: Option) => {\n    return option && typeof option === 'object' && 'disabled' in option && option?.disabled;\n  };\n\n  const clear = () => {\n    internalValue.value = [];\n    emit('update:model-value', props.single ? undefined : internalValue.value);\n    emit('clear');\n  };\n\n  /**\n   * Adds (or selects) an option.\n   * @param {Option} option The selected option\n   */\n  const handleSelect = (option?: Option) => {\n    if (props.disabled || !option || isOptionDisabled(option)) {\n      return;\n    }\n\n    if (!isSelected(option)) {\n      if (props.single) {\n        internalValue.value = [];\n      }\n\n      internalValue.value.push(option);\n      emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n      emit('add', option);\n    } else {\n      remove(option);\n    }\n\n    if (props.single) {\n      dismiss();\n    }\n  };\n\n  const handleSelectChange = (evt) => {\n    // If this is a single select, just pass along the option\n    // This short-circuit is purely for readability, as the iterations for multi would also work for single selects\n    if (props.single) {\n      const selectedOption = internalOptions.value.find((opt) => opt[props.trackBy]?.toString() === evt.target.value);\n      handleSelect(selectedOption);\n      return;\n    }\n\n    // Spread the HTMLCollection (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) to array so we can invoke `find`\n    const selectedOptions = [...evt.target.selectedOptions];\n\n    // If it's a multiselect, the HTML select used for the screen reader can have multiple items\n    // deselected and a new one selected in one change event.\n    // We need to reconcile the new selected options with our internal state\n\n    // 1. remove all the items in our internal state that are no longer present\n    // (Spread this array so we can remove items from it while iterating)\n    for (const internalOption of [...internalValue.value]) {\n      const selectedOption = selectedOptions.find((opt) => opt.value === internalOption[props.trackBy]?.toString());\n\n      if (!selectedOption) {\n        remove(internalOption);\n      }\n    }\n\n    // 2. add all the items that are now selected if needed\n    for (const selectedOption of selectedOptions) {\n      const internalOption = internalOptions.value.find(\n        (opt) => opt[props.trackBy]?.toString() === selectedOption.value,\n      );\n\n      if (isSelected(internalOption)) {\n        continue;\n      } else {\n        handleSelect(internalOption);\n      }\n    }\n  };\n\n  /**\n   * Removes (or un-selects) an option.\n   * @param {Option} option The option to be removed\n   */\n  const remove = (option: Option) => {\n    if (props.disabled || (shouldPreventEmpty.value && internalValue.value.length === 1)) {\n      return;\n    }\n\n    const index = internalValue.value.findIndex((opt) => opt[props.trackBy] === option[props.trackBy]);\n\n    if (index === -1) {\n      logger.warn('ll-select: could not find option to remove', option);\n      return;\n    }\n\n    internalValue.value.splice(index, 1);\n    emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n    emit('remove', option, index);\n  };\n\n  /**\n   * Opens the `options` drawer and provides focus.\n   */\n  const open = () => {\n    if (isActive.value) {\n      return;\n    }\n\n    debouncedUpdateChipsHeight();\n\n    isActive.value = true;\n    emit('opened');\n\n    if (isSearchable.value) {\n      nextTick(() => {\n        searchRef.value?.focus({ preventScroll: true });\n      });\n    }\n  };\n\n  /**\n   * Closes the drawer and cleans up a few settings.\n   */\n  const dismiss = () => {\n    if (isActive.value) {\n      emit('closed', internalValue.value);\n    }\n\n    setIndex(-1);\n    isActive.value = false;\n\n    if (!props.preserveSearchTerm) {\n      searchTerm.value = '';\n    }\n\n    // The optional chaining here is required.\n    // There are cases when the component is removed from the DOM and the ref is lost.\n    // .ie when the component is used in a modal and the modal is dismissed.\n    // Tracked in this ticket: F-1893\n    contentRef.value?.blur(); // if the component remains in focus, clicking it again will not open the options list\n  };\n\n  /**\n   * Scroll list items when up and down keys are pressed\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const scrollItems = async (e: KeyboardEvent) => {\n    await nextTick();\n\n    if (!contentRef.value) {\n      return;\n    }\n\n    const allowedKeyCodes = [KEY_CODES.ENTER, KEY_CODES.ESCAPE] as number[];\n\n    // Wait for highlighted item update after using keyboard (`onKeyDown`)\n    if (!allowedKeyCodes.includes(e.keyCode)) {\n      const el = contentRef.value.querySelector('.stash-select__option--highlighted');\n      const elBCR = el?.getBoundingClientRect();\n      const parentBCR = contentRef.value.getBoundingClientRect();\n\n      if (!elBCR || !parentBCR) {\n        return;\n      }\n\n      if (elBCR.bottom >= parentBCR.bottom || elBCR.top <= parentBCR.top + elBCR.height) {\n        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }\n  };\n\n  /**\n   * Sets the `activeIndex` on hover, so that the user may then fine-tune\n   * their selection with the arrow keys.\n   */\n  const setIndex = (index: number) => {\n    activeIndex.value = index;\n  };\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && activeIndex.value < filteredOptions.value.length - 1 && isActive.value) {\n      activeIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && activeIndex.value > 0) {\n      if (isActive.value) {\n        activeIndex.value--;\n      }\n\n      // Scroll to top when search is available and first element is highlighted (Using 100 to be sure that it'll be sure that search is visible)\n      if (optionsWrapperRef.value && isSearchable.value && activeIndex.value === 0) {\n        optionsWrapperRef.value.scrollTop -= 100;\n      }\n    } else if (e.keyCode === KEY_CODES.ENTER && activeIndex.value !== -1 && isActive.value) {\n      handleSelect(filteredOptions.value[activeIndex.value]);\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n    scrollItems(e);\n  };\n\n  const handleSearchInput = debounce(function () {\n    search();\n  }, DEBOUNCE.FAST);\n\n  const search = async function () {\n    if (!props.onSearch) {\n      return;\n    }\n\n    const requestId = uniqueId('search-request-');\n\n    try {\n      pendingSearchRequests.value[requestId] = true;\n      await props.onSearch(searchTerm.value);\n    } finally {\n      delete pendingSearchRequests.value[requestId];\n    }\n  };\n\n  /**\n   * Dynamically sets classes on an `option` in the drawer.\n   * @param {Option} option The `option` for which to generate classes\n   * @param {number} index The index of the `option` in the list of `options`\n   */\n  const optionClass = (option: Option, index: number) => {\n    return [\n      {\n        'stash-select__option': true,\n        'stash-select__option--disabled': isOptionDisabled(option),\n        'stash-select__option--highlighted': activeIndex.value === index,\n        'stash-select__option--selected': isSelected(option),\n      },\n\n      // @deprecated\n      // backwards compatibility\n      {\n        'is-selected': activeIndex.value === index,\n        'bg-ice-200': activeIndex.value === index,\n        'bg-blue-100 text-ice-700': isSelected(option),\n      },\n    ];\n  };\n\n  /**\n   * Finds out if the given item is already present in the selected options\n   * @param {Option} option The item to check\n   * @returns {boolean} Returns true if element is selected\n   */\n  const isSelected = (option?: Option | null): boolean => {\n    if (option === undefined || option === null) {\n      return false;\n    }\n\n    return internalValue.value.some((value) => value?.[props.trackBy] === option[props.trackBy]);\n  };\n\n  /**\n   * Checks if the element is within the Select menu by checking both the content and the teleportTo element\n   */\n  function isElementWithinSelectMenu(element: Node | null) {\n    if (!element) {\n      return false;\n    }\n\n    const isElementInMenu = contentRef.value?.contains(element);\n    const isElementInTeleportedMenu = optionsWrapperRef.value?.contains(element);\n\n    return isElementInMenu || isElementInTeleportedMenu;\n  }\n\n  function handleFocusOut(focusEvent: FocusEvent) {\n    const nextFocusedElement = focusEvent.relatedTarget as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(nextFocusedElement);\n\n    if (!isFocusedElementInMenu && nextFocusedElement) {\n      dismiss();\n    }\n  }\n\n  function handleOutsideClick(event: MouseEvent) {\n    const target = event.target as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(target);\n\n    if (!isFocusedElementInMenu) {\n      dismiss();\n    }\n  }\n\n  /**\n   * Handles the mouse leave of the select and clears item highlight\n   */\n  const handleMouseLeave = () => {\n    setIndex(-1);\n  };\n\n  /**\n   * Update height of chips container\n   */\n  const updateChipsHeight = async () => {\n    // Wait for the DOM to update so we can get an accurate value for chips' clientHeight\n    await nextTick();\n\n    if (chipsRef.value && contentRef.value) {\n      contentHeight.value = contentHeight.value === 0 ? contentRef.value.clientHeight : contentHeight.value;\n      chipsHeight.value = chipsRef.value.clientHeight;\n    }\n  };\n\n  onMounted(() => {\n    if (attrs.onInput) {\n      throw new Error('ll-select: use the @update:model-value event instead of @input.');\n    }\n\n    if (chipsRef.value) {\n      resizeObserverChips.observe(chipsRef.value);\n    }\n\n    window.addEventListener('resize', debouncedUpdateChipsHeight);\n\n    debouncedUpdateChipsHeight();\n  });\n\n  /**\n   * Remove event listener to handle component width when resizing window\n   */\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateChipsHeight);\n    resizeObserverChips.disconnect();\n    debouncedUpdateChipsHeight.cancel();\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    class=\"input ll-select stash-select\"\n    data-test=\"stash-select\"\n    :class=\"attrs.class\"\n    :error-text=\"props.errorText || props.error\"\n    :hint-text=\"props.hintText || props.hint\"\n  >\n    <template v-if=\"props.isReadOnly\" #default=\"{ fieldId, labelId }\">\n      <div class=\"flex h-input items-center text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"show-empty h-min\">\n          {{ readOnlyValue }}\n        </span>\n      </div>\n    </template>\n    <template v-else #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <!-- SCREEN READER ONLY -->\n      <select\n        :id=\"fieldId\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        class=\"sr-only\"\n        :disabled=\"props.disabled\"\n        :multiple=\"!props.single\"\n        :name=\"props.name\"\n        @change=\"handleSelectChange\"\n      >\n        <option\n          v-for=\"(option, index) in filteredOptions\"\n          :key=\"`srOnlyOption-${index}`\"\n          :selected=\"isSelected(option)\"\n          :value=\"option[props.trackBy]\"\n          :disabled=\"isOptionDisabled(option)\"\n        >\n          {{ option[props.displayBy] || '' }}\n        </option>\n\n        <!-- Empty option to allow deselecting non-multiselects -->\n        <option value=\"\"></option>\n      </select>\n\n      <!-- SELECT -->\n      <div\n        ref=\"selectRef\"\n        v-clickoutside=\"handleOutsideClick\"\n        role=\"listbox\"\n        aria-hidden=\"true\"\n        class=\"stash-select__content-wrapper\"\n        :aria-controls=\"'listbox-' + fieldId\"\n        :aria-expanded=\"isActive\"\n        :aria-label=\"props.placeholder\"\n        :aria-disabled=\"props.disabled || undefined\"\n        :class=\"[\n          {\n            'stash-select--disabled': !!props.disabled,\n            'stash-select--error': !!(props.errorText || props.error),\n            'stash-select--active': isActive,\n            'stash-select--single': props.single,\n          },\n\n          // @deprecated\n          // backwards compatibility\n          {\n            'is-active': isActive,\n            'is-single': props.single,\n            'is-disabled': props.disabled,\n          },\n        ]\"\n        @keydown=\"onKeyDown\"\n        @keyup.esc=\"dismiss\"\n      >\n        <!-- CONTENT -->\n        <div\n          :id=\"'listbox-' + fieldId\"\n          ref=\"contentRef\"\n          class=\"input-field stash-select__content\"\n          tabindex=\"0\"\n          data-test=\"stash-select|dropdown-trigger\"\n          @focusin=\"open\"\n          @focusin.once=\"shouldUseLazyOptions = true\"\n          @focusout=\"handleFocusOut\"\n          @keydown=\"open\"\n          @mouseleave=\"handleMouseLeave\"\n        >\n          <!-- CHIPS -->\n          <ul ref=\"chipsRef\" class=\"stash-select__chips\">\n            <!-- PLACEHOLDER -->\n            <li\n              v-if=\"!internalValue.length\"\n              class=\"stash-select__placeholder mr-0 pl-1.5\"\n              :class=\"{ truncate: !props.noTruncate }\"\n            >\n              {{ props.placeholder }}\n            </li>\n\n            <template v-if=\"props.single\">\n              <li\n                v-for=\"option of internalValue\"\n                :key=\"`chip-${option[props.trackBy]}`\"\n                class=\"stash-select__selected mr-0 pl-1.5\"\n                :class=\"{ truncate: !props.noTruncate }\"\n              >\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  {{ option[props.displayBy] || option }}\n                  <button\n                    tabindex=\"-1\"\n                    class=\"stash-select__remove\"\n                    @keypress.enter.prevent=\"remove(option)\"\n                    @mousedown.prevent.stop=\"remove(option)\"\n                  >\n                    <Icon icon=\"close\" name=\"close\" size=\"small\" />\n                  </button>\n                </slot>\n              </li>\n            </template>\n\n            <template v-else>\n              <li v-for=\"option of internalValue\" :key=\"`chip-${option[props.trackBy]}`\" class=\"inline-block\">\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  <Chip\n                    bg-color=\"blue-500\"\n                    is-removable\n                    text-color=\"white\"\n                    class=\"stash-select__chip\"\n                    @remove=\"remove(option)\"\n                  >\n                    {{ option[props.displayBy] || option }}\n                  </Chip>\n                </slot>\n              </li>\n            </template>\n          </ul>\n\n          <!-- TOTAL -->\n          <div v-if=\"shouldShowTotal\" class=\"stash-select__total\">\n            <Chip bg-color=\"blue-500\" is-removable text-color=\"white\" class=\"stash-select__chip\" @remove=\"clear\">\n              {{ clearSelectionText }}\n            </Chip>\n          </div>\n\n          <!-- TOGGLE -->\n          <Icon\n            v-if=\"props.icon\"\n            class=\"stash-select__icon\"\n            data-test=\"stash-select|toggle-icon\"\n            :name=\"props.icon as IconName\"\n            :class=\"{ 'text-ice-500': props.disabled }\"\n            @mousedown.prevent=\"isActive && dismiss()\"\n          />\n          <!-- DRAWER -->\n          <Teleport :to=\"props.teleportTo\" :disabled=\"!props.enableTeleport\">\n            <transition name=\"fade\">\n              <div\n                v-show=\"isActive && !props.disabled\"\n                ref=\"optionsWrapperRef\"\n                class=\"stash-select__border-selector w-full shadow-2xl\"\n                :style=\"floatingStyles\"\n                @click.stop\n              >\n                <!-- SEARCH -->\n                <div v-if=\"isSearchable\" class=\"flex items-center border-b border-blue-500 pr-1.5\">\n                  <input\n                    ref=\"searchRef\"\n                    v-model=\"searchTerm\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    class=\"stash-select__search\"\n                    :data-test=\"attrs['data-test'] ? attrs['data-test'] + '-search' : 'stash-select|search'\"\n                    :placeholder=\"props.searchPlaceholder\"\n                    :spellcheck=\"false\"\n                    @input=\"handleSearchInput\"\n                  />\n                  <Icon name=\"search\" class=\"text-ice-500\" />\n                </div>\n\n                <!-- OPTIONS -->\n                <ul class=\"stash-select__options options my-1.5 w-full border-white bg-white\">\n                  <li\n                    v-for=\"(option, index) in filteredOptions\"\n                    :key=\"`option-${option[props.trackBy]}`\"\n                    :data-test=\"option[props.trackBy]\"\n                    :class=\"optionClass(option, index)\"\n                    @click=\"handleSelect(option)\"\n                    @mouseenter.self=\"setIndex(index)\"\n                  >\n                    <slot name=\"option\" :option=\"option\">\n                      {{ option[props.displayBy] || option }}\n                    </slot>\n\n                    <span v-if=\"isSelected(option) && !props.hideCheck\" class=\"ml-auto pl-1.5\">\n                      <Icon class=\"text-blue-500\" name=\"check\" />\n                    </span>\n                  </li>\n                  <li v-show=\"props.loading || isSearching\" class=\"m-1.5 cursor-default p-1.5\">\n                    <Icon data-test=\"stash-select|options-loading\" name=\"working\" class=\"animate-spin text-ice-500\" />\n                  </li>\n                  <li\n                    v-show=\"!props.loading && !isSearching && !filteredOptions.length\"\n                    class=\"m-1.5 cursor-default p-1.5\"\n                    data-test=\"stash-select|no-options\"\n                  >\n                    <slot name=\"no-options\"> No options </slot>\n                  </li>\n                </ul>\n              </div>\n            </transition>\n          </Teleport>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint?.()\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-select {\n      position: relative;\n    }\n\n    .stash-select__content,\n    .stash-select__content-wrapper {\n      height: var(--height-input);\n    }\n\n    .stash-select__content {\n      cursor: pointer;\n      overflow: hidden;\n      position: absolute;\n      background: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      outline: none;\n      padding: 0 !important;\n      width: 100%;\n\n      &:hover {\n        border-color: var(--color-ice-500);\n      }\n\n      &:focus-within {\n        border-color: var(--color-blue-500) !important;\n      }\n    }\n\n    .stash-select--disabled .stash-select__content {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none !important;\n    }\n\n    .stash-select--active .stash-select__content {\n      cursor: default;\n      height: auto;\n      min-width: var(--width-select-menu);\n      overflow: visible;\n      z-index: var(--z-index-control);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .stash-select--error :where(.stash-select__content, .stash-select__content:hover:not(:focus)) {\n      border-color: var(--color-red-500) !important;\n    }\n\n    .stash-select__placeholder {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__placeholder {\n      cursor: default;\n    }\n\n    .stash-select__icon {\n      color: var(--color-ice-700);\n      cursor: pointer;\n      pointer-events: none;\n      position: absolute;\n      right: --spacing(1.5);\n      top: --spacing(1.5);\n    }\n\n    .stash-select--disabled .stash-select__icon {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__icon {\n      pointer-events: auto;\n    }\n\n    .stash-select__chips {\n      /* distribute (or split?) the margin between chip and chips container. TODO? */\n      --half-space: calc(--spacing(1.5) / 2);\n\n      padding: var(--half-space);\n      padding-right: --spacing(9);\n    }\n\n    /* chip AND placeholder AND selected: */\n    .stash-select__chips > li {\n      cursor: pointer;\n      height: var(--height-chip);\n      margin: var(--half-space);\n      max-width: 100%;\n    }\n\n    .stash-select--disabled .stash-select__chips > li {\n      cursor: default;\n    }\n\n    .stash-select__content-wrapper:deep(.stash-select__chip) {\n      border-radius: var(--radius-sm);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      height: var(--height-chip);\n      max-width: inherit;\n      text-transform: none;\n    }\n\n    .stash-select--disabled:deep(.stash-select__chip) {\n      background: var(--color-ice-500);\n      color: var(--color-white);\n    }\n\n    /* Base total chip styles moved above the more specific descendant rule to satisfy no-descending-specificity */\n    .stash-select__total {\n      display: block;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-button);\n      position: absolute;\n      right: --spacing(6);\n      white-space: nowrap;\n      z-index: var(--z-index-content);\n\n      /* -- design TBD --- */\n      top: 0;\n      left: 0;\n      bottom: 0;\n      color: var(--color-white);\n      background: white;\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__content-wrapper .stash-select__total:deep(.stash-select__chip) {\n      font-weight: var(--font-weight-normal);\n    }\n\n    .stash-select__selected {\n      color: var(--color-ice-700);\n    }\n\n    .stash-select--disabled .stash-select__selected {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select__selected :where(.stash-select__remove) {\n      display: none;\n    }\n\n    .stash-select__search {\n      position: relative;\n      width: 100%;\n      height: var(--height-input);\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: var(--font-weight-normal);\n      outline: none;\n      padding: 0 --spacing(3);\n      border: 0 !important;\n    }\n\n    .stash-select__border-selector {\n      background: white;\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--color-blue-500);\n      max-height: var(--max-height-select-menu);\n      overflow: auto;\n      z-index: var(--z-index-dialog);\n    }\n\n    .stash-select__option {\n      align-items: center;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      display: flex;\n      line-height: --spacing(6);\n      margin: --spacing(1.5);\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__option--disabled {\n      color: var(--color-ice-500);\n      cursor: not-allowed;\n    }\n\n    .stash-select__option--highlighted {\n      background-color: var(--color-ice-200);\n    }\n\n    .stash-select__option--selected {\n      background-color: var(--color-blue-100);\n      color: var(--color-ice-700);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","_useSlots","selectRef","ref","contentRef","optionsWrapperRef","chipsRef","searchRef","chipsHeight","contentHeight","internalValue","searchFor","searchTerm","activeIndex","isActive","pendingSearchRequests","shouldUseLazyOptions","floatingStyles","updateFloating","useFloating","autoUpdate","flip","offset","rects","placement","size","availableHeight","elements","resizeObserverChips","debouncedUpdateChipsHeight","isSearchable","computed","internalOptions","OPTIONS","isPlainObject","name","id","readOnlyValue","option","isSearching","filteredOptions","isChipsOneLine","shouldShowTotal","clearSelectionText","shouldPreventEmpty","watch","currentValue","oldValue","setIndex","value","newValue","isEqual","isEmpty","searchForFn","useSearch","debouncedUpdateFloating","debounce","updateChipsHeight","isOptionDisabled","clear","handleSelect","isSelected","remove","dismiss","handleSelectChange","evt","selectedOption","opt","_a","selectedOptions","internalOption","index","logger","open","nextTick","scrollItems","KEY_CODES","el","elBCR","parentBCR","onKeyDown","handleSearchInput","search","DEBOUNCE","requestId","uniqueId","optionClass","isElementWithinSelectMenu","element","isElementInMenu","isElementInTeleportedMenu","_b","handleFocusOut","focusEvent","nextFocusedElement","handleOutsideClick","event","target","handleMouseLeave","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsME,UAAMA,IAAQC,IAiCRC,IAAOC,IA2BPC,IAAQC,GAAA,GACRC,IAAQC,GAAA,GAqCRC,KAAYC,EAA2B,IAAI,GAC3CC,IAAaD,EAA2B,IAAI,GAC5CE,IAAoBF,EAA2B,IAAI,GACnDG,IAAWH,EAA6B,IAAI,GAC5CI,KAAYJ,EAA6B,IAAI,GAE7CK,IAAcL,EAAI,CAAC,GACnBM,IAAgBN,EAAI,CAAC,GACrBO,IAAgBP,EAAc,EAAE,GAChCQ,KAAYR,EAAsC,MAAM,EAAE,GAC1DS,IAAaT,EAAI,EAAE,GACnBU,IAAcV,EAAI,EAAE,GACpBW,IAAWX,EAAI,EAAK,GACpBY,IAAwBZ,EAAI,EAAE,GAC9Ba,KAAuBb,EAAI,EAAK,GAEhC,EAAE,gBAAAc,IAAgB,QAAQC,OAAmBC,GAAYjB,IAAWG,GAAmB;AAAA,MAC3F,sBAAsBe;AAAA,MACtB,WAAW1B,EAAM;AAAA,MACjB,YAAY;AAAA,QACV2B,GAAA;AAAA,QACAC,GAAO,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAEOA,EAAU,MAAM,GAAG,EAAE,CAAC,MACR,YAGpBhB,EAAY,QAAQC,EAAc,QACzCD,EAAY,QAAQe,EAAM,UAAU,SAAS,IAE7C,CAEV;AAAA,QACDE,GAAK;AAAA,UACH,MAAM,EAAE,iBAAAC,GAAiB,UAAAC,GAAU,OAAAJ,KAAS;AAC1C,YAAI7B,EAAM,kBACR,OAAO,OAAOiC,EAAS,SAAS,OAAO;AAAA,cACrC,UAAU,GAAGJ,EAAM,UAAU,KAAK;AAAA,cAClC,WAAW,GAAG,KAAK,IAAIG,GAAiB,GAAkB,CAAC;AAAA,YAAA,CAC5D;AAAA,UAEL;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH,CACD,GACKE,KAAsB,IAAI,eAAe,MAAMC,GAA4B,GAE3EC,IAAeC,EAAS,MAAM,CAACrC,EAAM,cAAcA,EAAM,eAAe,WAAWA,EAAM,eAAe,EAAK,GAE7GsC,IAAkBD,EAAS,MAAM;AACrC,UAAIE,KAAWjB,GAAqB,SAAStB,EAAM,OAAOA,EAAM,KAAA,IAASA,EAAM,SAAS,OAAO,OAAO;AAGtG,aAAKwC,GAAcD,EAAQ,CAAC,CAAC,MAC3BA,IAAUA,EAAQ,IAAI,CAACE,GAAMC,OAAQ,EAAE,MAAAD,GAAM,IAAAC,IAA0B,IAGlEH;AAAA,IACT,CAAC,GAEKI,KAAgBN,EAAS,MACxBrB,EAAc,MAAM,SAIlBA,EAAc,MAAM,IAAI,CAAC4B,MAAWA,EAAO5C,EAAM,SAAS,KAAK4C,CAAM,EAAE,KAAK,IAAI,IAH9E,EAIV,GAEKC,KAAcR,EAAS,MAAMrC,EAAM,iBAAiB,OAAO,KAAKqB,EAAsB,KAAK,EAAE,SAAS,CAAC,GAEvGyB,IAAkBT,EAAS,MAC3BrC,EAAM,oBAAoB,EAAEkB,EAAW,SAAS,IAAI,SAC/CoB,EAAgB,QAGlBrB,GAAU,MAAMC,EAAW,KAAK,CACxC,GAEK6B,KAAiBV,EAAS,MAAMvB,EAAY,SAASC,EAAc,KAAK,GAExEiC,KAAkBX;AAAA,MACtB,MAAM,CAACjB,EAAS,SAAS,CAACpB,EAAM,UAAU,CAAC+C,GAAe,SAAS/B,EAAc,MAAM;AAAA,IAAA,GAGnFiC,KAAqBZ,EAAS,MAC3B,CAACrB,EAAc,MAAM,QAAQhB,EAAM,gBAAgB,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAC/F,GAEKkD,KAAqBb,EAAS,MAC3BrC,EAAM,gBAAgBA,EAAM,eAAe,WAAWA,EAAM,eAAe,EACnF;AAED,IAAAmD,EAAMjC,GAAY,CAACkC,GAAcC,MAAaA,MAAaD,KAAgBE,EAAS,EAAE,CAAC,GAEvFH,EAAMnC,GAAe,MAAMmB,EAAA,GAA8B,EAAE,MAAM,IAAM,GAEvEgB;AAAA,MACE,MAAMnD,EAAM;AAAA,MACZ,CAACuD,MAAU;AAET,YAAI,MAAM,QAAQA,CAAK,GAAG;AACxB,gBAAMC,IAAWD,EAAM,OAAO,OAAO;AAErC,UAAKE,GAAQD,GAAUxC,EAAc,KAAK,MACxCA,EAAc,QAAQwC;AAGxB;AAAA,QACF;AAGA,YAAI,CAACE,GAAQH,CAAK,GAAG;AACnB,UAAKE,GAAQF,GAAOvC,EAAc,MAAM,CAAC,CAAC,MACxCA,EAAc,MAAM,CAAC,IAAIuC;AAG3B;AAAA,QACF;AAGA,QAAAvC,EAAc,QAAQ,CAAA;AAAA,MACxB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBmC;AAAA,MACE,MAAMnD,EAAM;AAAA,MACZ,MAAM;AACJ,cAAM,EAAE,WAAW2D,EAAA,IAAgBC,GAAkB;AAAA,UACnD,OAAOvB,EAAS,MAAMC,EAAgB,KAAK;AAAA,UAC3C,YAAYtC,EAAM,SAAS,SAASA,EAAM,WAAW,CAACA,EAAM,SAAS;AAAA,UACrE,SAASA,EAAM;AAAA,QAAA,CAChB;AAED,QAAAiB,GAAU,QAAQ,CAACC,MAAeyC,EAAYzC,GAAY,EAAE,OAAOlB,EAAM,gBAAgB;AAAA,MAC3F;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBmD,EAAMrC,GAAa,MAAM+C,IAAyB;AAElD,UAAMA,KAA0BC,GAAS,MAAMtC,GAAA,GAAkB,EAAE,GAC7DW,IAA6B2B,GAAS,MAAMC,GAAA,GAAqB,EAAE,GAEnEC,IAAmB,CAACpB,MACjBA,KAAU,OAAOA,KAAW,YAAY,cAAcA,MAAUA,KAAA,gBAAAA,EAAQ,WAG3EqB,KAAQ,MAAM;AAClB,MAAAjD,EAAc,QAAQ,CAAA,GACtBd,EAAK,sBAAsBF,EAAM,SAAS,SAAYgB,EAAc,KAAK,GACzEd,EAAK,OAAO;AAAA,IACd,GAMMgE,IAAe,CAACtB,MAAoB;AACxC,MAAI5C,EAAM,YAAY,CAAC4C,KAAUoB,EAAiBpB,CAAM,MAInDuB,EAAWvB,CAAM,IASpBwB,EAAOxB,CAAM,KART5C,EAAM,WACRgB,EAAc,QAAQ,CAAA,IAGxBA,EAAc,MAAM,KAAK4B,CAAM,GAC/B1C,EAAK,sBAAsBF,EAAM,SAASgB,EAAc,MAAM,CAAC,IAAIA,EAAc,KAAK,GACtFd,EAAK,OAAO0C,CAAM,IAKhB5C,EAAM,UACRqE,EAAA;AAAA,IAEJ,GAEMC,KAAqB,CAACC,MAAQ;AAGlC,UAAIvE,EAAM,QAAQ;AAChB,cAAMwE,IAAiBlC,EAAgB,MAAM,KAAK,CAACmC,MAAA;;AAAQ,mBAAAC,IAAAD,EAAIzE,EAAM,OAAO,MAAjB,gBAAA0E,EAAoB,gBAAeH,EAAI,OAAO;AAAA,SAAK;AAC9G,QAAAL,EAAaM,CAAc;AAC3B;AAAA,MACF;AAGA,YAAMG,IAAkB,CAAC,GAAGJ,EAAI,OAAO,eAAe;AAQtD,iBAAWK,KAAkB,CAAC,GAAG5D,EAAc,KAAK;AAGlD,QAFuB2D,EAAgB,KAAK,CAACF,MAAA;;AAAQ,iBAAAA,EAAI,YAAUC,IAAAE,EAAe5E,EAAM,OAAO,MAA5B,gBAAA0E,EAA+B;AAAA,SAAU,KAG1GN,EAAOQ,CAAc;AAKzB,iBAAWJ,KAAkBG,GAAiB;AAC5C,cAAMC,IAAiBtC,EAAgB,MAAM;AAAA,UAC3C,CAACmC;;AAAQ,qBAAAC,IAAAD,EAAIzE,EAAM,OAAO,MAAjB,gBAAA0E,EAAoB,gBAAeF,EAAe;AAAA;AAAA,QAAA;AAG7D,QAAIL,EAAWS,CAAc,KAG3BV,EAAaU,CAAc;AAAA,MAE/B;AAAA,IACF,GAMMR,IAAS,CAACxB,MAAmB;AACjC,UAAI5C,EAAM,YAAakD,GAAmB,SAASlC,EAAc,MAAM,WAAW;AAChF;AAGF,YAAM6D,IAAQ7D,EAAc,MAAM,UAAU,CAACyD,MAAQA,EAAIzE,EAAM,OAAO,MAAM4C,EAAO5C,EAAM,OAAO,CAAC;AAEjG,UAAI6E,MAAU,IAAI;AAChB,QAAAC,GAAO,KAAK,8CAA8ClC,CAAM;AAChE;AAAA,MACF;AAEA,MAAA5B,EAAc,MAAM,OAAO6D,GAAO,CAAC,GACnC3E,EAAK,sBAAsBF,EAAM,SAASgB,EAAc,MAAM,CAAC,IAAIA,EAAc,KAAK,GACtFd,EAAK,UAAU0C,GAAQiC,CAAK;AAAA,IAC9B,GAKME,KAAO,MAAM;AACjB,MAAI3D,EAAS,UAIbe,EAAA,GAEAf,EAAS,QAAQ,IACjBlB,EAAK,QAAQ,GAETkC,EAAa,SACf4C,EAAS,MAAM;;AACb,SAAAN,IAAA7D,GAAU,UAAV,QAAA6D,EAAiB,MAAM,EAAE,eAAe;MAC1C,CAAC;AAAA,IAEL,GAKML,IAAU,MAAM;;AACpB,MAAIjD,EAAS,SACXlB,EAAK,UAAUc,EAAc,KAAK,GAGpCsC,EAAS,EAAE,GACXlC,EAAS,QAAQ,IAEZpB,EAAM,uBACTkB,EAAW,QAAQ,MAOrBwD,IAAAhE,EAAW,UAAX,QAAAgE,EAAkB;AAAA,IACpB,GAMMO,KAAc,OAAO,MAAqB;AAG9C,UAFA,MAAMD,EAAA,GAEF,CAACtE,EAAW;AACd;AAMF,UAAI,CAHoB,CAACwE,EAAU,OAAOA,EAAU,MAAM,EAGrC,SAAS,EAAE,OAAO,GAAG;AACxC,cAAMC,IAAKzE,EAAW,MAAM,cAAc,oCAAoC,GACxE0E,IAAQD,KAAA,gBAAAA,EAAI,yBACZE,IAAY3E,EAAW,MAAM,sBAAA;AAEnC,YAAI,CAAC0E,KAAS,CAACC;AACb;AAGF,SAAID,EAAM,UAAUC,EAAU,UAAUD,EAAM,OAAOC,EAAU,MAAMD,EAAM,YACzED,KAAA,QAAAA,EAAI,eAAe,EAAE,OAAO,WAAW,QAAQ;MAEnD;AAAA,IACF,GAMM7B,IAAW,CAACuB,MAAkB;AAClC,MAAA1D,EAAY,QAAQ0D;AAAA,IACtB,GAMMS,KAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,YAAYJ,EAAU;AAC1B,QAAAb,EAAA;AAAA,eACS,EAAE,YAAYa,EAAU,QAAQ/D,EAAY,QAAQ2B,EAAgB,MAAM,SAAS,KAAK1B,EAAS;AAC1G,QAAAD,EAAY;AAAA,eACH,EAAE,YAAY+D,EAAU,MAAM/D,EAAY,QAAQ;AAC3D,QAAIC,EAAS,SACXD,EAAY,SAIVR,EAAkB,SAASyB,EAAa,SAASjB,EAAY,UAAU,MACzER,EAAkB,MAAM,aAAa;AAAA,eAE9B,EAAE,YAAYuE,EAAU,SAAS/D,EAAY,UAAU,MAAMC,EAAS;AAC/E,QAAA8C,EAAapB,EAAgB,MAAM3B,EAAY,KAAK,CAAC;AAAA;AAErD;AAGF,QAAE,eAAA,GACF8D,GAAY,CAAC;AAAA,IACf,GAEMM,KAAoBzB,GAAS,WAAY;AAC7C,MAAA0B,GAAA;AAAA,IACF,GAAGC,GAAS,IAAI,GAEVD,KAAS,iBAAkB;AAC/B,UAAI,CAACxF,EAAM;AACT;AAGF,YAAM0F,IAAYC,GAAS,iBAAiB;AAE5C,UAAI;AACF,QAAAtE,EAAsB,MAAMqE,CAAS,IAAI,IACzC,MAAM1F,EAAM,SAASkB,EAAW,KAAK;AAAA,MACvC,UAAA;AACE,eAAOG,EAAsB,MAAMqE,CAAS;AAAA,MAC9C;AAAA,IACF,GAOME,KAAc,CAAChD,GAAgBiC,MAC5B;AAAA,MACL;AAAA,QACE,wBAAwB;AAAA,QACxB,kCAAkCb,EAAiBpB,CAAM;AAAA,QACzD,qCAAqCzB,EAAY,UAAU0D;AAAA,QAC3D,kCAAkCV,EAAWvB,CAAM;AAAA,MAAA;AAAA;AAAA;AAAA,MAKrD;AAAA,QACE,eAAezB,EAAY,UAAU0D;AAAA,QACrC,cAAc1D,EAAY,UAAU0D;AAAA,QACpC,4BAA4BV,EAAWvB,CAAM;AAAA,MAAA;AAAA,IAC/C,GASEuB,IAAa,CAACvB,MACUA,KAAW,OAC9B,KAGF5B,EAAc,MAAM,KAAK,CAACuC,OAAUA,KAAA,gBAAAA,EAAQvD,EAAM,cAAa4C,EAAO5C,EAAM,OAAO,CAAC;AAM7F,aAAS6F,GAA0BC,GAAsB;;AACvD,UAAI,CAACA;AACH,eAAO;AAGT,YAAMC,KAAkBrB,IAAAhE,EAAW,UAAX,gBAAAgE,EAAkB,SAASoB,IAC7CE,KAA4BC,IAAAtF,EAAkB,UAAlB,gBAAAsF,EAAyB,SAASH;AAEpE,aAAOC,KAAmBC;AAAA,IAC5B;AAEA,aAASE,GAAeC,GAAwB;AAC9C,YAAMC,IAAqBD,EAAW;AAGtC,MAAI,CAF2BN,GAA0BO,CAAkB,KAE5CA,KAC7B/B,EAAA;AAAA,IAEJ;AAEA,aAASgC,GAAmBC,GAAmB;AAC7C,YAAMC,IAASD,EAAM;AAGrB,MAF+BT,GAA0BU,CAAM,KAG7DlC,EAAA;AAAA,IAEJ;AAKA,UAAMmC,KAAmB,MAAM;AAC7B,MAAAlD,EAAS,EAAE;AAAA,IACb,GAKMS,KAAoB,YAAY;AAEpC,YAAMiB,EAAA,GAEFpE,EAAS,SAASF,EAAW,UAC/BK,EAAc,QAAQA,EAAc,UAAU,IAAIL,EAAW,MAAM,eAAeK,EAAc,OAChGD,EAAY,QAAQF,EAAS,MAAM;AAAA,IAEvC;AAEA,WAAA6F,GAAU,MAAM;AACd,UAAIrG,EAAM;AACR,cAAM,IAAI,MAAM,iEAAiE;AAGnF,MAAIQ,EAAS,SACXsB,GAAoB,QAAQtB,EAAS,KAAK,GAG5C,OAAO,iBAAiB,UAAUuB,CAA0B,GAE5DA,EAAA;AAAA,IACF,CAAC,GAKDuE,GAAY,MAAM;AAChB,aAAO,oBAAoB,UAAU3C,EAAiB,GACtD7B,GAAoB,WAAA,GACpBC,EAA2B,OAAA;AAAA,IAC7B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n\n  // Note: the `trackBy` prop, the `single` prop, and the fact that options can be strings prevents us from knowing the type of the selected options\n\n  type Option = any;\n\n  type SelectedOptions = Option | Option[];\n\n  export interface SelectProps extends FieldProps {\n    /**\n     * If there is only 1 option selected, it prevents that option from being de-selected\n     */\n    preventEmpty?: boolean;\n\n    /**\n     * @deprecated The `allowEmpty` prop is no longer supported; use `preventEmpty` instead.\n     */\n    allowEmpty?: string | boolean | null;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * List of one or more fields to search on. When empty, displayBy will be used\n     */\n    searchBy?: string[];\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n\n    /**\n     * Placeholder text.\n     */\n    placeholder?: string;\n\n    /**\n     * @deprecated Use the `error-text` prop instead\n     */\n    error?: string;\n\n    /**\n     * @deprecated Use the `hint-text` prop instead\n     */\n    hint?: string;\n\n    /**\n     * Sets a custom icon.\n     */\n    icon?: string | boolean;\n\n    /**\n     * Sets a name attribute on the native (hidden) select element\n     *\n     * Setting the default value to `undefined` so the attribute isn't rendered if not explicitly provided to ensure backwards compatibility with MP django forms\n     */\n    name?: string;\n\n    /**\n     * The list of all options to select from.\n     */\n    options?: Option[] | readonly Option[];\n\n    /**\n     * Lazily evaluate and set component `options`. Will execute upon user mouseover.\n     */\n    lazy?: () => Option[];\n\n    /**\n     * Sets the currently-selected value(s) for the component.\n     * Accepts an array of Objects, or a single Object (if `single` is true), or a string\n     */\n    modelValue?: SelectedOptions;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: SelectedOptions | null;\n\n    /**\n     * Hides the search input\n     */\n    hideSearch?: boolean;\n\n    /**\n     * @deprecated The `searchable` prop is no longer supported; Use `hideSearch` instead.\n     */\n    searchable?: string | boolean | null;\n\n    /**\n     * If true, prevents the search term from being cleared when the drawer is dismissed.\n     */\n    preserveSearchTerm?: boolean;\n\n    /**\n     * Prevents the options from being filtered when the search term changes.\n     * Allows the parent to filter the options.\n     */\n    disableFiltering?: boolean;\n\n    /**\n     * Functions as a single select, if true\n     */\n    single?: boolean;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * On an ajaxed request when the dropdown is open, we may be experiencing slower load times.\n     * This flag will drop a loader into the dropdown.  Note: This has never been design reviewed.\n     */\n    loading?: boolean;\n\n    /**\n     * @deprecated Instead, use the `@search` event (the onSearch prop) and ensure its event handler returns a Promise that resolves after the search is complete.\n     */\n    searchLoading?: boolean;\n\n    /**\n     * In the selection text we use this to give more visual distinction to what type of item(s) are selected\n     * E.g. 2 customers selected. An empty string will result in `2 selected`.\n     */\n    selectItemType?: string;\n\n    /**\n     * Hides the \"check\" icon if truthy\n     */\n    hideCheck?: boolean;\n\n    searchPlaceholder?: string;\n\n    /**\n     * Equivalent to emitting a \"search\" event, except this prop can be used to populate the list of `options` using an HTTP request because a prop's return value can be received and awaited, unlike an event.\n     *\n     * **Tip:** to show a loading indicator while searching, return a Promise that resolves after the search is complete.\n     *\n     * **Warning:** the search input is debounced so there is no need to debounce this function.\n     */\n    onSearch?: (searchTerm: string) => Promise<void> | void;\n\n    /**\n     * Uses the \"fuzzy search\" algorithm when searching, if true\n     */\n    useFuzzySearch?: boolean;\n\n    /**\n     * Sets the placement of the dropdown\n     * @default 'bottom-start'\n     */\n    menuPlacement?: Placement;\n\n    /**\n     * Enables teleporting the dropdown\n     * @default false\n     */\n    enableTeleport?: boolean;\n\n    /**\n     * The selector or element to which the dropdown should be teleported\n     * @default `'#stash-menus-mount-node'`\n     */\n    teleportTo?: string | HTMLElement;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { autoUpdate, flip, offset, type Placement, type Side, size, useFloating } from '@floating-ui/vue';\n  import logger from '@leaflink/snitch';\n  import debounce from 'lodash-es/debounce';\n  import isEmpty from 'lodash-es/isEmpty';\n  import isEqual from 'lodash-es/isEqual';\n  import isPlainObject from 'lodash-es/isPlainObject';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onMounted, onUnmounted, type Ref, ref, useAttrs, watch } from 'vue';\n\n  import useSearch from '../../composables/useSearch/useSearch';\n  import { DEBOUNCE, KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import { DEFAULT_MENUS_PLUGIN_NODE_ID } from '../../plugins/MenusPlugin';\n  import Chip from '../Chip/Chip.vue';\n  import Field from '../Field/Field.vue';\n  import Icon, { IconName } from '../Icon/Icon.vue';\n\n  const GAP_HEIGHT = 6;\n\n  const MENU_MAX_HEIGHT_PX = 300;\n\n  defineOptions({\n    name: 'll-select',\n  });\n\n  const props = withDefaults(defineProps<SelectProps>(), {\n    preventEmpty: false,\n    allowEmpty: null,\n    displayBy: 'name',\n    searchBy: () => [],\n    trackBy: 'id',\n    placeholder: 'Select option',\n    error: '',\n    hint: '',\n    icon: 'caret-down',\n    name: undefined,\n    options: () => [],\n    lazy: undefined,\n    modelValue: () => [],\n    value: null,\n    hideSearch: false,\n    searchable: null,\n    preserveSearchTerm: false,\n    disableFiltering: false,\n    single: false,\n    noTruncate: false,\n    loading: false,\n    searchLoading: false,\n    selectItemType: '',\n    hideCheck: false,\n    searchPlaceholder: 'Search',\n    onSearch: undefined,\n    useFuzzySearch: false,\n    menuPlacement: 'bottom-start',\n    enableTeleport: false,\n    teleportTo: `#${DEFAULT_MENUS_PLUGIN_NODE_ID}`,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', selectedOptions: SelectedOptions): void;\n    /**\n     * Emitted the selected value(s) a cleared.\n     */\n    (e: 'clear'): void;\n    /**\n     * Emitted when an option is added.\n     */\n    (e: 'add', optionAdded: Option): void;\n    /**\n     * Emitted when an option is removed.\n     */\n    (e: 'remove', optionRemoved: Option, index: number): void;\n    /**\n     * Emitted when the select is opened.\n     */\n    (e: 'opened'): void;\n    /**\n     * Emitted when the select is closed.\n     */\n    (e: 'closed', selectedOptions: SelectedOptions): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = defineSlots<{\n    /**\n     * Selected value(s) custom text. Exposes the option object and remove function.\n     */\n    selected(props: {\n      /**\n       * The selected option object.\n       */\n      option: Option;\n      /**\n       * Function to remove the selected option from the selection.\n       */\n      onRemove: () => void;\n      /**\n       * Class to apply to the selected chip.\n       */\n      chipSelectedClass: string;\n    }): unknown;\n    /**\n     * Select custom option text. Exposes the option object\n     */\n    option(props: {\n      /**\n       * Option The option instance for this list item.\n       */\n      option: Option;\n    }): unknown;\n    /**\n     * Slot for when there are no options available.\n     */\n    'no-options'(): unknown;\n    /**\n     * Slot to display a helpful hint message below the select field.\n     */\n    hint(): unknown;\n  }>();\n\n  const selectRef = ref<HTMLDivElement | null>(null);\n  const contentRef = ref<HTMLDivElement | null>(null);\n  const optionsWrapperRef = ref<HTMLDivElement | null>(null);\n  const chipsRef = ref<HTMLUListElement | null>(null);\n  const searchRef = ref<HTMLInputElement | null>(null);\n\n  const chipsHeight = ref(0);\n  const contentHeight = ref(0);\n  const internalValue = ref<Option[]>([]) as Ref<Option[]>;\n  const searchFor = ref<(searchTerm: string) => Option[]>(() => []); // initialized in the watch handler for options\n  const searchTerm = ref('');\n  const activeIndex = ref(-1);\n  const isActive = ref(false);\n  const pendingSearchRequests = ref({});\n  const shouldUseLazyOptions = ref(false);\n\n  const { floatingStyles, update: updateFloating } = useFloating(selectRef, optionsWrapperRef, {\n    whileElementsMounted: autoUpdate,\n    placement: props.menuPlacement,\n    middleware: [\n      flip(),\n      offset(({ rects, placement }) => {\n        // gets the current placement side, especially after flip() is run\n        const placementSide = placement.split('-')[0] as Side;\n        const isBottom = placementSide === ('bottom' satisfies Side);\n\n        // if the placement is at the bottom, we need to adjust the offset\n        if (isBottom && chipsHeight.value > contentHeight.value) {\n          return chipsHeight.value - rects.reference.height + GAP_HEIGHT;\n        } else {\n          return GAP_HEIGHT;\n        }\n      }),\n      size({\n        apply({ availableHeight, elements, rects }) {\n          if (props.enableTeleport) {\n            Object.assign(elements.floating.style, {\n              maxWidth: `${rects.reference.width}px`,\n              maxHeight: `${Math.min(availableHeight, MENU_MAX_HEIGHT_PX)}px`,\n            });\n          }\n        },\n      }),\n    ],\n  });\n  const resizeObserverChips = new ResizeObserver(() => debouncedUpdateChipsHeight());\n\n  const isSearchable = computed(() => !props.hideSearch && props.searchable !== 'false' && props.searchable !== false);\n\n  const internalOptions = computed(() => {\n    let OPTIONS = (shouldUseLazyOptions.value && props.lazy ? props.lazy() : props.options).filter(Boolean); // prevent [undefined]\n\n    // if `options` is an array... but not an array of objects\n    if (!isPlainObject(OPTIONS[0])) {\n      OPTIONS = OPTIONS.map((name, id) => ({ name, id }) as unknown as Option);\n    }\n\n    return OPTIONS;\n  });\n\n  const readOnlyValue = computed(() => {\n    if (!internalValue.value.length) {\n      return '';\n    }\n\n    return internalValue.value.map((option) => option[props.displayBy] || option).join(', ');\n  });\n\n  const isSearching = computed(() => props.searchLoading || Object.keys(pendingSearchRequests.value).length > 0);\n\n  const filteredOptions = computed(() => {\n    if (props.disableFiltering || !(searchTerm.value || '').trim()) {\n      return internalOptions.value;\n    }\n\n    return searchFor.value(searchTerm.value);\n  });\n\n  const isChipsOneLine = computed(() => chipsHeight.value <= contentHeight.value);\n\n  const shouldShowTotal = computed(\n    () => !isActive.value && !props.single && !isChipsOneLine.value && internalValue.value.length,\n  );\n\n  const clearSelectionText = computed(() => {\n    return [internalValue.value.length, props.selectItemType, 'selected'].filter(Boolean).join(' ');\n  });\n\n  const shouldPreventEmpty = computed(() => {\n    return props.preventEmpty || props.allowEmpty === 'false' || props.allowEmpty === false;\n  });\n\n  watch(searchTerm, (currentValue, oldValue) => oldValue !== currentValue && setIndex(-1));\n\n  watch(internalValue, () => debouncedUpdateChipsHeight(), { deep: true });\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      // multiple\n      if (Array.isArray(value)) {\n        const newValue = value.filter(Boolean); // sometimes modelValue is [undefined]\n\n        if (!isEqual(newValue, internalValue.value)) {\n          internalValue.value = newValue;\n        }\n\n        return;\n      }\n\n      // single; if value is a non-empty string or a non-empty object\n      if (!isEmpty(value)) {\n        if (!isEqual(value, internalValue.value[0])) {\n          internalValue.value[0] = value;\n        }\n\n        return;\n      }\n\n      // if value is an empty object or falsy\n      internalValue.value = [];\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.options,\n    () => {\n      const { searchFor: searchForFn } = useSearch<Option>({\n        items: computed(() => internalOptions.value),\n        fieldNames: props.searchBy.length ? props.searchBy : [props.displayBy],\n        trackBy: props.trackBy,\n      });\n\n      searchFor.value = (searchTerm) => searchForFn(searchTerm, { fuzzy: props.useFuzzySearch });\n    },\n    { immediate: true },\n  );\n\n  watch(chipsHeight, () => debouncedUpdateFloating());\n\n  const debouncedUpdateFloating = debounce(() => updateFloating(), 50);\n  const debouncedUpdateChipsHeight = debounce(() => updateChipsHeight(), 50);\n\n  const isOptionDisabled = (option: Option) => {\n    return option && typeof option === 'object' && 'disabled' in option && option?.disabled;\n  };\n\n  const clear = () => {\n    internalValue.value = [];\n    emit('update:model-value', props.single ? undefined : internalValue.value);\n    emit('clear');\n  };\n\n  /**\n   * Adds (or selects) an option.\n   * @param {Option} option The selected option\n   */\n  const handleSelect = (option?: Option) => {\n    if (props.disabled || !option || isOptionDisabled(option)) {\n      return;\n    }\n\n    if (!isSelected(option)) {\n      if (props.single) {\n        internalValue.value = [];\n      }\n\n      internalValue.value.push(option);\n      emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n      emit('add', option);\n    } else {\n      remove(option);\n    }\n\n    if (props.single) {\n      dismiss();\n    }\n  };\n\n  const handleSelectChange = (evt) => {\n    // If this is a single select, just pass along the option\n    // This short-circuit is purely for readability, as the iterations for multi would also work for single selects\n    if (props.single) {\n      const selectedOption = internalOptions.value.find((opt) => opt[props.trackBy]?.toString() === evt.target.value);\n      handleSelect(selectedOption);\n      return;\n    }\n\n    // Spread the HTMLCollection (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) to array so we can invoke `find`\n    const selectedOptions = [...evt.target.selectedOptions];\n\n    // If it's a multiselect, the HTML select used for the screen reader can have multiple items\n    // deselected and a new one selected in one change event.\n    // We need to reconcile the new selected options with our internal state\n\n    // 1. remove all the items in our internal state that are no longer present\n    // (Spread this array so we can remove items from it while iterating)\n    for (const internalOption of [...internalValue.value]) {\n      const selectedOption = selectedOptions.find((opt) => opt.value === internalOption[props.trackBy]?.toString());\n\n      if (!selectedOption) {\n        remove(internalOption);\n      }\n    }\n\n    // 2. add all the items that are now selected if needed\n    for (const selectedOption of selectedOptions) {\n      const internalOption = internalOptions.value.find(\n        (opt) => opt[props.trackBy]?.toString() === selectedOption.value,\n      );\n\n      if (isSelected(internalOption)) {\n        continue;\n      } else {\n        handleSelect(internalOption);\n      }\n    }\n  };\n\n  /**\n   * Removes (or un-selects) an option.\n   * @param {Option} option The option to be removed\n   */\n  const remove = (option: Option) => {\n    if (props.disabled || (shouldPreventEmpty.value && internalValue.value.length === 1)) {\n      return;\n    }\n\n    const index = internalValue.value.findIndex((opt) => opt[props.trackBy] === option[props.trackBy]);\n\n    if (index === -1) {\n      logger.warn('ll-select: could not find option to remove', option);\n      return;\n    }\n\n    internalValue.value.splice(index, 1);\n    emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n    emit('remove', option, index);\n  };\n\n  /**\n   * Opens the `options` drawer and provides focus.\n   */\n  const open = () => {\n    if (isActive.value) {\n      return;\n    }\n\n    debouncedUpdateChipsHeight();\n\n    isActive.value = true;\n    emit('opened');\n\n    if (isSearchable.value) {\n      nextTick(() => {\n        searchRef.value?.focus({ preventScroll: true });\n      });\n    }\n  };\n\n  /**\n   * Closes the drawer and cleans up a few settings.\n   */\n  const dismiss = () => {\n    if (isActive.value) {\n      emit('closed', internalValue.value);\n    }\n\n    setIndex(-1);\n    isActive.value = false;\n\n    if (!props.preserveSearchTerm) {\n      searchTerm.value = '';\n    }\n\n    // The optional chaining here is required.\n    // There are cases when the component is removed from the DOM and the ref is lost.\n    // .ie when the component is used in a modal and the modal is dismissed.\n    // Tracked in this ticket: F-1893\n    contentRef.value?.blur(); // if the component remains in focus, clicking it again will not open the options list\n  };\n\n  /**\n   * Scroll list items when up and down keys are pressed\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const scrollItems = async (e: KeyboardEvent) => {\n    await nextTick();\n\n    if (!contentRef.value) {\n      return;\n    }\n\n    const allowedKeyCodes = [KEY_CODES.ENTER, KEY_CODES.ESCAPE] as number[];\n\n    // Wait for highlighted item update after using keyboard (`onKeyDown`)\n    if (!allowedKeyCodes.includes(e.keyCode)) {\n      const el = contentRef.value.querySelector('.stash-select__option--highlighted');\n      const elBCR = el?.getBoundingClientRect();\n      const parentBCR = contentRef.value.getBoundingClientRect();\n\n      if (!elBCR || !parentBCR) {\n        return;\n      }\n\n      if (elBCR.bottom >= parentBCR.bottom || elBCR.top <= parentBCR.top + elBCR.height) {\n        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }\n  };\n\n  /**\n   * Sets the `activeIndex` on hover, so that the user may then fine-tune\n   * their selection with the arrow keys.\n   */\n  const setIndex = (index: number) => {\n    activeIndex.value = index;\n  };\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && activeIndex.value < filteredOptions.value.length - 1 && isActive.value) {\n      activeIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && activeIndex.value > 0) {\n      if (isActive.value) {\n        activeIndex.value--;\n      }\n\n      // Scroll to top when search is available and first element is highlighted (Using 100 to be sure that it'll be sure that search is visible)\n      if (optionsWrapperRef.value && isSearchable.value && activeIndex.value === 0) {\n        optionsWrapperRef.value.scrollTop -= 100;\n      }\n    } else if (e.keyCode === KEY_CODES.ENTER && activeIndex.value !== -1 && isActive.value) {\n      handleSelect(filteredOptions.value[activeIndex.value]);\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n    scrollItems(e);\n  };\n\n  const handleSearchInput = debounce(function () {\n    search();\n  }, DEBOUNCE.FAST);\n\n  const search = async function () {\n    if (!props.onSearch) {\n      return;\n    }\n\n    const requestId = uniqueId('search-request-');\n\n    try {\n      pendingSearchRequests.value[requestId] = true;\n      await props.onSearch(searchTerm.value);\n    } finally {\n      delete pendingSearchRequests.value[requestId];\n    }\n  };\n\n  /**\n   * Dynamically sets classes on an `option` in the drawer.\n   * @param {Option} option The `option` for which to generate classes\n   * @param {number} index The index of the `option` in the list of `options`\n   */\n  const optionClass = (option: Option, index: number) => {\n    return [\n      {\n        'stash-select__option': true,\n        'stash-select__option--disabled': isOptionDisabled(option),\n        'stash-select__option--highlighted': activeIndex.value === index,\n        'stash-select__option--selected': isSelected(option),\n      },\n\n      // @deprecated\n      // backwards compatibility\n      {\n        'is-selected': activeIndex.value === index,\n        'bg-ice-200': activeIndex.value === index,\n        'bg-blue-100 text-ice-700': isSelected(option),\n      },\n    ];\n  };\n\n  /**\n   * Finds out if the given item is already present in the selected options\n   * @param {Option} option The item to check\n   * @returns {boolean} Returns true if element is selected\n   */\n  const isSelected = (option?: Option | null): boolean => {\n    if (option === undefined || option === null) {\n      return false;\n    }\n\n    return internalValue.value.some((value) => value?.[props.trackBy] === option[props.trackBy]);\n  };\n\n  /**\n   * Checks if the element is within the Select menu by checking both the content and the teleportTo element\n   */\n  function isElementWithinSelectMenu(element: Node | null) {\n    if (!element) {\n      return false;\n    }\n\n    const isElementInMenu = contentRef.value?.contains(element);\n    const isElementInTeleportedMenu = optionsWrapperRef.value?.contains(element);\n\n    return isElementInMenu || isElementInTeleportedMenu;\n  }\n\n  function handleFocusOut(focusEvent: FocusEvent) {\n    const nextFocusedElement = focusEvent.relatedTarget as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(nextFocusedElement);\n\n    if (!isFocusedElementInMenu && nextFocusedElement) {\n      dismiss();\n    }\n  }\n\n  function handleOutsideClick(event: MouseEvent) {\n    const target = event.target as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(target);\n\n    if (!isFocusedElementInMenu) {\n      dismiss();\n    }\n  }\n\n  /**\n   * Handles the mouse leave of the select and clears item highlight\n   */\n  const handleMouseLeave = () => {\n    setIndex(-1);\n  };\n\n  /**\n   * Update height of chips container\n   */\n  const updateChipsHeight = async () => {\n    // Wait for the DOM to update so we can get an accurate value for chips' clientHeight\n    await nextTick();\n\n    if (chipsRef.value && contentRef.value) {\n      contentHeight.value = contentHeight.value === 0 ? contentRef.value.clientHeight : contentHeight.value;\n      chipsHeight.value = chipsRef.value.clientHeight;\n    }\n  };\n\n  onMounted(() => {\n    if (attrs.onInput) {\n      throw new Error('ll-select: use the @update:model-value event instead of @input.');\n    }\n\n    if (chipsRef.value) {\n      resizeObserverChips.observe(chipsRef.value);\n    }\n\n    window.addEventListener('resize', debouncedUpdateChipsHeight);\n\n    debouncedUpdateChipsHeight();\n  });\n\n  /**\n   * Remove event listener to handle component width when resizing window\n   */\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateChipsHeight);\n    resizeObserverChips.disconnect();\n    debouncedUpdateChipsHeight.cancel();\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    class=\"input ll-select stash-select\"\n    data-test=\"stash-select\"\n    :class=\"attrs.class\"\n    :error-text=\"props.errorText || props.error\"\n    :hint-text=\"props.hintText || props.hint\"\n  >\n    <template v-if=\"props.isReadOnly\" #default=\"{ fieldId, labelId }\">\n      <div class=\"flex h-input items-center text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"show-empty h-min\">\n          {{ readOnlyValue }}\n        </span>\n      </div>\n    </template>\n    <template v-else #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <!-- SCREEN READER ONLY -->\n      <select\n        :id=\"fieldId\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        class=\"sr-only\"\n        :disabled=\"props.disabled\"\n        :multiple=\"!props.single\"\n        :name=\"props.name\"\n        @change=\"handleSelectChange\"\n      >\n        <option\n          v-for=\"(option, index) in filteredOptions\"\n          :key=\"`srOnlyOption-${index}`\"\n          :selected=\"isSelected(option)\"\n          :value=\"option[props.trackBy]\"\n          :disabled=\"isOptionDisabled(option)\"\n        >\n          {{ option[props.displayBy] || '' }}\n        </option>\n\n        <!-- Empty option to allow deselecting non-multiselects -->\n        <option value=\"\"></option>\n      </select>\n\n      <!-- SELECT -->\n      <div\n        ref=\"selectRef\"\n        v-clickoutside=\"handleOutsideClick\"\n        role=\"listbox\"\n        aria-hidden=\"true\"\n        class=\"stash-select__content-wrapper\"\n        :aria-controls=\"'listbox-' + fieldId\"\n        :aria-expanded=\"isActive\"\n        :aria-label=\"props.placeholder\"\n        :aria-disabled=\"props.disabled || undefined\"\n        :class=\"[\n          {\n            'stash-select--disabled': !!props.disabled,\n            'stash-select--error': !!(props.errorText || props.error),\n            'stash-select--active': isActive,\n            'stash-select--single': props.single,\n          },\n\n          // @deprecated\n          // backwards compatibility\n          {\n            'is-active': isActive,\n            'is-single': props.single,\n            'is-disabled': props.disabled,\n          },\n        ]\"\n        @keydown=\"onKeyDown\"\n        @keyup.esc=\"dismiss\"\n      >\n        <!-- CONTENT -->\n        <div\n          :id=\"'listbox-' + fieldId\"\n          ref=\"contentRef\"\n          class=\"input-field stash-select__content\"\n          tabindex=\"0\"\n          data-test=\"stash-select|dropdown-trigger\"\n          @focusin=\"open\"\n          @focusin.once=\"shouldUseLazyOptions = true\"\n          @focusout=\"handleFocusOut\"\n          @keydown=\"open\"\n          @mouseleave=\"handleMouseLeave\"\n        >\n          <!-- CHIPS -->\n          <ul ref=\"chipsRef\" class=\"stash-select__chips\">\n            <!-- PLACEHOLDER -->\n            <li\n              v-if=\"!internalValue.length\"\n              class=\"stash-select__placeholder mr-0 pl-1.5\"\n              :class=\"{ truncate: !props.noTruncate }\"\n            >\n              {{ props.placeholder }}\n            </li>\n\n            <template v-if=\"props.single\">\n              <li\n                v-for=\"option of internalValue\"\n                :key=\"`chip-${option[props.trackBy]}`\"\n                class=\"stash-select__selected mr-0 pl-1.5\"\n                :class=\"{ truncate: !props.noTruncate }\"\n              >\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  {{ option[props.displayBy] || option }}\n                  <button\n                    tabindex=\"-1\"\n                    class=\"stash-select__remove\"\n                    @keypress.enter.prevent=\"remove(option)\"\n                    @mousedown.prevent.stop=\"remove(option)\"\n                  >\n                    <Icon icon=\"close\" name=\"close\" size=\"small\" />\n                  </button>\n                </slot>\n              </li>\n            </template>\n\n            <template v-else>\n              <li v-for=\"option of internalValue\" :key=\"`chip-${option[props.trackBy]}`\" class=\"inline-block\">\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  <Chip\n                    bg-color=\"blue-500\"\n                    is-removable\n                    text-color=\"white\"\n                    class=\"stash-select__chip\"\n                    @remove=\"remove(option)\"\n                  >\n                    {{ option[props.displayBy] || option }}\n                  </Chip>\n                </slot>\n              </li>\n            </template>\n          </ul>\n\n          <!-- TOTAL -->\n          <div v-if=\"shouldShowTotal\" class=\"stash-select__total\">\n            <Chip bg-color=\"blue-500\" is-removable text-color=\"white\" class=\"stash-select__chip\" @remove=\"clear\">\n              {{ clearSelectionText }}\n            </Chip>\n          </div>\n\n          <!-- TOGGLE -->\n          <Icon\n            v-if=\"props.icon\"\n            class=\"stash-select__icon\"\n            data-test=\"stash-select|toggle-icon\"\n            :name=\"props.icon as IconName\"\n            :class=\"{ 'text-ice-500': props.disabled }\"\n            @mousedown.prevent=\"isActive && dismiss()\"\n          />\n          <!-- DRAWER -->\n          <Teleport :to=\"props.teleportTo\" :disabled=\"!props.enableTeleport\">\n            <transition name=\"fade\">\n              <div\n                v-show=\"isActive && !props.disabled\"\n                ref=\"optionsWrapperRef\"\n                class=\"stash-select__border-selector w-full shadow-2xl\"\n                :style=\"floatingStyles\"\n                @click.stop\n              >\n                <!-- SEARCH -->\n                <div v-if=\"isSearchable\" class=\"flex items-center border-b border-blue-500 pr-1.5\">\n                  <input\n                    ref=\"searchRef\"\n                    v-model=\"searchTerm\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    class=\"stash-select__search\"\n                    :data-test=\"attrs['data-test'] ? attrs['data-test'] + '-search' : 'stash-select|search'\"\n                    :placeholder=\"props.searchPlaceholder\"\n                    :spellcheck=\"false\"\n                    @input=\"handleSearchInput\"\n                  />\n                  <Icon name=\"search\" class=\"text-ice-500\" />\n                </div>\n\n                <!-- OPTIONS -->\n                <ul class=\"stash-select__options options my-1.5 w-full border-white bg-white\">\n                  <li\n                    v-for=\"(option, index) in filteredOptions\"\n                    :key=\"`option-${option[props.trackBy]}`\"\n                    :data-test=\"option[props.trackBy]\"\n                    :class=\"optionClass(option, index)\"\n                    @click=\"handleSelect(option)\"\n                    @mouseenter.self=\"setIndex(index)\"\n                  >\n                    <slot name=\"option\" :option=\"option\">\n                      {{ option[props.displayBy] || option }}\n                    </slot>\n\n                    <span v-if=\"isSelected(option) && !props.hideCheck\" class=\"ml-auto pl-1.5\">\n                      <Icon class=\"text-blue-500\" name=\"check\" />\n                    </span>\n                  </li>\n                  <li v-show=\"props.loading || isSearching\" class=\"m-1.5 cursor-default p-1.5\">\n                    <Icon data-test=\"stash-select|options-loading\" name=\"working\" class=\"animate-spin text-ice-500\" />\n                  </li>\n                  <li\n                    v-show=\"!props.loading && !isSearching && !filteredOptions.length\"\n                    class=\"m-1.5 cursor-default p-1.5\"\n                    data-test=\"stash-select|no-options\"\n                  >\n                    <slot name=\"no-options\"> No options </slot>\n                  </li>\n                </ul>\n              </div>\n            </transition>\n          </Teleport>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint?.()\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-select {\n      position: relative;\n    }\n\n    .stash-select__content,\n    .stash-select__content-wrapper {\n      height: var(--height-input);\n    }\n\n    .stash-select__content {\n      cursor: pointer;\n      overflow: hidden;\n      position: absolute;\n      background: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      outline: none;\n      padding: 0 !important;\n      width: 100%;\n\n      &:hover {\n        border-color: var(--color-ice-500);\n      }\n\n      &:focus-within {\n        border-color: var(--color-blue-500) !important;\n      }\n    }\n\n    .stash-select--disabled .stash-select__content {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none !important;\n    }\n\n    .stash-select--active .stash-select__content {\n      cursor: default;\n      height: auto;\n      min-width: var(--width-select-menu);\n      overflow: visible;\n      z-index: var(--z-index-control);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .stash-select--error :where(.stash-select__content, .stash-select__content:hover:not(:focus)) {\n      border-color: var(--color-red-500) !important;\n    }\n\n    .stash-select__placeholder {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__placeholder {\n      cursor: default;\n    }\n\n    .stash-select__icon {\n      color: var(--color-ice-700);\n      cursor: pointer;\n      pointer-events: none;\n      position: absolute;\n      right: --spacing(1.5);\n      top: --spacing(1.5);\n    }\n\n    .stash-select--disabled .stash-select__icon {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__icon {\n      pointer-events: auto;\n    }\n\n    .stash-select__chips {\n      /* distribute (or split?) the margin between chip and chips container. TODO? */\n      --half-space: calc(--spacing(1.5) / 2);\n\n      padding: var(--half-space);\n      padding-right: --spacing(9);\n    }\n\n    /* chip AND placeholder AND selected: */\n    .stash-select__chips > li {\n      cursor: pointer;\n      height: var(--height-chip);\n      margin: var(--half-space);\n      max-width: 100%;\n    }\n\n    .stash-select--disabled .stash-select__chips > li {\n      cursor: default;\n    }\n\n    .stash-select__content-wrapper:deep(.stash-select__chip) {\n      border-radius: var(--radius-sm);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      height: var(--height-chip);\n      max-width: inherit;\n      text-transform: none;\n    }\n\n    .stash-select--disabled:deep(.stash-select__chip) {\n      background: var(--color-ice-500);\n      color: var(--color-white);\n    }\n\n    /* Base total chip styles moved above the more specific descendant rule to satisfy no-descending-specificity */\n    .stash-select__total {\n      display: block;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-button);\n      position: absolute;\n      right: --spacing(6);\n      white-space: nowrap;\n      z-index: var(--z-index-content);\n\n      /* -- design TBD --- */\n      top: 0;\n      left: 0;\n      bottom: 0;\n      color: var(--color-white);\n      background: white;\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__content-wrapper .stash-select__total:deep(.stash-select__chip) {\n      font-weight: var(--font-weight-normal);\n    }\n\n    .stash-select__selected {\n      color: var(--color-ice-700);\n    }\n\n    .stash-select--disabled .stash-select__selected {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select__selected :where(.stash-select__remove) {\n      display: none;\n    }\n\n    .stash-select__search {\n      position: relative;\n      width: 100%;\n      height: var(--height-input);\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: var(--font-weight-normal);\n      outline: none;\n      padding: 0 --spacing(3);\n      border: 0 !important;\n    }\n\n    .stash-select__border-selector {\n      background: white;\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--color-blue-500);\n      max-height: var(--max-height-select-menu);\n      overflow: auto;\n      z-index: var(--z-index-dialog);\n    }\n\n    .stash-select__option {\n      align-items: center;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      display: flex;\n      line-height: --spacing(6);\n      margin: --spacing(1.5);\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__option--disabled {\n      color: var(--color-ice-500);\n      cursor: not-allowed;\n    }\n\n    .stash-select__option--highlighted {\n      background-color: var(--color-ice-200);\n    }\n\n    .stash-select__option--selected {\n      background-color: var(--color-blue-100);\n      color: var(--color-ice-700);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","_useSlots","selectRef","ref","contentRef","optionsWrapperRef","chipsRef","searchRef","chipsHeight","contentHeight","internalValue","searchFor","searchTerm","activeIndex","isActive","pendingSearchRequests","shouldUseLazyOptions","floatingStyles","updateFloating","useFloating","autoUpdate","flip","offset","rects","placement","size","availableHeight","elements","resizeObserverChips","debouncedUpdateChipsHeight","isSearchable","computed","internalOptions","OPTIONS","isPlainObject","name","id","readOnlyValue","option","isSearching","filteredOptions","isChipsOneLine","shouldShowTotal","clearSelectionText","shouldPreventEmpty","watch","currentValue","oldValue","setIndex","value","newValue","isEqual","isEmpty","searchForFn","useSearch","debouncedUpdateFloating","debounce","updateChipsHeight","isOptionDisabled","clear","handleSelect","isSelected","remove","dismiss","handleSelectChange","evt","selectedOption","opt","_a","selectedOptions","internalOption","index","logger","open","nextTick","scrollItems","KEY_CODES","el","elBCR","parentBCR","onKeyDown","handleSearchInput","search","DEBOUNCE","requestId","uniqueId","optionClass","isElementWithinSelectMenu","element","isElementInMenu","isElementInTeleportedMenu","_b","handleFocusOut","focusEvent","nextFocusedElement","handleOutsideClick","event","target","handleMouseLeave","onMounted","onUnmounted","_createBlock","Field","_mergeProps","_unref","fieldId","labelId","_createElementVNode","_hoisted_1","_hoisted_2","_withCtx","fieldErrorId","hasError","_openBlock","_createElementBlock","_Fragment","_renderList","_hoisted_4","_normalizeClass","_toDisplayString","_renderSlot","_ctx","_createTextVNode","_withKeys","_withModifiers","$event","_createVNode","Icon","Chip","_hoisted_8","_cache","_Teleport","_Transition","_hoisted_9","args","_hoisted_11","_hoisted_13","_withDirectives","_hoisted_14","_hoisted_15","_vShow"],"mappings":"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"}

package/dist/Select.vue.d.ts

@@ -113,9 +113,9 @@ onClosed?: ((selectedOptions: any) => any) | undefined;
 lazy: () => any[];
 error: string;
 name: string;
+placeholder: string;
 icon: string | boolean;
 trackBy: string;
-placeholder: string;
 hint: string;
 preventEmpty: boolean;
 allowEmpty: string | boolean | null;

package/dist/SelectStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string | boolean;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n\n    /**\n     * Shows a label above the select\n     */\n    label?: string;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n    label: undefined,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `bg-${color}` : `bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `text-${color}` : `text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    :label=\"props.label\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected absolute inset-0 flex size-full items-center rounded pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"mr-6 truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"flex items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"ml-1.5 mr-6 truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"flex min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"ml-1.5\" :class=\"!props.noTruncate && 'truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  @layer utilities {\n    :global(.stash-select-status--filled .stash-select__content) {\n      border: none;\n      padding: 0;\n    }\n\n    :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n      box-sizing: content-box;\n      max-width: calc(100% - 2px);\n    }\n\n    :global(.stash-select-status--filled .stash-select-status--selected),\n    :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n      color: var(--color-white);\n    }\n\n    :global(.stash-select-status--filled-dark .stash-select-status--selected),\n    :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n      color: var(--color-ice-900);\n    }\n\n    .select :global(.stash-select--disabled > .stash-select__content) {\n      background-color: transparent;\n      border-color: transparent;\n    }\n\n    .select :global(.stash-select__chips) {\n      margin: 0;\n    }\n\n    .select :global(.stash-select__options) {\n      margin: 0;\n      padding: 0;\n    }\n\n    .select ul {\n      position: relative;\n    }\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAQC;AAWd,QAAID,EAAM;AACR,YAAM,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACR,YAAM,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AAC5C,aAAOT,EAAiB,SAASa,CAAK;AAAA,IACxC,CAAC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,MAAMA,CAAK,KAAK,MAAMA,CAAK;AAAA,IAC3D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,QAAQA,CAAK,KAAK,QAAQA,CAAK;AAAA,IAC/D;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string | boolean;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n\n    /**\n     * Shows a label above the select\n     */\n    label?: string;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n    label: undefined,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `bg-${color}` : `bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `text-${color}` : `text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    :label=\"props.label\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected absolute inset-0 flex size-full items-center rounded pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"mr-6 truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"flex items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"ml-1.5 mr-6 truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"flex min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"ml-1.5\" :class=\"!props.noTruncate && 'truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  @layer utilities {\n    :global(.stash-select-status--filled .stash-select__content) {\n      border: none;\n      padding: 0;\n    }\n\n    :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n      box-sizing: content-box;\n      max-width: calc(100% - 2px);\n    }\n\n    :global(.stash-select-status--filled .stash-select-status--selected),\n    :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n      color: var(--color-white);\n    }\n\n    :global(.stash-select-status--filled-dark .stash-select-status--selected),\n    :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n      color: var(--color-ice-900);\n    }\n\n    .select :global(.stash-select--disabled > .stash-select__content) {\n      background-color: transparent;\n      border-color: transparent;\n    }\n\n    .select :global(.stash-select__chips) {\n      margin: 0;\n    }\n\n    .select :global(.stash-select__options) {\n      margin: 0;\n      padding: 0;\n    }\n\n    .select ul {\n      position: relative;\n    }\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value","_createBlock","Select","_normalizeClass","_unref","_withCtx","option","_createElementBlock","_createElementVNode","_hoisted_1","_toDisplayString","_openBlock","_hoisted_2","_createVNode","Icon","_normalizeStyle","_hoisted_3","_hoisted_4"],"mappings":"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"}

package/dist/SelectStatus.vue.d.ts

@@ -51,9 +51,9 @@ label: undefined;
 }>, {
 disabled: boolean;
 label: string;
+placeholder: string;
 secondary: boolean;
 trackBy: string;
-placeholder: string;
 displayBy: string;
 value: string | number | boolean | null;
 noTruncate: boolean;

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton animate-pulse bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'max-w-fit': hasChildren && !props.width,\n      'h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .text-variant::before {\n      content: '\\00a0';\n    }\n\n    .has-children > * {\n      visibility: hidden;\n    }\n  }\n</style>\n"],"names":["SkeletonVariants","props","__props","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles"],"mappings":";;AACS,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACRS,EAAO,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WACpCS,EAAO,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton animate-pulse bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'max-w-fit': hasChildren && !props.width,\n      'h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .text-variant::before {\n      content: '\\00a0';\n    }\n\n    .has-children > * {\n      visibility: hidden;\n    }\n  }\n</style>\n"],"names":["SkeletonVariants","props","__props","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;AACS,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACRS,EAAO,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WACpCS,EAAO,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IACT,CAAC;2BAIDC,EAgBM,OAAA;AAAA,MAfJ,aAAU;AAAA,MACV,UAAM,2CAAyC;AAAA,QACU,yCAAAV,EAAM,YAAY;AAAA,QAAiE,gCAAAA,EAAM,YAAY;AAAA,QAA8B,CAAAW,EAAAP,CAAA,oBAA0BJ,EAAM,YAAY;AAAA,QAAoE,uCAAAA,EAAM,YAAY;AAAA,QAAqC,CAAAW,EAAAP,CAAA,oBAA0BE,EAAA;AAAA,qBAAgCA,EAAA,SAAW,CAAKN,EAAM;AAAA,kBAAuBM,EAAA,SAAW,CAAKN,EAAM;AAAA,MAAA;MAS/d,SAAOQ,EAAA,KAAc;AAAA,IAAA;MAGtBI,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;"}

package/dist/Step.js

@@ -15,13 +15,13 @@ const S = { key: 1 }, I = /* @__PURE__ */ k({
     disabled: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 }
   },
-  setup(v) {
-    const e = v, f = g(), s = y(), l = w(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, h = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), x = d(
+  setup(f) {
+    const e = f, m = g(), s = y(), l = w(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, v = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), h = d(
       () => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
     );
     return b(() => {
       l && l.registerStep(e.nested);
-    }), (m, K) => (i(), r("li", {
+    }), (x, K) => (i(), r("li", {
       class: a(["stash-step relative flex w-full", [
         t(s).step,
         {
@@ -52,7 +52,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ k({
         }, [
           (e.completed || e.error || e.loading) && !e.active ? (i(), B(T, {
             key: 0,
-            name: h.value,
+            name: v.value,
             class: a({ "fx-spin": e.loading }),
             size: "dense"
           }, null, 8, ["name", "class"])) : (i(), r("span", S, _(e.step), 1))
@@ -90,7 +90,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ k({
             key: 0,
             class: a(["stash-step__pagination-label mb-0 text-center text-xs", p.value ? "text-ice-700" : "text-white"]),
             "data-test": "stash-step|pagination-label"
-          }, _(x.value), 3)) : u("", !0)
+          }, _(h.value), 3)) : u("", !0)
         ], 2),
         c.value ? (i(), r("div", {
           key: 0,
@@ -103,12 +103,12 @@ const S = { key: 1 }, I = /* @__PURE__ */ k({
           ])
         }, null, 2)) : u("", !0),
         n("div", {
-          class: a(["stash-step--nested-steps", { "pb-9": !m.nested && !t(f).default, hidden: c.value }])
+          class: a(["stash-step--nested-steps", { "pb-9": !f.nested && !t(m).default, hidden: c.value }])
         }, [
           n("ul", {
-            class: a([t(s).nested, { hidden: !t(f).default }])
+            class: a([t(s).nested, { hidden: !t(m).default }])
           }, [
-            C(m.$slots, "default")
+            C(x.$slots, "default")
           ], 2)
         ], 2)
       ], 2)

package/dist/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step relative flex w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'relative w-full shrink-0 snap-start flex-col justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator flex flex-col items-center\"\n      :class=\"{ 'mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"my-1.5 w-px bg-ice-500\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active, hidden: isHorizontal }]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"flex\"\n      :class=\"[\n        {\n          'w-full flex-row items-center': isHorizontal,\n          'mt-1.5 justify-center': showResponsiveNav,\n          'flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'whitespace-nowrap': isHorizontal,\n            'cursor-pointer': !props.active && (props.completed || props.error),\n            'cursor-not-allowed': props.disabled,\n            'text-ice-900': isLightThemed,\n            '!font-semibold': props.active,\n            'text-white': !props.disabled && !isLightThemed,\n            'place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label mb-0 text-center text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'text-ice-700' : 'text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'mx-1.5 border-t group-last:hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div class=\"stash-step--nested-steps\" :class=\"{ 'pb-9': !nested && !slots.default, hidden: isHorizontal }\">\n        <ul :class=\"[classes.nested, { hidden: !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .step::before {\n      content: '●';\n      position: absolute;\n      color: var(--color-white);\n      left: -28px;\n      opacity: 0;\n      transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n    }\n\n    .title {\n      font-weight: var(--font-weight-medium);\n      font-size: 1rem;\n      margin-top: 1px;\n      user-select: none;\n    }\n\n    .nested-step--active::before {\n      opacity: 1;\n    }\n\n    .line {\n      flex-grow: 0;\n      transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n    }\n\n    .line--expanded {\n      flex-grow: 1;\n    }\n\n    .stash-step--singular .line {\n      @apply absolute\n        inset-x-0\n        top-3\n        h-px\n        border-t-0\n        before:absolute\n        before:left-0\n        before:right-2/4\n        before:mr-16\n        before:block\n        before:h-px\n        before:bg-ice-500\n        after:absolute\n        after:left-2/4\n        after:right-0\n        after:ml-16\n        after:block\n        after:h-px\n        after:bg-ice-500;\n    }\n\n    .stash-step--singular .line::after,\n    .stash-step--singular .line::before {\n      content: '';\n    }\n\n    .step:not(.stash-step--singular):last-child .line {\n      display: none;\n    }\n\n    .circle {\n      width: --spacing(6);\n      height: --spacing(6);\n      line-height: --spacing(6);\n      border-radius: calc(infinity * 1px);\n      display: grid;\n      place-items: center;\n      font-weight: var(--font-weight-medium);\n      transition:\n        background-color 500ms,\n        color 500ms;\n    }\n\n    .circle--todo {\n      background-color: rgb(255 255 255 / 50%);\n      color: #4d4a69;\n      border: 1px solid #747293;\n    }\n\n    .circle--active {\n      background-color: var(--color-blue-500);\n      color: var(--color-white);\n      border: 1px solid transparent;\n    }\n\n    .circle--loading {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-ice-700);\n      cursor: pointer;\n    }\n\n    .circle--completed {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-green-500);\n      cursor: pointer;\n    }\n\n    .circle--error {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-red-500);\n      cursor: pointer;\n    }\n\n    .nested {\n      padding: calc(--spacing(3) + --spacing(1.5)) 0;\n    }\n\n    .nested li + li {\n      margin-top: --spacing(3);\n    }\n\n    .nested .title {\n      font-weight: var(--font-weight-normal);\n      font-size: 0.9rem;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBV,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKc,IAAkBJ;AAAA,MAAS,MAC/BK,EAAE,0BAA0B,EAAE,KAAKf,EAAM,MAAM,OAAO,OAAOM,KAAA,gBAAAA,EAAiB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIlG,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACFA,EAAgB,aAAaN,EAAM,MAAM;AAAA,IAE7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step relative flex w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'relative w-full shrink-0 snap-start flex-col justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator flex flex-col items-center\"\n      :class=\"{ 'mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"my-1.5 w-px bg-ice-500\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active, hidden: isHorizontal }]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"flex\"\n      :class=\"[\n        {\n          'w-full flex-row items-center': isHorizontal,\n          'mt-1.5 justify-center': showResponsiveNav,\n          'flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'whitespace-nowrap': isHorizontal,\n            'cursor-pointer': !props.active && (props.completed || props.error),\n            'cursor-not-allowed': props.disabled,\n            'text-ice-900': isLightThemed,\n            '!font-semibold': props.active,\n            'text-white': !props.disabled && !isLightThemed,\n            'place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label mb-0 text-center text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'text-ice-700' : 'text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'mx-1.5 border-t group-last:hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div class=\"stash-step--nested-steps\" :class=\"{ 'pb-9': !nested && !slots.default, hidden: isHorizontal }\">\n        <ul :class=\"[classes.nested, { hidden: !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .step::before {\n      content: '●';\n      position: absolute;\n      color: var(--color-white);\n      left: -28px;\n      opacity: 0;\n      transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n    }\n\n    .title {\n      font-weight: var(--font-weight-medium);\n      font-size: 1rem;\n      margin-top: 1px;\n      user-select: none;\n    }\n\n    .nested-step--active::before {\n      opacity: 1;\n    }\n\n    .line {\n      flex-grow: 0;\n      transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n    }\n\n    .line--expanded {\n      flex-grow: 1;\n    }\n\n    .stash-step--singular .line {\n      @apply absolute\n        inset-x-0\n        top-3\n        h-px\n        border-t-0\n        before:absolute\n        before:left-0\n        before:right-2/4\n        before:mr-16\n        before:block\n        before:h-px\n        before:bg-ice-500\n        after:absolute\n        after:left-2/4\n        after:right-0\n        after:ml-16\n        after:block\n        after:h-px\n        after:bg-ice-500;\n    }\n\n    .stash-step--singular .line::after,\n    .stash-step--singular .line::before {\n      content: '';\n    }\n\n    .step:not(.stash-step--singular):last-child .line {\n      display: none;\n    }\n\n    .circle {\n      width: --spacing(6);\n      height: --spacing(6);\n      line-height: --spacing(6);\n      border-radius: calc(infinity * 1px);\n      display: grid;\n      place-items: center;\n      font-weight: var(--font-weight-medium);\n      transition:\n        background-color 500ms,\n        color 500ms;\n    }\n\n    .circle--todo {\n      background-color: rgb(255 255 255 / 50%);\n      color: #4d4a69;\n      border: 1px solid #747293;\n    }\n\n    .circle--active {\n      background-color: var(--color-blue-500);\n      color: var(--color-white);\n      border: 1px solid transparent;\n    }\n\n    .circle--loading {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-ice-700);\n      cursor: pointer;\n    }\n\n    .circle--completed {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-green-500);\n      cursor: pointer;\n    }\n\n    .circle--error {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-red-500);\n      cursor: pointer;\n    }\n\n    .nested {\n      padding: calc(--spacing(3) + --spacing(1.5)) 0;\n    }\n\n    .nested li + li {\n      margin-top: --spacing(3);\n    }\n\n    .nested .title {\n      font-weight: var(--font-weight-normal);\n      font-size: 0.9rem;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount","_createElementBlock","_unref","_normalizeClass","_createElementVNode","_createBlock","Icon","_hoisted_1","_toDisplayString","_renderSlot","_ctx"],"mappings":"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"}

package/dist/Step.vue.d.ts

@@ -52,8 +52,8 @@ loading: boolean;
 error: boolean;
 disabled: boolean;
 loading: boolean;
-active: boolean;
 step: string;
+active: boolean;
 nested: boolean;
 completed: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {

package/dist/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.types.ts","../src/components/Stepper/Stepper.vue"],"sourcesContent":["import type { Ref } from 'vue';\n\nimport Stepper from './Stepper.vue';\n\n/**\n * Helper type for the template ref (the \"ref\" attribute) on a Stepper instance\n * @see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs\n */\nexport type StepperRef = Ref<InstanceType<typeof Stepper> | null>;\n\nexport enum StepperOrientationEnum {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\nexport type StepperOrientation = `${StepperOrientationEnum}`;\n\nexport type StepperTheme = 'dark' | 'light';\n","<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Force responsive view on horizontal orientation\n     */\n    useResponsiveNav?: boolean;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n    useResponsiveNav: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the step changes\n     */\n    (e: 'update:step', step: number): void;\n    /**\n     * Emitted when the substep changes\n     */\n    (e: 'update:substep', substep: number): void;\n  }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(\n    () => props.orientation === 'horizontal' && (!isLargeScreen.value || props.useResponsiveNav),\n  );\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper flex\"\n      :class=\"{\n        'flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'mx-9 snap-x snap-mandatory overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'text-blue-500' : 'text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'text-blue-500' : 'text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n      @apply hidden;\n    }\n\n    .stash-stepper__arrow {\n      @apply absolute\n        top-0\n        flex\n        h-6\n        w-6\n        min-w-auto\n        items-center\n        justify-center\n        rounded-full\n        border\n        border-solid\n        border-ice-500\n        text-center\n        disabled:text-ice-500 disabled:opacity-50;\n    }\n\n    .stash-stepper__arrow--prev {\n      @apply left-0;\n    }\n\n    .stash-stepper__arrow--next {\n      @apply right-0;\n    }\n  }\n</style>\n"],"names":["StepperOrientationEnum","props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;AAUO,IAAKA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFHA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;AC+BV,UAAMC,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,EAAA,GACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQP,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKI;AAAA,IAAA,CACN,GAEKI,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMX,EAAM,gBAAgB,iBAAiB,CAACQ,EAAc,SAASR,EAAM;AAAA,IAAA,GAEvEY,IAAsBD,EAAS,MAAML,EAAQ,gBAAgB,SAAS,CAAC,GACvEO,IAAsBF;AAAA,MAC1B,MACE,CAACL,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACzBC,EAAA;AAAA,MACF;AAAA,IAAA,GAGFF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IAAA,GAOzCE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACpBM,EAAA;AAAA,IAEJ,CAAC,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcb,EAAQ;AAAA,MACtB,aAAaN,EAAM;AAAA,MACnB,WAAWM,EAAQ;AAAA,MACnB,OAAON,EAAM;AAAA,MACb,mBAAAU;AAAA,IAAA,CACD,GAEDU,EAAa;AAAA,MACX,MAAMd,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeU,IAAe;AAC5B,UAAI,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAA;AAEN,YAAMC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACFA,EAAK,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.types.ts","../src/components/Stepper/Stepper.vue"],"sourcesContent":["import type { Ref } from 'vue';\n\nimport Stepper from './Stepper.vue';\n\n/**\n * Helper type for the template ref (the \"ref\" attribute) on a Stepper instance\n * @see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs\n */\nexport type StepperRef = Ref<InstanceType<typeof Stepper> | null>;\n\nexport enum StepperOrientationEnum {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\nexport type StepperOrientation = `${StepperOrientationEnum}`;\n\nexport type StepperTheme = 'dark' | 'light';\n","<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Force responsive view on horizontal orientation\n     */\n    useResponsiveNav?: boolean;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n    useResponsiveNav: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the step changes\n     */\n    (e: 'update:step', step: number): void;\n    /**\n     * Emitted when the substep changes\n     */\n    (e: 'update:substep', substep: number): void;\n  }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(\n    () => props.orientation === 'horizontal' && (!isLargeScreen.value || props.useResponsiveNav),\n  );\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper flex\"\n      :class=\"{\n        'flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'mx-9 snap-x snap-mandatory overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'text-blue-500' : 'text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'text-blue-500' : 'text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n      @apply hidden;\n    }\n\n    .stash-stepper__arrow {\n      @apply absolute\n        top-0\n        flex\n        h-6\n        w-6\n        min-w-auto\n        items-center\n        justify-center\n        rounded-full\n        border\n        border-solid\n        border-ice-500\n        text-center\n        disabled:text-ice-500 disabled:opacity-50;\n    }\n\n    .stash-stepper__arrow--prev {\n      @apply left-0;\n    }\n\n    .stash-stepper__arrow--next {\n      @apply right-0;\n    }\n  }\n</style>\n"],"names":["StepperOrientationEnum","props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx","_createBlock","Button","_normalizeClass","_unref","_createVNode","Icon"],"mappings":"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"}

package/dist/Stepper.vue.d.ts

@@ -62,7 +62,7 @@ useResponsiveNav: boolean;
 }>, {
 step: number;
 theme: StepperTheme;
-orientation: "vertical" | "horizontal";
+orientation: "horizontal" | "vertical";
 substep: number;
 linear: boolean;
 useResponsiveNav: boolean;