chore: eslint 配置

src/layouts/sakai-vue/AppConfigurator.vue

@@ -6,7 +6,7 @@ import { ref } from 'vue';
 
 import { useLayout } from './composables/layout';
 
-const { layoutConfig, isDarkTheme } = useLayout();
+const { isDarkTheme, layoutConfig } = useLayout();
 const presets = {
   Aura,
   Lara,
@@ -419,12 +419,50 @@ const surfaces = ref([
   },
 ]);
 
+function applyTheme(type: string, color: any) {
+  if (type === 'primary') {
+    updatePreset(getPresetExt());
+  } else if (type === 'surface') {
+    updateSurfacePalette(color.palette);
+  }
+}
+
 function getPresetExt() {
   const color = primaryColors.value.find((c) => c.name === layoutConfig.primary)!;
 
   if (color.name === 'noir') {
     return {
       semantic: {
+        colorScheme: {
+          dark: {
+            highlight: {
+              background: '{primary.50}',
+              color: '{primary.950}',
+              focusBackground: '{primary.300}',
+              focusColor: '{primary.950}',
+            },
+            primary: {
+              activeColor: '{primary.300}',
+              color: '{primary.50}',
+              contrastColor: '{primary.950}',
+              hoverColor: '{primary.200}',
+            },
+          },
+          light: {
+            highlight: {
+              background: '{primary.950}',
+              color: '#ffffff',
+              focusBackground: '{primary.700}',
+              focusColor: '#ffffff',
+            },
+            primary: {
+              activeColor: '{primary.700}',
+              color: '{primary.950}',
+              contrastColor: '#ffffff',
+              hoverColor: '{primary.800}',
+            },
+          },
+        },
         primary: {
           50: '{surface.50}',
           100: '{surface.100}',
@@ -438,93 +476,49 @@ function getPresetExt() {
           900: '{surface.900}',
           950: '{surface.950}',
         },
-        colorScheme: {
-          light: {
-            primary: {
-              color: '{primary.950}',
-              contrastColor: '#ffffff',
-              hoverColor: '{primary.800}',
-              activeColor: '{primary.700}',
-            },
-            highlight: {
-              background: '{primary.950}',
-              focusBackground: '{primary.700}',
-              color: '#ffffff',
-              focusColor: '#ffffff',
-            },
-          },
-          dark: {
-            primary: {
-              color: '{primary.50}',
-              contrastColor: '{primary.950}',
-              hoverColor: '{primary.200}',
-              activeColor: '{primary.300}',
-            },
-            highlight: {
-              background: '{primary.50}',
-              focusBackground: '{primary.300}',
-              color: '{primary.950}',
-              focusColor: '{primary.950}',
-            },
-          },
-        },
       },
     };
   } else {
     return {
       semantic: {
-        primary: color.palette,
         colorScheme: {
-          light: {
-            primary: {
-              color: '{primary.500}',
-              contrastColor: '#ffffff',
-              hoverColor: '{primary.600}',
-              activeColor: '{primary.700}',
-            },
-            highlight: {
-              background: '{primary.50}',
-              focusBackground: '{primary.100}',
-              color: '{primary.700}',
-              focusColor: '{primary.800}',
-            },
-          },
           dark: {
+            highlight: {
+              background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+              color: 'rgba(255,255,255,.87)',
+              focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+              focusColor: 'rgba(255,255,255,.87)',
+            },
             primary: {
+              activeColor: '{primary.200}',
               color: '{primary.400}',
               contrastColor: '{surface.900}',
               hoverColor: '{primary.300}',
-              activeColor: '{primary.200}',
             },
+          },
+          light: {
             highlight: {
-              background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-              focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-              color: 'rgba(255,255,255,.87)',
-              focusColor: 'rgba(255,255,255,.87)',
+              background: '{primary.50}',
+              color: '{primary.700}',
+              focusBackground: '{primary.100}',
+              focusColor: '{primary.800}',
+            },
+            primary: {
+              activeColor: '{primary.700}',
+              color: '{primary.500}',
+              contrastColor: '#ffffff',
+              hoverColor: '{primary.600}',
             },
           },
         },
+        primary: color.palette,
       },
     };
   }
 }
 
-function updateColors(type: string, color: any) {
-  if (type === 'primary') {
-    layoutConfig.primary = color.name;
-  } else if (type === 'surface') {
-    layoutConfig.surface = color.name;
-  }
-
-  applyTheme(type, color);
-}
-
-function applyTheme(type: string, color: any) {
-  if (type === 'primary') {
-    updatePreset(getPresetExt());
-  } else if (type === 'surface') {
-    updateSurfacePalette(color.palette);
-  }
+function onMenuModeChange() {
+  layoutConfig.menuMode = menuMode.value;
 }
 
 function onPresetChange() {
@@ -535,8 +529,14 @@ function onPresetChange() {
   $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
 }
 
-function onMenuModeChange() {
-  layoutConfig.menuMode = menuMode.value;
+function updateColors(type: string, color: any) {
+  if (type === 'primary') {
+    layoutConfig.primary = color.name;
+  } else if (type === 'surface') {
+    layoutConfig.surface = color.name;
+  }
+
+  applyTheme(type, color);
 }
 </script>
 

src/layouts/sakai-vue/AppLayout.vue

@@ -8,9 +8,9 @@ import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 import { useLayout } from './composables/layout';
 
-const { layoutConfig, layoutState, isSidebarActive } = useLayout();
+const { isSidebarActive, layoutConfig, layoutState } = useLayout();
 
-const outsideClickListener = ref(null as Parameters<typeof document.addEventListener>[1] | null);
+const outsideClickListener = ref(null as null | Parameters<typeof document.addEventListener>[1]);
 
 watch(isSidebarActive, (newVal) => {
   if (newVal) {
@@ -22,11 +22,11 @@ watch(isSidebarActive, (newVal) => {
 
 const containerClass = computed(() => {
   return {
+    'layout-mobile-active': layoutState.staticMenuMobileActive,
     'layout-overlay': layoutConfig.menuMode === 'overlay',
+    'layout-overlay-active': layoutState.overlayMenuActive,
     'layout-static': layoutConfig.menuMode === 'static',
     'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
-    'layout-overlay-active': layoutState.overlayMenuActive,
-    'layout-mobile-active': layoutState.staticMenuMobileActive,
   };
 });
 
@@ -43,13 +43,6 @@ function bindOutsideClickListener() {
   }
 }
 
-function unbindOutsideClickListener() {
-  if (outsideClickListener.value) {
-    document.removeEventListener('click', outsideClickListener.value);
-    outsideClickListener.value = null;
-  }
-}
-
 function isOutsideClicked(event: Event) {
   const sidebarEl = document.querySelector('.layout-sidebar')!;
   const topbarEl = document.querySelector('.layout-menu-button')!;
@@ -61,6 +54,13 @@ function isOutsideClicked(event: Event) {
     topbarEl.contains(event.target as never)
   );
 }
+
+function unbindOutsideClickListener() {
+  if (outsideClickListener.value) {
+    document.removeEventListener('click', outsideClickListener.value);
+    outsideClickListener.value = null;
+  }
+}
 </script>
 
 <template>

src/layouts/sakai-vue/AppTopbar.vue

@@ -2,7 +2,7 @@
 import AppConfigurator from './AppConfigurator.vue';
 import { useLayout } from './composables/layout';
 
-const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
+const { isDarkTheme, toggleDarkMode, toggleMenu } = useLayout();
 </script>
 
 <template>

src/layouts/sakai-vue/composables/layout.ts

@@ -1,21 +1,21 @@
 import { computed, reactive } from 'vue';
 
 const layoutConfig = reactive({
+  darkTheme: false,
+  menuMode: 'static',
   preset: 'Aura',
   primary: 'emerald',
   surface: null,
-  darkTheme: false,
-  menuMode: 'static',
 });
 
 const layoutState = reactive({
-  staticMenuDesktopInactive: false,
+  activeMenuItem: null,
+  configSidebarVisible: false,
+  menuHoverActive: false,
   overlayMenuActive: false,
   profileSidebarVisible: false,
-  configSidebarVisible: false,
+  staticMenuDesktopInactive: false,
   staticMenuMobileActive: false,
-  menuHoverActive: false,
-  activeMenuItem: null,
 });
 
 export function useLayout() {
@@ -59,14 +59,14 @@ export function useLayout() {
   const getSurface = computed(() => layoutConfig.surface);
 
   return {
-    layoutConfig,
-    layoutState,
-    toggleMenu,
-    isSidebarActive,
-    isDarkTheme,
     getPrimary,
     getSurface,
+    isDarkTheme,
+    isSidebarActive,
+    layoutConfig,
+    layoutState,
     setActiveMenuItem,
     toggleDarkMode,
+    toggleMenu,
   };
 }