[style] enforce vue block order

eslint.config.ts

@@ -98,6 +98,12 @@ export default defineConfig([
       // */
       'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
+      'vue/block-order': [
+        'error',
+        {
+          order: ['docs', 'script', 'template', 'i18n', 'style']
+        }
+      ],
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',

src/App.vue

@@ -1,13 +1,3 @@
-<template>
-  <router-view />
-  <ProgressSpinner
-    v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-[unset]"
-  />
-  <GlobalDialog />
-  <BlockUI full-screen :blocked="isLoading" />
-</template>
-
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
@@ -55,3 +45,13 @@ onMounted(() => {
   void conflictDetection.initializeConflictDetection()
 })
 </script>
+
+<template>
+  <router-view />
+  <ProgressSpinner
+    v-if="isLoading"
+    class="absolute inset-0 flex justify-center items-center h-[unset]"
+  />
+  <GlobalDialog />
+  <BlockUI full-screen :blocked="isLoading" />
+</template>

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
+const settingStore = useSettingStore()
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+const unifiedWidth = computed(() =>
+  settingStore.get('Comfy.Sidebar.UnifiedWidth')
+)
+
+const sidebarPanelVisible = computed(
+  () => useSidebarTabStore().activeSidebarTab !== null
+)
+const bottomPanelVisible = computed(
+  () => useBottomPanelStore().bottomPanelVisible
+)
+const activeSidebarTabId = computed(
+  () => useSidebarTabStore().activeSidebarTabId
+)
+
+const sidebarStateKey = computed(() => {
+  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+})
+</script>
+
 <template>
   <Splitter
     :key="sidebarStateKey"
@@ -45,39 +78,6 @@
   </Splitter>
 </template>
 
-<script setup lang="ts">
-import Splitter from 'primevue/splitter'
-import SplitterPanel from 'primevue/splitterpanel'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-
-const settingStore = useSettingStore()
-const sidebarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
-
-const unifiedWidth = computed(() =>
-  settingStore.get('Comfy.Sidebar.UnifiedWidth')
-)
-
-const sidebarPanelVisible = computed(
-  () => useSidebarTabStore().activeSidebarTab !== null
-)
-const bottomPanelVisible = computed(
-  () => useBottomPanelStore().bottomPanelVisible
-)
-const activeSidebarTabId = computed(
-  () => useSidebarTabStore().activeSidebarTabId
-)
-
-const sidebarStateKey = computed(() => {
-  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
-})
-</script>
-
 <style scoped>
 @reference '../assets/css/style.css';
 

src/components/MenuHamburger.vue

@@ -1,24 +1,3 @@
-<template>
-  <div
-    v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag"
-    :style="positionCSS"
-  >
-    <Button
-      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
-      :aria-label="$t('menu.showMenu')"
-      aria-live="assertive"
-      @click="exitFocusMode"
-      @contextmenu="showNativeSystemMenu"
-    />
-    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import Button from 'primevue/button'
 import type { CSSProperties } from 'vue'
@@ -56,6 +35,27 @@ const positionCSS = computed<CSSProperties>(() =>
 )
 </script>
 
+<template>
+  <div
+    v-show="workspaceState.focusMode"
+    class="comfy-menu-hamburger no-drag"
+    :style="positionCSS"
+  >
+    <Button
+      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
+      icon="pi pi-bars"
+      severity="secondary"
+      text
+      size="large"
+      :aria-label="$t('menu.showMenu')"
+      aria-live="assertive"
+      @click="exitFocusMode"
+      @contextmenu="showNativeSystemMenu"
+    />
+    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
+  </div>
+</template>
+
 <style scoped>
 @reference '../assets/css/style.css';
 

src/components/actionbar/BatchCountEdit.vue

@@ -1,3 +1,34 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import InputNumber from 'primevue/inputnumber'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
+
+const queueSettingsStore = useQueueSettingsStore()
+const { batchCount } = storeToRefs(queueSettingsStore)
+const minQueueCount = 1
+
+const settingStore = useSettingStore()
+const maxQueueCount = computed(() =>
+  settingStore.get('Comfy.QueueButton.BatchCountLimit')
+)
+
+const handleClick = (increment: boolean) => {
+  let newCount: number
+  if (increment) {
+    const originalCount = batchCount.value - 1
+    newCount = Math.min(originalCount * 2, maxQueueCount.value)
+  } else {
+    const originalCount = batchCount.value + 1
+    newCount = Math.floor(originalCount / 2)
+  }
+
+  batchCount.value = newCount
+}
+</script>
+
 <template>
   <div
     v-tooltip.bottom="{
@@ -32,37 +63,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import InputNumber from 'primevue/inputnumber'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useQueueSettingsStore } from '@/stores/queueStore'
-
-const queueSettingsStore = useQueueSettingsStore()
-const { batchCount } = storeToRefs(queueSettingsStore)
-const minQueueCount = 1
-
-const settingStore = useSettingStore()
-const maxQueueCount = computed(() =>
-  settingStore.get('Comfy.QueueButton.BatchCountLimit')
-)
-
-const handleClick = (increment: boolean) => {
-  let newCount: number
-  if (increment) {
-    const originalCount = batchCount.value - 1
-    newCount = Math.min(originalCount * 2, maxQueueCount.value)
-  } else {
-    const originalCount = batchCount.value + 1
-    newCount = Math.floor(originalCount / 2)
-  }
-
-  batchCount.value = newCount
-}
-</script>
-
 <style scoped>
 :deep(.p-inputtext) {
   border-top-left-radius: 0;

src/components/actionbar/ComfyActionbar.vue

@@ -1,16 +1,3 @@
-<template>
-  <Panel
-    class="actionbar w-fit"
-    :style="style"
-    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
-  >
-    <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
-      <ComfyQueueButton />
-    </div>
-  </Panel>
-</template>
-
 <script lang="ts" setup>
 import {
   useDraggable,
@@ -228,6 +215,19 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 })
 </script>
 
+<template>
+  <Panel
+    class="actionbar w-fit"
+    :style="style"
+    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
+  >
+    <div ref="panelRef" class="actionbar-content flex items-center select-none">
+      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
+      <ComfyQueueButton />
+    </div>
+  </Panel>
+</template>
+
 <style scoped>
 @reference '../../assets/css/style.css';