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

app/components/pub/ui/sidebar/Sidebar.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
     side: 'left',
     variant: 'sidebar',
     collapsible: 'offcanvas',
-  }
+  },
 )
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
@@ -68,7 +68,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
             ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
         )
       "
     />
@@ -83,7 +83,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
             : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          props.class
+          props.class,
         )
       "
       v-bind="$attrs"

app/components/pub/ui/sidebar/SidebarGroupAction.vue

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

app/components/pub/ui/sidebar/SidebarGroupLabel.vue

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

app/components/pub/ui/sidebar/SidebarMenuAction.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean

app/components/pub/ui/sidebar/SidebarMenuButton.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { computed } from 'vue'
 import Tooltip from '@/components/pub/ui/tooltip/Tooltip.vue'
 import TooltipContent from '@/components/pub/ui/tooltip/TooltipContent.vue'
 import TooltipTrigger from '@/components/pub/ui/tooltip/TooltipTrigger.vue'
-import { computed } from 'vue'
 import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
 
@@ -22,7 +22,7 @@ const props = withDefaults(
     as: 'button',
     variant: 'default',
     size: 'default',
-  }
+  },
 )
 
 const { isMobile, state } = useSidebar()

app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue

@@ -2,8 +2,8 @@
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { SidebarMenuButtonVariants } from '.'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {

app/components/pub/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   size?: 'sm' | 'md'

app/components/pub/ui/sidebar/SidebarProvider.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { AppConfigInput } from 'nuxt/schema'
 import type { HTMLAttributes, Ref } from 'vue'
 import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
 import { TooltipProvider } from 'radix-vue'
@@ -23,7 +22,7 @@ const props = withDefaults(
   {
     defaultOpen: true,
     open: undefined,
-  }
+  },
 )
 
 const emits = defineEmits<{
@@ -92,7 +91,7 @@ provideSidebarContext({
       :class="
         cn(
           `group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full`,
-          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : '']
+          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : ''],
         )
       "
     >