@byyuurin/ui 0.0.9 → 0.0.10

package/dist/runtime/components/Select.vue

@@ -1,33 +1,11 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { AcceptableValue, SelectArrowProps, SelectContentProps, SelectRootProps } from 'reka-ui'
+import type { SelectArrowProps, SelectContentEmits, SelectContentProps, SelectRootEmits, SelectRootProps } from 'reka-ui'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { select } from '../theme'
-import type { ComponentAttrs, MaybeArray, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectOptionKey } from '../types'
+import type { AcceptableValue, ArrayOrNested, ComponentAttrs, EmitsToProps, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, MaybeArray, NestedItem } from '../types'
 
-export interface SelectEmits<T, V, M extends boolean> {
-  (event: 'update:open', value: boolean): void
-  (event: 'update:modelValue', payload: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: FocusEvent): void
-  (event: 'focus', payload: FocusEvent): void
-}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export interface SelectSlots<T, M extends boolean> {
-  'leading'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  'default'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean }) => any
-  'trailing'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  'item'?: SlotProps<T>
-  'item-leading'?: SlotProps<T>
-  'item-label'?: SlotProps<T>
-  'item-trailing'?: SlotProps<T>
-}
-
-type SelectVariants = VariantProps<typeof select>
-
-export interface SelectOption {
+interface SelectItemBase {
   label?: string
   icon?: string
   /**
@@ -35,18 +13,43 @@ export interface SelectOption {
    * @default "option"
    */
   type?: 'label' | 'separator' | 'option'
-  value?: string
+  value?: AcceptableValue
   disabled?: boolean
+  [key: string]: any
 }
 
-export type SelectOptionValue = SelectOption | AcceptableValue | boolean
+export type SelectItem = SelectItemBase | AcceptableValue | boolean
+
+export type SelectEmits<T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> | undefined, M extends boolean> = Omit<SelectRootEmits, 'update:modelValue'> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+} & GetModelValueEmits<T, VK, M>
+
+type SlotProps<T extends SelectItem> = (props: { item: T, index: number }) => any
+
+export interface SelectSlots<
+  T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>,
+  VK extends GetItemKeys<T> | undefined = undefined,
+  M extends boolean = false,
+  I extends NestedItem<T> = NestedItem<T>,
+> {
+  'leading'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
+  'default'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean }) => any
+  'trailing'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
+  'item'?: SlotProps<I>
+  'item-leading'?: SlotProps<I>
+  'item-label'?: SlotProps<I>
+  'item-trailing'?: SlotProps<I>
+}
+
+type SelectVariants = VariantProps<typeof select>
 
 export interface SelectProps<
-  T extends MaybeArrayOfArrayItem<I>,
-  I extends MaybeArrayOfArray<SelectOptionValue> = MaybeArrayOfArray<SelectOptionValue>,
-  V extends SelectOptionKey<T> | undefined = undefined,
+  T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>,
+  VK extends GetItemKeys<T> = 'value',
   M extends boolean = false,
-> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, ComponentAttrs<typeof select>, UseComponentIconsProps {
+> extends ComponentAttrs<typeof select>, UseComponentIconsProps, Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'> {
   id?: string
   /** The placeholder text when the select is empty. */
   placeholder?: string
@@ -66,7 +69,7 @@ export interface SelectProps<
    * The content of the menu.
    * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
    */
-  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<SelectContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @default false
@@ -81,17 +84,17 @@ export interface SelectProps<
    * When `options` is an array of objects, select the field to use as the value.
    * @default "value"
    */
-  valueKey?: V
+  valueKey?: VK
   /**
    * When `options` is an array of objects, select the field to use as the label.
    * @default "label"
    */
-  labelKey?: V
-  options?: I
+  labelKey?: VK
+  options?: T
   /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
-  defaultValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
+  defaultValue?: GetModelValue<T, VK, M>
   /** The controlled value of the Select. Can be bind as `v-model`. */
-  modelValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
+  modelValue?: GetModelValue<T, VK, M>
   /** Whether multiple options can be selected or not. */
   multiple?: M & boolean
   /** Highlight the ring color like a focus state. */
@@ -100,82 +103,89 @@ export interface SelectProps<
 }
 </script>
 
-<script lang="ts" setup generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectOption | AcceptableValue | boolean> = MaybeArrayOfArray<SelectOption | AcceptableValue | boolean>, V extends SelectOptionKey<T> | undefined = undefined, M extends boolean = false">
+<script lang="ts" setup generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
 import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
-import { compare, get } from '../utils'
+import { compare, get, isArrayOfArray } from '../utils'
 
-const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
-  variant: 'outline',
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SelectProps<T, VK, M>>(), {
   valueKey: 'value' as never,
   labelKey: 'label' as never,
   portal: true,
 })
 
-const emit = defineEmits<SelectEmits<T, V, M>>()
-const slots = defineSlots<SelectSlots<T, M>>()
+const emit = defineEmits<SelectEmits<T, VK, M>>()
+const slots = defineSlots<SelectSlots<T, VK, M>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emit)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
 const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
-const { theme, generateStyle } = useTheme()
+const { id, name, size: formItemSize, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormItem<SelectProps<T, VK, M>>(props)
+const { size: buttonGroupSize, orientation } = useButtonGroup(props)
 
-const { size, orientation } = useButtonGroup(props)
+const { theme, generateStyle } = useTheme()
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
   trailingIcon: theme.value.app.icons.chevronDown,
 })))
 
 const style = computed(() => generateStyle('select', {
   ...props,
-  size: size.value,
   groupOrientation: orientation.value,
+  size: buttonGroupSize.value || formItemSize.value,
+  highlight: highlight.value,
   leading: isLeading.value,
   trailing: isTrailing.value,
 }))
 
-const groups = computed(() => props.options?.length ? (Array.isArray(props.options[0]) ? props.options : [props.options]) as SelectOption[][] : [])
-const items = computed(() => groups.value.flat() as T[])
-
-function typedItem(item: SelectOption) {
-  return item as unknown as T
-}
+const groups = computed<SelectItem[][]>(
+  () => props.options?.length
+    ? isArrayOfArray(props.options) ? props.options : [props.options]
+    : [],
+)
 
-function typedValue<V extends MaybeArray<AcceptableValue>>(value?: V) {
-  return value as unknown as M extends true ? AcceptableValue[] : AcceptableValue
-}
-
-function typedModelValue(value: any) {
-  return value as MaybeArray<AcceptableValue> | undefined
-}
+const items = computed(() => groups.value.flat() as T[])
 
-function displayValue(value?: MaybeArray<AcceptableValue>): string | undefined {
+function displayValue(value?: MaybeArray<GetItemValue<T, VK>>): string {
   if (props.multiple && Array.isArray(value))
     return value.map((v) => displayValue(v)).filter(Boolean).join(', ')
 
   const item = items.value.find((item) => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
-  return (item != null) && (typeof item === 'object' ? get(item, props.labelKey as string) : item.toString())
+  return (item != null) && (typeof item === 'object' ? get(item, props.labelKey as string) : String(item))
+}
+
+function isSelectItem(item: SelectItem): item is SelectItemBase {
+  return typeof item === 'object' && item !== null
 }
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 
 function onUpdateOpen(value: boolean) {
   if (value) {
     const event = new FocusEvent('focus')
     emit('focus', event)
+    emitFormFocus()
   }
   else {
     const event = new FocusEvent('blur')
     emit('blur', event)
+    emitFormBlur()
   }
 }
 </script>
@@ -183,24 +193,24 @@ function onUpdateOpen(value: boolean) {
 <template>
   <SelectRoot
     v-slot="{ modelValue: innerValue, open }"
-    :name="props.name"
     v-bind="rootProps"
+    :name="name"
     :autocomplete="props.autocomplete"
-    :disabled="props.disabled"
-    :default-value="typedModelValue(props.defaultValue)"
-    :model-value="typedModelValue(props.modelValue)"
+    :disabled="disabled"
+    :default-value="(props.defaultValue as MaybeArray<AcceptableValue>)"
+    :model-value="(props.modelValue as MaybeArray<AcceptableValue>)"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="props.id" :class="style.base({ class: [props.class, props.ui?.base] })">
+    <SelectTrigger v-bind="{ ...$attrs, ...ariaAttrs, id }" :class="style.base({ class: [props.class, props.ui?.base] })">
       <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
-        <slot name="leading" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
+        <slot name="leading" :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open" :ui="props.ui">
           <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
         </slot>
       </span>
 
-      <slot :model-value="typedValue(innerValue)" :open="open">
-        <template v-for="displayedModelValue in [displayValue(innerValue)]" :key="displayedModelValue">
+      <slot :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open">
+        <template v-for="displayedModelValue in [displayValue((innerValue as GetModelValue<T, VK, M>))]" :key="displayedModelValue">
           <span v-if="displayedModelValue" :class="style.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
           </span>
@@ -211,7 +221,7 @@ function onUpdateOpen(value: boolean) {
       </slot>
 
       <span v-if="isTrailing || !!slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
+        <slot name="trailing" :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open" :ui="props.ui">
           <span v-if="trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
         </slot>
       </span>
@@ -222,30 +232,30 @@ function onUpdateOpen(value: boolean) {
         <SelectViewport :class="style.viewport({ class: props.ui?.viewport })">
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="item.type === 'label'" :class="style.label({ class: props.ui?.label })">
+              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="style.label({ class: props.ui?.label })">
                 {{ get(item, props.labelKey as string) }}
               </SelectLabel>
-              <SelectSeparator v-else-if="item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" />
+              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" />
 
               <SelectItem
                 v-else
                 :class="style.item({ class: props.ui?.item })"
-                :disabled="item.disabled"
-                :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
+                :disabled="isSelectItem(item) && item.disabled"
+                :value="isSelectItem(item) ? get(item, props.valueKey as string) : item"
               >
-                <slot name="item" :item="typedItem(item)" :index="index">
-                  <slot name="item-leading" :item="typedItem(item)" :index="index">
-                    <span v-if="item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })"></span>
+                <slot name="item" :item="(item as NestedItem<T>)" :index="index">
+                  <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
+                    <span v-if="isSelectItem(item) && item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })"></span>
                   </slot>
 
                   <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })">
-                    <slot name="item-label" :item="typedItem(item)" :index="index">
-                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
+                    <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
+                      {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </SelectItemText>
 
                   <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })">
-                    <slot name="item-trailing" :item="typedItem(item)" :index="index"></slot>
+                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index"></slot>
 
                     <SelectItemIndicator as-child>
                       <span :class="style.itemTrailingIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })"></span>

package/dist/runtime/components/Slider.vue

@@ -2,11 +2,11 @@
 import type { VariantProps } from '@byyuurin/ui-kit'
 import type { SliderRootProps } from 'reka-ui'
 import type { slider } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, MaybeArray } from '../types'
 
 export interface SliderEmits {
-  (event: 'update:modelValue', payload: number | number[]): void
-  (event: 'change', payload: Event): void
+  'update:modelValue': [payload: MaybeArray<number>]
+  'change': [payload: Event]
 }
 
 type SliderVariants = VariantProps<typeof slider>
@@ -28,6 +28,7 @@ export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderR
 import { reactivePick } from '@vueuse/core'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SliderProps>(), {
@@ -63,22 +64,26 @@ const sliderValue = computed({
 
 const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
 
+const { id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<SliderProps>(props)
 const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('slider', props))
+const style = computed(() => generateStyle('slider', {
+  ...props,
+  size: size.value,
+}))
 
 function onChange(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
 <template>
   <SliderRoot
-    v-bind="rootProps"
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
     v-model="sliderValue"
-    :name="props.name"
-    :disabled="props.disabled"
     :class="style.root({ class: [props.class, props.ui?.root] })"
     :default-value="defaultSliderValue"
     :data-steps="thumbsCount"

package/dist/runtime/components/Switch.vue

@@ -5,7 +5,7 @@ import type { switch as _switch } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface SwitchEmits {
-  (event: 'change', payload: Event): void
+  change: [payload: Event]
 }
 
 export interface SwitchSlots {
@@ -37,6 +37,7 @@ export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<Switch
 import { reactivePick } from '@vueuse/core'
 import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SwitchProps>(), {})
@@ -45,11 +46,15 @@ const slots = defineSlots<SwitchSlots>()
 const modelValue = defineModel<boolean>({ default: undefined })
 
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-const id = useId()
+
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<SwitchProps>(props)
+const id = _id.value ?? useId()
 
 const { theme, generateStyle } = useTheme()
 const style = computed(() => generateStyle('switch', {
   ...props,
+  size: size.value,
+  disabled: disabled.value,
   checked: false,
   unchecked: false,
 }))
@@ -57,7 +62,10 @@ const style = computed(() => generateStyle('switch', {
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
+
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
@@ -65,12 +73,10 @@ function onUpdate(value: any) {
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <div :class="style.container({ class: props.ui?.container })">
       <SwitchRoot
-        :id="id"
-        v-bind="rootProps"
+        v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
         v-model="modelValue"
-        :name="props.name"
-        :disabled="props.disabled || props.loading"
         :class="style.base({ class: props.ui?.base })"
+        :disabled="disabled || props.loading"
         @update:model-value="onUpdate"
       >
         <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">

package/dist/runtime/components/Table.vue

@@ -10,9 +10,10 @@ type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T> = {
-  expanded: (props: { row: Row<T> }) => any
-  empty: (props?: {}) => any
-  caption: (props?: {}) => any
+  expanded?: (props: { row: Row<T> }) => any
+  empty?: any
+  loading?: any
+  caption?: any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 export type TableData = RowData
@@ -33,11 +34,18 @@ export interface TableProps<T extends TableData> extends ComponentAttrs<typeof t
   data?: T[]
   columns?: TableColumn<T>[]
   caption?: string
+  /**
+   * The text to display when the table is empty.
+   * @default t('table.noData')
+   */
+  empty?: string
   /**
    * Whether the table should have a sticky header.
    * @default false
    */
   sticky?: boolean
+  /** Whether the table should be in loading state. */
+  loading?: boolean
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
@@ -111,8 +119,7 @@ import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 
 const props = defineProps<TableProps<T>>()
-
-defineSlots<TableSlots<T>>()
+const slots = defineSlots<TableSlots<T>>()
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
@@ -137,7 +144,7 @@ const columns = computed<TableColumn<T>[]>(
 )
 
 const tableApi = useVueTable({
-  ...reactiveOmit(props, 'data', 'columns', 'caption', 'sticky', 'class', 'ui'),
+  ...reactiveOmit(props, 'data', 'columns', 'caption', 'sticky', 'loading', 'class', 'ui'),
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
@@ -240,7 +247,7 @@ defineExpose({
 <template>
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <table :class="style.base({ class: props.ui?.base })">
-      <caption v-if="props.caption" :class="style.caption({ class: props.caption })">
+      <caption v-if="props.caption || slots.caption" :class="style.caption({ class: props.caption })">
         <slot name="caption">
           {{ props.caption }}
         </slot>
@@ -284,10 +291,16 @@ defineExpose({
           </template>
         </template>
 
+        <tr v-else-if="props.loading && slots.loading">
+          <td :colspan="columns.length" :class="style.loading({ class: props.ui?.loading })">
+            <slot name="loading"></slot>
+          </td>
+        </tr>
+
         <tr v-else :class="style.tr({ class: props.ui?.tr })">
           <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ t('table.noData') }}
+              {{ props.empty || t('table.noData') }}
             </slot>
           </td>
         </tr>

package/dist/runtime/components/Tabs.vue

@@ -6,15 +6,6 @@ import type { ComponentAttrs, DynamicSlots } from '../types'
 
 export interface TabsEmits extends TabsRootEmits<string | number> {}
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  leading?: SlotProps<T>
-  default?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
 export interface TabsItem {
   label?: string
   icon?: string
@@ -23,11 +14,21 @@ export interface TabsItem {
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
   disabled?: boolean
+  [key: string]: any
 }
 
+type SlotProps<T extends TabsItem> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends TabsItem = TabsItem> = {
+  leading?: SlotProps<T>
+  default?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+} & DynamicSlots<T, undefined, SlotProps<T>>
+
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @default "div"
@@ -108,7 +109,7 @@ const style = computed(() => generateStyle('tabs', props))
         :value="item.value || String(index)"
         :class="style.content({ class: props.ui?.content })"
       >
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
+        <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string }>)" :index="index">
           {{ item.content }}
         </slot>
       </TabsContent>

package/dist/runtime/components/Textarea.vue

@@ -5,9 +5,9 @@ import type { textarea } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface TextareaEmits {
-  (e: 'update:modelValue', payload: string): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+  'update:modelValue': [payload: string]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface TextareaSlots {
@@ -41,7 +41,8 @@ export interface TextareaProps extends ComponentAttrs<typeof textarea> {
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, useTemplateRef, watch } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 defineOptions({
@@ -59,10 +60,15 @@ const emit = defineEmits<TextareaEmits>()
 defineSlots<TextareaSlots>()
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const textareaRef = useTemplateRef('textareaRef')
 
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormBlur, emitFormFocus } = useFormItem<TextareaProps>(props)
 const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('textarea', props))
+const style = computed(() => generateStyle('textarea', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 function autoFocus() {
   if (props.autofocus)
@@ -74,6 +80,7 @@ function updateInput(value: string) {
     value = value.trim()
 
   modelValue.value = value
+  emitFormInput()
 }
 
 function onInput(event: Event) {
@@ -93,10 +100,12 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
 
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
   emit('blur', event)
+  emitFormBlur()
 }
 
 function autoResize() {
@@ -144,23 +153,20 @@ onMounted(() => {
   <Primitive
     :as="props.as"
     :class="style.root({ class: [props.class, props.ui?.root] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
   >
     <textarea
-      :id="props.id"
       ref="textareaRef"
+      :class="style.base({ class: props.ui?.base })"
       :value="modelValue"
-      :name="props.name"
       :rows="props.rows"
       :placeholder="props.placeholder"
-      :class="style.base({ class: props.ui?.base })"
-      :disabled="props.disabled"
       :required="props.required"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs, id, name, disabled }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
-      @focus="autoResize"
+      @focus="emitFormFocus"
     ></textarea>
 
     <slot></slot>