daisy-ui-kit 5.0.0-pre.9 → 5.0.1

package/README.md

@@ -1,75 +1,304 @@
-# Nuxt Minimal Starter
+# @daisyuikit/nuxt
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Vue/Nuxt components for DaisyUI 5.
 
-## Setup
-
-Make sure to install dependencies:
+## Install
 
 ```bash
-# npm
-npm install
+pnpm add @daisyuikit/nuxt daisyui @vueuse/core
+```
 
-# pnpm
-pnpm install
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@daisyuikit/nuxt'],
+})
+```
 
-# yarn
-yarn install
+## Component API Reference
 
-# bun
-bun install
 ```
+Accordion
+  Accordion: props(modelValue:string|number) slots(default) events(update:modelValue)
+  Collapse: props(variant:string, arrow:boolean, plus:boolean, open:boolean, close:boolean, toggle:boolean, value:any) slots(default)
+  CollapseTitle: slots(default)
+  CollapseContent: slots(default)
 
-## Development Server
+Alert
+  Alert: props(outline:boolean, dash:boolean, soft:boolean, type:string, info:boolean, success:boolean, warning:boolean, error:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)
 
-Start the development server on `http://localhost:3000`:
+Avatar
+  Avatar: props(presence:string, online:boolean, offline:boolean, backgroundColor:string, maskClasses:string, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star2:boolean, triangle:boolean, triangle2:boolean, triangle3:boolean, triangle4:boolean, half1:boolean, half2:boolean) slots(default)
+  AvatarGroup: props(orientation:string, horizontal:boolean, vertical:boolean) slots(default)
 
-```bash
-# npm
-npm run dev
+Badge
+  Badge: props(ghost:boolean, outline:boolean, dash:boolean, soft:boolean, invert:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
 
-# pnpm
-pnpm dev
+Breadcrumbs
+  Breadcrumbs: slots(default)
+  Crumb: slots(default)
 
-# yarn
-yarn dev
+Button
+  Button: props(is:string, type:string, join:boolean, ghost:boolean, link:boolean, glass:boolean, outline:boolean, dash:boolean, soft:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, active:boolean, disabled:boolean, noAnimation:boolean, shape:string, circle:boolean, square:boolean, wide:boolean, block:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
 
-# bun
-bun run dev
-```
+Calendar
+  Calendar: props(modelValue:Date|string|null, options:CalendarOptions, ariaLabel:string, format:string, formatStrict:boolean, toString:function, parse:function, defaultDate:Date, setDefaultDate:boolean, firstDay:number, minDate:Date, maxDate:Date, disableWeekends:boolean, disableDayFn:function, yearRange:number|[number,number], showWeekNumber:boolean, pickWholeWeek:boolean, isRTL:boolean, i18n:object, yearSuffix:string, showMonthAfterYear:boolean, showDaysInNextAndPreviousMonths:boolean, enableSelectionDaysInNextAndPreviousMonths:boolean, numberOfMonths:number, events:array, autoDefault:boolean) slots(default) events(update:modelValue, update:inputValue)
+  CalendarInput: props(modelValue:Date|string|number|null, options:CalendarOptions, bound:boolean, position:string, reposition:boolean, autoDefault:boolean, placeholder:string, disabled:boolean, validator:boolean, join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:modelValue, update:inputValue)
+  CalendarSkeleton: props(numberOfMonths:number, date:Date, firstDay:number)
 
-## Production
+Card
+  Card: props(is:string|object|function, border:boolean, dash:boolean, side:boolean, imageFull:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
+  CardBody: props(is:string) slots(default)
+  CardTitle: props(is:string) slots(default)
+  CardActions: props(is:string) slots(default)
 
-Build the application for production:
+Carousel
+  Carousel: props(snapTo:string, center:boolean, end:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)
+  CarouselItem: slots(default)
 
-```bash
-# npm
-npm run build
+Chat
+  Chat: props(pre:boolean, align:string, start:boolean, end:boolean) slots(default)
+  ChatBubble: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
+  ChatImage: slots(default)
+  ChatHeader: slots(default)
+  ChatFooter: slots(default)
 
-# pnpm
-pnpm build
+Checkbox
+  Checkbox: props(modelValue:any, theme-controller:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:modelValue)
 
-# yarn
-yarn build
+Countdown
+  Countdown: props(is:string|Component) slots(default)
+  Counter: props(value:number, is:string|Component, digits:2|3)
+  CountdownTimers: props(duration-in-seconds:number, until-date:Date) slots(default) events(done)
 
-# bun
-bun run build
-```
+Diff
+  Diff: slots(one, two)
 
-Locally preview production build:
+Divider
+  Divider: props(orientation:string, horizontal:boolean, vertical:boolean, align:string, center:boolean, start:boolean, end:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean) slots(default)
 
-```bash
-# npm
-npm run preview
+Dock
+  Dock: props(size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)
+  DockItem: props(active:boolean) slots(default)
+  DockLabel: slots(default)
+
+Drawer
+  Drawer: props(open:boolean, name:string, end:boolean) slots(default) events(update:open)
+  DrawerContent: props(name:string) slots(default)
+  DrawerSide: props(name:string) slots(default)
+
+Dropdown
+  Dropdown: props(open:boolean, placement:string, auto-focus:boolean, hover:boolean, delay-enter:number, delay-leave:number, close-on-click-outside:boolean) slots(default) events(update:open)
+  DropdownButton: slots(default)
+  DropdownTarget: slots(default)
+  DropdownContent: slots(default)
+
+Fab
+  Fab: props(flower:boolean) slots(default)
+  FabTrigger: slots(default)
+  FabClose: slots(default)
+  FabMainAction: slots(default)
+
+Fieldset
+  Fieldset: props(is:string, legend:string) slots(default, legend)
+
+FileInput
+  FileInput: props(join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, disabled:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(files)
+
+Filter
+  Filter: props(is:string, name:string, items:array, modelValue:any, resetLabel:string, position:string, start:boolean, end:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:modelValue)
+
+Flex
+  Flex: props(is:string|object, join:boolean, flex:boolean, flex1:boolean, flexAuto:boolean, flexInitial:boolean, none:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrapReverse:boolean, grow:boolean, justify:string, justifyStart:boolean, justifyEnd:boolean, justifyCenter:boolean, justifyBetween:boolean, justifyAround:boolean, justifyEvenly:boolean, items:string, itemsStart:boolean, itemsEnd:boolean, itemsCenter:boolean, itemsBaseline:boolean, itemsStretch:boolean) slots(default)
+  FlexItem: props(is:any, join:boolean, flex:boolean, flex1:boolean, flexAuto:boolean, flexInitial:boolean, none:boolean, grow:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrapReverse:boolean) slots(default)
+
+Footer
+  Footer: props(center:boolean, is:string, orientation:string, horizontal:boolean, vertical:boolean) slots(default)
+  FooterTitle: props(is:string) slots(default)
+
+FormControl
+  FormControl: slots(default)
+
+Hero
+  Hero: props(is:string) slots(default)
+  HeroContent: props(is:string) slots(default)
+  HeroOverlay: slots(default)
+
+Hover3D
+  Hover3D: props(is:string|Component, disabled:boolean) slots(default)
+
+HoverGallery
+  HoverGallery: props(is:string|Component) slots(default)
+
+Indicator
+  Indicator: props(is:string) slots(default)
+  IndicatorItem: props(is:string, align:string, start:boolean, center:boolean, end:boolean, vAlign:string, top:boolean, middle:boolean, bottom:boolean) slots(default)
+
+Input
+  Input: props(modelValue:string|number|null, type:string, placeholder:string, disabled:boolean, validator:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, join:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:modelValue)
+
+Join
+  Join: props(vertical:boolean) slots(default)
+
+Kbd
+  Kbd: props(size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
+
+Label
+  Label: props(is:string, floating:boolean, input:boolean, select:boolean, toggle:boolean, join:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
+
+Link
+  Link: props(is:string, hover:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean) slots(default)
+
+List
+  List: slots(default)
+  ListRow: slots(default)
+  ListColGrow: slots(default)
+  ListColWrap: slots(default)
+
+Loading
+  LoadingSpinner: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+  LoadingDots: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+  LoadingRing: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+  LoadingBall: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+  LoadingBars: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+  LoadingInfinity: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
+
+Mask
+  Mask: props(shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star2:boolean, triangle:boolean, triangle2:boolean, triangle3:boolean, triangle4:boolean, half1:boolean, half2:boolean) slots(default)
+
+Menu
+  Menu: props(align:string, vertical:boolean, horizontal:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
+  MenuItem: props(active:boolean, disabled:boolean) slots(default)
+  MenuTitle: slots(default)
+  MenuExpand: props(open:boolean, hover:boolean, delay-enter:number, delay-leave:number, close-on-click-outside:boolean) slots(default) events(update:open)
+  MenuExpandToggle: slots(default)
 
-# pnpm
-pnpm preview
+Modal
+  Modal: props(model-value:boolean, close-on-click-outside:boolean, placement:string, top:boolean, bottom:boolean, start:boolean, end:boolean) slots(default)
+  ModalBox: slots(default)
+  ModalAction: slots(default)
 
-# yarn
-yarn preview
+MockupBrowser
+  MockupBrowser: slots(default)
+  MockupBrowserToolbar: slots(default)
 
-# bun
-bun run preview
+MockupCode
+  MockupCode: slots(default)
+
+MockupPhone
+  MockupPhone: slots(default)
+
+MockupWindow
+  MockupWindow: slots(default)
+
+Navbar
+  Navbar: props(is:any, glass:boolean) slots(default)
+  NavbarStart: props(is:any) slots(default)
+  NavbarCenter: props(is:any) slots(default)
+  NavbarEnd: props(is:any) slots(default)
+  NavButton: props(active:boolean, disabled:boolean) slots(default)
+
+Pagination
+  Pagination: props(modelValue:number, total:number, perPage:number, maxVisible:number, join:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:modelValue)
+
+Progress
+  Progress: props(value:number, max:number, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean)
+
+Prose
+  Prose: props(class:string) slots(default)
+
+RadialProgress
+  RadialProgress: props(value:number|string, size:string, thickness:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
+
+Radio
+  Radio: props(modelValue:any, value:any, disabled:boolean, themeController:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:modelValue)
+  RadioGroup: props(modelValue:any, name:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:modelValue)
+
+Range
+  Range: props(modelValue:number|string, min:number|string, max:number|string, step:number|string, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:modelValue)
+  RangeMeasure: props(modelValue:number|string, min:number|string, max:number|string, step:number|string, numbered:boolean, asButtons:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:modelValue)
+  RangeMeasureTick: props(tick:number, modelValue:number|string, numbered:boolean, asButton:boolean, isHidden:boolean, disabled:boolean) slots(default) events(update:modelValue)
+
+Rating
+  Rating: props(modelValue:number|string, count:number|string, half:boolean, disabled:boolean, bg:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star2:boolean, triangle:boolean, triangle2:boolean, triangle3:boolean, triangle4:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:modelValue)
+
+Select
+  Select: props(modelValue:any, options:Array, value:function, label:function, resultAsObject:boolean, join:boolean, ghost:boolean, disabled:boolean, native:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:modelValue)
+
+Skeleton
+  Skeleton: slots(default)
+  SkeletonText: props(is:string|Component) slots(default)
+
+Stack
+  Stack: props(is:string) slots(default)
+
+Stat
+  Stats: slots(default)
+  Stat: props(orientation:string, vertical:boolean, horizontal:boolean) slots(default)
+  StatTitle: slots(default)
+  StatValue: slots(default)
+  StatDesc: slots(default)
+  StatFigure: slots(default)
+  StatActions: slots(default)
+
+Status
+  Status: props(color:string, neutral:boolean, primary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)
+
+Steps
+  Steps: props(orientation:string, vertical:boolean, horizontal:boolean) slots(default)
+  Step: props(glyph:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
+  StepIcon: slots(default)
+
+Swap
+  Swap: props(modelValue:boolean|null, rotate:boolean, flip:boolean) slots(default, swap, indeterminate)
+
+Table
+  Table: props(zebra:boolean, pinRows:boolean, pinCols:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)
+
+Tabs
+  Tabs: props(name:string, currentTab:string, variant:string, box:boolean, border:boolean, lift:boolean, placement:string, top:boolean, bottom:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:currentTab)
+  Tab: props(is:any, name:string, active:boolean, disabled:boolean) slots(default)
+  TabContent: props(is:any, name:string) slots(default)
+
+Text
+  Text: props(is:string, join:boolean, block:boolean, inline:boolean, inlineBlock:boolean, label:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, neutralContent:boolean, primaryContent:boolean, secondaryContent:boolean, accentContent:boolean, infoContent:boolean, successContent:boolean, warningContent:boolean, errorContent:boolean, size:string, xl:boolean, lg:boolean, sm:boolean, xs:boolean, align:string, left:boolean, center:boolean, right:boolean, justify:boolean, case:string, uppercase:boolean, lowercase:boolean, capitalize:boolean, normalCase:boolean, font:string, sans:boolean, serif:boolean, mono:boolean, weight:string, thin:boolean, extralight:boolean, light:boolean, normal:boolean, medium:boolean, semibold:boolean, bold:boolean, extrabold:boolean, black:boolean) slots(default)
+
+TextArea
+  TextArea: props(modelValue:string, placeholder:string, type:string, rows:number, autoExpand:boolean, ghost:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:modelValue)
+
+TextRotate
+  TextRotate: props(is:string|Component, center:boolean, duration:number) slots(default)
+
+ThemeController
+  ThemeController: props(themes:DaisyThemeInput[], defaultTheme:string, storage:Function) slots(default)
+  ThemeTile: props(theme:string, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean)
+
+ThemeProvider
+  ThemeProvider: props(dataTheme:string, cssVars:string, snoop:boolean) slots(default)
+
+Timeline
+  Timeline: props(vertical:boolean, horizontal:boolean, compact:boolean, snapIcon:boolean, class:string) slots(default)
+  TimelineItem: props(hr:boolean, class:string) slots(start, middle, end, hr-top, hr-bottom)
+  TimelineStart: props(box:boolean, class:string) slots(default)
+  TimelineMiddle: props(class:string) slots(default)
+  TimelineEnd: props(box:boolean, class:string) slots(default)
+  TimelineLine: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean)
+
+Toast
+  Toast: props(hAlign:string, start:boolean, center:boolean, end:boolean, vAlign:string, top:boolean, middle:boolean, bottom:boolean, name:string, defaults:Partial<ToastSettings>, limit:number) slots(default)
+
+Toggle
+  Toggle: props(modelValue:any, disabled:boolean, validator:boolean, theme-controller:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:modelValue)
+
+Tooltip
+  Tooltip: props(tip:string|number, open:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, position:string, top:boolean, right:boolean, bottom:boolean, left:boolean, delayEnter:number, delayLeave:number) slots(default)
+  TooltipTarget: slots(default)
+  TooltipContent: slots(default)
+
+Validator
+  ValidatorHint: slots(default)
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## License
+
+MIT

package/app/components/Accordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -7,10 +7,13 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 
 const value = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  value.value = val
-})
-watch(value, (val) => {
+watch(
+  () => props.modelValue,
+  val => {
+    value.value = val
+  },
+)
+watch(value, val => {
   if (props.modelValue !== val) {
     emit('update:modelValue', val)
   }

package/app/components/Alert.vue

@@ -16,7 +16,8 @@ const props = defineProps<{
 
 <template>
   <div
-    class="alert" :class="{
+    class="alert"
+    :class="{
       'alert-outline': props.outline,
       'alert-dash': props.dash,
       'alert-soft': props.soft,

package/app/components/Avatar.vue

@@ -51,7 +51,7 @@ const maskShapeKeys = [
   'mask-half-2',
 ] as const
 
-type AvatarClassKey = typeof maskShapeKeys[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
+type AvatarClassKey = (typeof maskShapeKeys)[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
 
 const avatarClasses = computed<Record<AvatarClassKey, boolean>>(() => {
   const mask: Record<AvatarClassKey, boolean> = {
@@ -86,18 +86,17 @@ const color = computed(() => {
 })
 
 function contrastingColor(color: any) {
-  return (luma(color) >= 155) ? '000' : 'fff'
+  return luma(color) >= 155 ? '000' : 'fff'
 }
 // color can be a hx string or an array of RGB values 0-255
 function luma(color: any) {
-  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
-  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
+  const rgb = typeof color === 'string' ? hexToRGBArray(color) : color
+  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2] // SMPTE C, Rec. 709 weightings
 }
 function hexToRGBArray(color: any) {
   if (color.length === 3) {
     color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
-  }
-  else if (color.length !== 6) {
+  } else if (color.length !== 6) {
     throw new Error(`Invalid hex color: ${color}`)
   }
   const rgb = []
@@ -110,7 +109,11 @@ function hexToRGBArray(color: any) {
 
 <template>
   <div class="avatar">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[avatarClasses, maskClasses]">
+    <Mask
+      :style="{ backgroundColor, color }"
+      class="w-full h-full avatar-mask aspect-square"
+      :class="[avatarClasses, maskClasses]"
+    >
       <slot />
     </Mask>
   </div>

package/app/components/AvatarGroup.vue

@@ -8,8 +8,12 @@ const props = defineProps<{
 
 <template>
   <div
-    class="avatar-group" :class="{
-      'flex-row': props.orientation === 'horizontal' || props.horizontal || (!props.orientation && !props.vertical && !props.horizontal),
+    class="avatar-group"
+    :class="{
+      'flex-row':
+        props.orientation === 'horizontal' ||
+        props.horizontal ||
+        (!props.orientation && !props.vertical && !props.horizontal),
       'flex-col': props.orientation === 'vertical' || props.vertical,
     }"
   >

package/app/components/Badge.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div', ...props } = defineProps<{
   is?: string
   outline?: boolean
@@ -23,11 +29,23 @@ const { is = 'div', ...props } = defineProps<{
   warning?: boolean
   error?: boolean
 }>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (is === 'NuxtLink') return NuxtLink
+  if (is === 'RouterLink') return RouterLink
+  return is
+})
 </script>
 
 <template>
   <component
-    :is="is" class="badge" :class="{
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    class="badge"
+    :class="{
       'badge-outline': props.outline,
       'badge-ghost': props.ghost,
       'badge-soft': props.soft,

package/app/components/Button.vue

@@ -1,52 +1,71 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string
-  join?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  link?: boolean
-  glass?: boolean
-  outline?: boolean
-  dash?: boolean
-  soft?: boolean
-  disabled?: boolean
-
-  shape?: 'circle' | 'square' | 'wide' | 'block'
-  circle?: boolean
-  square?: boolean
-  wide?: boolean
-  block?: boolean
-
-  noAnimation?: boolean
-  active?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  type?: 'button' | 'submit' | 'reset'
-}>(), {
-  type: 'button',
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
 })
 
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    join?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    link?: boolean
+    glass?: boolean
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+    disabled?: boolean
+
+    shape?: 'circle' | 'square' | 'wide' | 'block'
+    circle?: boolean
+    square?: boolean
+    wide?: boolean
+    block?: boolean
+
+    noAnimation?: boolean
+    active?: boolean
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    type: 'button',
+  },
+)
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
 // Accessibility: Determine if rendering a native button
 const isButton = computed(() => (props.is || 'button') === 'button')
 
+// Resolve the component to render
+const resolvedComponent = computed(() => {
+  if (!props.is || props.is === 'button' || props.is === 'a') {
+    return props.is || 'button'
+  }
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
+})
+
 // Accessibility: Keyboard event handler for custom elements
 function onKeydown(e: KeyboardEvent) {
   if (props.disabled) {
@@ -62,8 +81,9 @@ function onKeydown(e: KeyboardEvent) {
 
 <template>
   <component
-    :is="is || 'button'"
-    :type="type"
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    :type="isButton ? type : undefined"
     :disabled="isButton && disabled ? true : undefined"
     :aria-disabled="!isButton && disabled ? true : undefined"
     :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
@@ -90,7 +110,7 @@ function onKeydown(e: KeyboardEvent) {
       'text-warning': !disabled && (warning || color === 'warning') && link,
       'text-error': !disabled && (error || color === 'error') && link,
 
-      'glass': !disabled && glass,
+      glass: !disabled && glass,
 
       'btn-circle': circle || shape === 'circle',
       'btn-square': square || shape === 'square',