[lint] Fix remaining vue lint warnings (#3435)

eslint.config.js

@@ -52,7 +52,8 @@ export default [
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
-      'unused-imports/no-unused-imports': 'error'
+      'unused-imports/no-unused-imports': 'error',
+      'vue/no-v-html': 'off'
     }
   }
 ]

src/components/bottomPanel/BottomPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full">
     <Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
-      <TabList pt:tabList="border-none">
+      <TabList pt:tab-list="border-none">
         <div class="w-full flex justify-between">
           <div class="tabs-container">
             <Tab

src/components/sidebar/SidebarIcon.vue

@@ -1,25 +1,24 @@
 <template>
   <Button
-    v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
+    v-tooltip="{ value: tooltip, showDelay: 300, hideDelay: 300 }"
-    :class="props.class"
     text
     :pt="{
       root: {
         class: `side-bar-button ${
-          props.selected
+          selected
             ? 'p-button-primary side-bar-button-selected'
             : 'p-button-secondary'
         }`,
-        'aria-label': props.tooltip
+        'aria-label': tooltip
       }
     }"
     @click="emit('click', $event)"
   >
     <template #icon>
       <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-        <i :class="props.icon + ' side-bar-button-icon'" />
+        <i :class="icon + ' side-bar-button-icon'" />
       </OverlayBadge>
-      <i v-else :class="props.icon + ' side-bar-button-icon'" />
+      <i v-else :class="icon + ' side-bar-button-icon'" />
     </template>
   </Button>
 </template>
@@ -27,32 +26,25 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 
-// Add this line to import PropsType
+const {
+  icon = '',
+  selected = false,
+  tooltip = '',
+  iconBadge = ''
+} = defineProps<{
+  icon?: string
+  selected?: boolean
+  tooltip?: string
+  iconBadge?: string | (() => string | null)
+}>()
 
-const props = defineProps({
+const emit = defineEmits<{
-  icon: String,
+  (e: 'click', event: MouseEvent): void
-  selected: Boolean,
+}>()
-  tooltip: {
-    type: String,
-    default: ''
-  },
-  class: {
-    type: String,
-    default: ''
-  },
-  iconBadge: {
-    type: [String, Function] as PropType<string | (() => string | null)>,
-    default: ''
-  }
-})
-
-const emit = defineEmits(['click'])
 const overlayValue = computed(() =>
-  typeof props.iconBadge === 'function'
+  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
-    ? props.iconBadge() || ''
-    : props.iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 </script>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -38,12 +38,15 @@
           >
             <template #node="{ node }">
               <TreeExplorerTreeNode :node="node">
-                <template #before-label="{ node }">
+                <template #before-label="{ node: treeNode }">
-                  <span v-if="node.data.isModified || !node.data.isPersisted"
+                  <span
+                    v-if="
+                      treeNode.data?.isModified || !treeNode.data?.isPersisted
+                    "
                     >*</span
                   >
                 </template>
-                <template #actions="{ node }">
+                <template #actions="{ node: treeNode }">
                   <Button
                     class="close-workflow-button"
                     icon="pi pi-times"
@@ -52,7 +55,9 @@
                       workspaceStore.shiftDown ? 'danger' : 'secondary'
                     "
                     size="small"
-                    @click.stop="handleCloseWorkflow(node.data)"
+                    @click.stop="
+                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
+                    "
                   />
                 </template>
               </TreeExplorerTreeNode>

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -1,12 +1,12 @@
 <template>
   <TreeExplorerTreeNode :node="node">
-    <template #actions="{ node }">
+    <template #actions>
       <Button
         :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
         text
         severity="secondary"
         size="small"
-        @click.stop="workflowBookmarkStore.toggleBookmarked(node.data.path)"
+        @click.stop="handleBookmarkClick"
       />
     </template>
   </TreeExplorerTreeNode>
@@ -28,4 +28,10 @@ const workflowBookmarkStore = useWorkflowBookmarkStore()
 const isBookmarked = computed(
   () => node.data && workflowBookmarkStore.isBookmarked(node.data.path)
 )
+
+const handleBookmarkClick = async () => {
+  if (node.data) {
+    await workflowBookmarkStore.toggleBookmarked(node.data.path)
+  }
+}
 </script>

src/components/topbar/WorkflowTabs.vue

@@ -7,7 +7,7 @@
         class: 'p-0 w-full',
         onwheel: handleWheel
       }"
-      pt:barX="h-1"
+      pt:bar-x="h-1"
     >
       <SelectButton
         class="workflow-tabs bg-transparent"