chore(projects): add unocss eslint config

eslint.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from '@soybeanjs/eslint-config';
 
 export default defineConfig(
-  { vue: true },
+  { vue: true, unocss: true },
   {
     rules: {
       'vue/multi-word-component-names': [

package.json

@@ -72,6 +72,7 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "20.11.24",
     "@types/nprogress": "0.2.3",
+    "@unocss/eslint-config": "0.58.5",
     "@unocss/preset-icons": "0.58.5",
     "@unocss/preset-uno": "0.58.5",
     "@unocss/transformer-directives": "0.58.5",

packages/materials/src/libs/admin-layout/index.vue

@@ -116,7 +116,7 @@ function handleClickMask() {
   <div class="relative h-full" :class="[commonClass]" :style="cssVars">
     <div
       :id="isWrapperScroll ? scrollElId : undefined"
-      class="flex flex-col h-full"
+      class="h-full flex flex-col"
       :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
     >
       <!-- Header -->
@@ -182,7 +182,7 @@ function handleClickMask() {
       <!-- Mobile Sider -->
       <template v-if="showMobileSider">
         <aside
-          class="absolute left-0 top-0 w-0 h-full bg-white"
+          class="absolute left-0 top-0 h-full w-0 bg-white"
           :class="[
             commonClass,
             mobileSiderClass,
@@ -194,7 +194,7 @@ function handleClickMask() {
         </aside>
         <div
           v-show="!siderCollapse"
-          class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]"
+          class="absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)]"
           :class="[style['layout-mobile-sider-mask']]"
           @click="handleClickMask"
         ></div>
@@ -203,7 +203,7 @@ function handleClickMask() {
       <!-- Main Content -->
       <main
         :id="isContentScroll ? scrollElId : undefined"
-        class="flex flex-col flex-grow"
+        class="flex flex-grow flex-col"
         :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
       >
         <slot></slot>

packages/materials/src/libs/page-tab/button-tab.vue

@@ -36,7 +36,7 @@ defineSlots<Slots>();
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap"
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-1px rounded-4px border-solid px-12px py-4px"
     :class="[
       style['button-tab'],
       { [style['button-tab_dark']]: darkMode },

packages/materials/src/libs/page-tab/chrome-tab.vue

@@ -37,21 +37,21 @@ defineSlots<Slots>();
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap"
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-16px whitespace-nowrap px-24px py-6px -mr-18px"
     :class="[
       style['chrome-tab'],
       { [style['chrome-tab_dark']]: darkMode },
       { [style['chrome-tab_active']]: active },
       { [style['chrome-tab_active_dark']]: active && darkMode }
     ]"
   >
-    <div class=":soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none" :class="[style['chrome-tab__bg']]">
+    <div class=":soy: pointer-events-none absolute left-0 top-0 h-full w-full -z-1" :class="[style['chrome-tab__bg']]">
       <ChromeTabBg />
     </div>
     <slot name="prefix"></slot>
     <slot></slot>
     <slot name="suffix"></slot>
-    <div class=":soy: absolute right-7px w-1px h-16px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
+    <div class=":soy: absolute right-7px h-16px w-1px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
   </div>
 </template>
 

packages/materials/src/libs/page-tab/svg-close.vue

@@ -16,7 +16,7 @@ function handleClick() {
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center w-16px h-16px text-14px rd-50%"
+    class=":soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px"
     @click.stop="handleClick"
   >
     <svg width="1em" height="1em" viewBox="0 0 1024 1024">

packages/materials/src/libs/simple-scrollbar/index.vue

@@ -8,7 +8,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex-1-hidden h-full">
+  <div class="h-full flex-1-hidden">
     <Simplebar class="h-full">
       <slot />
     </Simplebar>

src/components/advanced/table-column-setting.vue

@@ -23,8 +23,8 @@ const columns = defineModel<FilteredColumn[]>('columns', {
       </NButton>
     </template>
     <VueDraggable v-model="columns">
-      <div v-for="item in columns" :key="item.key" class="flex-y-center h-36px hover:(bg-primary bg-opacity-20) rd-4px">
-        <icon-mdi-drag class="mr-8px text-icon cursor-move" />
+      <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
+        <icon-mdi-drag class="mr-8px cursor-move text-icon" />
         <NCheckbox v-model:checked="item.checked">
           {{ item.title }}
         </NCheckbox>

src/components/common/exception-base.vue

@@ -29,7 +29,7 @@ const icon = computed(() => iconMap[props.type]);
 </script>
 
 <template>
-  <div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
+  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
     <div class="flex text-400px text-primary">
       <SvgIcon :local-icon="icon" />
     </div>

src/components/custom/look-forward.vue

@@ -7,12 +7,12 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
+  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
     <div class="flex text-400px text-primary">
       <SvgIcon local-icon="expectation" />
     </div>
     <slot>
-      <h3 class="text-28px font-500 text-primary">{{ $t('common.lookForward') }}</h3>
+      <h3 class="text-28px text-primary font-500">{{ $t('common.lookForward') }}</h3>
     </slot>
   </div>
 </template>

src/components/custom/soybean-avatar.vue

@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="size-72px rd-1/2 overflow-hidden">
+  <div class="size-72px overflow-hidden rd-1/2">
     <img src="@/assets/imgs/soybean.jpg" class="size-full" />
   </div>
 </template>

src/components/custom/wave-bg.vue

@@ -36,7 +36,7 @@ const darkColor = computed(() => getColorPalette(props.themeColor, 6));
         </g>
       </svg>
     </div>
-    <div class="absolute -left-200px -bottom-400px <sm:(-left-100px -bottom-760px)">
+    <div class="absolute -bottom-400px -left-200px <sm:(-bottom-760px -left-100px)">
       <svg height="896" width="967.8852157128662">
         <defs>
           <path

src/layouts/modules/global-footer/index.vue

@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <DarkModeContainer class="flex-center h-full">
+  <DarkModeContainer class="h-full flex-center">
     <a href="https://github.com/soybeanjs/soybean-admin/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
       Copyright MIT © 2021 Soybean
     </a>

src/layouts/modules/global-header/index.vue

@@ -46,14 +46,14 @@ const headerMenus = computed(() => {
 </script>
 
 <template>
-  <DarkModeContainer class="flex-y-center h-full shadow-header">
+  <DarkModeContainer class="h-full flex-y-center shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
     <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
-    <div v-else class="flex-1-hidden flex-y-center h-full">
+    <div v-else class="h-full flex-y-center flex-1-hidden">
       <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
-    <div class="flex-y-center justify-end h-full">
+    <div class="h-full flex-y-center justify-end">
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <ThemeSchemaSwitch

src/layouts/modules/global-logo/index.vue

@@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <RouterLink to="/" class="flex-center w-full nowrap-hidden">
+  <RouterLink to="/" class="w-full flex-center nowrap-hidden">
     <SystemLogo class="text-32px text-primary" />
-    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
+    <h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
       {{ $t('system.title') }}
     </h2>
   </RouterLink>