chore: lint unraid ui

unraid-ui/src/components/brand/BrandButton.vue

@@ -70,14 +70,14 @@ const needsBrandGradientBackground = computed(() => {
   >
     <div
       v-if="variant === 'fill'"
-      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:!opacity-60 group-focus:!opacity-60"
+      class="from-unraid-red to-orange absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 rounded-md bg-linear-to-r opacity-100 transition-all group-hover:!opacity-60 group-focus:!opacity-60"
     />
 
     <!-- gives outline buttons the brand gradient background -->
     <div
       v-if="needsBrandGradientBackground"
       :class="[
-        'absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange transition-all pointer-events-none',
+        'from-unraid-red to-orange pointer-events-none absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r transition-all',
         variant === 'outline-primary' ? 'rounded-sm' : 'rounded-md',
         'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100',
       ]"
@@ -99,7 +99,7 @@ const needsBrandGradientBackground = computed(() => {
       :class="[
         classes.icon,
         iconRightHoverDisplay &&
-          'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100 transition-all',
+          'opacity-0 transition-all group-hover:!opacity-100 group-focus:!opacity-100',
       ]"
       :style="{ '--icon-size': classes.iconSize }"
     />

unraid-ui/src/components/common/dialog/Dialog.vue

@@ -83,7 +83,7 @@ const sizeClasses = {
         cn(
           sizeClasses[size],
           size === 'full'
-            ? 'fixed inset-0 translate-x-0 translate-y-0 max-w-none rounded-none border-0'
+            ? 'fixed inset-0 max-w-none translate-x-0 translate-y-0 rounded-none border-0'
             : ''
         )
       "

unraid-ui/src/components/common/loading/Bar.vue

@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
 </script>
 <template>
   <div
-    :class="cn('h-5 animate-pulse bg-gray-300 w-full', props.class)"
+    :class="cn('h-5 w-full animate-pulse bg-gray-300', props.class)"
     role="progressbar"
     aria-label="Loading"
   />

unraid-ui/src/components/common/loading/Error.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
 defineEmits(['retry']);
 </script>
 <template>
-  <div :class="cn('h-full flex flex-col items-center justify-center gap-3', props.class)">
+  <div :class="cn('flex h-full flex-col items-center justify-center gap-3', props.class)">
     <!-- Loading State -->
     <div v-if="loading" class="contents">
       <LoadingSpinner />
@@ -43,7 +43,7 @@ defineEmits(['retry']);
     <!-- Error State -->
     <div v-else-if="error" class="space-y-3">
       <div class="flex justify-center">
-        <ShieldExclamationIcon class="h-10 text-unraid-red" />
+        <ShieldExclamationIcon class="text-unraid-red h-10" />
       </div>
       <div>
         <h3 class="font-bold">{{ `Error` }}</h3>

unraid-ui/src/components/common/loading/Spinner.vue

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
   <div
     :class="
       cn(
-        'inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] text-primary motion-reduce:animate-[spin_1.5s_linear_infinite]',
+        'text-primary inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]',
         props.class
       )
     "

unraid-ui/src/components/common/popover/PopoverContent.vue

@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md p-4 shadow-md outline-hidden',
           props.class
         )
       "

unraid-ui/src/components/common/scroll-area/ScrollBar.vue

@@ -23,13 +23,13 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex touch-none select-none transition-colors',
+        'flex touch-none transition-colors select-none',
         orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
         orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
         props.class
       )
     "
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
   </ScrollAreaScrollbar>
 </template>

unraid-ui/src/components/common/sheet/SheetContent.vue

@@ -46,14 +46,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60"
     />
     <DialogContent :class="sheetClass" v-bind="forwarded">
       <slot />
       <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <X class="w-4 h-4 text-muted-foreground" />
+        <X class="text-muted-foreground h-4 w-4" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>

unraid-ui/src/components/common/sheet/SheetDescription.vue

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
+  <DialogDescription :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogDescription>
 </template>

unraid-ui/src/components/common/sheet/SheetTitle.vue

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DialogTitle :class="cn('text-lg font-medium text-foreground', props.class)" v-bind="delegatedProps">
+  <DialogTitle :class="cn('text-foreground text-lg font-medium', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogTitle>
 </template>

unraid-ui/src/components/common/stepper/StepperDescription.vue

@@ -19,7 +19,7 @@ const forwarded = useForwardProps(delegatedProps);
   <StepperDescription
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('text-xs text-muted-foreground', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
   >
     <slot v-bind="slotProps" />
   </StepperDescription>

unraid-ui/src/components/common/stepper/StepperIndicator.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
+        'text-muted-foreground/50 inline-flex h-10 w-10 items-center justify-center rounded-full',
         // Disabled
         'group-data-disabled:text-muted-foreground group-data-disabled:opacity-50',
         // Active

unraid-ui/src/components/common/stepper/StepperSeparator.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'hidden md:block bg-muted md:w-24 md:h-px md:my-0',
+        'bg-muted hidden md:my-0 md:block md:h-px md:w-24',
         // Disabled
         'group-data-disabled:bg-muted group-data-disabled:opacity-75',
         // Completed

unraid-ui/src/components/common/stepper/StepperTrigger.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'flex flex-col items-center justify-center text-center gap-2 rounded-md w-full md:w-auto',
+        'flex w-full flex-col items-center justify-center gap-2 rounded-md text-center md:w-auto',
         props.class
       )
     "

unraid-ui/src/components/common/tabs/TabsContent.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-ring mt-2 flex focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
         props.class
       )
     "

unraid-ui/src/components/common/tabs/TabsList.vue

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center rounded-md bg-input p-1.5 text-foreground',
+        'bg-input text-foreground inline-flex items-center justify-center rounded-md p-1.5',
         props.class
       )
     "

unraid-ui/src/components/common/tabs/TabsTrigger.vue

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded px-4.5 py-2.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
+        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded px-4.5 py-2.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs',
         props.class
       )
     "

unraid-ui/src/components/common/tooltip/TooltipContent.vue

@@ -38,7 +38,7 @@ const { teleportTarget } = useTeleport();
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
           props.class
         )
       "

unraid-ui/src/components/form/combobox/ComboboxGroup.vue

@@ -23,12 +23,12 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
         props.class
       )
     "
   >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ComboboxLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
       {{ heading }}
     </ComboboxLabel>
     <slot />

unraid-ui/src/components/form/combobox/ComboboxInput.vue

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "

unraid-ui/src/components/form/combobox/ComboboxItem.vue

@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
         props.class
       )
     "

unraid-ui/src/components/form/combobox/ComboboxList.vue

@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-[200px] rounded-md border shadow-md outline-hidden',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class

unraid-ui/src/components/form/combobox/ComboboxSeparator.vue

@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
+  <ComboboxSeparator v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
     <slot />
   </ComboboxSeparator>
 </template>

unraid-ui/src/components/form/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "

unraid-ui/src/components/form/label/Label.vue

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class
       )
     "

unraid-ui/src/components/form/lightswitch/Lightswitch.vue

@@ -18,7 +18,7 @@ const checked = ref(false);
         v-model="checked"
         :class="[
           checked ? 'bg-green-500' : 'bg-gray-200',
-          'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
+          'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:outline-hidden',
         ]"
       >
         <span

unraid-ui/src/components/form/number/NumberField.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5 relative', props.class)">
+  <NumberFieldRoot v-bind="forwarded" :class="cn('relative grid gap-1.5', props.class)">
     <slot />
   </NumberFieldRoot>
 </template>

unraid-ui/src/components/form/number/NumberFieldContent.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'relative has-data-[slot=increment]:*:data-[slot=input]:pr-5 has-data-[slot=decrement]:*:data-[slot=input]:pl-5',
+        'relative has-data-[slot=decrement]:*:data-[slot=input]:pl-5 has-data-[slot=increment]:*:data-[slot=input]:pr-5',
         props.class
       )
     "

unraid-ui/src/components/form/number/NumberFieldDecrement.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+        'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
         props.class
       )
     "

unraid-ui/src/components/form/number/NumberFieldIncrement.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+        'absolute top-1/2 right-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
         props.class
       )
     "

unraid-ui/src/components/form/number/NumberFieldInput.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="input"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border py-2 text-center text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "