Merge branch 'v3' into feat/3880

test/components/Accordion.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Accordion, { type AccordionProps, type AccordionSlots } from '../../src/runtime/components/Accordion.vue'
+import Accordion from '../../src/runtime/components/Accordion.vue'
+import type { AccordionProps, AccordionSlots } from '../../src/runtime/components/Accordion.vue'
 import ComponentRender from '../component-render'
 
 describe('Accordion', () => {

test/components/Alert.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Alert, { type AlertProps, type AlertSlots } from '../../src/runtime/components/Alert.vue'
+import Alert from '../../src/runtime/components/Alert.vue'
+import type { AlertProps, AlertSlots } from '../../src/runtime/components/Alert.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/alert'
 

test/components/Avatar.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Avatar, { type AvatarProps, type AvatarSlots } from '../../src/runtime/components/Avatar.vue'
+import Avatar from '../../src/runtime/components/Avatar.vue'
+import type { AvatarProps, AvatarSlots } from '../../src/runtime/components/Avatar.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/avatar'
 

test/components/AvatarGroup.spec.ts

@@ -1,7 +1,8 @@
 import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import Avatar from '../../src/runtime/components/Avatar.vue'
-import AvatarGroup, { type AvatarGroupProps, type AvatarGroupSlots } from '../../src/runtime/components/AvatarGroup.vue'
+import AvatarGroup from '../../src/runtime/components/AvatarGroup.vue'
+import type { AvatarGroupProps, AvatarGroupSlots } from '../../src/runtime/components/AvatarGroup.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/avatar-group'
 

test/components/Badge.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Badge, { type BadgeProps, type BadgeSlots } from '../../src/runtime/components/Badge.vue'
+import Badge from '../../src/runtime/components/Badge.vue'
+import type { BadgeProps, BadgeSlots } from '../../src/runtime/components/Badge.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/badge'
 

test/components/Breadcrumb.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Breadcrumb, { type BreadcrumbProps, type BreadcrumbSlots } from '../../src/runtime/components/Breadcrumb.vue'
+import Breadcrumb from '../../src/runtime/components/Breadcrumb.vue'
+import type { BreadcrumbProps, BreadcrumbSlots } from '../../src/runtime/components/Breadcrumb.vue'
 import ComponentRender from '../component-render'
 
 describe('Breadcrumb', () => {

test/components/Button.spec.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { describe, it, expect, test } from 'vitest'
-import Button, { type ButtonProps, type ButtonSlots } from '../../src/runtime/components/Button.vue'
+import Button from '../../src/runtime/components/Button.vue'
+import type { ButtonProps, ButtonSlots } from '../../src/runtime/components/Button.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/button'
 import { mountSuspended } from '@nuxt/test-utils/runtime'

test/components/ButtonGroup.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import ButtonGroup, { type ButtonGroupProps, type ButtonGroupSlots } from '../../src/runtime/components/ButtonGroup.vue'
+import ButtonGroup from '../../src/runtime/components/ButtonGroup.vue'
+import type { ButtonGroupProps, ButtonGroupSlots } from '../../src/runtime/components/ButtonGroup.vue'
 import ComponentRender from '../component-render'
 import { UInput, UButton } from '#components'
 import buttonTheme from '#build/ui/button'

test/components/Calendar.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, afterAll, test } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import Calendar, { type CalendarProps, type CalendarSlots } from '../../src/runtime/components/Calendar.vue'
+import Calendar from '../../src/runtime/components/Calendar.vue'
+import type { CalendarProps, CalendarSlots } from '../../src/runtime/components/Calendar.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/calendar'
 import { CalendarDate } from '@internationalized/date'

test/components/Card.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Card, { type CardProps, type CardSlots } from '../../src/runtime/components/Card.vue'
+import Card from '../../src/runtime/components/Card.vue'
+import type { CardProps, CardSlots } from '../../src/runtime/components/Card.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/card'
 

test/components/Carousel.spec.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
-import Carousel, { type CarouselProps, type CarouselSlots } from '../../src/runtime/components/Carousel.vue'
+import Carousel from '../../src/runtime/components/Carousel.vue'
+import type { CarouselProps, CarouselSlots } from '../../src/runtime/components/Carousel.vue'
 import ComponentRender from '../component-render'
 
 const CarouselWrapper = defineComponent({

test/components/Checkbox.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import Checkbox, { type CheckboxProps, type CheckboxSlots } from '../../src/runtime/components/Checkbox.vue'
+import Checkbox from '../../src/runtime/components/Checkbox.vue'
+import type { CheckboxProps, CheckboxSlots } from '../../src/runtime/components/Checkbox.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/checkbox'
 import { renderForm } from '../utils/form'

test/components/CheckboxGroup.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import CheckboxGroup, { type CheckboxGroupProps, type CheckboxGroupSlots } from '../../src/runtime/components/CheckboxGroup.vue'
+import CheckboxGroup from '../../src/runtime/components/CheckboxGroup.vue'
+import type { CheckboxGroupProps, CheckboxGroupSlots } from '../../src/runtime/components/CheckboxGroup.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/checkbox-group'
 import themeCheckbox from '#build/ui/checkbox'

test/components/Chip.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Chip, { type ChipProps, type ChipSlots } from '../../src/runtime/components/Chip.vue'
+import Chip from '../../src/runtime/components/Chip.vue'
+import type { ChipProps, ChipSlots } from '../../src/runtime/components/Chip.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/chip'
 

test/components/Collapsible.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Collapsible, { type CollapsibleProps, type CollapsibleSlots } from '../../src/runtime/components/Collapsible.vue'
+import Collapsible from '../../src/runtime/components/Collapsible.vue'
+import type { CollapsibleProps, CollapsibleSlots } from '../../src/runtime/components/Collapsible.vue'
 import ComponentRender from '../component-render'
 
 describe('Collapsible', () => {

test/components/ColorPicker.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import ColorPicker, { type ColorPickerProps } from '../../src/runtime/components/ColorPicker.vue'
+import ColorPicker from '../../src/runtime/components/ColorPicker.vue'
+import type { ColorPickerProps } from '../../src/runtime/components/ColorPicker.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/color-picker'
 

test/components/CommandPalette.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import CommandPalette, { type CommandPaletteProps, type CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
+import CommandPalette from '../../src/runtime/components/CommandPalette.vue'
+import type { CommandPaletteProps, CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
 import ComponentRender from '../component-render'
 
 describe('CommandPalette', () => {

test/components/Container.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Container, { type ContainerProps, type ContainerSlots } from '../../src/runtime/components/Container.vue'
+import Container from '../../src/runtime/components/Container.vue'
+import type { ContainerProps, ContainerSlots } from '../../src/runtime/components/Container.vue'
 import ComponentRender from '../component-render'
 
 describe('Container', () => {

test/components/ContextMenu.spec.ts

@@ -1,6 +1,7 @@
 import { h, defineComponent } from 'vue'
 import { describe, it, expect, test } from 'vitest'
-import ContextMenu, { type ContextMenuProps, type ContextMenuSlots } from '../../src/runtime/components/ContextMenu.vue'
+import ContextMenu from '../../src/runtime/components/ContextMenu.vue'
+import type { ContextMenuProps, ContextMenuSlots } from '../../src/runtime/components/ContextMenu.vue'
 import theme from '#build/ui/context-menu'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { expectSlotProps } from '../utils/types'

test/components/Drawer.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Drawer, { type DrawerProps, type DrawerSlots } from '../../src/runtime/components/Drawer.vue'
+import Drawer from '../../src/runtime/components/Drawer.vue'
+import type { DrawerProps, DrawerSlots } from '../../src/runtime/components/Drawer.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/drawer'
 

test/components/DropdownMenu.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import DropdownMenu, { type DropdownMenuProps, type DropdownMenuSlots } from '../../src/runtime/components/DropdownMenu.vue'
+import DropdownMenu from '../../src/runtime/components/DropdownMenu.vue'
+import type { DropdownMenuProps, DropdownMenuSlots } from '../../src/runtime/components/DropdownMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/dropdown-menu'
 import { expectSlotProps } from '../utils/types'

test/components/Input.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Input, { type InputProps, type InputSlots } from '../../src/runtime/components/Input.vue'
+import Input from '../../src/runtime/components/Input.vue'
+import type { InputProps, InputSlots } from '../../src/runtime/components/Input.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 

test/components/InputMenu.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import InputMenu, { type InputMenuProps, type InputMenuSlots } from '../../src/runtime/components/InputMenu.vue'
+import InputMenu from '../../src/runtime/components/InputMenu.vue'
+import type { InputMenuProps, InputMenuSlots } from '../../src/runtime/components/InputMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'

test/components/InputNumber.spec.ts

@@ -2,7 +2,8 @@ import { describe, it, expect, test } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { reactive } from 'vue'
-import InputNumber, { type InputNumberProps, type InputNumberSlots } from '../../src/runtime/components/InputNumber.vue'
+import InputNumber from '../../src/runtime/components/InputNumber.vue'
+import type { InputNumberProps, InputNumberSlots } from '../../src/runtime/components/InputNumber.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input-number'
 import type { FormInputEvents } from '~/src/module'

test/components/InputTags.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import theme from '#build/ui/input'
-import InputTags, { type InputTagsProps, type InputTagsSlots } from '../../src/runtime/components/InputTags.vue'
+import InputTags from '../../src/runtime/components/InputTags.vue'
+import type { InputTagsProps, InputTagsSlots } from '../../src/runtime/components/InputTags.vue'
 import ComponentRender from '../component-render'
 
 describe('InputTags', () => {

test/components/Kbd.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Kbd, { type KbdProps, type KbdSlots } from '../../src/runtime/components/Kbd.vue'
+import Kbd from '../../src/runtime/components/Kbd.vue'
+import type { KbdProps, KbdSlots } from '../../src/runtime/components/Kbd.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/kbd'
 

test/components/Modal.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Modal, { type ModalProps, type ModalSlots } from '../../src/runtime/components/Modal.vue'
+import Modal from '../../src/runtime/components/Modal.vue'
+import type { ModalProps, ModalSlots } from '../../src/runtime/components/Modal.vue'
 import ComponentRender from '../component-render'
 
 describe('Modal', () => {

test/components/NavigationMenu.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import NavigationMenu, { type NavigationMenuProps, type NavigationMenuSlots } from '../../src/runtime/components/NavigationMenu.vue'
+import NavigationMenu from '../../src/runtime/components/NavigationMenu.vue'
+import type { NavigationMenuProps, NavigationMenuSlots } from '../../src/runtime/components/NavigationMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/navigation-menu'
 import { expectSlotProps } from '../utils/types'

test/components/Pagination.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Pagination, { type PaginationProps, type PaginationSlots } from '../../src/runtime/components/Pagination.vue'
+import Pagination from '../../src/runtime/components/Pagination.vue'
+import type { PaginationProps, PaginationSlots } from '../../src/runtime/components/Pagination.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/button'
 

test/components/PinInput.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
-import PinInput, { type PinInputProps } from '../../src/runtime/components/PinInput.vue'
+import PinInput from '../../src/runtime/components/PinInput.vue'
+import type { PinInputProps } from '../../src/runtime/components/PinInput.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/pin-input'
 

test/components/Popover.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Popover, { type PopoverProps, type PopoverSlots } from '../../src/runtime/components/Popover.vue'
+import Popover from '../../src/runtime/components/Popover.vue'
+import type { PopoverProps, PopoverSlots } from '../../src/runtime/components/Popover.vue'
 import ComponentRender from '../component-render'
 
 describe('Popover', () => {

test/components/Progress.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Progress, { type ProgressProps, type ProgressSlots } from '../../src/runtime/components/Progress.vue'
+import Progress from '../../src/runtime/components/Progress.vue'
+import type { ProgressProps, ProgressSlots } from '../../src/runtime/components/Progress.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/progress'
 

test/components/RadioGroup.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import RadioGroup, { type RadioGroupProps, type RadioGroupSlots } from '../../src/runtime/components/RadioGroup.vue'
+import RadioGroup from '../../src/runtime/components/RadioGroup.vue'
+import type { RadioGroupProps, RadioGroupSlots } from '../../src/runtime/components/RadioGroup.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/radio-group'
 import { flushPromises, mount } from '@vue/test-utils'

test/components/Select.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
-import Select, { type SelectProps, type SelectSlots } from '../../src/runtime/components/Select.vue'
+import Select from '../../src/runtime/components/Select.vue'
+import type { SelectProps, SelectSlots } from '../../src/runtime/components/Select.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'

test/components/SelectMenu.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import SelectMenu, { type SelectMenuProps, type SelectMenuSlots } from '../../src/runtime/components/SelectMenu.vue'
+import SelectMenu from '../../src/runtime/components/SelectMenu.vue'
+import type { SelectMenuProps, SelectMenuSlots } from '../../src/runtime/components/SelectMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'

test/components/Separator.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Separator, { type SeparatorProps, type SeparatorSlots } from '../../src/runtime/components/Separator.vue'
+import Separator from '../../src/runtime/components/Separator.vue'
+import type { SeparatorProps, SeparatorSlots } from '../../src/runtime/components/Separator.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/separator'
 

test/components/Skeleton.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Skeleton, { type SkeletonProps } from '../../src/runtime/components/Skeleton.vue'
+import Skeleton from '../../src/runtime/components/Skeleton.vue'
+import type { SkeletonProps } from '../../src/runtime/components/Skeleton.vue'
 import ComponentRender from '../component-render'
 
 describe('Skeleton', () => {

test/components/Slideover.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Slideover, { type SlideoverProps, type SlideoverSlots } from '../../src/runtime/components/Slideover.vue'
+import Slideover from '../../src/runtime/components/Slideover.vue'
+import type { SlideoverProps, SlideoverSlots } from '../../src/runtime/components/Slideover.vue'
 import ComponentRender from '../component-render'
 
 describe('Slideover', () => {

test/components/Slider.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import Slider, { type SliderProps } from '../../src/runtime/components/Slider.vue'
+import Slider from '../../src/runtime/components/Slider.vue'
+import type { SliderProps } from '../../src/runtime/components/Slider.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/slider'
 import { flushPromises, mount } from '@vue/test-utils'

test/components/Stepper.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Stepper, { type StepperProps, type StepperSlots } from '../../src/runtime/components/Stepper.vue'
+import Stepper from '../../src/runtime/components/Stepper.vue'
+import type { StepperProps, StepperSlots } from '../../src/runtime/components/Stepper.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/stepper'
 

test/components/Switch.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import Switch, { type SwitchProps, type SwitchSlots } from '../../src/runtime/components/Switch.vue'
+import Switch from '../../src/runtime/components/Switch.vue'
+import type { SwitchProps, SwitchSlots } from '../../src/runtime/components/Switch.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/switch'
 import { flushPromises, mount } from '@vue/test-utils'

test/components/Table.spec.ts

@@ -3,7 +3,8 @@ import { describe, it, expect } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { UCheckbox, UButton, UBadge, UDropdownMenu } from '#components'
-import Table, { type TableProps, type TableSlots, type TableColumn } from '../../src/runtime/components/Table.vue'
+import Table from '../../src/runtime/components/Table.vue'
+import type { TableProps, TableSlots, TableColumn, TableRow } from '../../src/runtime/components/Table.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/table'
 
@@ -98,6 +99,16 @@ describe('Table', () => {
   }, {
     accessorKey: 'amount',
     header: () => h('div', { class: 'text-right' }, 'Amount'),
+    footer: ({ column }) => {
+      const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<typeof data[number]>) => acc + Number.parseFloat(row.getValue('amount')), 0)
+
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'EUR'
+      }).format(total)
+
+      return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
+    },
     cell: ({ row }) => {
       const amount = Number.parseFloat(row.getValue('amount'))
 

test/components/Tabs.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Tabs, { type TabsProps, type TabsSlots } from '../../src/runtime/components/Tabs.vue'
+import Tabs from '../../src/runtime/components/Tabs.vue'
+import type { TabsProps, TabsSlots } from '../../src/runtime/components/Tabs.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/tabs'
 

test/components/Textarea.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Textarea, { type TextareaProps, type TextareaSlots } from '../../src/runtime/components/Textarea.vue'
+import Textarea from '../../src/runtime/components/Textarea.vue'
+import type { TextareaProps, TextareaSlots } from '../../src/runtime/components/Textarea.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/textarea'
 import { renderForm } from '../utils/form'

test/components/Timeline.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import Timeline, { type TimelineProps, type TimelineSlots } from '../../src/runtime/components/Timeline.vue'
+import Timeline from '../../src/runtime/components/Timeline.vue'
+import type { TimelineProps, TimelineSlots } from '../../src/runtime/components/Timeline.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/timeline'
 

test/components/Toast.spec.ts

@@ -1,7 +1,8 @@
 import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import Toaster from '../../src/runtime/components/Toaster.vue'
-import Toast, { type ToastProps, type ToastSlots } from '../../src/runtime/components/Toast.vue'
+import Toast from '../../src/runtime/components/Toast.vue'
+import type { ToastProps, ToastSlots } from '../../src/runtime/components/Toast.vue'
 import ComponentRender from '../component-render'
 import { ClientOnly } from '#components'
 

test/components/Tooltip.spec.ts

@@ -1,7 +1,8 @@
 import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import { TooltipProvider } from 'reka-ui'
-import Tooltip, { type TooltipProps, type TooltipSlots } from '../../src/runtime/components/Tooltip.vue'
+import Tooltip from '../../src/runtime/components/Tooltip.vue'
+import type { TooltipProps, TooltipSlots } from '../../src/runtime/components/Tooltip.vue'
 import ComponentRender from '../component-render'
 
 const TooltipWrapper = defineComponent({

test/components/Tree.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, test } from 'vitest'
-import Tree, { type TreeProps, type TreeSlots, type TreeItem } from '../../src/runtime/components/Tree.vue'
+import Tree from '../../src/runtime/components/Tree.vue'
+import type { TreeProps, TreeSlots, TreeItem } from '../../src/runtime/components/Tree.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/tree'
 import { expectEmitPayloadType } from '../utils/types'

test/components/__snapshots__/Table-vue.spec.ts.snap

@@ -50,6 +50,7 @@ exports[`Table > renders with as correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </section>"
 `;
@@ -104,6 +105,7 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
       </tr>
       <!--v-if-->Body bottom slot
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -157,6 +159,7 @@ exports[`Table > renders with body-top slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -211,6 +214,7 @@ exports[`Table > renders with caption correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -265,6 +269,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -319,6 +324,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -373,6 +379,7 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -564,6 +571,32 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €2,990.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -618,6 +651,7 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -635,6 +669,7 @@ exports[`Table > renders with empty correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -674,6 +709,32 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
       </tr>
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -728,6 +789,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -782,6 +844,7 @@ exports[`Table > renders with header slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -836,6 +899,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -890,6 +954,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -944,6 +1009,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -998,6 +1064,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1052,6 +1119,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1106,6 +1174,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1160,6 +1229,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1214,6 +1284,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1268,6 +1339,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1322,6 +1394,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1376,6 +1449,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1430,6 +1504,7 @@ exports[`Table > renders with loading correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1469,6 +1544,32 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center">Loading slot</td>
       </tr>
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -1523,6 +1624,7 @@ exports[`Table > renders with sticky correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1577,6 +1679,7 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1594,6 +1697,7 @@ exports[`Table > renders without data correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;

test/components/__snapshots__/Table.spec.ts.snap

@@ -50,6 +50,7 @@ exports[`Table > renders with as correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </section>"
 `;
@@ -104,6 +105,7 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
       </tr>
       <!--v-if-->Body bottom slot
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -157,6 +159,7 @@ exports[`Table > renders with body-top slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -211,6 +214,7 @@ exports[`Table > renders with caption correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -265,6 +269,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -319,6 +324,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -373,6 +379,7 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -564,6 +571,32 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €2,990.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -618,6 +651,7 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -635,6 +669,7 @@ exports[`Table > renders with empty correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -674,6 +709,32 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
       </tr>
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -728,6 +789,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -782,6 +844,7 @@ exports[`Table > renders with header slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -836,6 +899,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -890,6 +954,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -944,6 +1009,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -998,6 +1064,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1052,6 +1119,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1106,6 +1174,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1160,6 +1229,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1214,6 +1284,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1268,6 +1339,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1322,6 +1394,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1376,6 +1449,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1430,6 +1504,7 @@ exports[`Table > renders with loading correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1469,6 +1544,32 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center">Loading slot</td>
       </tr>
     </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
   </table>
 </div>"
 `;
@@ -1523,6 +1624,7 @@ exports[`Table > renders with sticky correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1577,6 +1679,7 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1594,6 +1697,7 @@ exports[`Table > renders without data correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;