@hina-ui/vue 1.1.0 → 1.2.0

package/src/components/multi-combobox/MultiCombobox.vue

@@ -1,9 +1,8 @@
-<script setup lang="ts">
-  import { computed, reactive, ref, shallowRef, watch } from 'vue'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { computed } from 'vue'
   import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
-  import { focusFieldFrom } from '../../lib/field-focus'
   import { useUiLocale } from '../../locale'
   import { buttonIconBox } from '../button/button.variants'
   import IconSlot from '../button/IconSlot.vue'
@@ -19,7 +18,8 @@
     inputIndicator,
     type InputVariants,
   } from '../input/input.variants'
-  import { flattenOptions, type SelectItems, type SelectOption } from '../select/types'
+  import type { SelectItems, SelectOption } from '../select/types'
+  import { useMultiCombobox } from './composables/useMultiCombobox'
   import {
     tagsInputChip,
     tagsInputControl,
@@ -32,7 +32,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       placeholder?: string
       ignoreFilter?: boolean
       loading?: boolean
@@ -52,11 +52,9 @@
   const search = defineModel<string>('search', { default: '' })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
-  const keyboard = ref(false)
-  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
 
   const {
     id: fieldId,
@@ -68,52 +66,16 @@
     disabled: () => props.disabled,
   })
 
-  const labels = reactive(new Map<string | number, string>())
-  watch(
-    () => props.options,
-    options => {
-      for (const option of flattenOptions(options)) labels.set(option.value, option.label)
-    },
-    { immediate: true, deep: true },
-  )
-
-  const selected = computed(() =>
-    model.value.map(value => ({ value, label: labels.get(value) ?? String(value) })),
-  )
+  const { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown } =
+    useMultiCombobox({
+      options: () => props.options,
+      model,
+      open,
+      disabled: () => disabled.value,
+      onClear: () => emit('clear'),
+    })
   const chipSize = computed(() => (props.size === 'sm' ? 'sm' : 'md'))
   const clearing = computed(() => props.clearable && selected.value.length > 0 && !disabled.value)
-
-  watch(open, value => {
-    if (!value) keyboard.value = false
-  })
-
-  function remove(value: string | number) {
-    if (disabled.value) return
-    model.value = model.value.filter(item => item !== value)
-  }
-
-  function clear() {
-    if (!model.value.length) return
-    model.value = []
-    emit('clear')
-    input.value?.$el.focus()
-  }
-
-  function onHostClick(event: MouseEvent) {
-    const focused = focusFieldFrom(event.currentTarget as HTMLElement, event.target as HTMLElement)
-    if (focused && !open.value) open.value = true
-  }
-
-  function onInputKeydown(event: KeyboardEvent) {
-    keyboard.value = true
-    if (
-      event.key !== 'Backspace' ||
-      (event.target as HTMLInputElement).value !== '' ||
-      !model.value.length
-    )
-      return
-    model.value = model.value.slice(0, -1)
-  }
 </script>
 
 <template>

package/src/components/multi-combobox/composables/useMultiCombobox.ts

@@ -0,0 +1,63 @@
+import { computed, reactive, ref, shallowRef, watch, type Ref } from 'vue'
+import { focusFieldFrom } from '../../../lib/field-focus'
+import { flattenOptions, type SelectItems, type SelectOption } from '../../select/types'
+
+interface MultiComboboxOptions<T extends SelectOption> {
+  options: () => SelectItems<T>
+  model: Ref<Array<string | number>>
+  open: Ref<boolean>
+  disabled: () => boolean
+  onClear: () => void
+}
+
+export function useMultiCombobox<T extends SelectOption>(options: MultiComboboxOptions<T>) {
+  const { model, open } = options
+  const keyboard = ref(false)
+  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
+  const labels = reactive(new Map<string | number, string>())
+  watch(
+    options.options,
+    options => {
+      for (const option of flattenOptions(options)) labels.set(option.value, option.label)
+    },
+    { immediate: true, deep: true },
+  )
+
+  const selected = computed(() =>
+    model.value.map(value => ({ value, label: labels.get(value) ?? String(value) })),
+  )
+
+  watch(open, value => {
+    if (!value) keyboard.value = false
+  })
+
+  function remove(value: string | number) {
+    if (options.disabled()) return
+    model.value = model.value.filter(item => item !== value)
+  }
+
+  function clear() {
+    if (!model.value.length) return
+    model.value = []
+    options.onClear()
+    input.value?.$el.focus()
+  }
+
+  function onHostClick(event: MouseEvent) {
+    const focused = focusFieldFrom(event.currentTarget as HTMLElement, event.target as HTMLElement)
+    if (focused && !open.value) open.value = true
+  }
+
+  function onInputKeydown(event: KeyboardEvent) {
+    keyboard.value = true
+    if (
+      event.key !== 'Backspace' ||
+      (event.target as HTMLInputElement).value !== '' ||
+      !model.value.length
+    )
+      return
+    model.value = model.value.slice(0, -1)
+  }
+
+  return { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown }
+}

package/src/components/multi-select/MultiSelect.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
   import { SelectRoot, SelectTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -25,7 +25,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       placeholder?: string
       name?: string
       required?: boolean
@@ -45,7 +45,7 @@
   const model = defineModel<Array<string | number>>({ default: () => [] })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
@@ -157,7 +157,6 @@
         <DisclosureIcon />
       </span>
     </SelectTrigger>
-    <!-- Reka 2.10 BubbleSelect assigns arrays to select.value, which loses multiple values. -->
     <VisuallyHidden v-if="props.name" as-child>
       <select
         v-model="model"

package/src/components/number-input/NumberInput.vue

@@ -16,8 +16,8 @@
   import {
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from '../input/input.variants'
   import { numberInputStep, numberInputStepper } from './number-input.variants'
 
@@ -34,8 +34,8 @@
       formatOptions?: Intl.NumberFormatOptions
       locale?: string
       controls?: boolean
-      variant?: InputVariants['variant']
-      size?: InputVariants['size']
+      variant?: TextInputVariants['variant']
+      size?: TextInputVariants['size']
       disabled?: boolean
       readonly?: boolean
       invalid?: boolean
@@ -47,6 +47,7 @@
 
   const t = useUiLocale()
   const group = injectInputGroup()
+  const divided = computed(() => (group ? group.variant?.value : props.variant) !== 'bare')
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
@@ -83,7 +84,7 @@
     :data-disabled="disabled ? '' : undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "
@@ -95,13 +96,13 @@
       :aria-describedby="describedBy"
       :class="cn(inputControl(), 'tabular-nums')"
     />
-    <div v-if="props.controls" :class="numberInputStepper({ size })">
+    <div v-if="props.controls" :class="numberInputStepper({ size, divided })">
       <NumberFieldIncrement :aria-label="t.numberInput.increase" :class="numberInputStep()">
         <ChevronUp />
       </NumberFieldIncrement>
       <NumberFieldDecrement
         :aria-label="t.numberInput.decrease"
-        :class="numberInputStep({ divided: true })"
+        :class="numberInputStep({ divided })"
       >
         <ChevronDown />
       </NumberFieldDecrement>

package/src/components/number-input/number-input.variants.ts

@@ -1,8 +1,11 @@
 import { tv } from '../../lib/tv'
 
 export const numberInputStepper = tv({
-  base: 'border-line flex shrink-0 flex-col border-s',
+  base: 'flex shrink-0 flex-col',
   variants: {
+    divided: {
+      true: 'border-line border-s',
+    },
     size: {
       sm: '[&_svg]:size-3',
       md: '[&_svg]:size-3',
@@ -11,6 +14,7 @@ export const numberInputStepper = tv({
   },
   defaultVariants: {
     size: 'md',
+    divided: true,
   },
 })
 

package/src/components/password-input/PasswordInput.vue

@@ -4,13 +4,13 @@
   import { useUiLocale } from '../../locale'
   import InputBase from '../input/InputBase.vue'
   import InputAction from '../input/InputAction.vue'
-  import type { InputVariants } from '../input/input.variants'
+  import type { TextInputVariants } from '../input/input.variants'
 
   defineOptions({ name: 'HnPasswordInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     disabled?: boolean
     invalid?: boolean
     class?: string

package/src/components/radio-group/RadioGroup.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
@@ -22,7 +22,7 @@
   defineOptions({ name: 'HnRadioGroup' })
 
   const props = defineProps<{
-    options: SelectOption[]
+    options: T[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
     controlPlacement?: CheckboxVariants['controlPlacement']
@@ -39,7 +39,7 @@
     disabled: () => props.disabled,
   })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 </script>
 
 <template>

package/src/components/scroll-area/scroll-restore.ts

@@ -37,7 +37,6 @@ export type ScrollRecord = Record<string, number>
 
 export interface ScrollRestorerPorts {
   getViewport: () => HTMLElement | null
-  /** Where the first-paint script left the scroller, read once and cleared. */
   takeFirstPaintTop: () => number | undefined
   readState: () => unknown
   writeState: (state: Record<string, unknown>) => void
@@ -110,10 +109,6 @@ export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): S
       const firstPaintTop = ports.takeFirstPaintTop()
 
       if (initial) {
-        // The first-paint script already put the scroller where this entry
-        // wants it, so anything else means the reader moved it while the page
-        // was still hydrating — the wheel listener that would have cancelled a
-        // restore is only attached from here on.
         if (saved === undefined) return
         const el = ports.getViewport()
         if (firstPaintTop !== undefined && el && el.scrollTop !== firstPaintTop) return

package/src/components/search-input/SearchInput.vue

@@ -2,14 +2,14 @@
   import { Search } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import InputBase from '../input/InputBase.vue'
-  import type { InputVariants } from '../input/input.variants'
+  import type { TextInputVariants } from '../input/input.variants'
 
   defineOptions({ name: 'HnSearchInput', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
-      variant?: InputVariants['variant']
-      size?: InputVariants['size']
+      variant?: TextInputVariants['variant']
+      size?: TextInputVariants['size']
       clearable?: boolean
       loading?: boolean
       disabled?: boolean

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { ToggleGroupItem, ToggleGroupRoot, type AcceptableValue } from 'reka-ui'
   import { computed, useId, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
@@ -18,7 +18,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectOption[]
+      options: T[]
       size?: SegmentedItemVariants['size']
       orientation?: SegmentedControlVariants['orientation']
       block?: boolean
@@ -30,7 +30,7 @@
 
   const model = defineModel<string | number>()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const slots = useSlots()
 

package/src/components/select/Select.vue

@@ -1,8 +1,10 @@
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger } from 'reka-ui'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { computed, ref, shallowRef } from 'vue'
+  import { SelectRoot, SelectTrigger, useDirection } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import { useFieldControl } from '../form-field/context'
   import { injectInputGroup } from '../input-group/context'
@@ -13,14 +15,16 @@
     type InputVariants,
   } from '../input/input.variants'
   import SelectList from './SelectList.vue'
-  import { selectTrigger } from './select.variants'
+  import { selectButton, selectClearSlot, selectHost, selectValue } from './select.variants'
+  import { useClearTransition } from './composables/useClearTransition'
   import { flattenOptions, type SelectItems, type SelectOption } from './types'
 
   defineOptions({ name: 'HnSelect', inheritAttrs: false })
 
   const props = defineProps<{
-    options: SelectItems
+    options: SelectItems<T>
     placeholder?: string
+    clearable?: boolean
     name?: string
     required?: boolean
     autocomplete?: string
@@ -31,17 +35,22 @@
     class?: string
   }>()
 
+  const emit = defineEmits<{ clear: [] }>()
+
   const model = defineModel<string | number | null>()
   const open = defineModel<boolean>('open', { default: false })
 
   defineSlots<{
-    value(props: { option: SelectOption }): unknown
-    option(props: { option: SelectOption }): unknown
+    value?(props: { option: T }): unknown
+    option?(props: { option: T }): unknown
   }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
+  const direction = useDirection()
   const keyboard = ref(false)
+  const host = shallowRef<HTMLElement | null>(null)
+  const trigger = shallowRef<{ $el: HTMLElement } | null>(null)
 
   const {
     id: fieldId,
@@ -55,6 +64,18 @@
   const selected = computed(() =>
     flattenOptions(props.options).find(option => option.value === model.value),
   )
+  const clearing = computed(
+    () => !!props.clearable && model.value != null && model.value !== '' && !disabled.value,
+  )
+
+  const { reserved: clearSpace, hooks: clearTransition } = useClearTransition(() => clearing.value)
+
+  function clear() {
+    if (disabled.value || model.value == null || model.value === '') return
+    model.value = null
+    emit('clear')
+    trigger.value?.$el.focus()
+  }
 </script>
 
 <template>
@@ -66,34 +87,56 @@
     :required="props.required"
     :autocomplete="props.autocomplete"
   >
-    <SelectTrigger
-      v-bind="$attrs"
-      :id="fieldId"
-      :aria-describedby="describedBy"
+    <div
+      ref="host"
+      :dir="direction"
       data-hn-select
-      @keydown="keyboard = true"
-      @pointerdown="keyboard = false"
       :data-invalid="invalid ? '' : undefined"
       :data-disabled="disabled ? '' : undefined"
-      :aria-invalid="invalid || undefined"
       :class="
         cn(
           group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
-          selectTrigger(),
+          selectHost(),
           props.class,
         )
       "
     >
-      <span class="min-w-0 flex-1 truncate">
-        <template v-if="selected">
-          <slot name="value" :option="selected">{{ selected.label }}</slot>
-        </template>
-        <template v-else>{{ props.placeholder ?? t.select.placeholder }}</template>
-      </span>
-      <span :class="inputAdornment()">
-        <DisclosureIcon />
-      </span>
-    </SelectTrigger>
+      <SelectTrigger
+        ref="trigger"
+        v-bind="$attrs"
+        :reference="host ?? undefined"
+        :id="fieldId"
+        :aria-describedby="describedBy"
+        :aria-invalid="invalid || undefined"
+        data-hn-select-trigger
+        @keydown="keyboard = true"
+        @pointerdown="keyboard = false"
+        :class="selectButton()"
+      >
+        <span :class="selectValue({ clearing: clearSpace })">
+          <template v-if="selected">
+            <slot name="value" :option="selected">{{ selected.label }}</slot>
+          </template>
+          <template v-else>{{ props.placeholder ?? t.select.placeholder }}</template>
+        </span>
+        <span :class="inputAdornment()">
+          <DisclosureIcon />
+        </span>
+      </SelectTrigger>
+      <Transition
+        enter-active-class="hn-transition-base"
+        enter-from-class="scale-90 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-90 opacity-0"
+        v-on="clearTransition"
+      >
+        <span v-if="clearing" :class="selectClearSlot()">
+          <InputAction data-hn-select-clear :label="t.common.clear" @click="clear">
+            <X />
+          </InputAction>
+        </span>
+      </Transition>
+    </div>
     <SelectList :options="props.options" :keyboard="keyboard">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />

package/src/components/select/SelectList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
   import {
     SelectContent,
@@ -25,11 +25,11 @@
 
   defineOptions({ name: 'HnSelectList' })
 
-  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
 
   const fresh = ref(false)
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
 </script>

package/src/components/select/composables/useClearTransition.ts

@@ -0,0 +1,25 @@
+import { computed, ref } from 'vue'
+
+export function useClearTransition(visible: () => boolean) {
+  const leaving = ref(false)
+  const reserved = computed(() => visible() || leaving.value)
+
+  function beforeEnter(element: Element) {
+    leaving.value = false
+    element.removeAttribute('inert')
+  }
+
+  function beforeLeave(element: Element) {
+    leaving.value = true
+    element.setAttribute('inert', '')
+  }
+
+  function finishLeave() {
+    leaving.value = false
+  }
+
+  return {
+    reserved,
+    hooks: { beforeEnter, beforeLeave, afterLeave: finishLeave, leaveCancelled: finishLeave },
+  }
+}

package/src/components/select/select.variants.ts

@@ -1,4 +1,5 @@
 import { tv } from '../../lib/tv'
+import { inputActionSlot } from '../input/input.variants'
 
 export const selectTrigger = tv({
   base: [
@@ -9,6 +10,14 @@ export const selectTrigger = tv({
   ],
 })
 
+export const selectButton = tv({
+  base: [
+    'group/hn-disclosure flex h-full min-w-0 flex-1 cursor-pointer items-center bg-transparent ps-[var(--hn-input-px)] pe-0 text-start text-inherit outline-none [font:inherit]',
+    'data-placeholder:text-faint data-placeholder:font-normal disabled:cursor-not-allowed',
+    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
+  ],
+})
+
 export const selectContent = tv({
   base: [
     'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-select-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
@@ -40,3 +49,18 @@ export const selectEmpty = tv({
 export const selectListBody = tv({
   base: 'flex flex-col p-1',
 })
+
+export const selectHost = tv({
+  base: 'relative cursor-pointer',
+})
+
+export const selectValue = tv({
+  base: 'min-w-0 flex-1 truncate',
+  variants: {
+    clearing: { true: 'pe-[var(--hn-input-h)]' },
+  },
+})
+
+export const selectClearSlot = tv({
+  base: [inputActionSlot(), 'absolute inset-y-0 end-[var(--hn-input-h)]'],
+})

package/src/components/select/types.ts

@@ -1,21 +1,23 @@
-export interface SelectOption {
+export type SelectOption<T extends object = object> = {
   value: string | number
   label: string
   description?: string
   disabled?: boolean
-}
+} & T
 
-export interface SelectOptionGroup {
+export interface SelectOptionGroup<T extends SelectOption = SelectOption> {
   label: string
-  options: SelectOption[]
+  options: T[]
 }
 
-export type SelectItems = Array<SelectOption | SelectOptionGroup>
+export type SelectItems<T extends SelectOption = SelectOption> = Array<T | SelectOptionGroup<T>>
 
-export function isOptionGroup(item: SelectOption | SelectOptionGroup): item is SelectOptionGroup {
-  return 'options' in item
+export function isOptionGroup<T extends SelectOption>(
+  item: T | SelectOptionGroup<T>,
+): item is SelectOptionGroup<T> {
+  return !('value' in item) && 'options' in item
 }
 
-export function flattenOptions(items: SelectItems): SelectOption[] {
+export function flattenOptions<T extends SelectOption>(items: SelectItems<T>): T[] {
   return items.flatMap(item => (isOptionGroup(item) ? item.options : [item]))
 }