Fix lint issues

Author: Thavarshan

src/ui/blocks/Dropfile.vue

@@ -70,6 +70,10 @@ function triggerFileInput() {
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
       @drop="handleDrop"
+      role="button"
+      aria-label="Upload files"
+      tabindex="0"
+      @keydown.enter="triggerFileInput"
     >
       <Upload class="size-12 text-slate-300" />
       <input

src/ui/blocks/FileItem.vue

@@ -28,18 +28,12 @@ function cancelItem(index: number) {
 }
 
 function formatNumber(number: number): number {
-  // Check if progress is a valid number, otherwise default to 0
   if (isNaN(number) || number === null || number === undefined) {
     return 0;
   }
 
-  // Ensure number is a positive value
   const positiveProgress = Math.max(0, number);
-
-  // Round to the nearest whole number
   const roundedProgress = Math.round(positiveProgress);
-
-  // Cap the value at 100
   const percentage = Math.min(roundedProgress, 100);
 
   return percentage;
@@ -76,7 +70,7 @@ function extractFileName(filename: string): string {
           </p>
         </div>
         <div class="mt-1.5 flex items-center gap-x-2">
-          <Progress v-model="progress" class="w-60" />
+          <Progress v-model="progress" class="w-60" aria-label="Conversion progress" />
           <span class="text-xs">{{ `${progress === undefined ? 0 : progress}%` }}</span>
         </div>
       </div>

src/ui/components/combobox/Combobox.vue

@@ -33,7 +33,13 @@ function setOption(event: CustomEvent) {
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <div class="p-1 rounded-lg bg-muted">
-        <Button variant="secondary" role="combobox" :aria-expanded="open" class="justify-between shadow-none">
+        <Button
+          variant="secondary"
+          role="combobox"
+          :aria-expanded="open"
+          :aria-controls="listId"
+          class="justify-between shadow-none"
+        >
           <span v-if="value" class="mr-2 text-foreground text-xs">{{ t('formats.convertsTo') }}: </span>
           <Badge v-if="value" class="rounded-sm">
             {{ options.find((option: string) => option === value) }}
@@ -47,7 +53,7 @@ function setOption(event: CustomEvent) {
       <Command v-model="value">
         <CommandInput :placeholder="`${t('formats.search')}...`" />
         <CommandEmpty>{{ t('formats.empty') }}</CommandEmpty>
-        <CommandList>
+        <CommandList :id="listId">
           <CommandGroup>
             <CommandItem v-for="(option, index) in options" :key="index" :value="option" @select="setOption">
               <Check :class="cn('mr-2 h-4 w-4', value === option ? 'opacity-100' : 'opacity-0')" />

src/ui/components/dialog/DialogContent.vue

@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
-        )"
+        )
       "
     >
       <slot />

src/ui/components/dialog/DialogScrollContent.vue

@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
               event.preventDefault();
             }
-          }"
+          }
         "
       >
         <slot />

src/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
-      )"
+      )
     "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

src/ui/components/dropdown-menu/DropdownMenuItem.vue

@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         props.class,
-      )"
+      )
     "
   >
     <slot />

src/ui/components/dropdown-menu/DropdownMenuRadioItem.vue

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
-      )"
+      )
     "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

src/ui/components/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       cn(
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
         props.class,
-      )"
+      )
     "
   >
     <slot />

src/ui/components/menubar/MenubarCheckboxItem.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
-      )"
+      )
     "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

src/ui/components/menubar/MenubarItem.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         props.class,
-      )"
+      )
     "
   >
     <slot />

src/ui/components/menubar/MenubarRadioItem.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
-      )"
+      )
     "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

src/ui/components/menubar/MenubarSubTrigger.vue

@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
         props.class,
-      )"
+      )
     "
   >
     <slot />

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

@@ -20,12 +20,10 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'flex touch-none select-none transition-colors',
-        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)"
-    )
+        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" />

src/ui/components/separator/Separator.vue

@@ -16,10 +16,7 @@ const delegatedProps = computed(() => {
   <Separator
     v-bind="delegatedProps"
     :class="
-            'shrink-0 bg-border relative',
-            props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-            props.class,
-        )
+      cn('shrink-0 bg-border relative', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)
     "
   >
     <span
@@ -30,7 +27,8 @@ const delegatedProps = computed(() => {
           props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
         )
       "
-      >{{ props.label }}</span
     >
+      {{ props.label }}
+    </span>
   </Separator>
 </template>

src/ui/components/toast/use-toast.ts

@@ -94,12 +94,7 @@ function dispatch(action: Action) {
       }
 
       state.value.toasts = state.value.toasts.map((t) =>
-        t.id === toastId || toastId === undefined
-          ? {
-            ...t,
-            open: false,
-          }
-          : t,
+        t.id === toastId || toastId === undefined ? { ...t, open: false } : t,
       );
       break;
     }