chore: update components & deps

Author: BayBreezy

app/components/Ui/Accordion/Content.vue

@@ -1,8 +1,5 @@
 <template>
-  <AccordionContent
-    v-bind="reactiveOmit(props, 'content', 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionContent v-bind="forwarded" :class="styles({ class: props.class })">
     <div class="pb-4 pt-0">
       <slot>{{ content }}</slot>
     </div>
@@ -15,11 +12,15 @@
 
   const props = defineProps<
     AccordionContentProps & {
+      /** Custom class(es) to add to the parent */
       class?: any;
+      /** The content of the accordion */
       content?: any;
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class", "content");
+
   const styles = tv({
     base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
   });

app/components/Ui/Accordion/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <AccordionHeader v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
+  <AccordionHeader v-bind="forwarded" :class="styles({ class: props.class })">
     <slot />
   </AccordionHeader>
 </template>
@@ -14,6 +14,8 @@
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "flex",
   });

app/components/Ui/Accordion/Item.vue

@@ -1,9 +1,5 @@
 <template>
-  <AccordionItem
-    v-slot="slotProps"
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionItem v-slot="slotProps" v-bind="forwarded" :class="styles({ class: props.class })">
     <slot v-bind="slotProps" />
   </AccordionItem>
 </template>
@@ -14,10 +10,13 @@
 
   const props = defineProps<
     AccordionItemProps & {
+      /** Custom class(es) to add to the parent */
       class?: any;
     }
   >();
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "border-b",
   });

app/components/Ui/Accordion/Trigger.vue

@@ -1,8 +1,5 @@
 <template>
-  <AccordionTrigger
-    v-bind="reactiveOmit(props, 'class', 'icon', 'title')"
-    :class="styles({ class: props.class })"
-  >
+  <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">
     <slot :props="props">
       {{ title }}
     </slot>
@@ -19,8 +16,11 @@
   const props = withDefaults(
     defineProps<
       AccordionTriggerProps & {
+        /** Custom class(es) to add to the parent */
         class?: any;
+        /** The title of the accordion trigger */
         title?: string;
+        /** The icon to show next to the title */
         icon?: string;
       }
     >(),
@@ -31,6 +31,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class", "icon", "title");
+
   const styles = tv({
     base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",
   });

app/components/Ui/Avatar/Fallback.vue

@@ -1,8 +1,5 @@
 <template>
-  <AvatarFallback
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'fallback')"
-  >
+  <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">
     <slot>
       {{ fallback }}
     </slot>
@@ -21,6 +18,7 @@
       class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class", "fallback");
   const styles = tv({
     base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
   });

app/components/Ui/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,6 +19,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class");
+
   const styles = tv({
     base: "container mx-auto",
   });

app/components/Ui/DropdownMenu/Arrow.vue

@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuArrow
-    v-bind="reactiveOmit(props, 'class')"
-    :class="styles({ class: props.class })"
-  />
+  <DropdownMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>
@@ -22,7 +19,7 @@
       height: 5,
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "rotate-45 border bg-muted",
   });

app/components/Ui/DropdownMenu/ItemIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <DropdownMenuItemIndicator v-bind="reactiveOmit(props, 'icon')">
+  <DropdownMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
     </slot>
@@ -12,7 +12,15 @@
 
   const props = defineProps<
     DropdownMenuItemIndicatorProps & {
+      /** The icon to display */
       icon?: string;
+      /** Custom class(es) to add to the parent */
+      class?: any;
     }
   >();
+  const forwarded = reactiveOmit(props, "class", "icon");
+
+  const styles = tv({
+    base: "flex items-center justify-center",
+  });
 </script>

app/components/Ui/DropdownMenu/Label.vue

@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuLabel
-    :class="styles({ inset, class: props.class })"
-    v-bind="reactiveOmit(props, 'class', 'inset', 'label')"
-  >
+  <DropdownMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">
     <slot>{{ label }}</slot>
   </DropdownMenuLabel>
 </template>
@@ -18,7 +15,7 @@
       label?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "label");
   const styles = tv({
     base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
     variants: {

app/components/Ui/DropdownMenu/Separator.vue

@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuSeparator
-    :class="styles({ class: props.class })"
-    v-bind="reactiveOmit(props, 'class')"
-  />
+  <DropdownMenuSeparator :class="styles({ class: props.class })" v-bind="forwarded" />
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +12,7 @@
       class?: any;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "-mx-1 my-1 h-px bg-border",
   });

app/components/Ui/DropdownMenu/Shortcut.vue

@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -19,7 +19,7 @@
       as: "span",
     }
   );
-
+  const forwarded = reactiveOmit(props, "class");
   const styles = tv({
     base: "ml-auto text-xs tracking-widest opacity-60",
   });

app/components/Ui/DropdownMenu/SubTrigger.vue

@@ -1,8 +1,5 @@
 <template>
-  <DropdownMenuSubTrigger
-    v-bind="reactiveOmit(props, 'class', 'inset', 'icon', 'title', 'trailingIcon')"
-    :class="styles({ inset, class: props.class })"
-  >
+  <DropdownMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">
     <slot>
       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
       <span v-if="title">{{ title }}</span>
@@ -32,7 +29,7 @@
       trailingIcon?: string;
     }
   >();
-
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");
   const styles = tv({
     base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
     variants: {

app/components/Ui/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">
+  <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -11,7 +11,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
+        /** Custom class(es) to add to the parent */
         class?: any;
+        /** Whether the navbar should be sticky */
         sticky?: boolean;
       }
     >(),
@@ -20,6 +22,8 @@
     }
   );
 
+  const forwarded = reactiveOmit(props, "class", "sticky");
+
   const styles = tv({
     base: "z-20 border-b bg-background/90 backdrop-blur",
     variants: {

nuxt.config.ts

@@ -182,4 +182,4 @@ export default defineNuxtConfig({
     autoLastmod: true,
     autoI18n: true,
   },
-});
+});