@nuxt/ui 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/runtime/components/Table.vue

@@ -1,46 +1,80 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { Ref } from 'vue'
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import type { RowData } from '@tanstack/table-core'
 import type {
-  Row,
+  CellContext,
   ColumnDef,
+  ColumnFiltersOptions,
   ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningOptions,
   ColumnPinningState,
-  RowSelectionState,
-  SortingState,
+  ColumnSizingInfoState,
+  ColumnSizingOptions,
+  ColumnSizingState,
+  CoreOptions,
+  ExpandedOptions,
   ExpandedState,
-  VisibilityState,
+  FacetedOptions,
   GlobalFilterOptions,
-  ColumnFiltersOptions,
-  ColumnPinningOptions,
-  VisibilityOptions,
-  ExpandedOptions,
-  SortingOptions,
+  GroupingOptions,
+  GroupingState,
+  HeaderContext,
+  PaginationOptions,
+  PaginationState,
+  Row,
+  RowPinningOptions,
+  RowPinningState,
   RowSelectionOptions,
+  RowSelectionState,
+  SortingOptions,
+  SortingState,
   Updater,
-  CellContext,
-  HeaderContext
+  VisibilityOptions,
+  VisibilityState
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
+import { tv } from '../utils/tv'
+
+declare module '@tanstack/table-core' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    class?: {
+      th?: string
+      td?: string
+    }
+  }
+}
 
-const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
+const appConfigTable = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
 
-const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
+const table = tv({ extend: tv(theme), ...(appConfigTable.ui?.table || {}) })
 
 type TableVariants = VariantProps<typeof table>
 
-export type TableColumn<T> = ColumnDef<T>
+export type TableRow<T> = Row<T>
+export type TableData = RowData
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
-export interface TableData {
-  [key: string]: any
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+  state?: CoreOptions<T>['state']
+  onStateChange?: CoreOptions<T>['onStateChange']
+  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
 }
 
-export interface TableProps<T> {
+export interface TableProps<T extends TableData> extends TableOptions<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
   data?: T[]
   columns?: TableColumn<T>[]
+  caption?: string
   /**
    * Whether the table should have a sticky header.
    * @defaultValue false
@@ -65,6 +99,11 @@ export interface TableProps<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
    */
   columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
@@ -75,6 +114,11 @@ export interface TableProps<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
    */
   sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
+   */
+  groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
@@ -85,6 +129,22 @@ export interface TableProps<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
   rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
+   */
+  rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+   */
+  paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
+   */
+  facetedOptions?: FacetedOptions<T>
+  onSelect?: (row: TableRow<T>, e?: Event) => void
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -95,25 +155,24 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
 export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
+  caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  getExpandedRowModel,
-  useVueTable
-} from '@tanstack/vue-table'
+import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { reactiveOmit } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
 
+const { t } = useLocale()
+
 const data = computed(() => props.data ?? [])
 const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
@@ -126,13 +185,20 @@ const ui = computed(() => table({
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
 const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
+const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const paginationState = defineModel<PaginationState>('pagination', { default: {} })
 
 const tableApi = useVueTable({
+  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
@@ -141,18 +207,29 @@ const tableApi = useVueTable({
   ...(props.columnFiltersOptions || {}),
   getFilteredRowModel: getFilteredRowModel(),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrderState),
   ...(props.visibilityOptions || {}),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
   ...(props.columnPinningOptions || {}),
   onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  ...(props.columnSizingOptions || {}),
+  onColumnSizingChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingState),
+  onColumnSizingInfoChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingInfoState),
   ...(props.rowSelectionOptions || {}),
   onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  ...(props.rowPinningOptions || {}),
+  onRowPinningChange: updaterOrValue => valueUpdater(updaterOrValue, rowPinningState),
   ...(props.sortingOptions || {}),
   getSortedRowModel: getSortedRowModel(),
   onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  ...(props.groupingOptions || {}),
+  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, groupingState),
   ...(props.expandedOptions || {}),
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  ...(props.paginationOptions || {}),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
+  ...(props.facetedOptions || {}),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -160,6 +237,9 @@ const tableApi = useVueTable({
     get columnFilters() {
       return columnFiltersState.value
     },
+    get columnOrder() {
+      return columnOrderState.value
+    },
     get columnVisibility() {
       return columnVisibilityState.value
     },
@@ -174,6 +254,21 @@ const tableApi = useVueTable({
     },
     get sorting() {
       return sortingState.value
+    },
+    get grouping() {
+      return groupingState.value
+    },
+    get rowPinning() {
+      return rowPinningState.value
+    },
+    get columnSizing() {
+      return columnSizingState.value
+    },
+    get columnSizingInfo() {
+      return columnSizingInfoState.value
+    },
+    get pagination() {
+      return paginationState.value
     }
   }
 })
@@ -182,21 +277,43 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
+function handleRowSelect(row: TableRow<T>, e: Event) {
+  if (!props.onSelect) {
+    return
+  }
+  const target = e.target as HTMLElement
+  const isInteractive = target.closest('button')
+  if (isInteractive) {
+    return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  props.onSelect(row, e)
+}
+
 defineExpose({
   tableApi
 })
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <table :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </caption>
+
       <thead :class="ui.thead({ class: [props.ui?.thead] })">
         <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
+            :class="ui.th({ class: [props.ui?.th, header.column.columnDef.meta?.class?.th], pinned: !!header.column.getIsPinned() })"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -208,12 +325,20 @@ defineExpose({
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+            <tr
+              :data-selected="row.getIsSelected()"
+              :data-selectable="!!props.onSelect"
+              :data-expanded="row.getIsExpanded()"
+              :role="props.onSelect ? 'button' : undefined"
+              :tabindex="props.onSelect ? 0 : undefined"
+              :class="ui.tr({ class: [props.ui?.tr] })"
+              @click="handleRowSelect(row, $event)"
+            >
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
                 :data-pinned="cell.column.getIsPinned()"
-                :class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
+                :class="ui.td({ class: [props.ui?.td, cell.column.columnDef.meta?.class?.td], pinned: !!cell.column.getIsPinned() })"
               >
                 <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
                   <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
@@ -231,11 +356,11 @@ defineExpose({
         <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              No results
+              {{ t('table.noData') }}
             </slot>
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Tabs.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+const appConfigTabs = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
 
-const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+const tabs = tv({ extend: tv(theme), ...(appConfigTabs.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
@@ -25,7 +25,7 @@ export interface TabsItem {
 
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -44,7 +44,7 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * The content of the tabs, can be disabled to prevent rendering the content.
    * @defaultValue true
    */
-  content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  content?: boolean
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
@@ -64,30 +64,11 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Tab1',
-      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
-      content: 'This is the content shown for Tab1'
-    }, {
-      label: 'Tab2',
-      icon: 'i-lucide-user',
-      content: 'And, this is the content for Tab2'
-    }, {
-      label: 'Tab3',
-      icon: 'i-lucide-bell',
-      content: 'Finally, this is the content for Tab3'
-    }]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
-import { computed, toRef } from 'vue'
-import { defu } from 'defu'
-import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { get } from '../utils'
 import UIcon from './Icon.vue'
@@ -97,13 +78,13 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
   orientation: 'horizontal',
+  unmountOnHide: true,
   labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
-const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
 
 const ui = computed(() => tabs({
   color: props.color,
@@ -133,7 +114,7 @@ const ui = computed(() => tabs({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
         <slot :name="item.slot || 'content'" :item="item" :index="index">
           {{ item.content }}
         </slot>

package/dist/runtime/components/Textarea.vue

@@ -1,16 +1,23 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/textarea'
+import { tv } from '../utils/tv'
+import type { PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
+const appConfigTextarea = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
 
-const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
+const textarea = tv({ extend: tv(theme), ...(appConfigTextarea.ui?.textarea || {}) })
 
 type TextareaVariants = VariantProps<typeof textarea>
 
 export interface TextareaProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
   id?: string
   name?: string
   /** The placeholder text when the textarea is empty. */
@@ -28,7 +35,7 @@ export interface TextareaProps {
   autoresize?: boolean
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  ui?: Partial<typeof textarea.slots>
+  ui?: PartialString<typeof textarea.slots>
 }
 
 export interface TextareaEmits {
@@ -44,6 +51,7 @@ export interface TextareaSlots {
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { Primitive } from 'reka-ui'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 
@@ -59,7 +67,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 
 const ui = computed(() => textarea({
   color: color.value,
@@ -151,7 +159,7 @@ function autoResize() {
   }
 }
 
-watch(() => modelValue, () => {
+watch(modelValue, () => {
   nextTick(autoResize)
 })
 
@@ -167,7 +175,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -178,12 +186,13 @@ onMounted(() => {
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
+      @focus="emitFormFocus"
     />
 
     <slot />
-  </div>
+  </Primitive>
 </template>