@hina-ui/vue 1.0.0 → 1.2.0

package/src/components/form-layout/FormLayout.vue

@@ -2,6 +2,8 @@
   import { computed, shallowRef, useId, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { injectForm, provideForm } from '../form/context'
+  import type { FormFieldLayoutProps } from '../form-field/types'
+  import { provideFormLayout, useFormFieldLayout } from './context'
   import type { FormErrors } from '../form/standard-schema'
   import {
     formLayoutDescription,
@@ -14,16 +16,20 @@
   defineOptions({ name: 'HnFormLayout' })
 
   const props = withDefaults(
-    defineProps<{
-      legend?: string
-      description?: string
-      columns?: FormLayoutVariants['columns']
-      disabled?: boolean
-      class?: string
-    }>(),
+    defineProps<
+      FormFieldLayoutProps & {
+        legend?: string
+        description?: string
+        columns?: FormLayoutVariants['columns']
+        disabled?: boolean
+        class?: string
+      }
+    >(),
     { columns: 1 },
   )
 
+  provideFormLayout(useFormFieldLayout(props))
+
   const slots = useSlots()
   const form = injectForm()
   const descriptionId = useId()

package/src/components/form-layout/context.ts

@@ -0,0 +1,19 @@
+import { computed, inject, provide, type ComputedRef, type InjectionKey } from 'vue'
+import type { FormFieldLayoutProps } from '../form-field/types'
+
+type FieldLayout = ComputedRef<Required<FormFieldLayoutProps>>
+const FORM_LAYOUT_KEY: InjectionKey<FieldLayout> = Symbol('hn-form-layout')
+
+export function useFormFieldLayout(props: FormFieldLayoutProps): FieldLayout {
+  const parent = inject(FORM_LAYOUT_KEY, null)
+  return computed(() => ({
+    orientation: props.orientation ?? parent?.value.orientation ?? 'vertical',
+    descriptionPlacement:
+      props.descriptionPlacement ?? parent?.value.descriptionPlacement ?? 'control',
+    labelWidth: props.labelWidth ?? parent?.value.labelWidth ?? '10rem',
+  }))
+}
+
+export function provideFormLayout(layout: FieldLayout) {
+  provide(FORM_LAYOUT_KEY, layout)
+}

package/src/components/image/ImageGroup.vue

@@ -1,40 +1,12 @@
 <script setup lang="ts">
-  import { computed, reactive, shallowRef } from 'vue'
   import Lightbox from '../lightbox/Lightbox.vue'
-  import type { LightboxItem } from '../lightbox/types'
-  import { provideImageGroup } from './context'
+  import { useImageGroupState } from './composables/useImageGroupState'
 
   defineOptions({ name: 'HnImageGroup' })
 
   const props = defineProps<{ loop?: boolean }>()
 
-  const registry = reactive(new Map<string, () => LightboxItem>())
-  const open = shallowRef(false)
-  const index = shallowRef(0)
-
-  function byDom(a: LightboxItem, b: LightboxItem): number {
-    const first = a.source?.()
-    const second = b.source?.()
-    if (!first || !second || first === second) return 0
-    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-  }
-
-  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
-
-  provideImageGroup({
-    register: (id, item) => {
-      registry.set(id, item)
-    },
-    unregister: id => {
-      registry.delete(id)
-    },
-    open: id => {
-      const at = items.value.findIndex(item => item.id === id)
-      if (at < 0) return
-      index.value = at
-      open.value = true
-    },
-  })
+  const { items, open, index } = useImageGroupState()
 </script>
 
 <template>

package/src/components/image/composables/useImageGroupState.ts

@@ -0,0 +1,35 @@
+import { computed, reactive, shallowRef } from 'vue'
+import type { LightboxItem } from '../../lightbox/types'
+import { provideImageGroup } from '../context'
+
+export function useImageGroupState() {
+  const registry = reactive(new Map<string, () => LightboxItem>())
+  const open = shallowRef(false)
+  const index = shallowRef(0)
+
+  function byDom(a: LightboxItem, b: LightboxItem): number {
+    const first = a.source?.()
+    const second = b.source?.()
+    if (!first || !second || first === second) return 0
+    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  }
+
+  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
+
+  provideImageGroup({
+    register: (id, item) => {
+      registry.set(id, item)
+    },
+    unregister: id => {
+      registry.delete(id)
+    },
+    open: id => {
+      const at = items.value.findIndex(item => item.id === id)
+      if (at < 0) return
+      index.value = at
+      open.value = true
+    },
+  })
+
+  return { items, open, index }
+}

package/src/components/input/Input.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
   import InputBase from './InputBase.vue'
-  import type { InputVariants } from './input.variants'
+  import type { TextInputVariants } from './input.variants'
 
   defineOptions({ name: 'HnInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean

package/src/components/input/InputBase.vue

@@ -14,15 +14,15 @@
     inputAdornment,
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from './input.variants'
 
   defineOptions({ name: 'HnInputBase', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean
@@ -66,10 +66,11 @@
   <div
     data-hn-input
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :aria-busy="props.loading || undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "

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

@@ -2,14 +2,14 @@ import { tv, type VariantProps } from '../../lib/tv'
 
 export const inputHost = tv({
   base: [
-    'hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
-    'has-disabled:cursor-not-allowed has-disabled:opacity-50',
+    'group/hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
   ],
   variants: {
     variant: {
       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: 'h-[var(--hn-control-h-sm)] text-sm [--hn-input-h:var(--hn-control-h-sm)] [--hn-input-px:var(--hn-control-px-sm)] [--hn-input-icon:0.875rem]',
@@ -23,6 +23,15 @@ export const inputHost = tv({
   },
 })
 
+export const textInputHost = tv({
+  extend: inputHost,
+  variants: {
+    variant: {
+      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none',
+    },
+  },
+})
+
 export const inputControl = tv({
   base: [
     'h-full min-w-0 flex-1 bg-transparent px-[var(--hn-input-px)] text-inherit outline-none [font:inherit]',
@@ -62,7 +71,12 @@ export const inputActionSlot = tv({
 })
 
 export type InputVariants = VariantProps<typeof inputHost>
+export type TextInputVariants = VariantProps<typeof textInputHost>
 
 export const inputEmbedded = tv({
-  base: 'flex min-w-0 flex-1 items-stretch',
+  base: [
+    'group/hn-field flex min-w-0 flex-1 items-stretch',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+    'group-data-disabled/hn-field:data-disabled:opacity-100',
+  ],
 })

package/src/components/input-group/InputGroup.vue

@@ -2,23 +2,27 @@
   import { computed } from 'vue'
   import { cn } from '../../lib/cn'
   import { focusFieldFrom } from '../../lib/field-focus'
-  import { inputHost, type InputVariants } from '../input/input.variants'
+  import { useFieldControl } from '../form-field/context'
+  import { textInputHost, type TextInputVariants } from '../input/input.variants'
   import { provideInputGroup } from './context'
   import { inputGroup } from './input-group.variants'
 
   defineOptions({ name: 'HnInputGroup' })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     disabled?: boolean
     invalid?: boolean
     class?: string
   }>()
 
+  const { disabled } = useFieldControl({ disabled: () => props.disabled })
+
   provideInputGroup({
+    variant: computed(() => props.variant),
     size: computed(() => props.size),
-    disabled: computed(() => !!props.disabled),
+    disabled,
     invalid: computed(() => !!props.invalid),
   })
 </script>
@@ -27,7 +31,14 @@
   <div
     data-hn-input-group
     :data-invalid="props.invalid ? '' : undefined"
-    :class="cn(inputHost({ variant: props.variant, size: props.size }), inputGroup(), props.class)"
+    :data-disabled="disabled ? '' : undefined"
+    :class="
+      cn(
+        textInputHost({ variant: props.variant, size: props.size }),
+        inputGroup({ divided: props.variant !== 'bare' }),
+        props.class,
+      )
+    "
     @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
   >
     <slot />

package/src/components/input-group/context.ts

@@ -1,7 +1,8 @@
 import { inject, provide, type ComputedRef, type InjectionKey } from 'vue'
-import type { InputVariants } from '../input/input.variants'
+import type { InputVariants, TextInputVariants } from '../input/input.variants'
 
 export interface InputGroupContext {
+  variant?: ComputedRef<TextInputVariants['variant']>
   size: ComputedRef<InputVariants['size']>
   disabled: ComputedRef<boolean>
   invalid: ComputedRef<boolean>

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

@@ -2,10 +2,17 @@ import { tv } from '../../lib/tv'
 
 export const inputGroup = tv({
   base: [
-    '[&>*+*]:border-s [&>*+*]:border-s-line',
     '[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]',
     '[&>button:focus-visible]:-outline-offset-2',
   ],
+  variants: {
+    divided: {
+      true: '[&>*+*]:border-s [&>*+*]:border-s-line',
+    },
+  },
+  defaultVariants: {
+    divided: true,
+  },
 })
 
 export const inputGroupAddon = tv({

package/src/components/listbox/Listbox.vue

@@ -1,11 +1,9 @@
-<script setup lang="ts">
-  import { Check } from '@lucide/vue'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import {
     ListboxContent,
     ListboxGroup,
     ListboxGroupLabel,
     ListboxItem,
-    ListboxItemIndicator,
     ListboxRoot,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -14,25 +12,30 @@
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { selectEmpty, selectItem, selectLabel } from '../select/select.variants'
   import { isOptionGroup, type SelectItems, type SelectOption } from '../select/types'
+  import ListboxOptionContent from './ListboxOptionContent.vue'
   import { listbox, listboxContent, type ListboxVariants } from './listbox.variants'
 
   defineOptions({ name: 'HnListbox', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       multiple?: boolean
       maxHeight?: string
+      padded?: boolean
       variant?: ListboxVariants['variant']
       disabled?: boolean
       class?: string
     }>(),
-    { maxHeight: '20rem' },
+    { maxHeight: '20rem', padded: true },
   )
 
   const model = defineModel<string | number | null | Array<string | number>>()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  const slots = defineSlots<{
+    option?(props: { option: T; selected: boolean }): unknown
+    trailing?(props: { option: T; selected: boolean }): unknown
+  }>()
 
   const t = useUiLocale()
 
@@ -55,7 +58,7 @@
     :class="cn(listbox({ variant: props.variant }), props.class)"
   >
     <ScrollArea :style="{ maxHeight: props.maxHeight }">
-      <ListboxContent v-bind="$attrs" :class="listboxContent()">
+      <ListboxContent v-bind="$attrs" :class="listboxContent({ padded: props.padded })">
         <template
           v-for="item in props.options"
           :key="isOptionGroup(item) ? item.label : item.value"
@@ -69,31 +72,25 @@
               :disabled="option.disabled"
               :class="selectItem()"
             >
-              <span class="min-w-0 flex-1">
-                <slot name="option" :option="option">
-                  <span class="block truncate">{{ option.label }}</span>
-                  <span v-if="option.description" class="text-muted block truncate text-xs">
-                    {{ option.description }}
-                  </span>
-                </slot>
-              </span>
-              <span class="flex size-4 shrink-0 items-center justify-center">
-                <ListboxItemIndicator><Check /></ListboxItemIndicator>
-              </span>
+              <ListboxOptionContent :option="option">
+                <template v-if="slots.option" #option="slotProps">
+                  <slot name="option" v-bind="slotProps" />
+                </template>
+                <template v-if="slots.trailing" #trailing="slotProps">
+                  <slot name="trailing" v-bind="slotProps" />
+                </template>
+              </ListboxOptionContent>
             </ListboxItem>
           </ListboxGroup>
           <ListboxItem v-else :value="item.value" :disabled="item.disabled" :class="selectItem()">
-            <span class="min-w-0 flex-1">
-              <slot name="option" :option="item">
-                <span class="block truncate">{{ item.label }}</span>
-                <span v-if="item.description" class="text-muted block truncate text-xs">
-                  {{ item.description }}
-                </span>
-              </slot>
-            </span>
-            <span class="flex size-4 shrink-0 items-center justify-center">
-              <ListboxItemIndicator><Check /></ListboxItemIndicator>
-            </span>
+            <ListboxOptionContent :option="item">
+              <template v-if="slots.option" #option="slotProps">
+                <slot name="option" v-bind="slotProps" />
+              </template>
+              <template v-if="slots.trailing" #trailing="slotProps">
+                <slot name="trailing" v-bind="slotProps" />
+              </template>
+            </ListboxOptionContent>
           </ListboxItem>
         </template>
         <div v-if="props.options.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>

package/src/components/listbox/ListboxOptionContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { Check } from '@lucide/vue'
+  import { injectListboxItemContext, ListboxItemIndicator } from 'reka-ui'
+  import type { SelectOption } from '../select/types'
+
+  defineOptions({ name: 'HnListboxOptionContent', inheritAttrs: false })
+  const props = defineProps<{ option: T }>()
+  const slots = defineSlots<{
+    option?(props: { option: T; selected: boolean }): unknown
+    trailing?(props: { option: T; selected: boolean }): unknown
+  }>()
+  const { isSelected: selected } = injectListboxItemContext()
+</script>
+
+<template>
+  <span class="min-w-0 flex-1">
+    <slot name="option" :option="props.option" :selected="selected">
+      <span class="block truncate">{{ props.option.label }}</span>
+      <span v-if="props.option.description" class="text-muted block truncate text-xs">
+        {{ props.option.description }}
+      </span>
+    </slot>
+  </span>
+  <slot v-if="slots.trailing" name="trailing" :option="props.option" :selected="selected" />
+  <span v-else class="flex size-4 shrink-0 items-center justify-center">
+    <ListboxItemIndicator><Check /></ListboxItemIndicator>
+  </span>
+</template>

package/src/components/listbox/listbox.variants.ts

@@ -9,6 +9,7 @@ export const listbox = tv({
     variant: {
       primary: 'border-line bg-surface border shadow-sm',
       secondary: 'bg-inset',
+      bare: 'rounded-none border-0 bg-transparent shadow-none',
     },
   },
   defaultVariants: {
@@ -17,7 +18,11 @@ export const listbox = tv({
 })
 
 export const listboxContent = tv({
-  base: 'flex flex-col p-1 outline-none',
+  base: 'flex flex-col outline-none',
+  variants: {
+    padded: { true: 'p-1', false: 'p-0' },
+  },
+  defaultVariants: { padded: true },
 })
 
 export type ListboxVariants = VariantProps<typeof listbox>

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>
@@ -130,6 +92,7 @@
       <div
         data-hn-multi-combobox
         :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
         :aria-busy="props.loading || undefined"
         :class="
           cn(

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 }
+}