@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/message-toast/MessageToast.vue

@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { getUiVintageRuntimeMessage } from "../../lib/i18n";
-import { Button } from "../ui/button";
-import { closeMessageToast, messageToastState } from "./message-toast-state";
+import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed } from 'vue';
+import { getUiVintageRuntimeMessage } from '../../lib/i18n';
+import { Button } from '../ui/button';
+import { closeMessageToast, messageToastState } from './message-toast-state';
 
 // Current toast data
 const currentToast = computed(() => messageToastState.current);
 
 // Localized dismiss label resolved from bundled library messages
-const closeAriaLabel = computed(() => getUiVintageRuntimeMessage("uiVintage.buttons.close", "Close"));
+const closeAriaLabel = computed(() => getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close'));
 
 // Determine toast type for styling and icon selection
-const toastType = computed(() => currentToast.value?.type ?? "success");
+const toastType = computed(() => currentToast.value?.type ?? 'success');
 
 // Resolved icon based on toast type
 const toastIcon = computed(() => {
-    if (toastType.value === "success") return CheckmarkCircle02Icon;
+    if (toastType.value === 'success') return CheckmarkCircle02Icon;
     return toastType.value === "info" ? InformationCircleIcon : AlertCircleIcon;
 });
 
 // Resolved icon color classes based on toast type
 const toastIconClasses = computed(() => {
-    if (toastType.value === "error") return "text-red-600 dark:text-red-400";
-    if (toastType.value === "warning") return "text-amber-600 dark:text-amber-400";
-    if (toastType.value === "info") return "text-blue-600 dark:text-blue-400";
-    return "text-green-600 dark:text-green-400";
+    if (toastType.value === 'error') return 'text-red-600 dark:text-red-400';
+    if (toastType.value === 'warning') return 'text-amber-600 dark:text-amber-400';
+    if (toastType.value === 'info') return 'text-blue-600 dark:text-blue-400';
+    return 'text-green-600 dark:text-green-400';
 });
 
 // Resolved aria-live politeness based on toast type
 const toastAriaLive = computed(() => {
-    if (toastType.value === "error" || toastType.value === "warning") return "assertive";
-    return "polite";
+    if (toastType.value === 'error' || toastType.value === 'warning') return 'assertive';
+    return 'polite';
 });
 </script>
 
 <template>
     <Transition name="toast">
-        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-[60] rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-[350px] sm:min-w-[250px]" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
+        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-60 rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-87.5 sm:min-w-62.5" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
             <div class="flex items-center gap-4">
                 <!-- Leading type icon -->
                 <HugeiconsIcon :icon="toastIcon" class="size-5" :class="toastIconClasses" />

package/src/components/message-toast/index.ts

@@ -1,9 +1,2 @@
-export {
-    closeMessageToast,
-    messageToastState,
-    showMessageToast
-} from "./message-toast-state";
-export type {
-    MessageToastType,
-    ShowMessageToastOptions
-} from "./message-toast-state";
+export { closeMessageToast, messageToastState, showMessageToast } from './message-toast-state';
+export type { MessageToastType, ShowMessageToastOptions } from './message-toast-state';

package/src/components/message-toast/message-toast-state.ts

@@ -1,6 +1,6 @@
-import { h, reactive, render } from "vue";
+import { h, reactive, render } from 'vue';
 
-export type MessageToastType = "success" | "info" | "warning" | "error";
+export type MessageToastType = 'success' | 'info' | 'warning' | 'error';
 
 export interface ShowMessageToastOptions {
     message: string;
@@ -20,7 +20,7 @@ interface MessageToastState {
 
 const TOAST_CLOSE_DURATION_MS = 300;
 const DEFAULT_TOAST_DURATION_MS = 5000;
-const MESSAGE_TOAST_ROOT_ID = "ui-vintage-message-toast-root";
+const MESSAGE_TOAST_ROOT_ID = 'ui-vintage-message-toast-root';
 
 let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 let clearTimer: ReturnType<typeof setTimeout> | null = null;
@@ -37,7 +37,7 @@ export const messageToastState: MessageToastState = reactive({
 // Mount the toast once on demand
 const ensureMessageToastMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -55,7 +55,7 @@ const ensureMessageToastMounted = () => {
     // Start the lazy mount
     messageToastMountPromise = (async () => {
         // Load the component only when needed
-        const { default: MessageToast } = await import("./MessageToast.vue");
+        const { default: MessageToast } = await import('./MessageToast.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
@@ -63,7 +63,7 @@ const ensureMessageToastMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = MESSAGE_TOAST_ROOT_ID;
         document.body.appendChild(container);
         render(h(MessageToast), container);
@@ -90,7 +90,7 @@ const clearMessageToastTimers = () => {
     }
 
     // Clear any pending open frame from a previous toast
-    if (openFrame !== null && typeof cancelAnimationFrame !== "undefined") {
+    if (openFrame !== null && typeof cancelAnimationFrame !== 'undefined') {
         cancelAnimationFrame(openFrame);
         openFrame = null;
     }
@@ -132,14 +132,14 @@ export const showMessageToast = (options: ShowMessageToastOptions) => {
     // Update the toast state while keeping the shell closed until the renderer is mounted
     messageToastState.current = {
         message: options.message,
-        type: options.type ?? "success"
+        type: options.type ?? 'success'
     };
     messageToastState.isOpen = false;
 
     // Mount first so the initial visible transition can run after the component exists
     void ensureMessageToastMounted().then(() => {
         // Guard against a toast change during the async mount
-        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === "undefined") {
+        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === 'undefined') {
             return;
         }
 

package/src/components/page-header/PageHeader.vue

@@ -2,10 +2,13 @@
 import { Comment, Text, computed, useSlots, type VNode } from 'vue';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    headingLevel: { type: Number, default: 1 },
-    size: { type: String, default: 'large', validator: (value: unknown) => ['small', 'medium', 'large'].includes(String(value)) }
+const props = withDefaults(defineProps<{
+    title: string;
+    headingLevel?: number;
+    size?: 'small' | 'medium' | 'large';
+}>(), {
+    headingLevel: 1,
+    size: 'large'
 });
 
 const slots = useSlots();
@@ -24,7 +27,7 @@ const hasSlotContent = computed(() => {
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]';
+    const baseClasses = 'font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)';
 
     // Return classes based on size
     switch (size) {

package/src/components/progress-component/ProgressComponent.vue

@@ -2,12 +2,15 @@
 import { Progress } from '../ui/progress';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    bottomLeftLabel: { type: String, default: '' },
-    bottomRightLabel: { type: String, default: '' },
-    value: { type: Number, required: true },
-    max: { type: Number, required: true }
+const props = withDefaults(defineProps<{
+    title: string;
+    bottomLeftLabel?: string;
+    bottomRightLabel?: string;
+    value: number;
+    max: number;
+}>(), {
+    bottomLeftLabel: '',
+    bottomRightLabel: ''
 });
 </script>
 
@@ -16,12 +19,12 @@ const props = defineProps({
         <!-- Header with icon and label -->
         <div class="flex items-center justify-between">
             <!-- Title of the progress bar -->
-            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                 {{ props.title }}
             </span>
 
             <!-- Current value / max -->
-            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                 {{ props.value }} / {{ props.max }}
             </span>
         </div>
@@ -32,12 +35,12 @@ const props = defineProps({
         <!-- Bottom labels -->
         <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
             <!-- Bottom left label -->
-            <span v-if="props.bottomLeftLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+            <span v-if="props.bottomLeftLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                 {{ props.bottomLeftLabel }}
             </span>
 
             <!-- Bottom right label -->
-            <span v-if="props.bottomRightLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+            <span v-if="props.bottomRightLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                 {{ props.bottomRightLabel }}
             </span>
         </div>

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { Card, CardContent } from "../ui/card";
+import { computed } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    value: { type: [String, Number], required: true },
-    label: { type: String, required: true },
-    icon: { type: Object, required: true },
-    valueColor: { type: String, default: "default", validator: (value: unknown) => ["default", "green", "red", "gray"].includes(String(value)) }
+const props = withDefaults(defineProps<{
+    value: string | number;
+    label: string;
+    icon: HugeiconsIconDefinition;
+    valueColor?: 'default' | 'green' | 'red' | 'gray';
+}>(), {
+    valueColor: 'default'
 });
 
 // Value classes
 const valueClass = computed(() => {
     switch (props.valueColor) {
-        case "green":
-            return "text-green-600 dark:text-green-400";
-        case "red":
-            return "text-red-600 dark:text-red-400";
-        case "gray":
-            return "text-gray-600 dark:text-gray-400";
+        case 'green':
+            return 'text-green-600 dark:text-green-400';
+        case 'red':
+            return 'text-red-600 dark:text-red-400';
+        case 'gray':
+            return 'text-gray-600 dark:text-gray-400';
         default:
-            return "text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]";
+            return 'text-(--text-primary-light) dark:text-(--text-primary-dark)';
     }
 });
 </script>
 
 <template>
-    <Card class="flex-row items-center !p-4">
-        <CardContent class="!p-0 gap-0 flex-row items-center">
+    <Card class="flex-row items-center p-4!">
+        <CardContent class="flex-row items-center gap-0 p-0!">
             <!-- Icon -->
-            <Card color="gray" class="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0">
+            <Card color="gray" class="mr-4 flex h-12 w-12 shrink-0 items-center justify-center p-0!">
                 <HugeiconsIcon :icon="props.icon" class="size-5" />
             </Card>
 
             <!-- Content -->
             <div class="flex flex-col">
                 <!-- Label -->
-                <span class="mb-1 text-xs font-semibold text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                <span class="mb-1 text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                     {{ props.label }}
                 </span>
 

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { Card } from "../ui/card";
-import { Slider } from "../ui/slider";
+import { computed } from 'vue';
+import { Card } from '../ui/card';
+import { Slider } from '../ui/slider';
 
-interface SliderFormComponentProps {
+// Props
+const props = withDefaults(defineProps<{
     id?: string;
     label: string;
     description?: string;
@@ -12,21 +13,18 @@ interface SliderFormComponentProps {
     max?: number;
     step?: number;
     valueText?: string;
-}
-
-// Props
-const props = withDefaults(defineProps<SliderFormComponentProps>(), {
+}>(), {
     id: undefined,
-    description: "",
+    description: '',
     min: 0,
     max: 100,
     step: 1,
-    valueText: ""
+    valueText: ''
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: "update:modelValue", value: number): void;
+    (e: 'update:modelValue', value: number): void;
 }>();
 
 const sliderValue = computed(() => [props.modelValue]);
@@ -34,7 +32,7 @@ const resolvedValueText = computed(() => props.valueText || String(props.modelVa
 
 // Emit the first slider value back to the parent
 const handleUpdateModelValue = (value?: number[]) => {
-    emits("update:modelValue", value?.[0] ?? props.min);
+    emits('update:modelValue', value?.[0] ?? props.min);
 };
 </script>
 
@@ -59,13 +57,6 @@ const handleUpdateModelValue = (value?: number[]) => {
         </div>
 
         <!-- Slider control -->
-        <Slider
-            :id="props.id"
-            :model-value="sliderValue"
-            :min="props.min"
-            :max="props.max"
-            :step="props.step"
-            @update:model-value="handleUpdateModelValue"
-        />
+        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" @update:model-value="handleUpdateModelValue" />
     </Card>
 </template>

package/src/components/slider-form-component/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./SliderFormComponent.vue";
-export { default as SliderFormComponent } from "./SliderFormComponent.vue";
+export { default } from './SliderFormComponent.vue';
+export { default as SliderFormComponent } from './SliderFormComponent.vue';

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { Card } from "../ui/card";
-import { Switch } from "../ui/switch";
+import { Card } from '../ui/card';
+import { Switch } from '../ui/switch';
 
-interface SwitchFormComponentProps {
+// Props
+const props = defineProps<{
     id: string;
     label: string;
     description: string;
     modelValue: boolean;
-}
-
-// Props
-const props = defineProps<SwitchFormComponentProps>();
+}>();
 
 // Emits
 const emits = defineEmits<{
-    (e: "update:modelValue", value: boolean): void;
+    (e: 'update:modelValue', value: boolean): void;
 }>();
 </script>
 
 <template>
-    <Card class="flex flex-col gap-2 sm:!gap-3 px-4 py-3">
+    <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
         <!-- Switch label and control -->
         <div class="flex items-center justify-between gap-4">
             <!-- Switch label -->

package/src/components/switch-form-component/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./SwitchFormComponent.vue";
-export { default as SwitchFormComponent } from "./SwitchFormComponent.vue";
+export { default } from './SwitchFormComponent.vue';
+export { default as SwitchFormComponent } from './SwitchFormComponent.vue';

package/src/components/text-link/TextLink.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import type { Component, PropType } from 'vue';
+import type { Component } from 'vue';
 
 // Props
-const props = defineProps({
-    to: { type: String, required: true },
-    text: { type: String, required: true },
-    linkComponent: { type: [String, Object] as PropType<Component | string>, default: 'a' }
+const props = withDefaults(defineProps<{
+    to: string;
+    text: string;
+    linkComponent?: Component | string;
+}>(), {
+    linkComponent: 'a'
 });
 
 // Emits
-const emits = defineEmits(['click']);
+const emits = defineEmits<{
+    click: [event: MouseEvent];
+}>();
 
 // Get link props based on the type of link component
 const getLinkProps = () => {
@@ -27,7 +31,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-[var(--text-primary-light)] hover:underline dark:text-[var(--text-primary-dark)]" @click="handleClick">
+    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-(--text-primary-light) hover:underline dark:text-(--text-primary-dark)" @click="handleClick">
         {{ props.text }}
     </component>
 </template>

package/src/components/ui/accordion/Accordion.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { ref } from "vue";
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { Card, CardContent } from "@brumaombra/ui-vintage/card";
+import type { HTMLAttributes } from 'vue';
+import { ref } from 'vue';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '@brumaombra/ui-vintage/card';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
-
-interface AccordionProps {
+// Props
+const props = withDefaults(defineProps<{
     title: string;
     initiallyExpanded?: boolean;
     icon?: HugeiconsIconDefinition | null;
-    iconClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<AccordionProps>(), {
+    iconClass?: HTMLAttributes['class'];
+}>(), {
     initiallyExpanded: false
 });
 

package/src/components/ui/accordion/index.ts

@@ -1 +1 @@
-export { default as Accordion } from "./Accordion.vue"
+export { default as Accordion } from './Accordion.vue';

package/src/components/ui/alert/Alert.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { getSurfaceToneClasses } from "../../../lib/color-tokens"
-import { cn } from "../../../lib/utils"
-import { alertClasses, type AlertColors } from "."
+import type { HTMLAttributes } from 'vue';
+import { getSurfaceToneClasses } from '../../../lib/color-tokens';
+import { cn } from '../../../lib/utils';
+import { alertClasses, type AlertColors } from '.';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  color?: AlertColors["color"]
-}>()
+    class?: HTMLAttributes['class'];
+    color?: AlertColors['color'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
-    <slot />
-  </div>
+    <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
+        <slot />
+    </div>
 </template>

package/src/components/ui/alert/AlertDescription.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert/index.ts

@@ -1,15 +1,15 @@
-import type { ClassProp } from "class-variance-authority/types"
-import { cva } from "class-variance-authority"
-import type { ToneColor } from "../../../lib/color-tokens"
+import type { ClassProp } from 'class-variance-authority/types';
+import { cva } from 'class-variance-authority';
+import type { ToneColor } from '../../../lib/color-tokens';
 
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
 
 export type AlertColors = {
-  color?: ToneColor | null | undefined
-}
+    color?: ToneColor | null | undefined;
+};
 
 export const alertClasses: (props?: ClassProp) => string = cva(
-  "relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm",
-)
+    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
+);

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
+// Props
+const props = defineProps<AlertDialogProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<AlertDialogEmits>();
+
+// Forward props and emits
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
-</template>
+    <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </AlertDialogRoot>
+</template>