@hina-ui/vue 1.1.0 → 1.3.0

package/src/components/scroll-area/ScrollArea.vue

@@ -6,6 +6,7 @@
   import { useEdgeShadow } from './composables/useEdgeShadow'
   import { useWheelRedirect } from './composables/useWheelRedirect'
   import { useLayerLock } from './composables/useLayerLock'
+  import { useScrollFocus } from './composables/useScrollFocus'
 
   defineOptions({ name: 'HnScrollArea', inheritAttrs: false })
 
@@ -59,6 +60,10 @@
   }
 
   const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options)
+  const { hostFocus, viewportFocus } = useScrollFocus(host, viewport, () => ({
+    focusable: props.focusable,
+    label: props.label ?? t.value.scroll.regionLabel,
+  }))
   const { showXStart, showXEnd, showYStart, showYEnd, updateEdges } = useEdgeShadow(
     viewport,
     () => ({ direction: props.direction, shadow: props.shadow }),
@@ -83,14 +88,11 @@
   <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
     <div
       ref="host"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...hostFocus }"
       data-overlayscrollbars-initialize
-      :tabindex="props.focusable ? 0 : undefined"
-      :role="props.focusable ? 'region' : undefined"
-      :aria-label="props.focusable ? (props.label ?? t.scroll.regionLabel) : undefined"
       class="w-full min-h-0 grow"
     >
-      <div ref="content" data-overlayscrollbars-contents>
+      <div ref="content" v-bind="viewportFocus" data-overlayscrollbars-contents>
         <slot />
       </div>
     </div>

package/src/components/scroll-area/composables/useScrollFocus.ts

@@ -0,0 +1,39 @@
+import { computed, nextTick, watch, type ShallowRef } from 'vue'
+
+export function useScrollFocus(
+  host: ShallowRef<HTMLElement | undefined>,
+  viewport: ShallowRef<HTMLElement | undefined>,
+  options: () => { focusable: boolean; label: string },
+) {
+  function attributes(enabled: boolean) {
+    const { focusable, label } = options()
+    return {
+      tabindex: enabled && focusable ? 0 : undefined,
+      role: enabled && focusable ? 'region' : undefined,
+      'aria-label': enabled && focusable ? label : undefined,
+    }
+  }
+
+  const hostFocus = computed(() => attributes(!viewport.value))
+  const viewportFocus = computed(() => attributes(!!viewport.value))
+
+  watch(
+    viewport,
+    async element => {
+      const target = host.value
+      if (!element || !target || !options().focusable) return
+      if (target.ownerDocument.activeElement !== target) return
+      await nextTick()
+      const active = target.ownerDocument.activeElement
+      if (
+        options().focusable &&
+        element.isConnected &&
+        (active === target || active === target.ownerDocument.body)
+      )
+        element.focus({ preventScroll: true })
+    },
+    { flush: 'sync' },
+  )
+
+  return { hostFocus, viewportFocus }
+}

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()
 
@@ -71,7 +71,12 @@
       :aria-label="slots.option ? option.label : undefined"
       :class="segmentedItem({ size: props.size, block: props.block })"
     >
-      <Highlight v-if="option.value === current" :id="highlightId" :class="segmentedThumb()" />
+      <Highlight
+        v-if="option.value === current"
+        :id="highlightId"
+        :axis="props.orientation === 'vertical' ? 'y' : 'x'"
+        :class="segmentedThumb()"
+      />
       <Ripple />
       <slot name="option" :option="option">{{ option.label }}</slot>
     </ToggleGroupItem>

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]))
 }

package/src/components/tabs/TabsTrigger.vue

@@ -26,7 +26,12 @@
     :disabled="props.disabled"
     :class="cn(tabsTrigger({ variant, size, orientation }), props.class)"
   >
-    <Highlight v-if="active" :id="highlightId" :class="tabsHighlight({ variant, orientation })" />
+    <Highlight
+      v-if="active"
+      :id="highlightId"
+      :axis="orientation === 'vertical' ? 'y' : 'x'"
+      :class="tabsHighlight({ variant, orientation })"
+    />
     <Ripple />
     <slot />
   </TabsTrigger>

package/src/components/textarea/Textarea.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
-  import { caretTop } from '../../lib/caret'
+  import { useTextareaSizing } from './composables/useTextareaSizing'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { textarea, textareaField, type TextareaVariants } from './textarea.variants'
 
@@ -34,45 +33,7 @@
 
   const model = defineModel<string>()
 
-  const el = shallowRef<HTMLTextAreaElement | null>(null)
-  const area = shallowRef<InstanceType<typeof ScrollArea>>()
-
-  const bounds = computed(() => {
-    const options = props.autosize === true ? {} : props.autosize || null
-    return { min: options?.minRows ?? props.rows, max: options?.maxRows }
-  })
-
-  function fit() {
-    const node = el.value
-    if (!node) return
-    node.style.height = 'auto'
-    node.style.height = `${node.scrollHeight}px`
-    if (document.activeElement === node) reveal(node)
-  }
-
-  function reveal(node: HTMLTextAreaElement) {
-    const scroller =
-      area.value?.viewport ?? node.closest<HTMLElement>('[data-overlayscrollbars-initialize]')
-    if (!scroller) return
-    const box = scroller.getBoundingClientRect()
-    const top = node.getBoundingClientRect().top + caretTop(node)
-    const bottom = top + parseFloat(getComputedStyle(node).lineHeight)
-    if (bottom > box.bottom) scroller.scrollTop += bottom - box.bottom
-    else if (top < box.top) scroller.scrollTop -= box.top - top
-  }
-
-  function focus(event: MouseEvent) {
-    const node = el.value
-    if (!node || node.disabled || event.target === node) return
-    node.focus()
-    node.setSelectionRange(node.value.length, node.value.length)
-  }
-
-  onMounted(fit)
-  watch(
-    () => [model.value, props.size, bounds.value.min],
-    () => void nextTick(fit),
-  )
+  const { el, area, bounds, fit, focus } = useTextareaSizing(props, model)
 </script>
 
 <template>

package/src/components/textarea/composables/useTextareaSizing.ts

@@ -0,0 +1,54 @@
+import { computed, nextTick, onMounted, shallowRef, watch, type Ref } from 'vue'
+import { caretTop } from '../../../lib/caret'
+import type { TextareaVariants } from '../textarea.variants'
+
+interface TextareaSizingProps {
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+  rows: number
+  size?: TextareaVariants['size']
+  variant?: TextareaVariants['variant']
+}
+
+export function useTextareaSizing(props: TextareaSizingProps, model: Ref<string | undefined>) {
+  const el = shallowRef<HTMLTextAreaElement | null>(null)
+  const area = shallowRef<{ viewport?: HTMLElement }>()
+
+  const bounds = computed(() => {
+    const options = props.autosize === true ? {} : props.autosize || null
+    return { min: options?.minRows ?? props.rows, max: options?.maxRows }
+  })
+
+  function fit() {
+    const node = el.value
+    if (!node) return
+    node.style.height = 'auto'
+    node.style.height = `${node.scrollHeight}px`
+    if (document.activeElement === node) reveal(node)
+  }
+
+  function reveal(node: HTMLTextAreaElement) {
+    const scroller =
+      area.value?.viewport ?? node.closest<HTMLElement>('[data-overlayscrollbars-initialize]')
+    if (!scroller) return
+    const box = scroller.getBoundingClientRect()
+    const top = node.getBoundingClientRect().top + caretTop(node)
+    const bottom = top + parseFloat(getComputedStyle(node).lineHeight)
+    if (bottom > box.bottom) scroller.scrollTop += bottom - box.bottom
+    else if (top < box.top) scroller.scrollTop -= box.top - top
+  }
+
+  function focus(event: MouseEvent) {
+    const node = el.value
+    if (!node || node.disabled || event.target === node) return
+    node.focus()
+    node.setSelectionRange(node.value.length, node.value.length)
+  }
+
+  onMounted(fit)
+  watch(
+    () => [model.value, props.size, props.variant, bounds.value.min],
+    () => void nextTick(fit),
+  )
+
+  return { el, area, bounds, fit, focus }
+}

package/src/components/textarea/textarea.variants.ts

@@ -2,14 +2,15 @@ import { tv, type VariantProps } from '../../lib/tv'
 
 export const textarea = tv({
   base: [
-    'hn-field text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
+    'text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
     'data-disabled:cursor-not-allowed data-disabled:opacity-50',
   ],
   variants: {
     variant: {
+      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]',
       primary:
-        'border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
-      secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
+        'hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
     },
     size: {
       sm: 'text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]',
@@ -39,7 +40,7 @@ export const textarea = tv({
 export const textareaField = tv({
   base: [
     'block w-full resize-none overflow-hidden bg-transparent text-inherit outline-none [font:inherit]',
-    'px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_1px)]',
+    'px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_var(--hn-textarea-border-w,1px))]',
     'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
   ],
 })