@rotki/ui-library 3.0.0-beta.2 → 3.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/forms/auto-complete/RuiAutoComplete.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/auto-complete-styles.d.ts +3 -53
- package/dist/components/forms/auto-complete/auto-complete-styles.js +2 -1
- package/dist/components/forms/auto-complete/auto-complete-styles.js.map +1 -1
- package/dist/components/forms/text-input-styles.js +1 -1
- package/dist/components/forms/text-input-styles.js.map +1 -1
- package/dist/style.css +4 -0
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n splitAriaAttrs,\n useAutoCompleteChips,\n useAutoCompleteCombobox,\n useAutoCompleteFocus,\n useAutoCompleteKeyboardNavigation,\n useAutoCompleteSearch,\n useAutoCompleteSelection,\n useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n name: 'RuiAutoComplete',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n options = [],\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n chips = false,\n label = 'Select',\n labelPlacement = undefined,\n menuOptions,\n classNames,\n prependIcon,\n hideArrow = false,\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n noFilter = false,\n hideNoData = false,\n noDataText = 'No data available',\n filter,\n hideSelected = false,\n placeholder = '',\n returnObject = false,\n customValue = false,\n hideCustomValue = false,\n required = false,\n hideSearchInput = false,\n hideSelectionWrapper = false,\n groupBy,\n itemDisabled,\n searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem[];\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n 'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'group-header'?: (props: { group: string; items: TItem[] }) => any;\n 'no-data'?: () => any;\n 'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n 'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n internalSearch,\n filteredOptions,\n justOpened,\n updateInternalSearch,\n textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n () => options,\n searchInputModel,\n {\n keyAttr: () => keyAttr,\n textAttr: () => textAttr,\n noFilter: () => noFilter,\n filter: () => filter,\n customValue: () => customValue,\n hideCustomValue: () => hideCustomValue,\n returnObject: () => returnObject,\n groupBy: () => groupBy,\n searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n modelValue,\n () => options,\n {\n keyAttr: () => keyAttr,\n returnObject: () => returnObject,\n customValue: () => customValue,\n },\n {\n getIdentifier,\n getText,\n textValueToProperValue,\n shouldApplyValueAsSearch,\n isOpen,\n multiple,\n updateInternalSearch,\n },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n menuWidth,\n isActiveItem,\n itemIndexInValue,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n optionsWithSelectedHidden,\n modelUserNavigated,\n groupedOptions,\n isGrouped,\n isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: resolvedItemHeight,\n keyAttr,\n textAttr,\n options: filteredOptions,\n dense: () => dense,\n value,\n menuRef,\n setValue: (item: TItem): void => { setValue(item); },\n autoSelectFirst,\n hideSelected,\n isOpen,\n getText,\n getIdentifier,\n groupBy: () => groupBy,\n itemDisabled: () => itemDisabled,\n prependWidth,\n appendWidth,\n});\n\nconst {\n focusedValueIndex,\n moveSelectedValueHighlight,\n onEnter,\n onInputDeletePressed,\n onInputKeydown,\n onTab,\n setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n {\n chips: () => chips,\n customValue: () => customValue,\n multiple,\n },\n {\n activator,\n applyHighlighted,\n clear: (): void => clear(),\n filteredOptions,\n getText,\n highlightedIndex: modelHighlightedIndex,\n internalSearch,\n isOpen,\n removeValue: (item: TItem): void => { setValue(item); },\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n updateInternalSearch,\n userNavigated: modelUserNavigated,\n value,\n },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n focusInput: (): void => get(textInput)?.focus(),\n getIdentifier,\n setValue: (item: TItem): void => { setValue(item); },\n setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n const item = get(value)[get(focusedValueIndex)];\n return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n anyFocused: focusAnyFocused,\n editing,\n inputClass: focusInputClass,\n onInputFocused: focusOnInputFocused,\n onSettledKeydown,\n setInputFocus: focusSetInputFocus,\n settleOnInput,\n unsettle,\n} = useAutoCompleteFocus(\n {\n customValue: () => customValue,\n disabled: () => disabled,\n shouldApplyValueAsSearch,\n },\n {\n activatorFocusedWithin,\n focusedValueIndex,\n internalSearch,\n isOpen,\n justOpened,\n menuWrapperFocusedWithin,\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n textInput,\n updateInternalSearch,\n },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n getText,\n internalSearch,\n isOpen,\n itemIndexInValue,\n multiple,\n resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n searchInputFocused,\n settleOnInput,\n shouldApplyValueAsSearch,\n textValueToProperValue,\n updateInternalSearch,\n value,\n});\n\nconst menuMinHeight = computed<number>(\n () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n if (get(editing))\n return placeholder;\n return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement))\n return;\n\n const value = target.value;\n unsettle();\n set(isOpen, true);\n updateInternalSearch(value);\n set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n unsettle();\n moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n set(searchInputFocused, true);\n get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n\nfunction openMenu(): void {\n set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n\ndefineExpose({\n closeMenu,\n focus: focusSetInputFocus,\n openMenu,\n setSelectionRange,\n});\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :class-names=\"{\n ...menuOptions?.classNames,\n details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n menu: [\n { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n cn(menuOptions?.classNames?.menu) ?? '',\n ],\n }\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"false\"\n full-width\n persist-on-activator-click\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n role=\"listbox\"\n >\n <template\n v-if=\"label\"\n #label\n >\n <RuiFieldLabel\n :id=\"labelId\"\n :text=\"label\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n </template>\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <!--\n The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n chips sit beside it rather than nested in it.\n -->\n <div\n ref=\"activator\"\n :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n v-bind=\"{\n ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n ...(readOnly ? {} : activatorHandlers(attrs)),\n }\"\n data-id=\"activator\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @click=\"focusSetInputFocus()\"\n @keydown.enter=\"onEnter($event)\"\n @keydown.tab=\"onTab($event)\"\n @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n @keydown.up.prevent=\"onArrow(true)\"\n @keydown.down.prevent=\"onArrow(false)\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n >\n <span\n v-if=\"prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"dense ? 16 : 18\"\n />\n </span>\n <div\n data-id=\"value\"\n :class=\"ui.value()\"\n >\n <!--\n Placeholder slot occupies the same flex space the input takes\n when focused, so transitioning into the focused state doesn't\n shift the activator's content. pointer-events-none is required\n so clicks pass through to the activator (otherwise the slot\n swallows the first click and the menu needs two taps to open).\n -->\n <span\n v-if=\"restingPlaceholder\"\n data-id=\"resting-placeholder\"\n class=\"truncate text-rui-text-secondary pointer-events-none\"\n >\n {{ placeholder }}\n </span>\n <div\n v-if=\"!valueSet && !editing && slots.placeholder\"\n data-id=\"placeholder\"\n class=\"flex-1 min-w-0 pointer-events-none\"\n >\n <slot\n name=\"placeholder\"\n v-bind=\"{ disabled, readOnly }\"\n />\n </div>\n <RuiAutoCompleteSelection\n :items=\"value\"\n :chips=\"chips\"\n :dense=\"dense\"\n :multiple=\"multiple\"\n :search-input-focused=\"editing\"\n :hide-selection-wrapper=\"hideSelectionWrapper\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :chip-attrs=\"chipAttrs\"\n :selected-index=\"focusedValueIndex\"\n :select-chip=\"selectChip\"\n >\n <template\n v-if=\"slots['selection.prepend']\"\n #prepend=\"slotProps\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.selection\"\n #default=\"slotProps\"\n >\n <slot\n name=\"selection\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteSelection>\n <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :readonly=\"readOnly || hideSearchInput\"\n :value=\"internalSearch\"\n class=\"bg-transparent outline-hidden\"\n type=\"text\"\n :placeholder=\"usedPlaceholder\"\n :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n role=\"combobox\"\n :tabindex=\"readOnly ? -1 : undefined\"\n :aria-labelledby=\"label ? labelId : undefined\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-controls=\"attrs['aria-controls']\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n :aria-invalid=\"hasError\"\n aria-autocomplete=\"list\"\n data-id=\"search-input\"\n v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n @keydown.delete=\"onInputDeletePressed($event)\"\n @input.stop=\"updateSearchInput($event)\"\n @focus=\"focusOnInputFocused()\"\n />\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n >\n {{ selectedChipAnnouncement }}\n </span>\n </div>\n\n <RuiButton\n v-if=\"clearable && valueSet && !disabled && !readOnly\"\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n data-id=\"clear\"\n aria-label=\"Clear\"\n :class=\"[\n ui.clear(),\n focusAnyFocused && 'visible!',\n { 'mr-2': !dense },\n ]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n\n <span\n v-if=\"!hideArrow\"\n :class=\"ui.iconWrapper()\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 20\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"2\"\n variant=\"indeterminate\"\n />\n </div>\n <fieldset :class=\"ui.fieldset()\" />\n </slot>\n </template>\n <template #default=\"{ width }\">\n <div ref=\"menuWrapperRef\">\n <RuiAutoCompleteOptionList\n v-if=\"optionsWithSelectedHidden.length > 0\"\n :container-props=\"containerProps\"\n :wrapper-props=\"wrapperProps\"\n :set-menu-ref=\"setMenuRef\"\n :is-grouped=\"isGrouped\"\n :grouped-options=\"groupedOptions\"\n :rendered-data=\"renderedData\"\n :options=\"optionsWithSelectedHidden\"\n :highlighted-index=\"modelHighlightedIndex\"\n :highlighted-class=\"highlightedClass\"\n :dense=\"dense\"\n :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :is-active-item=\"isActiveItem\"\n :is-item-disabled=\"isItemDisabled\"\n :option-id-prefix=\"optionIdPrefix\"\n @select=\"setValue($event)\"\n @move-highlight=\"moveHighlight($event)\"\n >\n <template\n v-if=\"slots['group-header']\"\n #group-header=\"slotProps\"\n >\n <slot\n name=\"group-header\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.prepend']\"\n #item.prepend=\"slotProps\"\n >\n <slot\n name=\"item.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.item\"\n #item=\"slotProps\"\n >\n <slot\n name=\"item\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.append']\"\n #item.append=\"slotProps\"\n >\n <slot\n name=\"item.append\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteOptionList>\n\n <div\n v-else-if=\"!hideNoData\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu\"\n >\n <slot name=\"no-data\">\n <div\n v-if=\"!customValue\"\n class=\"p-4\"\n data-id=\"no-data\"\n >\n {{ noDataText }}\n </div>\n </slot>\n </div>\n <!--\n The scroll container above reserves ~15px on the right for the\n scrollbar gutter. We render an equivalent right-padding here so the\n footer's content aligns with the option rows' content rather than\n the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n lets consumers override if their theme reserves a different width.\n -->\n <div\n v-if=\"slots.footer\"\n class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n data-id=\"footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n splitAriaAttrs,\n useAutoCompleteChips,\n useAutoCompleteCombobox,\n useAutoCompleteFocus,\n useAutoCompleteKeyboardNavigation,\n useAutoCompleteSearch,\n useAutoCompleteSelection,\n useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n name: 'RuiAutoComplete',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n options = [],\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n chips = false,\n label = 'Select',\n labelPlacement = undefined,\n menuOptions,\n classNames,\n prependIcon,\n hideArrow = false,\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n noFilter = false,\n hideNoData = false,\n noDataText = 'No data available',\n filter,\n hideSelected = false,\n placeholder = '',\n returnObject = false,\n customValue = false,\n hideCustomValue = false,\n required = false,\n hideSearchInput = false,\n hideSelectionWrapper = false,\n groupBy,\n itemDisabled,\n searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem[];\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n 'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'group-header'?: (props: { group: string; items: TItem[] }) => any;\n 'no-data'?: () => any;\n 'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n 'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n internalSearch,\n filteredOptions,\n justOpened,\n updateInternalSearch,\n textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n () => options,\n searchInputModel,\n {\n keyAttr: () => keyAttr,\n textAttr: () => textAttr,\n noFilter: () => noFilter,\n filter: () => filter,\n customValue: () => customValue,\n hideCustomValue: () => hideCustomValue,\n returnObject: () => returnObject,\n groupBy: () => groupBy,\n searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n modelValue,\n () => options,\n {\n keyAttr: () => keyAttr,\n returnObject: () => returnObject,\n customValue: () => customValue,\n },\n {\n getIdentifier,\n getText,\n textValueToProperValue,\n shouldApplyValueAsSearch,\n isOpen,\n multiple,\n updateInternalSearch,\n },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n menuWidth,\n isActiveItem,\n itemIndexInValue,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n optionsWithSelectedHidden,\n modelUserNavigated,\n groupedOptions,\n isGrouped,\n isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: resolvedItemHeight,\n keyAttr,\n textAttr,\n options: filteredOptions,\n dense: () => dense,\n value,\n menuRef,\n setValue: (item: TItem): void => { setValue(item); },\n autoSelectFirst,\n hideSelected,\n isOpen,\n getText,\n getIdentifier,\n groupBy: () => groupBy,\n itemDisabled: () => itemDisabled,\n prependWidth,\n appendWidth,\n});\n\nconst {\n focusedValueIndex,\n moveSelectedValueHighlight,\n onEnter,\n onInputDeletePressed,\n onInputKeydown,\n onTab,\n setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n {\n chips: () => chips,\n customValue: () => customValue,\n multiple,\n },\n {\n activator,\n applyHighlighted,\n clear: (): void => clear(),\n filteredOptions,\n getText,\n highlightedIndex: modelHighlightedIndex,\n internalSearch,\n isOpen,\n removeValue: (item: TItem): void => { setValue(item); },\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n updateInternalSearch,\n userNavigated: modelUserNavigated,\n value,\n },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n focusInput: (): void => get(textInput)?.focus(),\n getIdentifier,\n setValue: (item: TItem): void => { setValue(item); },\n setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n const item = get(value)[get(focusedValueIndex)];\n return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n anyFocused: focusAnyFocused,\n editing,\n inputClass: focusInputClass,\n onInputFocused: focusOnInputFocused,\n onSettledKeydown,\n setInputFocus: focusSetInputFocus,\n settleOnInput,\n unsettle,\n} = useAutoCompleteFocus(\n {\n customValue: () => customValue,\n disabled: () => disabled,\n shouldApplyValueAsSearch,\n },\n {\n activatorFocusedWithin,\n focusedValueIndex,\n internalSearch,\n isOpen,\n justOpened,\n menuWrapperFocusedWithin,\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n textInput,\n updateInternalSearch,\n },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n getText,\n internalSearch,\n isOpen,\n itemIndexInValue,\n multiple,\n resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n searchInputFocused,\n settleOnInput,\n shouldApplyValueAsSearch,\n textValueToProperValue,\n updateInternalSearch,\n value,\n});\n\nconst menuMinHeight = computed<number>(\n () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n if (get(editing))\n return placeholder;\n return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n multiple: get(multiple),\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement))\n return;\n\n const value = target.value;\n unsettle();\n set(isOpen, true);\n updateInternalSearch(value);\n set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n unsettle();\n moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n set(searchInputFocused, true);\n get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n\nfunction openMenu(): void {\n set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n\ndefineExpose({\n closeMenu,\n focus: focusSetInputFocus,\n openMenu,\n setSelectionRange,\n});\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :class-names=\"{\n ...menuOptions?.classNames,\n details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n menu: [\n { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n cn(menuOptions?.classNames?.menu) ?? '',\n ],\n }\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"false\"\n full-width\n persist-on-activator-click\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n role=\"listbox\"\n >\n <template\n v-if=\"label\"\n #label\n >\n <RuiFieldLabel\n :id=\"labelId\"\n :text=\"label\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n </template>\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <!--\n The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n chips sit beside it rather than nested in it.\n -->\n <div\n ref=\"activator\"\n :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n v-bind=\"{\n ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n ...(readOnly ? {} : activatorHandlers(attrs)),\n }\"\n data-id=\"activator\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @click=\"focusSetInputFocus()\"\n @keydown.enter=\"onEnter($event)\"\n @keydown.tab=\"onTab($event)\"\n @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n @keydown.up.prevent=\"onArrow(true)\"\n @keydown.down.prevent=\"onArrow(false)\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n >\n <span\n v-if=\"prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"dense ? 16 : 18\"\n />\n </span>\n <div\n data-id=\"value\"\n :class=\"ui.value()\"\n >\n <!--\n Placeholder slot occupies the same flex space the input takes\n when focused, so transitioning into the focused state doesn't\n shift the activator's content. pointer-events-none is required\n so clicks pass through to the activator (otherwise the slot\n swallows the first click and the menu needs two taps to open).\n -->\n <span\n v-if=\"restingPlaceholder\"\n data-id=\"resting-placeholder\"\n class=\"truncate text-rui-text-secondary pointer-events-none\"\n >\n {{ placeholder }}\n </span>\n <div\n v-if=\"!valueSet && !editing && slots.placeholder\"\n data-id=\"placeholder\"\n class=\"flex-1 min-w-0 pointer-events-none\"\n >\n <slot\n name=\"placeholder\"\n v-bind=\"{ disabled, readOnly }\"\n />\n </div>\n <RuiAutoCompleteSelection\n :items=\"value\"\n :chips=\"chips\"\n :dense=\"dense\"\n :multiple=\"multiple\"\n :search-input-focused=\"editing\"\n :hide-selection-wrapper=\"hideSelectionWrapper\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :chip-attrs=\"chipAttrs\"\n :selected-index=\"focusedValueIndex\"\n :select-chip=\"selectChip\"\n >\n <template\n v-if=\"slots['selection.prepend']\"\n #prepend=\"slotProps\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.selection\"\n #default=\"slotProps\"\n >\n <slot\n name=\"selection\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteSelection>\n <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :readonly=\"readOnly || hideSearchInput\"\n :value=\"internalSearch\"\n class=\"bg-transparent outline-hidden\"\n type=\"text\"\n :placeholder=\"usedPlaceholder\"\n :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n role=\"combobox\"\n :tabindex=\"readOnly ? -1 : undefined\"\n :aria-labelledby=\"label ? labelId : undefined\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-controls=\"attrs['aria-controls']\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n :aria-invalid=\"hasError\"\n aria-autocomplete=\"list\"\n data-id=\"search-input\"\n v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n @keydown.delete=\"onInputDeletePressed($event)\"\n @input.stop=\"updateSearchInput($event)\"\n @focus=\"focusOnInputFocused()\"\n />\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n >\n {{ selectedChipAnnouncement }}\n </span>\n </div>\n\n <RuiButton\n v-if=\"clearable && valueSet && !disabled && !readOnly\"\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n data-id=\"clear\"\n aria-label=\"Clear\"\n :class=\"[\n ui.clear(),\n focusAnyFocused && 'visible!',\n { 'mr-2': !dense },\n ]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n\n <span\n v-if=\"!hideArrow\"\n :class=\"ui.iconWrapper()\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 20\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"2\"\n variant=\"indeterminate\"\n />\n </div>\n <fieldset :class=\"ui.fieldset()\" />\n </slot>\n </template>\n <template #default=\"{ width }\">\n <div ref=\"menuWrapperRef\">\n <RuiAutoCompleteOptionList\n v-if=\"optionsWithSelectedHidden.length > 0\"\n :container-props=\"containerProps\"\n :wrapper-props=\"wrapperProps\"\n :set-menu-ref=\"setMenuRef\"\n :is-grouped=\"isGrouped\"\n :grouped-options=\"groupedOptions\"\n :rendered-data=\"renderedData\"\n :options=\"optionsWithSelectedHidden\"\n :highlighted-index=\"modelHighlightedIndex\"\n :highlighted-class=\"highlightedClass\"\n :dense=\"dense\"\n :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :is-active-item=\"isActiveItem\"\n :is-item-disabled=\"isItemDisabled\"\n :option-id-prefix=\"optionIdPrefix\"\n @select=\"setValue($event)\"\n @move-highlight=\"moveHighlight($event)\"\n >\n <template\n v-if=\"slots['group-header']\"\n #group-header=\"slotProps\"\n >\n <slot\n name=\"group-header\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.prepend']\"\n #item.prepend=\"slotProps\"\n >\n <slot\n name=\"item.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.item\"\n #item=\"slotProps\"\n >\n <slot\n name=\"item\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.append']\"\n #item.append=\"slotProps\"\n >\n <slot\n name=\"item.append\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteOptionList>\n\n <div\n v-else-if=\"!hideNoData\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu\"\n >\n <slot name=\"no-data\">\n <div\n v-if=\"!customValue\"\n class=\"p-4\"\n data-id=\"no-data\"\n >\n {{ noDataText }}\n </div>\n </slot>\n </div>\n <!--\n The scroll container above reserves ~15px on the right for the\n scrollbar gutter. We render an equivalent right-padding here so the\n footer's content aligns with the option rows' content rather than\n the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n lets consumers override if their theme reserves a different width.\n -->\n <div\n v-if=\"slots.footer\"\n class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n data-id=\"footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":""}
|
package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -320,6 +320,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
320
320
|
dense: __props.dense,
|
|
321
321
|
disabled: __props.disabled,
|
|
322
322
|
readonly: __props.readOnly,
|
|
323
|
+
multiple: get(multiple),
|
|
323
324
|
hasError: get(hasError),
|
|
324
325
|
hasSuccess: get(hasSuccess) && !get(hasError)
|
|
325
326
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiAutoComplete.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n splitAriaAttrs,\n useAutoCompleteChips,\n useAutoCompleteCombobox,\n useAutoCompleteFocus,\n useAutoCompleteKeyboardNavigation,\n useAutoCompleteSearch,\n useAutoCompleteSelection,\n useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n name: 'RuiAutoComplete',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n options = [],\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n chips = false,\n label = 'Select',\n labelPlacement = undefined,\n menuOptions,\n classNames,\n prependIcon,\n hideArrow = false,\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n noFilter = false,\n hideNoData = false,\n noDataText = 'No data available',\n filter,\n hideSelected = false,\n placeholder = '',\n returnObject = false,\n customValue = false,\n hideCustomValue = false,\n required = false,\n hideSearchInput = false,\n hideSelectionWrapper = false,\n groupBy,\n itemDisabled,\n searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem[];\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n 'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'group-header'?: (props: { group: string; items: TItem[] }) => any;\n 'no-data'?: () => any;\n 'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n 'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n internalSearch,\n filteredOptions,\n justOpened,\n updateInternalSearch,\n textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n () => options,\n searchInputModel,\n {\n keyAttr: () => keyAttr,\n textAttr: () => textAttr,\n noFilter: () => noFilter,\n filter: () => filter,\n customValue: () => customValue,\n hideCustomValue: () => hideCustomValue,\n returnObject: () => returnObject,\n groupBy: () => groupBy,\n searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n modelValue,\n () => options,\n {\n keyAttr: () => keyAttr,\n returnObject: () => returnObject,\n customValue: () => customValue,\n },\n {\n getIdentifier,\n getText,\n textValueToProperValue,\n shouldApplyValueAsSearch,\n isOpen,\n multiple,\n updateInternalSearch,\n },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n menuWidth,\n isActiveItem,\n itemIndexInValue,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n optionsWithSelectedHidden,\n modelUserNavigated,\n groupedOptions,\n isGrouped,\n isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: resolvedItemHeight,\n keyAttr,\n textAttr,\n options: filteredOptions,\n dense: () => dense,\n value,\n menuRef,\n setValue: (item: TItem): void => { setValue(item); },\n autoSelectFirst,\n hideSelected,\n isOpen,\n getText,\n getIdentifier,\n groupBy: () => groupBy,\n itemDisabled: () => itemDisabled,\n prependWidth,\n appendWidth,\n});\n\nconst {\n focusedValueIndex,\n moveSelectedValueHighlight,\n onEnter,\n onInputDeletePressed,\n onInputKeydown,\n onTab,\n setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n {\n chips: () => chips,\n customValue: () => customValue,\n multiple,\n },\n {\n activator,\n applyHighlighted,\n clear: (): void => clear(),\n filteredOptions,\n getText,\n highlightedIndex: modelHighlightedIndex,\n internalSearch,\n isOpen,\n removeValue: (item: TItem): void => { setValue(item); },\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n updateInternalSearch,\n userNavigated: modelUserNavigated,\n value,\n },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n focusInput: (): void => get(textInput)?.focus(),\n getIdentifier,\n setValue: (item: TItem): void => { setValue(item); },\n setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n const item = get(value)[get(focusedValueIndex)];\n return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n anyFocused: focusAnyFocused,\n editing,\n inputClass: focusInputClass,\n onInputFocused: focusOnInputFocused,\n onSettledKeydown,\n setInputFocus: focusSetInputFocus,\n settleOnInput,\n unsettle,\n} = useAutoCompleteFocus(\n {\n customValue: () => customValue,\n disabled: () => disabled,\n shouldApplyValueAsSearch,\n },\n {\n activatorFocusedWithin,\n focusedValueIndex,\n internalSearch,\n isOpen,\n justOpened,\n menuWrapperFocusedWithin,\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n textInput,\n updateInternalSearch,\n },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n getText,\n internalSearch,\n isOpen,\n itemIndexInValue,\n multiple,\n resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n searchInputFocused,\n settleOnInput,\n shouldApplyValueAsSearch,\n textValueToProperValue,\n updateInternalSearch,\n value,\n});\n\nconst menuMinHeight = computed<number>(\n () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n if (get(editing))\n return placeholder;\n return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement))\n return;\n\n const value = target.value;\n unsettle();\n set(isOpen, true);\n updateInternalSearch(value);\n set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n unsettle();\n moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n set(searchInputFocused, true);\n get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n\nfunction openMenu(): void {\n set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n\ndefineExpose({\n closeMenu,\n focus: focusSetInputFocus,\n openMenu,\n setSelectionRange,\n});\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :class-names=\"{\n ...menuOptions?.classNames,\n details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n menu: [\n { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n cn(menuOptions?.classNames?.menu) ?? '',\n ],\n }\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"false\"\n full-width\n persist-on-activator-click\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n role=\"listbox\"\n >\n <template\n v-if=\"label\"\n #label\n >\n <RuiFieldLabel\n :id=\"labelId\"\n :text=\"label\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n </template>\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <!--\n The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n chips sit beside it rather than nested in it.\n -->\n <div\n ref=\"activator\"\n :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n v-bind=\"{\n ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n ...(readOnly ? {} : activatorHandlers(attrs)),\n }\"\n data-id=\"activator\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @click=\"focusSetInputFocus()\"\n @keydown.enter=\"onEnter($event)\"\n @keydown.tab=\"onTab($event)\"\n @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n @keydown.up.prevent=\"onArrow(true)\"\n @keydown.down.prevent=\"onArrow(false)\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n >\n <span\n v-if=\"prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"dense ? 16 : 18\"\n />\n </span>\n <div\n data-id=\"value\"\n :class=\"ui.value()\"\n >\n <!--\n Placeholder slot occupies the same flex space the input takes\n when focused, so transitioning into the focused state doesn't\n shift the activator's content. pointer-events-none is required\n so clicks pass through to the activator (otherwise the slot\n swallows the first click and the menu needs two taps to open).\n -->\n <span\n v-if=\"restingPlaceholder\"\n data-id=\"resting-placeholder\"\n class=\"truncate text-rui-text-secondary pointer-events-none\"\n >\n {{ placeholder }}\n </span>\n <div\n v-if=\"!valueSet && !editing && slots.placeholder\"\n data-id=\"placeholder\"\n class=\"flex-1 min-w-0 pointer-events-none\"\n >\n <slot\n name=\"placeholder\"\n v-bind=\"{ disabled, readOnly }\"\n />\n </div>\n <RuiAutoCompleteSelection\n :items=\"value\"\n :chips=\"chips\"\n :dense=\"dense\"\n :multiple=\"multiple\"\n :search-input-focused=\"editing\"\n :hide-selection-wrapper=\"hideSelectionWrapper\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :chip-attrs=\"chipAttrs\"\n :selected-index=\"focusedValueIndex\"\n :select-chip=\"selectChip\"\n >\n <template\n v-if=\"slots['selection.prepend']\"\n #prepend=\"slotProps\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.selection\"\n #default=\"slotProps\"\n >\n <slot\n name=\"selection\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteSelection>\n <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :readonly=\"readOnly || hideSearchInput\"\n :value=\"internalSearch\"\n class=\"bg-transparent outline-hidden\"\n type=\"text\"\n :placeholder=\"usedPlaceholder\"\n :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n role=\"combobox\"\n :tabindex=\"readOnly ? -1 : undefined\"\n :aria-labelledby=\"label ? labelId : undefined\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-controls=\"attrs['aria-controls']\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n :aria-invalid=\"hasError\"\n aria-autocomplete=\"list\"\n data-id=\"search-input\"\n v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n @keydown.delete=\"onInputDeletePressed($event)\"\n @input.stop=\"updateSearchInput($event)\"\n @focus=\"focusOnInputFocused()\"\n />\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n >\n {{ selectedChipAnnouncement }}\n </span>\n </div>\n\n <RuiButton\n v-if=\"clearable && valueSet && !disabled && !readOnly\"\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n data-id=\"clear\"\n aria-label=\"Clear\"\n :class=\"[\n ui.clear(),\n focusAnyFocused && 'visible!',\n { 'mr-2': !dense },\n ]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n\n <span\n v-if=\"!hideArrow\"\n :class=\"ui.iconWrapper()\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 20\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"2\"\n variant=\"indeterminate\"\n />\n </div>\n <fieldset :class=\"ui.fieldset()\" />\n </slot>\n </template>\n <template #default=\"{ width }\">\n <div ref=\"menuWrapperRef\">\n <RuiAutoCompleteOptionList\n v-if=\"optionsWithSelectedHidden.length > 0\"\n :container-props=\"containerProps\"\n :wrapper-props=\"wrapperProps\"\n :set-menu-ref=\"setMenuRef\"\n :is-grouped=\"isGrouped\"\n :grouped-options=\"groupedOptions\"\n :rendered-data=\"renderedData\"\n :options=\"optionsWithSelectedHidden\"\n :highlighted-index=\"modelHighlightedIndex\"\n :highlighted-class=\"highlightedClass\"\n :dense=\"dense\"\n :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :is-active-item=\"isActiveItem\"\n :is-item-disabled=\"isItemDisabled\"\n :option-id-prefix=\"optionIdPrefix\"\n @select=\"setValue($event)\"\n @move-highlight=\"moveHighlight($event)\"\n >\n <template\n v-if=\"slots['group-header']\"\n #group-header=\"slotProps\"\n >\n <slot\n name=\"group-header\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.prepend']\"\n #item.prepend=\"slotProps\"\n >\n <slot\n name=\"item.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.item\"\n #item=\"slotProps\"\n >\n <slot\n name=\"item\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.append']\"\n #item.append=\"slotProps\"\n >\n <slot\n name=\"item.append\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteOptionList>\n\n <div\n v-else-if=\"!hideNoData\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu\"\n >\n <slot name=\"no-data\">\n <div\n v-if=\"!customValue\"\n class=\"p-4\"\n data-id=\"no-data\"\n >\n {{ noDataText }}\n </div>\n </slot>\n </div>\n <!--\n The scroll container above reserves ~15px on the right for the\n scrollbar gutter. We render an equivalent right-padding here so the\n footer's content aligns with the option rows' content rather than\n the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n lets consumers override if their theme reserves a different width.\n -->\n <div\n v-if=\"slots.footer\"\n class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n data-id=\"footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RuiAutoComplete.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n splitAriaAttrs,\n useAutoCompleteChips,\n useAutoCompleteCombobox,\n useAutoCompleteFocus,\n useAutoCompleteKeyboardNavigation,\n useAutoCompleteSearch,\n useAutoCompleteSelection,\n useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n name: 'RuiAutoComplete',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n options = [],\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n chips = false,\n label = 'Select',\n labelPlacement = undefined,\n menuOptions,\n classNames,\n prependIcon,\n hideArrow = false,\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n noFilter = false,\n hideNoData = false,\n noDataText = 'No data available',\n filter,\n hideSelected = false,\n placeholder = '',\n returnObject = false,\n customValue = false,\n hideCustomValue = false,\n required = false,\n hideSearchInput = false,\n hideSelectionWrapper = false,\n groupBy,\n itemDisabled,\n searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem[];\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n 'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'group-header'?: (props: { group: string; items: TItem[] }) => any;\n 'no-data'?: () => any;\n 'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n 'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n keyAttr,\n textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n internalSearch,\n filteredOptions,\n justOpened,\n updateInternalSearch,\n textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n () => options,\n searchInputModel,\n {\n keyAttr: () => keyAttr,\n textAttr: () => textAttr,\n noFilter: () => noFilter,\n filter: () => filter,\n customValue: () => customValue,\n hideCustomValue: () => hideCustomValue,\n returnObject: () => returnObject,\n groupBy: () => groupBy,\n searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n modelValue,\n () => options,\n {\n keyAttr: () => keyAttr,\n returnObject: () => returnObject,\n customValue: () => customValue,\n },\n {\n getIdentifier,\n getText,\n textValueToProperValue,\n shouldApplyValueAsSearch,\n isOpen,\n multiple,\n updateInternalSearch,\n },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n menuWidth,\n isActiveItem,\n itemIndexInValue,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n optionsWithSelectedHidden,\n modelUserNavigated,\n groupedOptions,\n isGrouped,\n isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: resolvedItemHeight,\n keyAttr,\n textAttr,\n options: filteredOptions,\n dense: () => dense,\n value,\n menuRef,\n setValue: (item: TItem): void => { setValue(item); },\n autoSelectFirst,\n hideSelected,\n isOpen,\n getText,\n getIdentifier,\n groupBy: () => groupBy,\n itemDisabled: () => itemDisabled,\n prependWidth,\n appendWidth,\n});\n\nconst {\n focusedValueIndex,\n moveSelectedValueHighlight,\n onEnter,\n onInputDeletePressed,\n onInputKeydown,\n onTab,\n setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n {\n chips: () => chips,\n customValue: () => customValue,\n multiple,\n },\n {\n activator,\n applyHighlighted,\n clear: (): void => clear(),\n filteredOptions,\n getText,\n highlightedIndex: modelHighlightedIndex,\n internalSearch,\n isOpen,\n removeValue: (item: TItem): void => { setValue(item); },\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n updateInternalSearch,\n userNavigated: modelUserNavigated,\n value,\n },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n focusInput: (): void => get(textInput)?.focus(),\n getIdentifier,\n setValue: (item: TItem): void => { setValue(item); },\n setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n const item = get(value)[get(focusedValueIndex)];\n return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n anyFocused: focusAnyFocused,\n editing,\n inputClass: focusInputClass,\n onInputFocused: focusOnInputFocused,\n onSettledKeydown,\n setInputFocus: focusSetInputFocus,\n settleOnInput,\n unsettle,\n} = useAutoCompleteFocus(\n {\n customValue: () => customValue,\n disabled: () => disabled,\n shouldApplyValueAsSearch,\n },\n {\n activatorFocusedWithin,\n focusedValueIndex,\n internalSearch,\n isOpen,\n justOpened,\n menuWrapperFocusedWithin,\n searchInputFocused,\n setSearchAsValue: (): void => setSearchAsValue(),\n textInput,\n updateInternalSearch,\n },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n getText,\n internalSearch,\n isOpen,\n itemIndexInValue,\n multiple,\n resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n searchInputFocused,\n settleOnInput,\n shouldApplyValueAsSearch,\n textValueToProperValue,\n updateInternalSearch,\n value,\n});\n\nconst menuMinHeight = computed<number>(\n () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n if (get(editing))\n return placeholder;\n return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n multiple: get(multiple),\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement))\n return;\n\n const value = target.value;\n unsettle();\n set(isOpen, true);\n updateInternalSearch(value);\n set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n unsettle();\n moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n set(searchInputFocused, true);\n get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n if (get(isOpen)) {\n set(isOpen, false);\n event.stopPropagation();\n }\n}\n\nfunction openMenu(): void {\n set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n\ndefineExpose({\n closeMenu,\n focus: focusSetInputFocus,\n openMenu,\n setSelectionRange,\n});\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :class-names=\"{\n ...menuOptions?.classNames,\n details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n menu: [\n { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n cn(menuOptions?.classNames?.menu) ?? '',\n ],\n }\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"false\"\n full-width\n persist-on-activator-click\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n role=\"listbox\"\n >\n <template\n v-if=\"label\"\n #label\n >\n <RuiFieldLabel\n :id=\"labelId\"\n :text=\"label\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n </template>\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <!--\n The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n chips sit beside it rather than nested in it.\n -->\n <div\n ref=\"activator\"\n :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n v-bind=\"{\n ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n ...(readOnly ? {} : activatorHandlers(attrs)),\n }\"\n data-id=\"activator\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @click=\"focusSetInputFocus()\"\n @keydown.enter=\"onEnter($event)\"\n @keydown.tab=\"onTab($event)\"\n @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n @keydown.up.prevent=\"onArrow(true)\"\n @keydown.down.prevent=\"onArrow(false)\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n >\n <span\n v-if=\"prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"dense ? 16 : 18\"\n />\n </span>\n <div\n data-id=\"value\"\n :class=\"ui.value()\"\n >\n <!--\n Placeholder slot occupies the same flex space the input takes\n when focused, so transitioning into the focused state doesn't\n shift the activator's content. pointer-events-none is required\n so clicks pass through to the activator (otherwise the slot\n swallows the first click and the menu needs two taps to open).\n -->\n <span\n v-if=\"restingPlaceholder\"\n data-id=\"resting-placeholder\"\n class=\"truncate text-rui-text-secondary pointer-events-none\"\n >\n {{ placeholder }}\n </span>\n <div\n v-if=\"!valueSet && !editing && slots.placeholder\"\n data-id=\"placeholder\"\n class=\"flex-1 min-w-0 pointer-events-none\"\n >\n <slot\n name=\"placeholder\"\n v-bind=\"{ disabled, readOnly }\"\n />\n </div>\n <RuiAutoCompleteSelection\n :items=\"value\"\n :chips=\"chips\"\n :dense=\"dense\"\n :multiple=\"multiple\"\n :search-input-focused=\"editing\"\n :hide-selection-wrapper=\"hideSelectionWrapper\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :chip-attrs=\"chipAttrs\"\n :selected-index=\"focusedValueIndex\"\n :select-chip=\"selectChip\"\n >\n <template\n v-if=\"slots['selection.prepend']\"\n #prepend=\"slotProps\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.selection\"\n #default=\"slotProps\"\n >\n <slot\n name=\"selection\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteSelection>\n <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n <input\n ref=\"textInput\"\n :disabled=\"disabled\"\n :readonly=\"readOnly || hideSearchInput\"\n :value=\"internalSearch\"\n class=\"bg-transparent outline-hidden\"\n type=\"text\"\n :placeholder=\"usedPlaceholder\"\n :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n role=\"combobox\"\n :tabindex=\"readOnly ? -1 : undefined\"\n :aria-labelledby=\"label ? labelId : undefined\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-controls=\"attrs['aria-controls']\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n :aria-invalid=\"hasError\"\n aria-autocomplete=\"list\"\n data-id=\"search-input\"\n v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n @keydown.delete=\"onInputDeletePressed($event)\"\n @input.stop=\"updateSearchInput($event)\"\n @focus=\"focusOnInputFocused()\"\n />\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n >\n {{ selectedChipAnnouncement }}\n </span>\n </div>\n\n <RuiButton\n v-if=\"clearable && valueSet && !disabled && !readOnly\"\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n data-id=\"clear\"\n aria-label=\"Clear\"\n :class=\"[\n ui.clear(),\n focusAnyFocused && 'visible!',\n { 'mr-2': !dense },\n ]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n\n <span\n v-if=\"!hideArrow\"\n :class=\"ui.iconWrapper()\"\n @click=\"arrowClicked($event)\"\n >\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 20\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"2\"\n variant=\"indeterminate\"\n />\n </div>\n <fieldset :class=\"ui.fieldset()\" />\n </slot>\n </template>\n <template #default=\"{ width }\">\n <div ref=\"menuWrapperRef\">\n <RuiAutoCompleteOptionList\n v-if=\"optionsWithSelectedHidden.length > 0\"\n :container-props=\"containerProps\"\n :wrapper-props=\"wrapperProps\"\n :set-menu-ref=\"setMenuRef\"\n :is-grouped=\"isGrouped\"\n :grouped-options=\"groupedOptions\"\n :rendered-data=\"renderedData\"\n :options=\"optionsWithSelectedHidden\"\n :highlighted-index=\"modelHighlightedIndex\"\n :highlighted-class=\"highlightedClass\"\n :dense=\"dense\"\n :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n :get-identifier=\"getIdentifier\"\n :get-text=\"getText\"\n :is-active-item=\"isActiveItem\"\n :is-item-disabled=\"isItemDisabled\"\n :option-id-prefix=\"optionIdPrefix\"\n @select=\"setValue($event)\"\n @move-highlight=\"moveHighlight($event)\"\n >\n <template\n v-if=\"slots['group-header']\"\n #group-header=\"slotProps\"\n >\n <slot\n name=\"group-header\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.prepend']\"\n #item.prepend=\"slotProps\"\n >\n <slot\n name=\"item.prepend\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots.item\"\n #item=\"slotProps\"\n >\n <slot\n name=\"item\"\n v-bind=\"slotProps\"\n />\n </template>\n <template\n v-if=\"slots['item.append']\"\n #item.append=\"slotProps\"\n >\n <slot\n name=\"item.append\"\n v-bind=\"slotProps\"\n />\n </template>\n </RuiAutoCompleteOptionList>\n\n <div\n v-else-if=\"!hideNoData\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu\"\n >\n <slot name=\"no-data\">\n <div\n v-if=\"!customValue\"\n class=\"p-4\"\n data-id=\"no-data\"\n >\n {{ noDataText }}\n </div>\n </slot>\n </div>\n <!--\n The scroll container above reserves ~15px on the right for the\n scrollbar gutter. We render an equivalent right-padding here so the\n footer's content aligns with the option rows' content rather than\n the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n lets consumers override if their theme reserves a different width.\n -->\n <div\n v-if=\"slots.footer\"\n class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n data-id=\"footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}
|
|
@@ -2,59 +2,9 @@
|
|
|
2
2
|
* Overrides the `value` slot for flex-wrap chip layout.
|
|
3
3
|
*/
|
|
4
4
|
export declare const autoCompleteStyles: import("tailwind-variants").TVReturnType<{
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
value
|
|
8
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
} | {
|
|
12
|
-
dense: {
|
|
13
|
-
true: import("tailwind-variants").ClassValue | {
|
|
14
|
-
value?: import("tailwind-variants").ClassValue;
|
|
15
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
disabled: {
|
|
19
|
-
true: import("tailwind-variants").ClassValue | {
|
|
20
|
-
value?: import("tailwind-variants").ClassValue;
|
|
21
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
readonly: {
|
|
25
|
-
true: import("tailwind-variants").ClassValue | {
|
|
26
|
-
value?: import("tailwind-variants").ClassValue;
|
|
27
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
hovered: {
|
|
31
|
-
true: import("tailwind-variants").ClassValue | {
|
|
32
|
-
value?: import("tailwind-variants").ClassValue;
|
|
33
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
opened: {
|
|
37
|
-
true: import("tailwind-variants").ClassValue | {
|
|
38
|
-
value?: import("tailwind-variants").ClassValue;
|
|
39
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
hasError: {
|
|
43
|
-
true: import("tailwind-variants").ClassValue | {
|
|
44
|
-
value?: import("tailwind-variants").ClassValue;
|
|
45
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
hasSuccess: {
|
|
49
|
-
true: import("tailwind-variants").ClassValue | {
|
|
50
|
-
value?: import("tailwind-variants").ClassValue;
|
|
51
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
active: {
|
|
55
|
-
true: import("tailwind-variants").ClassValue | {
|
|
56
|
-
value?: import("tailwind-variants").ClassValue;
|
|
57
|
-
prepend?: import("tailwind-variants").ClassValue;
|
|
5
|
+
multiple: {
|
|
6
|
+
false: {
|
|
7
|
+
value: string;
|
|
58
8
|
};
|
|
59
9
|
};
|
|
60
10
|
}, {
|
|
@@ -9,7 +9,8 @@ var autoCompleteStyles = tv({
|
|
|
9
9
|
slots: {
|
|
10
10
|
value: "flex gap-1 flex-wrap flex-1 transition-all duration-75",
|
|
11
11
|
prepend: "flex items-center shrink-0 me-2 text-rui-neutral-500 dark:text-rui-neutral-400"
|
|
12
|
-
}
|
|
12
|
+
},
|
|
13
|
+
variants: { multiple: { false: { value: "flex-nowrap min-w-0" } } }
|
|
13
14
|
});
|
|
14
15
|
//#endregion
|
|
15
16
|
export { autoCompleteStyles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auto-complete-styles.js","names":[],"sources":["../../../../src/components/forms/auto-complete/auto-complete-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * Overrides the `value` slot for flex-wrap chip layout.\n */\nexport const autoCompleteStyles = tv({\n extend: activatorStyles,\n slots: {\n value: 'flex gap-1 flex-wrap flex-1 transition-all duration-75',\n prepend: 'flex items-center shrink-0 me-2 text-rui-neutral-500 dark:text-rui-neutral-400',\n },\n});\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,GAAG;CACnC,QAAQ;CACR,OAAO;EACL,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"auto-complete-styles.js","names":[],"sources":["../../../../src/components/forms/auto-complete/auto-complete-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * Overrides the `value` slot for flex-wrap chip layout.\n */\nexport const autoCompleteStyles = tv({\n extend: activatorStyles,\n slots: {\n value: 'flex gap-1 flex-wrap flex-1 transition-all duration-75',\n prepend: 'flex items-center shrink-0 me-2 text-rui-neutral-500 dark:text-rui-neutral-400',\n },\n variants: {\n /*\n * One value never wraps: the focused search input sits beside it with no room left, and a\n * wrapped input grew the field by a line until it lost focus.\n */\n multiple: {\n false: { value: 'flex-nowrap min-w-0' },\n },\n },\n});\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,GAAG;CACnC,QAAQ;CACR,OAAO;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU,EAKR,UAAU,EACR,OAAO,EAAE,OAAO,sBAAsB,EACxC,EACF;AACF,CAAC"}
|
|
@@ -83,7 +83,7 @@ var textInputBase = tv({
|
|
|
83
83
|
*/
|
|
84
84
|
var activatorStyles = tv({
|
|
85
85
|
slots: {
|
|
86
|
-
wrapper: "w-full inline-flex flex-col",
|
|
86
|
+
wrapper: "w-full inline-flex flex-col align-top",
|
|
87
87
|
activator: [
|
|
88
88
|
"group relative inline-flex items-center w-full",
|
|
89
89
|
"outline-hidden focus:outline-hidden focus-within:outline-hidden cursor-pointer",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The bordered box every text input draws: a `fieldset` laid over the field, so consumer overrides\n * that target `[&_fieldset]` keep working. Extended by RuiTextField and RuiTextArea; the activator\n * styles below carry their own copy, keyed by `opened` rather than `focused`.\n *\n * The box is 1px in every state. Hover darkens it, focus colors it and adds a soft ring, and a\n * validation state colors both.\n *\n * The fieldset is forced onto its own GPU layer so its border is rasterized on integer pixel\n * boundaries; at fractional y-coordinates with a device pixel ratio such as 1.25, Chromium otherwise\n * anti-aliases it across two physical pixel rows.\n */\nexport const textInputBase = tv({\n slots: {\n fieldset: [\n 'absolute top-0 left-0 w-full h-full min-w-0',\n 'rounded-rui-control pointer-events-none transition-all',\n 'border border-rui-outline',\n 'transform-gpu',\n ].join(' '),\n },\n variants: {\n // a step past the 3:1 resting edge; a disabled field drops to the divider, as nothing to act on\n hovered: {\n true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n },\n focused: {\n true: { fieldset: 'ring-3 ring-rui-primary/20' },\n },\n disabled: {\n true: { fieldset: '!border-rui-divider' },\n },\n // a dashed edge marks a value that can be read and copied but not changed; the fill sits on the wrapper\n readonly: {\n true: { fieldset: 'border-dashed' },\n },\n validation: {\n error: { fieldset: '!border-rui-error ring-rui-error/20' },\n success: { fieldset: '!border-rui-success ring-rui-success/20' },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n ],\n defaultVariants: {\n color: 'primary',\n },\n});\n\n/**\n * Shared tv() styles for the activator-based components: RuiMenuSelect, RuiAutoComplete,\n * RuiDateTimePicker. A 36px box (32px dense) with 14px text whose content is centred, so only\n * wrapped tags grow it.\n *\n * The wrapper is `w-full inline-flex flex-col` so an activator fills its parent whatever the\n * context. A consumer's own width utility would normally collide with `w-full` on the same element\n * and lose to cascade order, so the components route consumer classes through\n * `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the consumer's width wins.\n */\nexport const activatorStyles = tv({\n slots: {\n wrapper: 'w-full inline-flex flex-col',\n activator: [\n 'group relative inline-flex items-center w-full',\n 'outline-hidden focus:outline-hidden focus-within:outline-hidden cursor-pointer',\n 'min-h-9 py-0.5 pl-3 pr-8 rounded-rui-control',\n 'm-0 transition-colors duration-150 text-sm/5 text-left',\n 'bg-white dark:bg-transparent dark:text-rui-text border-none hover:border-none',\n ].join(' '),\n fieldset: [\n 'absolute top-0 left-0 w-full h-full min-w-0',\n 'rounded-rui-control pointer-events-none transition-all',\n 'border border-rui-outline',\n 'transform-gpu',\n ].join(' '),\n value: 'w-full block truncate',\n // the field icons' muted tone, darkening on hover; the glyph is 16px in every field\n clear: [\n 'ml-auto shrink-0 invisible group-hover:!visible',\n 'text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text',\n ].join(' '),\n menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n // the grey list button's hover and active tints, so options and menu buttons highlight alike\n highlighted: '!bg-rui-hover',\n /*\n * Covers the field and clips to its corners, so the bar along the bottom edge follows the rounding.\n * The rail is dropped: a grey band over the field's border read as a thick, shadowed edge.\n */\n progress: 'absolute inset-0 flex items-end overflow-hidden rounded-rui-control pointer-events-none [&_[data-id=progress-rail]]:bg-transparent',\n icon: 'text-rui-neutral-500 dark:text-rui-neutral-400 transition',\n iconWrapper: 'flex items-center justify-end absolute right-2 top-px bottom-0',\n },\n variants: {\n dense: {\n true: { activator: 'min-h-8' },\n },\n // the dark text color is restated, since the base `dark:text-rui-text` outranks a plain color\n disabled: {\n true: {\n activator: 'bg-rui-neutral-50 dark:bg-rui-neutral-900 text-rui-text-disabled dark:text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n icon: 'text-rui-text-disabled dark:text-rui-text-disabled',\n fieldset: '!border-rui-divider',\n },\n },\n /*\n * The muted fill reads against the page and the card in both themes, so its dark value is restated\n * over the base `dark:bg-transparent`; the edge goes dashed and the text keeps its full color.\n * Nothing opens, so the chevron is dropped.\n */\n readonly: {\n true: {\n activator: 'pointer-events-none cursor-default bg-rui-surface-muted dark:bg-rui-surface-muted',\n fieldset: 'border-dashed',\n iconWrapper: 'hidden',\n },\n },\n hovered: {\n true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n },\n opened: {\n true: {\n icon: 'rotate-180',\n fieldset: '!border-rui-primary ring-3 ring-rui-primary/20',\n },\n },\n hasError: {\n true: { fieldset: '!border-rui-error ring-rui-error/20' },\n },\n hasSuccess: {\n true: { fieldset: '!border-rui-success ring-rui-success/20' },\n },\n active: {\n true: { highlighted: '!bg-rui-pressed' },\n },\n },\n defaultVariants: {\n dense: false,\n disabled: false,\n readonly: false,\n opened: false,\n },\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,gBAAgB,GAAG;CAC9B,OAAO,EACL,UAAU;EACR;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,UAAU;EAER,SAAS,EACP,MAAM,EAAE,UAAU,qDAAqD,EACzE;EACA,SAAS,EACP,MAAM,EAAE,UAAU,6BAA6B,EACjD;EACA,UAAU,EACR,MAAM,EAAE,UAAU,sBAAsB,EAC1C;EAEA,UAAU,EACR,MAAM,EAAE,UAAU,gBAAgB,EACpC;EACA,YAAY;GACV,OAAO,EAAE,UAAU,sCAAsC;GACzD,SAAS,EAAE,UAAU,0CAA0C;EACjE;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,UAAU,wBAAwB;EAAE;EAClF;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,UAAU,oBAAoB;EAAE;EAC1E;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,UAAU,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;CAChF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CAAC;;;;;;;;;;;AAYD,IAAa,kBAAkB,GAAG;CAChC,OAAO;
|
|
1
|
+
{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The bordered box every text input draws: a `fieldset` laid over the field, so consumer overrides\n * that target `[&_fieldset]` keep working. Extended by RuiTextField and RuiTextArea; the activator\n * styles below carry their own copy, keyed by `opened` rather than `focused`.\n *\n * The box is 1px in every state. Hover darkens it, focus colors it and adds a soft ring, and a\n * validation state colors both.\n *\n * The fieldset is forced onto its own GPU layer so its border is rasterized on integer pixel\n * boundaries; at fractional y-coordinates with a device pixel ratio such as 1.25, Chromium otherwise\n * anti-aliases it across two physical pixel rows.\n */\nexport const textInputBase = tv({\n slots: {\n fieldset: [\n 'absolute top-0 left-0 w-full h-full min-w-0',\n 'rounded-rui-control pointer-events-none transition-all',\n 'border border-rui-outline',\n 'transform-gpu',\n ].join(' '),\n },\n variants: {\n // a step past the 3:1 resting edge; a disabled field drops to the divider, as nothing to act on\n hovered: {\n true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n },\n focused: {\n true: { fieldset: 'ring-3 ring-rui-primary/20' },\n },\n disabled: {\n true: { fieldset: '!border-rui-divider' },\n },\n // a dashed edge marks a value that can be read and copied but not changed; the fill sits on the wrapper\n readonly: {\n true: { fieldset: 'border-dashed' },\n },\n validation: {\n error: { fieldset: '!border-rui-error ring-rui-error/20' },\n success: { fieldset: '!border-rui-success ring-rui-success/20' },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n ],\n defaultVariants: {\n color: 'primary',\n },\n});\n\n/**\n * Shared tv() styles for the activator-based components: RuiMenuSelect, RuiAutoComplete,\n * RuiDateTimePicker. A 36px box (32px dense) with 14px text whose content is centred, so only\n * wrapped tags grow it.\n *\n * The wrapper is `w-full inline-flex flex-col` so an activator fills its parent whatever the\n * context. A consumer's own width utility would normally collide with `w-full` on the same element\n * and lose to cascade order, so the components route consumer classes through\n * `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the consumer's width wins.\n */\nexport const activatorStyles = tv({\n slots: {\n // top-aligned, since an inline box on the text baseline sat about 1.6px low in a block parent\n wrapper: 'w-full inline-flex flex-col align-top',\n activator: [\n 'group relative inline-flex items-center w-full',\n 'outline-hidden focus:outline-hidden focus-within:outline-hidden cursor-pointer',\n 'min-h-9 py-0.5 pl-3 pr-8 rounded-rui-control',\n 'm-0 transition-colors duration-150 text-sm/5 text-left',\n 'bg-white dark:bg-transparent dark:text-rui-text border-none hover:border-none',\n ].join(' '),\n fieldset: [\n 'absolute top-0 left-0 w-full h-full min-w-0',\n 'rounded-rui-control pointer-events-none transition-all',\n 'border border-rui-outline',\n 'transform-gpu',\n ].join(' '),\n value: 'w-full block truncate',\n // the field icons' muted tone, darkening on hover; the glyph is 16px in every field\n clear: [\n 'ml-auto shrink-0 invisible group-hover:!visible',\n 'text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text',\n ].join(' '),\n menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n // the grey list button's hover and active tints, so options and menu buttons highlight alike\n highlighted: '!bg-rui-hover',\n /*\n * Covers the field and clips to its corners, so the bar along the bottom edge follows the rounding.\n * The rail is dropped: a grey band over the field's border read as a thick, shadowed edge.\n */\n progress: 'absolute inset-0 flex items-end overflow-hidden rounded-rui-control pointer-events-none [&_[data-id=progress-rail]]:bg-transparent',\n icon: 'text-rui-neutral-500 dark:text-rui-neutral-400 transition',\n iconWrapper: 'flex items-center justify-end absolute right-2 top-px bottom-0',\n },\n variants: {\n dense: {\n true: { activator: 'min-h-8' },\n },\n // the dark text color is restated, since the base `dark:text-rui-text` outranks a plain color\n disabled: {\n true: {\n activator: 'bg-rui-neutral-50 dark:bg-rui-neutral-900 text-rui-text-disabled dark:text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n icon: 'text-rui-text-disabled dark:text-rui-text-disabled',\n fieldset: '!border-rui-divider',\n },\n },\n /*\n * The muted fill reads against the page and the card in both themes, so its dark value is restated\n * over the base `dark:bg-transparent`; the edge goes dashed and the text keeps its full color.\n * Nothing opens, so the chevron is dropped.\n */\n readonly: {\n true: {\n activator: 'pointer-events-none cursor-default bg-rui-surface-muted dark:bg-rui-surface-muted',\n fieldset: 'border-dashed',\n iconWrapper: 'hidden',\n },\n },\n hovered: {\n true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n },\n opened: {\n true: {\n icon: 'rotate-180',\n fieldset: '!border-rui-primary ring-3 ring-rui-primary/20',\n },\n },\n hasError: {\n true: { fieldset: '!border-rui-error ring-rui-error/20' },\n },\n hasSuccess: {\n true: { fieldset: '!border-rui-success ring-rui-success/20' },\n },\n active: {\n true: { highlighted: '!bg-rui-pressed' },\n },\n },\n defaultVariants: {\n dense: false,\n disabled: false,\n readonly: false,\n opened: false,\n },\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,gBAAgB,GAAG;CAC9B,OAAO,EACL,UAAU;EACR;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,UAAU;EAER,SAAS,EACP,MAAM,EAAE,UAAU,qDAAqD,EACzE;EACA,SAAS,EACP,MAAM,EAAE,UAAU,6BAA6B,EACjD;EACA,UAAU,EACR,MAAM,EAAE,UAAU,sBAAsB,EAC1C;EAEA,UAAU,EACR,MAAM,EAAE,UAAU,gBAAgB,EACpC;EACA,YAAY;GACV,OAAO,EAAE,UAAU,sCAAsC;GACzD,SAAS,EAAE,UAAU,0CAA0C;EACjE;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,UAAU,wBAAwB;EAAE;EAClF;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,UAAU,oBAAoB;EAAE;EAC1E;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,UAAU,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;CAChF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CAAC;;;;;;;;;;;AAYD,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EACT,WAAW;GACT;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,UAAU;GACR;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EAEP,OAAO,CACL,mDACA,6FACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EAEN,aAAa;EAKb,UAAU;EACV,MAAM;EACN,aAAa;CACf;CACA,UAAU;EACR,OAAO,EACL,MAAM,EAAE,WAAW,UAAU,EAC/B;EAEA,UAAU,EACR,MAAM;GACJ,WAAW;GACX,MAAM;GACN,UAAU;EACZ,EACF;EAMA,UAAU,EACR,MAAM;GACJ,WAAW;GACX,UAAU;GACV,aAAa;EACf,EACF;EACA,SAAS,EACP,MAAM,EAAE,UAAU,qDAAqD,EACzE;EACA,QAAQ,EACN,MAAM;GACJ,MAAM;GACN,UAAU;EACZ,EACF;EACA,UAAU,EACR,MAAM,EAAE,UAAU,sCAAsC,EAC1D;EACA,YAAY,EACV,MAAM,EAAE,UAAU,0CAA0C,EAC9D;EACA,QAAQ,EACN,MAAM,EAAE,aAAa,kBAAkB,EACzC;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;EACV,UAAU;EACV,QAAQ;CACV;AACF,CAAC"}
|
package/dist/style.css
CHANGED
package/dist/web-types.json
CHANGED