⚠️ refactor (form): refactor label component for improved styling and responsiveness

app/components/pub/ui/toast/Toast.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastRootEmits } from 'radix-vue'
 import type { ToastProps } from '.'
-import { cn } from '@/lib/utils'
 import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { toastVariants } from '.'
 
 const props = defineProps<ToastProps>()

app/components/pub/ui/toast/ToastAction.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastActionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastAction } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/toast/ToastClose.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ToastCloseProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
 import { ToastClose } from 'radix-vue'
+
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes['class']

app/components/pub/ui/toast/ToastDescription.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastDescription } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/toast/ToastTitle.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastTitle } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/toast/ToastViewport.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ToastViewportProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ToastViewport } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/toast/use-toast.ts

@@ -5,10 +5,10 @@ import { computed, ref } from 'vue'
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
-export type StringOrVNode =
-  | string
-  | VNode
-  | (() => VNode)
+export type StringOrVNode
+  = | string
+    | VNode
+    | (() => VNode)
 
 type ToasterToast = ToastProps & {
   id: string
@@ -33,8 +33,8 @@ function genId() {
 
 type ActionType = typeof actionTypes
 
-type Action =
-  | {
+type Action
+  = | {
     type: ActionType['ADD_TOAST']
     toast: ToasterToast
   }
@@ -59,7 +59,7 @@ const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
   if (toastTimeouts.has(toastId))
-    return
+  { return }
 
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
@@ -113,9 +113,9 @@ function dispatch(action: Action) {
 
     case actionTypes.REMOVE_TOAST:
       if (action.toastId === undefined)
-        state.value.toasts = []
+      { state.value.toasts = [] }
       else
-        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+      { state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId) }
 
       break
   }
@@ -150,7 +150,7 @@ function toast(props: Toast) {
       open: true,
       onOpenChange: (open: boolean) => {
         if (!open)
-          dismiss()
+        { dismiss() }
       },
     },
   })