npm - @sparklingopinions/sparkling-ui - Versions diffs - 0.2.2 → 0.4.0 - Mend

@sparklingopinions/sparkling-ui 0.2.2 → 0.4.0

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.

Files changed (54) hide show

package/dist/components/Select/Select.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","Tag","_normalizeClass","_normalizeStyle","Spinner","_createTextVNode","CheckIcon","CheckIcon_default","Spinner_default","Tag_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","optionClass","Select_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","attrs","useAttrs","label","computed","triggerAttrs","key","model","useModel","open","ref","query","keyboard","values","selected","option","value","search","listed","text","showCreate","virtual","createHues","newHue","CREATE","fieldAttrs","isInvalid","useFieldControl","setQuery","show","viaKeyboard","close","toggle","event","choose","create","draft","onSelect","row","remove","chosen","onKeydown","onTriggerKeydown","onOpenAutoFocus","nextTick","anchor","returnFocus","listbox","onHighlight","payload","triggerSizes","openBlock","createBlock","unref","PopoverRoot","_cache","withCtx","createVNode","PopoverAnchor","renderSlot","_ctx","createElementVNode","mergeProps","createElementBlock","toDisplayString","createCommentVNode","Fragment","renderList","PopoverPortal","PopoverContent","normalizeClass","normalizeStyle","ListboxRoot","ListboxFilter","ListboxContent","ListboxVirtualizer","ListboxItem","$event","createTextVNode"],"sources":["../../../src/components/Select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends SelectValue\">\nimport { computed, nextTick, ref, useAttrs } from 'vue'\n\nimport {\n ListboxContent,\n ListboxFilter,\n ListboxItem,\n ListboxRoot,\n ListboxVirtualizer,\n PopoverAnchor,\n PopoverContent,\n PopoverPortal,\n PopoverRoot\n} from 'reka-ui'\n\nimport type { Hue } from '../../utils/hues'\nimport { useFieldControl } from '../FormField/context'\nimport Spinner from '../Spinner/Spinner.vue'\nimport Tag from '../Tag/Tag.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport type { SelectOption, SelectValue } from './types'\n\nexport interface SelectProps<T extends SelectValue> {\n options: SelectOption<T>[]\n multiple?: boolean\n /** A filter row at the top of the list; on by default for `multiple`, `canCreate` or more than 8 options. /\n searchable?: boolean\n /* Offers to create what was typed, through `createOption`. /\n canCreate?: boolean\n /* Makes the created option; by default its value is its label. /\n createOption?: (draft: { label: string; color?: Hue }) => SelectOption<T> \| Promise<SelectOption<T>>\n /* Creates with a hue, shown as a tag. /\n createColored?: boolean\n loading?: boolean\n /* 36px for forms, 28px for table feet and toolbars. /\n size?: 'md' \| 'sm'\n disabled?: boolean\n invalid?: boolean\n placeholder?: string\n searchPlaceholder?: string\n emptyLabel?: string\n createLabel?: string\n removeLabel?: string\n /* Where the list opens; it flips when there's no room. /\n side?: 'bottom' \| 'top'\n align?: 'start' \| 'end'\n /* The list's width, when it should differ from the trigger's, e.g. `20rem`. */\n panelWidth?: string\n}\n\n// Attributes (aria-label, class for its width) go to the trigger, the one element in the page's flow.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps<T>>(), {\n searchable: undefined,\n createOption: undefined,\n createColored: true,\n size: 'md',\n placeholder: 'Select an option',\n searchPlaceholder: 'Type to filter',\n emptyLabel: 'No results found',\n createLabel: 'Create',\n removeLabel: 'Remove',\n side: 'bottom',\n align: 'start',\n panelWidth: undefined\n})\n\nconst emit = defineEmits<{ 'query-change': [query: string] }>()\n\n// An aria-label would hide the trigger's visible value from its name; it's said before the value instead.\nconst attrs = useAttrs()\nconst label = computed(() => attrs['aria-label'] as string \| undefined)\nconst triggerAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'aria-label')))\n\nconst model = defineModel<T \| T[] \| null>({ default: null })\n\nconst open = ref(false)\nconst query = ref('')\nconst keyboard = ref(false)\n\nconst values = computed<T[]>(() =>\n Array.isArray(model.value) ? model.value : model.value === null \|\| model.value === undefined ? [] : [model.value]\n)\nconst selected = computed(() =>\n values.value.map((value) => props.options.find((option) => option.value === value)).filter((option) => !!option)\n)\nconst search = computed(() => props.searchable ?? (props.multiple \|\| props.canCreate \|\| props.options.length > 8))\nconst listed = computed(() => {\n const text = query.value.trim().toLowerCase()\n return props.options\n .filter((option) => !(props.multiple && search.value && values.value.includes(option.value)))\n .filter((option) => !text \|\| option.label.toLowerCase().includes(text))\n})\nconst showCreate = computed(() => {\n const text = query.value.trim().toLowerCase()\n return props.canCreate && !!text && !props.options.some((option) => option.label.toLowerCase() === text)\n})\n// More than this and the list renders only the rows in view.\nconst virtual = computed(() => listed.value.length > 20)\n\nconst createHues: Hue[] = ['gray', 'purple', 'red', 'green', 'orange', 'pink', 'blue', 'slate']\nconst newHue = computed(() => createHues[query.value.length % createHues.length])\nconst CREATE = { create: true } as const\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => undefined,\n () => props.invalid\n)\n\nfunction setQuery(text: string) {\n query.value = text\n emit('query-change', text)\n}\n\nfunction show(viaKeyboard: boolean) {\n if (props.disabled) return\n keyboard.value = viaKeyboard\n open.value = true\n}\n\nfunction close() {\n open.value = false\n if (query.value) setQuery('')\n}\n\nfunction toggle(event?: Event) {\n if (open.value) close()\n // A click from the keyboard (Enter, Space) has no pointer position.\n else show(!!event && (event as MouseEvent).detail === 0)\n}\n\nfunction choose(option: SelectOption<T>) {\n if (props.multiple) {\n model.value = values.value.includes(option.value)\n ? values.value.filter((value) => value !== option.value)\n : [...values.value, option.value]\n setQuery('')\n } else {\n model.value = option.value\n close()\n }\n}\n\nasync function create() {\n const label = query.value.trim()\n const draft = props.createColored ? { label, color: newHue.value } : { label }\n const option = props.createOption\n ? await props.createOption(draft)\n : ({ value: label as T, label, color: draft.color } as SelectOption<T>)\n choose(option)\n}\n\nfunction onSelect(event: CustomEvent, row: SelectOption<T> \| typeof CREATE) {\n // What's chosen lives in the model; the listbox keeps no selection of its own.\n event.preventDefault()\n if ('create' in row) create()\n else if (!row.disabled) choose(row)\n}\n\nfunction remove(value: T) {\n model.value = values.value.filter((chosen) => chosen !== value)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n if (event.key === 'Backspace' && props.multiple && !query.value && values.value.length)\n remove(values.value[values.value.length - 1]!)\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n if (!open.value && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault()\n show(true)\n }\n}\n\n// The filter takes focus when there is one, or else the list, so the arrow keys work at once.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n nextTick(() =>\n (event.target as HTMLElement \| null)?.querySelector<HTMLElement>('[data-select-filter], [role=\"listbox\"]')?.focus()\n )\n}\n\n// Back to the trigger, which Reka can't find: it's our anchor, not its trigger.\nconst anchor = ref<{ $el: HTMLElement }>()\nfunction returnFocus(event: Event) {\n event.preventDefault()\n anchor.value?.$el?.focus()\n}\n\n// Reka highlights the first option as the list mounts; only the chosen one, or the keyboard, should be.\nconst listbox = ref()\nfunction onHighlight(payload: { value: unknown } \| undefined) {\n if (keyboard.value \|\| !payload) return\n if (values.value.includes(payload.value as T)) return\n nextTick(() => listbox.value && !keyboard.value && (listbox.value.highlightedElement = null))\n}\n\nconst triggerSizes = { md: 'min-h-9 pr-2.5 pl-3 text-sm', sm: 'h-7 pr-1.5 pl-2 text-13' }\nconst optionClass =\n 'flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset'\n</script>\n\n<!-- One select for every choice: a short fixed list, a searchable one, several values as tags (`multiple`), or creating\n what was typed (`canCreate`). The `trigger` slot draws your own trigger and gets `open`, `toggle` and `selected`. -->\n<template>\n <PopoverRoot :open=\"open\" @update:open=\"(value) => (value ? show(false) : close())\">\n <PopoverAnchor ref=\"anchor\" as-child>\n <slot name=\"trigger\" :open=\"open\" :selected=\"selected\" :toggle=\"toggle\">\n <button\n v-bind=\"{ ...fieldAttrs, ...triggerAttrs }\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-colors duration-150 focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60\"\n :class=\"[\n triggerSizes[size],\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-control hover:border-sui-ink-muted'\n ]\"\n :disabled=\"disabled\"\n type=\"button\"\n @click=\"toggle\"\n @keydown=\"onTriggerKeydown\"\n >\n <span v-if=\"label\" class=\"sr-only\">{{ label }}: </span>\n <span v-if=\"!selected.length\" class=\"text-sui-ink-faint\">{{ placeholder }}</span>\n <span v-else-if=\"multiple\" class=\"flex flex-wrap gap-1 py-1.25\">\n <Tag\n v-for=\"option in selected\"\n :key=\"option.value\"\n :color=\"option.color ?? undefined\"\n :name=\"option.label\"\n />\n </span>\n <Tag v-else-if=\"selected[0]!.color\" :color=\"selected[0]!.color\" :name=\"selected[0]!.label\" />\n <span v-else class=\"min-w-0 truncate whitespace-nowrap\">{{ selected[0]!.label }}</span>\n <svg\n aria-hidden=\"true\"\n class=\"size-4 shrink-0 fill-none stroke-sui-ink-muted transition-transform duration-150 group-aria-expanded:rotate-180\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.5\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M4.5 6.5 8 10l3.5-3.5\" />\n </svg>\n </button>\n </slot>\n </PopoverAnchor>\n <PopoverPortal>\n <PopoverContent\n :align=\"align\"\n :aria-label=\"label ?? placeholder\"\n class=\"z-[1000] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in\"\n :class=\"\n search ? 'min-w-[max(var(--reka-popover-trigger-width),15rem)]' : 'min-w-(--reka-popover-trigger-width)'\n \"\n :side=\"side\"\n :side-offset=\"4\"\n :style=\"panelWidth ? { width: panelWidth } : undefined\"\n @close-auto-focus=\"returnFocus\"\n @open-auto-focus=\"onOpenAutoFocus\"\n >\n <ListboxRoot\n ref=\"listbox\"\n :highlight-on-hover=\"true\"\n :model-value=\"multiple ? values : (values[0] ?? undefined)\"\n :multiple=\"multiple\"\n @highlight=\"onHighlight\"\n @keydown=\"onKeydown\"\n @pointermove=\"keyboard = false\"\n >\n <div\n v-if=\"search\"\n class=\"flex min-h-11 flex-wrap items-center gap-1 border-b border-sui-line-subtle px-3 py-2.5\"\n >\n <template v-if=\"multiple\">\n <Tag\n v-for=\"option in selected\"\n :key=\"option.value\"\n :color=\"option.color ?? undefined\"\n :name=\"option.label\"\n removable\n :remove-label=\"removeLabel\"\n @remove=\"remove(option.value)\"\n />\n </template>\n <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n <ListboxFilter\n :aria-label=\"label ?? placeholder\"\n class=\"h-5 min-w-16 flex-1 rounded-none border-none bg-transparent p-0 text-13 text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n data-select-filter\n :model-value=\"query\"\n :placeholder=\"multiple && selected.length ? '' : searchPlaceholder\"\n @update:model-value=\"setQuery\"\n />\n </div>\n <div v-if=\"loading\" class=\"flex justify-center py-6\"><Spinner size=\"sm\" /></div>\n <ListboxContent\n v-else-if=\"listed.length \|\| showCreate\"\n :aria-label=\"label ?? placeholder\"\n class=\"group/list max-h-60 overflow-auto p-1 outline-hidden\"\n :data-keyboard=\"keyboard \|\| undefined\"\n >\n <ListboxVirtualizer\n v-if=\"virtual\"\n v-slot=\"{ option }\"\n :estimate-size=\"32\"\n :options=\"listed\"\n :text-content=\"(option) => option.label\"\n >\n <ListboxItem\n :class=\"optionClass\"\n :disabled=\"option.disabled\"\n :value=\"option.value\"\n @select=\"onSelect($event, option as SelectOption<T>)\"\n >\n <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n <slot name=\"option\" :option=\"option as SelectOption<T>\">\n <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n <template v-else>{{ option.label }}</template>\n </slot>\n </span>\n <CheckIcon v-if=\"values.includes(option.value)\" />\n </ListboxItem>\n </ListboxVirtualizer>\n <template v-else>\n <ListboxItem\n v-for=\"option in listed\"\n :key=\"option.value\"\n :class=\"optionClass\"\n :disabled=\"option.disabled\"\n :value=\"option.value\"\n @select=\"onSelect($event, option)\"\n >\n <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n <slot name=\"option\" :option=\"option\">\n <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n <template v-else>{{ option.label }}</template>\n </slot>\n </span>\n <CheckIcon v-if=\"values.includes(option.value)\" />\n </ListboxItem>\n </template>\n <ListboxItem v-if=\"showCreate\" :class=\"optionClass\" :value=\"CREATE\" @select=\"onSelect($event, CREATE)\">\n <span class=\"inline-flex min-w-0 items-center gap-1.5\">\n {{ createLabel }}\n <Tag v-if=\"createColored\" :color=\"newHue\" :name=\"query.trim()\" />\n <strong v-else class=\"font-medium\">“{{ query.trim() }}”</strong>\n </span>\n </ListboxItem>\n </ListboxContent>\n <div v-else class=\"px-3.5 py-3 text-13 text-sui-ink-muted\">{{ emptyLabel }}</div>\n </ListboxRoot>\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","Tag","_normalizeClass","_normalizeStyle","Spinner","_createTextVNode","CheckIcon","CheckIcon_default","Spinner_default","Tag_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","optionClass","Select_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","attrs","useAttrs","label","computed","triggerAttrs","key","model","useModel","open","ref","query","keyboard","values","picked","shallowRef","selected","list","option","value","search","removable","matches","text","listed","showCreate","virtual","createHues","newHue","CREATE","fieldAttrs","isInvalid","useFieldControl","setQuery","show","viaKeyboard","close","toggle","event","choose","known","creating","create","draft","error","onSelect","row","remove","chosen","onKeydown","onTriggerKeydown","onOpenAutoFocus","nextTick","anchor","onPointerDownOutside","target","returnFocus","listbox","onHighlight","payload","triggerSizes","openBlock","createBlock","unref","PopoverRoot","_cache","withCtx","createVNode","PopoverAnchor","renderSlot","_ctx","createElementVNode","mergeProps","createElementBlock","toDisplayString","createCommentVNode","Fragment","renderList","PopoverPortal","PopoverContent","normalizeClass","normalizeStyle","ListboxRoot","ListboxFilter","ListboxContent","ListboxVirtualizer","ListboxItem","$event","createTextVNode"],"sources":["../../../src/components/Select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends SelectValue\">\nimport { computed, nextTick, ref, shallowRef, useAttrs } from 'vue'\n\nimport {\n ListboxContent,\n ListboxFilter,\n ListboxItem,\n ListboxRoot,\n ListboxVirtualizer,\n PopoverAnchor,\n PopoverContent,\n PopoverPortal,\n PopoverRoot\n} from 'reka-ui'\n\nimport type { Hue } from '../../utils/hues'\nimport { useFieldControl } from '../FormField/context'\nimport Spinner from '../Spinner/Spinner.vue'\nimport Tag from '../Tag/Tag.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport type { SelectOption, SelectValue } from './types'\n\nexport interface SelectProps<T extends SelectValue> {\n options: SelectOption<T>[]\n /** The options for chosen values that aren't in `options`, such as a saved choice while `options` holds search\n * results. Options picked from the list are remembered without it. /\n selectedOptions?: SelectOption<T>[]\n multiple?: boolean\n /* Lets a single choice be removed, as a tag in the filter row or with Backspace there. /\n clearable?: boolean\n /* A filter row at the top of the list; on by default for `multiple`, `canCreate` or more than 8 options. /\n searchable?: boolean\n /* Narrows `options` to what's typed: by label, or by your function. `false` when `options` are already the results\n * for the query, such as from a server search through `query-change`. /\n filter?: boolean \| ((option: SelectOption<T>, query: string) => boolean)\n /* Offers to create what was typed, through `createOption`. /\n canCreate?: boolean\n /* Makes the created option; by default its value is its label. /\n createOption?: (draft: { label: string; color?: Hue }) => SelectOption<T> \| Promise<SelectOption<T>>\n /* Creates with a hue, shown as a tag. /\n createColored?: boolean\n loading?: boolean\n /* 36px for forms, 28px for table feet and toolbars. /\n size?: 'md' \| 'sm'\n disabled?: boolean\n invalid?: boolean\n placeholder?: string\n searchPlaceholder?: string\n emptyLabel?: string\n createLabel?: string\n removeLabel?: string\n /* Where the list opens; it flips when there's no room. /\n side?: 'bottom' \| 'top'\n align?: 'start' \| 'end'\n /* The list's width, when it should differ from the trigger's, e.g. `20rem`. */\n panelWidth?: string\n}\n\n// Attributes (aria-label, class for its width) go to the trigger, the one element in the page's flow.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps<T>>(), {\n selectedOptions: () => [],\n searchable: undefined,\n filter: true,\n createOption: undefined,\n createColored: true,\n size: 'md',\n placeholder: 'Select an option',\n searchPlaceholder: 'Type to filter',\n emptyLabel: 'No results found',\n createLabel: 'Create',\n removeLabel: 'Remove',\n side: 'bottom',\n align: 'start',\n panelWidth: undefined\n})\n\nconst emit = defineEmits<{ 'query-change': [query: string]; 'create-error': [error: unknown] }>()\n\n// An aria-label would hide the trigger's visible value from its name; it's said before the value instead.\nconst attrs = useAttrs()\nconst label = computed(() => attrs['aria-label'] as string \| undefined)\nconst triggerAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'aria-label')))\n\nconst model = defineModel<T \| T[] \| null>({ default: null })\n\nconst open = ref(false)\nconst query = ref('')\nconst keyboard = ref(false)\n\nconst values = computed<T[]>(() =>\n Array.isArray(model.value) ? model.value : model.value === null \|\| model.value === undefined ? [] : [model.value]\n)\n// Options picked from earlier results, which `options` may no longer hold.\nconst picked = shallowRef<SelectOption<T>[]>([])\nconst selected = computed(() =>\n values.value\n .map((value) =>\n [props.options, props.selectedOptions, picked.value]\n .map((list) => list.find((option) => option.value === value))\n .find((option) => !!option)\n )\n .filter((option) => !!option)\n)\nconst search = computed(\n () =>\n props.searchable ??\n (props.multiple \|\| props.canCreate \|\| props.clearable \|\| props.filter === false \|\| props.options.length > 8)\n)\nconst removable = computed(() => props.multiple \|\| props.clearable)\nconst matches = (option: SelectOption<T>, text: string) =>\n typeof props.filter === 'function'\n ? props.filter(option, text)\n : option.label.toLowerCase().includes(text.toLowerCase())\nconst listed = computed(() => {\n const text = query.value.trim()\n return props.options\n .filter((option) => !(props.multiple && search.value && values.value.includes(option.value)))\n .filter((option) => !text \|\| props.filter === false \|\| matches(option, text))\n})\nconst showCreate = computed(() => {\n const text = query.value.trim().toLowerCase()\n return props.canCreate && !!text && !props.options.some((option) => option.label.toLowerCase() === text)\n})\n// More than this and the list renders only the rows in view.\nconst virtual = computed(() => listed.value.length > 20)\n\nconst createHues: Hue[] = ['gray', 'purple', 'red', 'green', 'orange', 'pink', 'blue', 'slate']\nconst newHue = computed(() => createHues[query.value.length % createHues.length])\nconst CREATE = { create: true } as const\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => undefined,\n () => props.invalid\n)\n\nfunction setQuery(text: string) {\n query.value = text\n emit('query-change', text)\n}\n\nfunction show(viaKeyboard: boolean) {\n if (props.disabled) return\n keyboard.value = viaKeyboard\n open.value = true\n}\n\nfunction close() {\n open.value = false\n if (query.value) setQuery('')\n}\n\nfunction toggle(event?: Event) {\n if (open.value) close()\n // A click from the keyboard (Enter, Space) has no pointer position.\n else show(!!event && (event as MouseEvent).detail === 0)\n}\n\nfunction choose(option: SelectOption<T>) {\n picked.value = [option, ...picked.value.filter((known) => known.value !== option.value)]\n if (props.multiple) {\n model.value = values.value.includes(option.value)\n ? values.value.filter((value) => value !== option.value)\n : [...values.value, option.value]\n setQuery('')\n } else {\n model.value = option.value\n close()\n }\n}\n\nconst creating = ref(false)\n\n// A failed createOption keeps what was typed, so it can be tried again.\nasync function create() {\n if (creating.value) return\n const label = query.value.trim()\n const draft = props.createColored ? { label, color: newHue.value } : { label }\n creating.value = true\n try {\n const option = props.createOption\n ? await props.createOption(draft)\n : ({ value: label as T, label, color: draft.color } as SelectOption<T>)\n choose(option)\n } catch (error) {\n emit('create-error', error)\n } finally {\n creating.value = false\n }\n}\n\nfunction onSelect(event: CustomEvent, row: SelectOption<T> \| typeof CREATE) {\n // What's chosen lives in the model; the listbox keeps no selection of its own.\n event.preventDefault()\n if ('create' in row) create()\n else if (!row.disabled) choose(row)\n}\n\nfunction remove(value: T) {\n model.value = props.multiple ? values.value.filter((chosen) => chosen !== value) : null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n if (event.key === 'Backspace' && removable.value && !query.value && values.value.length)\n remove(values.value[values.value.length - 1]!)\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n if (!open.value && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault()\n show(true)\n }\n}\n\n// The filter takes focus when there is one, or else the list, so the arrow keys work at once.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n nextTick(() =>\n (event.target as HTMLElement \| null)?.querySelector<HTMLElement>('[data-select-filter], [role=\"listbox\"]')?.focus()\n )\n}\n\n// Back to the trigger, which Reka can't find: it's our anchor, not its trigger.\nconst anchor = ref<{ $el: HTMLElement }>()\n\n// Nor does Reka know a press on it isn't outside: closing there would let the click reopen the list.\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n const target = event.detail.originalEvent.target\n if (target instanceof Node && anchor.value?.$el?.contains(target)) event.preventDefault()\n}\nfunction returnFocus(event: Event) {\n event.preventDefault()\n anchor.value?.$el?.focus()\n}\n\n// Reka highlights the first option as the list mounts; only the chosen one, or the keyboard, should be.\nconst listbox = ref()\nfunction onHighlight(payload: { value: unknown } \| undefined) {\n if (keyboard.value \|\| !payload) return\n if (values.value.includes(payload.value as T)) return\n nextTick(() => listbox.value && !keyboard.value && (listbox.value.highlightedElement = null))\n}\n\nconst triggerSizes = { md: 'min-h-9 pr-2.5 pl-3 text-sm', sm: 'h-7 pr-1.5 pl-2 text-13' }\nconst optionClass =\n 'flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset'\n</script>\n\n<!-- One select for every choice: a short fixed list, a searchable one, several values as tags (`multiple`), or creating\n what was typed (`canCreate`). For a server search, set `:filter=\"false\"` and replace `options` on `query-change`. The `trigger` slot draws your own trigger and gets `open`, `toggle` and `selected`. -->\n<template>\n <PopoverRoot :open=\"open\" @update:open=\"(value) => (value ? show(false) : close())\">\n <PopoverAnchor ref=\"anchor\" as-child>\n <slot name=\"trigger\" :open=\"open\" :selected=\"selected\" :toggle=\"toggle\">\n <button\n v-bind=\"{ ...fieldAttrs, ...triggerAttrs }\"\n :aria-expanded=\"open\"\n aria-haspopup=\"listbox\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-[border-color,box-shadow] duration-150 focus-visible:border-sui-accent focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60\"\n :class=\"[\n triggerSizes[size],\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-strong hover:border-sui-ink-muted'\n ]\"\n :disabled=\"disabled\"\n type=\"button\"\n @click=\"toggle\"\n @keydown=\"onTriggerKeydown\"\n >\n <span v-if=\"label\" class=\"sr-only\">{{ label }}: </span>\n <span v-if=\"!selected.length\" class=\"text-sui-ink-faint\">{{ placeholder }}</span>\n <span v-else-if=\"multiple\" class=\"flex flex-wrap gap-1 py-1.25\">\n <Tag\n v-for=\"option in selected\"\n :key=\"option.value\"\n :color=\"option.color ?? undefined\"\n :name=\"option.label\"\n />\n </span>\n <Tag v-else-if=\"selected[0]!.color\" :color=\"selected[0]!.color\" :name=\"selected[0]!.label\" />\n <span v-else class=\"min-w-0 truncate whitespace-nowrap\">{{ selected[0]!.label }}</span>\n <svg\n aria-hidden=\"true\"\n class=\"size-4 shrink-0 fill-none stroke-sui-ink-muted transition-transform duration-150 group-aria-expanded:rotate-180\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.5\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M4.5 6.5 8 10l3.5-3.5\" />\n </svg>\n </button>\n </slot>\n </PopoverAnchor>\n <PopoverPortal>\n <PopoverContent\n :align=\"align\"\n :aria-label=\"label ?? placeholder\"\n class=\"z-[1100] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in\"\n :class=\"\n search ? 'min-w-[max(var(--reka-popover-trigger-width),15rem)]' : 'min-w-(--reka-popover-trigger-width)'\n \"\n :side=\"side\"\n :side-offset=\"4\"\n :style=\"panelWidth ? { width: panelWidth } : undefined\"\n @close-auto-focus=\"returnFocus\"\n @open-auto-focus=\"onOpenAutoFocus\"\n @pointer-down-outside=\"onPointerDownOutside\"\n >\n <ListboxRoot\n ref=\"listbox\"\n :highlight-on-hover=\"true\"\n :model-value=\"multiple ? values : (values[0] ?? undefined)\"\n :multiple=\"multiple\"\n @highlight=\"onHighlight\"\n @keydown=\"onKeydown\"\n @pointermove=\"keyboard = false\"\n >\n <div\n v-if=\"search\"\n class=\"flex min-h-11 flex-wrap items-center gap-1 border-b border-sui-line-subtle px-3 py-2.5\"\n >\n <template v-if=\"removable\">\n <Tag\n v-for=\"option in selected\"\n :key=\"option.value\"\n :color=\"option.color ?? undefined\"\n :name=\"option.label\"\n removable\n :remove-label=\"removeLabel\"\n @remove=\"remove(option.value)\"\n />\n </template>\n <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n <ListboxFilter\n :aria-label=\"label ?? placeholder\"\n class=\"h-5 min-w-16 flex-1 rounded-none border-none bg-transparent p-0 text-13 text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n data-select-filter\n :model-value=\"query\"\n :placeholder=\"removable && selected.length ? '' : searchPlaceholder\"\n @update:model-value=\"setQuery\"\n />\n </div>\n <div v-if=\"loading\" class=\"flex justify-center py-6\"><Spinner size=\"sm\" /></div>\n <ListboxContent\n v-else-if=\"listed.length \|\| showCreate\"\n :aria-label=\"label ?? placeholder\"\n class=\"group/list max-h-60 overflow-auto p-1 outline-hidden\"\n :data-keyboard=\"keyboard \|\| undefined\"\n >\n <ListboxVirtualizer\n v-if=\"virtual\"\n v-slot=\"{ option }\"\n :estimate-size=\"32\"\n :options=\"listed\"\n :text-content=\"(option) => option.label\"\n >\n <ListboxItem\n :class=\"optionClass\"\n :disabled=\"option.disabled\"\n :value=\"option.value\"\n @select=\"onSelect($event, option as SelectOption<T>)\"\n >\n <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n <slot name=\"option\" :option=\"option as SelectOption<T>\">\n <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n <template v-else>{{ option.label }}</template>\n </slot>\n </span>\n <CheckIcon v-if=\"values.includes(option.value)\" />\n </ListboxItem>\n </ListboxVirtualizer>\n <template v-else>\n <ListboxItem\n v-for=\"option in listed\"\n :key=\"option.value\"\n :class=\"optionClass\"\n :disabled=\"option.disabled\"\n :value=\"option.value\"\n @select=\"onSelect($event, option)\"\n >\n <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n <slot name=\"option\" :option=\"option\">\n <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n <template v-else>{{ option.label }}</template>\n </slot>\n </span>\n <CheckIcon v-if=\"values.includes(option.value)\" />\n </ListboxItem>\n </template>\n <ListboxItem v-if=\"showCreate\" :class=\"optionClass\" :value=\"CREATE\" @select=\"onSelect($event, CREATE)\">\n <span class=\"inline-flex min-w-0 items-center gap-1.5\">\n {{ createLabel }}\n <Tag v-if=\"createColored\" :color=\"newHue\" :name=\"query.trim()\" />\n <strong v-else class=\"font-medium\">“{{ query.trim() }}”</strong>\n </span>\n </ListboxItem>\n </ListboxContent>\n <div v-else class=\"px-3.5 py-3 text-13 text-sui-ink-muted\">{{ emptyLabel }}</div>\n </ListboxRoot>\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/Textarea/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":["_sfc_main","Textarea_vue_vue_type_script_setup_true_lang_default","Textarea_default"],"sources":["../../../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { useFieldControl } from '../FormField/context'\n\nexport interface TextareaProps {\n /** Grows with its content instead of scrolling. /\n autoResize?: boolean\n /* Marks the field as failing validation: a danger border and `aria-invalid`. */\n invalid?: boolean\n disabled?: boolean\n}\n\nconst props = defineProps<TextareaProps>()\n\nconst model = defineModel<string \| null>()\n\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea')\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => model.value,\n () => props.invalid\n)\n\n// Grows straight to the content's height, and only drops to `auto` to measure when shrinking.\nfunction resize() {\n const el = textarea.value\n if (!props.autoResize \|\| !el?.offsetParent) return\n const current = parseInt(el.style.height) \|\| 0\n const needed = el.scrollHeight\n if (current && needed < current) {\n el.style.height = 'auto'\n el.style.height = `${el.scrollHeight}px`\n } else if (!current \|\| needed > current) {\n el.style.height = `${needed}px`\n }\n}\n\nlet observer: ResizeObserver \| undefined\n\nonMounted(() => {\n if (!props.autoResize \|\| !textarea.value) return\n observer = new ResizeObserver(() => requestAnimationFrame(resize))\n observer.observe(textarea.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(model, () => nextTick(resize))\n</script>\n\n<template>\n <textarea\n ref=\"textarea\"\n v-bind=\"fieldAttrs\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-~~colors~~ duration-200 placeholder:text-sui-ink-faint\"\n :class=\"[\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-~~control~~ hover:border-sui-ink-muted',\n disabled\n ? 'pointer-events-none cursor-default opacity-60 select-none'\n : 'focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field'\n ]\"\n :disabled=\"disabled\"\n :value=\"model ?? ''\"\n @input=\"model = ($event.target as HTMLTextAreaElement).value\"\n />\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"Textarea.js","names":["_sfc_main","Textarea_vue_vue_type_script_setup_true_lang_default","Textarea_default"],"sources":["../../../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { useFieldControl } from '../FormField/context'\n\nexport interface TextareaProps {\n /** Grows with its content instead of scrolling. /\n autoResize?: boolean\n /* Marks the field as failing validation: a danger border and `aria-invalid`. */\n invalid?: boolean\n disabled?: boolean\n}\n\nconst props = defineProps<TextareaProps>()\n\nconst model = defineModel<string \| null>()\n\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea')\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => model.value,\n () => props.invalid\n)\n\n// Grows straight to the content's height, and only drops to `auto` to measure when shrinking.\nfunction resize() {\n const el = textarea.value\n if (!props.autoResize \|\| !el?.offsetParent) return\n const current = parseInt(el.style.height) \|\| 0\n const needed = el.scrollHeight\n if (current && needed < current) {\n el.style.height = 'auto'\n el.style.height = `${el.scrollHeight}px`\n } else if (!current \|\| needed > current) {\n el.style.height = `${needed}px`\n }\n}\n\nlet observer: ResizeObserver \| undefined\n\nonMounted(() => {\n if (!props.autoResize \|\| !textarea.value) return\n observer = new ResizeObserver(() => requestAnimationFrame(resize))\n observer.observe(textarea.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(model, () => nextTick(resize))\n</script>\n\n<template>\n <textarea\n ref=\"textarea\"\n v-bind=\"fieldAttrs\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-[border-color,box-shadow] duration-200 placeholder:text-sui-ink-faint\"\n :class=\"[\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-strong hover:border-sui-ink-muted',\n disabled\n ? 'pointer-events-none cursor-default opacity-60 select-none'\n : 'focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field'\n ]\"\n :disabled=\"disabled\"\n :value=\"model ?? ''\"\n @input=\"model = ($event.target as HTMLTextAreaElement).value\"\n />\n</template>\n"],"mappings":""}

package/dist/components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -32,7 +32,7 @@ var p = [
 			ref: h
 		}, l(g), {
 			"aria-invalid": l(_) ? "true" : void 0,
-			class: ["m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-colors duration-200 placeholder:text-sui-ink-faint", [l(_) ? "border-sui-danger-mid" : "border-sui-line-control hover:border-sui-ink-muted", n.disabled ? "pointer-events-none cursor-default opacity-60 select-none" : "focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field"]],
+			class: ["m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-[border-color,box-shadow] duration-200 placeholder:text-sui-ink-faint", [l(_) ? "border-sui-danger-mid" : "border-sui-line-strong hover:border-sui-ink-muted", n.disabled ? "pointer-events-none cursor-default opacity-60 select-none" : "focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field"]],
 			disabled: n.disabled,
 			value: m.value ?? "",
 			onInput: r[0] ||= (e) => m.value = e.target.value

package/dist/components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_hoisted_1","Textarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","textarea","useTemplateRef","fieldAttrs","isInvalid","useFieldControl","resize","el","current","needed","observer","onMounted","onBeforeUnmount","watch","nextTick","openBlock","createElementBlock","mergeProps","unref","_cache","$event"],"sources":["../../../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { useFieldControl } from '../FormField/context'\n\nexport interface TextareaProps {\n /** Grows with its content instead of scrolling. /\n autoResize?: boolean\n /* Marks the field as failing validation: a danger border and `aria-invalid`. */\n invalid?: boolean\n disabled?: boolean\n}\n\nconst props = defineProps<TextareaProps>()\n\nconst model = defineModel<string \| null>()\n\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea')\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => model.value,\n () => props.invalid\n)\n\n// Grows straight to the content's height, and only drops to `auto` to measure when shrinking.\nfunction resize() {\n const el = textarea.value\n if (!props.autoResize \|\| !el?.offsetParent) return\n const current = parseInt(el.style.height) \|\| 0\n const needed = el.scrollHeight\n if (current && needed < current) {\n el.style.height = 'auto'\n el.style.height = `${el.scrollHeight}px`\n } else if (!current \|\| needed > current) {\n el.style.height = `${needed}px`\n }\n}\n\nlet observer: ResizeObserver \| undefined\n\nonMounted(() => {\n if (!props.autoResize \|\| !textarea.value) return\n observer = new ResizeObserver(() => requestAnimationFrame(resize))\n observer.observe(textarea.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(model, () => nextTick(resize))\n</script>\n\n<template>\n <textarea\n ref=\"textarea\"\n v-bind=\"fieldAttrs\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-~~colors~~ duration-200 placeholder:text-sui-ink-faint\"\n :class=\"[\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-~~control~~ hover:border-sui-ink-muted',\n disabled\n ? 'pointer-events-none cursor-default opacity-60 select-none'\n : 'focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field'\n ]\"\n :disabled=\"disabled\"\n :value=\"model ?? ''\"\n @input=\"model = ($event.target as HTMLTextAreaElement).value\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAaA,IAAMS,IAAQC,GAERC,IAAQX,EAA0BU,GAAA,YAAC,GAEnCG,IAAWC,EAAoC,UAAU,GAEzD,EAAE,OAAOC,GAAY,SAASC,MAAcC,QAC1CN,EAAM,aACNF,EAAM,OACd;EAGA,SAASS,IAAS;GAChB,IAAMC,IAAKN,EAAS;GACpB,IAAI,CAACJ,EAAM,cAAc,CAACU,GAAI,cAAc;GAC5C,IAAMC,IAAU,SAASD,EAAG,MAAM,MAAM,KAAK,GACvCE,IAASF,EAAG;GAClB,AAAIC,KAAWC,IAASD,KACtB,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAGD,EAAG,aAAa,QAC5B,CAACC,KAAWC,IAASD,OAC9B,EAAG,MAAM,SAAS,GAAGC,EAAO;EAEhC;EAEA,IAAIC;E,OAEJC,QAAgB;GACd,AAAKd,EAAM,cAAeI,EAAS,UACnC,IAAW,IAAI,qBAAqB,sBAAsBK,CAAM,CAAC,GACjEI,EAAS,QAAQT,EAAS,KAAK;EACjC,CAAC,GAEDW,QAAsBF,GAAU,WAAW,CAAC,GAE5CG,EAAMd,SAAae,EAASR,CAAM,CAAC,I,UAIjCjB,EAAA,GAAAC,EAcE,YAdFC,EAcE;GAbI,SAAA;GAAJ,KAAIU;EACI,GAAAT,EAAAW,CAAA,GAAU;GACjB,gBAAcX,EAAAY,CAAA,IAAS,SAAY,KAAA;GACpC,OAAK,CAAC,~~kLAAgL~~,~~CACtKZ~~,EAAAY,CAAA,IAAS,0BAAA,~~sDAAyFN~~,EAAA,W;~~GAMjH~~,UAAUA,EAAA;GACV,OAAOC,EAAA,SAAK;GACZ,SAAK,AAAAoB,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B"}
1	+ {"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_hoisted_1","Textarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","textarea","useTemplateRef","fieldAttrs","isInvalid","useFieldControl","resize","el","current","needed","observer","onMounted","onBeforeUnmount","watch","nextTick","openBlock","createElementBlock","mergeProps","unref","_cache","$event"],"sources":["../../../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { useFieldControl } from '../FormField/context'\n\nexport interface TextareaProps {\n /** Grows with its content instead of scrolling. /\n autoResize?: boolean\n /* Marks the field as failing validation: a danger border and `aria-invalid`. */\n invalid?: boolean\n disabled?: boolean\n}\n\nconst props = defineProps<TextareaProps>()\n\nconst model = defineModel<string \| null>()\n\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea')\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n () => model.value,\n () => props.invalid\n)\n\n// Grows straight to the content's height, and only drops to `auto` to measure when shrinking.\nfunction resize() {\n const el = textarea.value\n if (!props.autoResize \|\| !el?.offsetParent) return\n const current = parseInt(el.style.height) \|\| 0\n const needed = el.scrollHeight\n if (current && needed < current) {\n el.style.height = 'auto'\n el.style.height = `${el.scrollHeight}px`\n } else if (!current \|\| needed > current) {\n el.style.height = `${needed}px`\n }\n}\n\nlet observer: ResizeObserver \| undefined\n\nonMounted(() => {\n if (!props.autoResize \|\| !textarea.value) return\n observer = new ResizeObserver(() => requestAnimationFrame(resize))\n observer.observe(textarea.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(model, () => nextTick(resize))\n</script>\n\n<template>\n <textarea\n ref=\"textarea\"\n v-bind=\"fieldAttrs\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n class=\"m-0 w-full appearance-none rounded-md border bg-sui-surface px-3 py-1.5 font-sans text-sm leading-5 text-sui-ink transition-[border-color,box-shadow] duration-200 placeholder:text-sui-ink-faint\"\n :class=\"[\n isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-strong hover:border-sui-ink-muted',\n disabled\n ? 'pointer-events-none cursor-default opacity-60 select-none'\n : 'focus:border-sui-accent focus:ring-0 focus-visible:sui-ring-field'\n ]\"\n :disabled=\"disabled\"\n :value=\"model ?? ''\"\n @input=\"model = ($event.target as HTMLTextAreaElement).value\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAaA,IAAMS,IAAQC,GAERC,IAAQX,EAA0BU,GAAA,YAAC,GAEnCG,IAAWC,EAAoC,UAAU,GAEzD,EAAE,OAAOC,GAAY,SAASC,MAAcC,QAC1CN,EAAM,aACNF,EAAM,OACd;EAGA,SAASS,IAAS;GAChB,IAAMC,IAAKN,EAAS;GACpB,IAAI,CAACJ,EAAM,cAAc,CAACU,GAAI,cAAc;GAC5C,IAAMC,IAAU,SAASD,EAAG,MAAM,MAAM,KAAK,GACvCE,IAASF,EAAG;GAClB,AAAIC,KAAWC,IAASD,KACtB,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAGD,EAAG,aAAa,QAC5B,CAACC,KAAWC,IAASD,OAC9B,EAAG,MAAM,SAAS,GAAGC,EAAO;EAEhC;EAEA,IAAIC;E,OAEJC,QAAgB;GACd,AAAKd,EAAM,cAAeI,EAAS,UACnC,IAAW,IAAI,qBAAqB,sBAAsBK,CAAM,CAAC,GACjEI,EAAS,QAAQT,EAAS,KAAK;EACjC,CAAC,GAEDW,QAAsBF,GAAU,WAAW,CAAC,GAE5CG,EAAMd,SAAae,EAASR,CAAM,CAAC,I,UAIjCjB,EAAA,GAAAC,EAcE,YAdFC,EAcE;GAbI,SAAA;GAAJ,KAAIU;EACI,GAAAT,EAAAW,CAAA,GAAU;GACjB,gBAAcX,EAAAY,CAAA,IAAS,SAAY,KAAA;GACpC,OAAK,CAAC,qMAAmM,CACzLZ,EAAAY,CAAA,IAAS,0BAAA,qDAAwFN,EAAA,W;GAMhH,UAAUA,EAAA;GACV,OAAOC,EAAA,SAAK;GACZ,SAAK,AAAAoB,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sparklingopinions/sparkling-ui",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "A product-agnostic Vue 3 component library, themed by semantic tokens",
   "type": "module",
   "license": "MIT",

package/src/styles/tailwind.css CHANGED Viewed

@@ -302,15 +302,17 @@
 }
 /* The keyboard focus ring, one treatment everywhere, applied with a variant (focus-visible:sui-ring). Outside by
-   default, so it reads around filled buttons; on the edge of fields; inset in menus, lists and tight groups. */
+   default, so it reads around filled buttons; a halo on fields; inset in menus, lists and tight groups. */
 @utility sui-ring {
   outline: var(--sui-focus-width) solid rgb(var(--sui-accent));
   outline-offset: var(--sui-focus-offset);
 }
+/* Fields show focus with their accent border and a soft halo; the transparent outline is what forced-colors mode draws. */
 @utility sui-ring-field {
-  outline: var(--sui-focus-width) solid rgb(var(--sui-accent));
+  outline: var(--sui-focus-width) solid transparent;
   outline-offset: var(--sui-focus-offset-field);
+  box-shadow: 0 0 0 3px rgb(var(--sui-focus-ring));
 }
 @utility sui-ring-inset {