style(projects): format code

packages/materials/src/libs/admin-layout/index.module.css.d.ts

@@ -14,4 +14,5 @@ declare const styles: {
   readonly 'sider-padding-top': string;
   readonly 'sider-padding-bottom': string;
 };
-export = styles;
+
+export default styles;

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

@@ -1,5 +1,5 @@
 import AdminLayout from './index.vue';
-import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from './shared';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './shared';
 
 export default AdminLayout;
 export { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX };

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

@@ -1,129 +1,7 @@
-<template>
-  <div :class="['relative h-full', commonClass]" :style="cssVars">
-    <div
-      :id="isWrapperScroll ? scrollElId : undefined"
-      :class="['flex flex-col h-full', commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
-    >
-      <!-- Header -->
-      <template v-if="showHeader">
-        <header
-          v-show="!fullContent"
-          :class="[
-            style['layout-header'],
-            'flex-shrink-0',
-            commonClass,
-            headerClass,
-            headerLeftGapClass,
-            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
-          ]"
-        >
-          <slot name="header"></slot>
-        </header>
-        <div
-          v-show="!fullContent && fixedHeaderAndTab"
-          :class="[style['layout-header-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-
-      <!-- Tab -->
-      <template v-if="showTab">
-        <div
-          :class="[
-            style['layout-tab'],
-            'flex-shrink-0',
-            commonClass,
-            tabClass,
-            { 'top-0!': fullContent || !showHeader },
-            leftGapClass,
-            { 'absolute left-0 w-full': fixedHeaderAndTab }
-          ]"
-        >
-          <slot name="tab"></slot>
-        </div>
-        <div
-          v-show="fullContent || fixedHeaderAndTab"
-          :class="[style['layout-tab-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-
-      <!-- Sider -->
-      <template v-if="showSider">
-        <aside
-          v-show="!fullContent"
-          :class="[
-            'absolute left-0 top-0 h-full',
-            commonClass,
-            siderClass,
-            siderPaddingClass,
-            siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-      </template>
-
-      <!-- Mobile Sider -->
-      <template v-if="showMobileSider">
-        <aside
-          :class="[
-            'absolute left-0 top-0 w-0 h-full bg-white',
-            commonClass,
-            mobileSiderClass,
-            style['layout-mobile-sider'],
-            siderCollapse ? 'overflow-hidden' : style['layout-sider']
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-        <div
-          v-show="!siderCollapse"
-          :class="['absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]', style['layout-mobile-sider-mask']]"
-          @click="handleClickMask"
-        ></div>
-      </template>
-
-      <!-- Main Content -->
-      <main
-        :id="isContentScroll ? scrollElId : undefined"
-        :class="[
-          'flex flex-col flex-grow',
-          commonClass,
-          contentClass,
-          leftGapClass,
-          { 'overflow-y-auto': isContentScroll }
-        ]"
-      >
-        <slot></slot>
-      </main>
-
-      <!-- Footer -->
-      <template v-if="showFooter">
-        <footer
-          v-show="!fullContent"
-          :class="[
-            style['layout-footer'],
-            'flex-shrink-0',
-            commonClass,
-            footerClass,
-            footerLeftGapClass,
-            { 'absolute left-0 bottom-0 w-full': fixedFooter }
-          ]"
-        >
-          <slot name="footer"></slot>
-        </footer>
-        <div
-          v-show="!fullContent && fixedFooter"
-          :class="[style['layout-footer-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { AdminLayoutProps } from '../../types';
-import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, createLayoutCssVars } from './shared';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID, createLayoutCssVars } from './shared';
 import style from './index.module.css';
 
 defineOptions({
@@ -150,31 +28,29 @@ const props = withDefaults(defineProps<AdminLayoutProps>(), {
   rightFooter: false
 });
 
+const emit = defineEmits<Emits>();
+
+const slots = defineSlots<Slots>();
+
 interface Emits {
-  /**
-   * update siderCollapse
-   */
+  /** Update siderCollapse */
   (e: 'update:siderCollapse', collapse: boolean): void;
 }
 
-const emit = defineEmits<Emits>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
-  /** main */
+  /** Main */
   default?: SlotFn;
-  /** header */
+  /** Header */
   header?: SlotFn;
-  /** tab */
+  /** Tab */
   tab?: SlotFn;
-  /** sider */
+  /** Sider */
   sider?: SlotFn;
-  /** footer */
+  /** Footer */
   footer?: SlotFn;
 };
-const slots = defineSlots<Slots>();
-
 const cssVars = computed(() => createLayoutCssVars(props));
 
 // config visible
@@ -235,4 +111,126 @@ function handleClickMask() {
 }
 </script>
 
+<template>
+  <div class="relative h-full" :class="[commonClass]" :style="cssVars">
+    <div
+      :id="isWrapperScroll ? scrollElId : undefined"
+      class="flex flex-col h-full"
+      :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
+    >
+      <!-- Header -->
+      <template v-if="showHeader">
+        <header
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-header'],
+            commonClass,
+            headerClass,
+            headerLeftGapClass,
+            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="header"></slot>
+        </header>
+        <div
+          v-show="!fullContent && fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-header-placement']]"
+        ></div>
+      </template>
+
+      <!-- Tab -->
+      <template v-if="showTab">
+        <div
+          class="flex-shrink-0"
+          :class="[
+            style['layout-tab'],
+            commonClass,
+            tabClass,
+            { 'top-0!': fullContent || !showHeader },
+            leftGapClass,
+            { 'absolute left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="tab"></slot>
+        </div>
+        <div
+          v-show="fullContent || fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-tab-placement']]"
+        ></div>
+      </template>
+
+      <!-- Sider -->
+      <template v-if="showSider">
+        <aside
+          v-show="!fullContent"
+          class="absolute left-0 top-0 h-full"
+          :class="[
+            commonClass,
+            siderClass,
+            siderPaddingClass,
+            siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+      </template>
+
+      <!-- Mobile Sider -->
+      <template v-if="showMobileSider">
+        <aside
+          class="absolute left-0 top-0 w-0 h-full bg-white"
+          :class="[
+            commonClass,
+            mobileSiderClass,
+            style['layout-mobile-sider'],
+            siderCollapse ? 'overflow-hidden' : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+        <div
+          v-show="!siderCollapse"
+          class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]"
+          :class="[style['layout-mobile-sider-mask']]"
+          @click="handleClickMask"
+        ></div>
+      </template>
+
+      <!-- Main Content -->
+      <main
+        :id="isContentScroll ? scrollElId : undefined"
+        class="flex flex-col flex-grow"
+        :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
+      >
+        <slot></slot>
+      </main>
+
+      <!-- Footer -->
+      <template v-if="showFooter">
+        <footer
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-footer'],
+            commonClass,
+            footerClass,
+            footerLeftGapClass,
+            { 'absolute left-0 bottom-0 w-full': fixedFooter }
+          ]"
+        >
+          <slot name="footer"></slot>
+        </footer>
+        <div
+          v-show="!fullContent && fixedFooter"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-footer-placement']]"
+        ></div>
+      </template>
+    </div>
+  </div>
+</template>
+
 <style scoped></style>

packages/materials/src/libs/admin-layout/shared.ts

@@ -1,18 +1,15 @@
-import type { AdminLayoutProps, LayoutCssVarsProps, LayoutCssVars } from '../../types';
+import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
 
-/**
- * the id of the scroll element of the layout
- */
+/** The id of the scroll element of the layout */
 export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
 
-/**
- * the max z-index of the layout
- */
+/** The max z-index of the layout */
 export const LAYOUT_MAX_Z_INDEX = 100;
 
 /**
- * create layout css vars by css vars props
- * @param props css vars props
+ * Create layout css vars by css vars props
+ *
+ * @param props Css vars props
  */
 function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
   const cssVars: LayoutCssVars = {
@@ -32,7 +29,8 @@ function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
 }
 
 /**
- * create layout css vars
+ * Create layout css vars
+ *
  * @param props
  */
 export function createLayoutCssVars(props: AdminLayoutProps) {

packages/materials/src/libs/color-picker/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import ColorPicker from '@simonwep/pickr';
 import '@simonwep/pickr/dist/themes/nano.min.css';
 
@@ -7,12 +7,6 @@ defineOptions({
   name: 'ColorPicker'
 });
 
-interface Props {
-  color: string;
-  palettes?: string[];
-  disabled?: boolean;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   palettes: () => [
     '#3b82f6',
@@ -35,12 +29,18 @@ const props = withDefaults(defineProps<Props>(), {
   ]
 });
 
+const emit = defineEmits<Emits>();
+
+interface Props {
+  color: string;
+  palettes?: string[];
+  disabled?: boolean;
+}
+
 interface Emits {
   (e: 'update:color', value: string): void;
 }
 
-const emit = defineEmits<Emits>();
-
 const domRef = ref<HTMLElement | null>(null);
 const instance = ref<ColorPicker | null>(null);
 

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

@@ -1,7 +1,43 @@
+<script setup lang="ts">
+import type { PageTabProps } from '../../types';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'ButtonTab'
+});
+
+defineProps<PageTabProps>();
+
+defineSlots<Slots>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * Slot
+   *
+   * The center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * Slot
+   *
+   * The left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * Slot
+   *
+   * The right content of the tab
+   */
+  suffix?: SlotFn;
+};
+</script>
+
 <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 justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap',
       style['button-tab'],
       { [style['button-tab_dark']]: darkMode },
       { [style['button-tab_active']]: active },
@@ -14,36 +50,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import style from './index.module.css';
-import type { PageTabProps } from '../../types';
-
-defineOptions({
-  name: 'ButtonTab'
-});
-
-defineProps<PageTabProps>();
-
-type SlotFn = (props?: Record<string, unknown>) => any;
-
-type Slots = {
-  /**
-   * slot
-   * @description the center content of the tab
-   */
-  default?: SlotFn;
-  /**
-   * slot
-   * @description the left content of the tab
-   */
-  prefix?: SlotFn;
-  /**
-   * slot
-   * @description the right content of the tab
-   */
-  suffix?: SlotFn;
-};
-defineSlots<Slots>();
-</script>
-
 <style scoped></style>

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

@@ -1,5 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ChromeTabBg'
+});
+</script>
+
 <template>
-  <svg style="width: 100%; height: 100%">
+  <svg class="wh-full">
     <defs>
       <symbol id="geometry-left" viewBox="0 0 214 36">
         <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
@@ -22,10 +28,4 @@
   </svg>
 </template>
 
-<script setup lang="ts">
-defineOptions({
-  name: 'ChromeTabBg'
-});
-</script>
-
 <style scoped></style>

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

@@ -1,27 +1,7 @@
-<template>
-  <div
-    :class="[
-      ':soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap',
-      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', 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', style['chrome-tab-divider']]"></div>
-  </div>
-</template>
-
 <script setup lang="ts">
+import type { PageTabProps } from '../../types';
 import ChromeTabBg from './chrome-tab-bg.vue';
 import style from './index.module.css';
-import type { PageTabProps } from '../../types';
 
 defineOptions({
   name: 'ChromeTab'
@@ -29,27 +9,50 @@ defineOptions({
 
 defineProps<PageTabProps>();
 
+defineSlots<Slots>();
+
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
   /**
-   * slot
-   * @description the center content of the tab
+   * Slot
+   *
+   * The center content of the tab
    */
   default?: SlotFn;
   /**
-   * slot
-   * @description the left content of the tab
+   * Slot
+   *
+   * The left content of the tab
    */
   prefix?: SlotFn;
   /**
-   * slot
-   * @description the right content of the tab
+   * Slot
+   *
+   * The right content of the tab
    */
   suffix?: SlotFn;
 };
-
-defineSlots<Slots>();
 </script>
 
+<template>
+  <div
+    class=":soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap"
+    :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']]">
+      <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>
+</template>
+
 <style scoped></style>

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

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'IconClose'
+});
+
+const emit = defineEmits<Emits>();
+
+interface Emits {
+  (e: 'click'): void;
+}
+
+function handleClick() {
+  emit('click');
+}
+</script>
+
 <template>
   <div
     class=":soy: relative inline-flex justify-center items-center w-16px h-16px text-14px rd-50%"
@@ -12,20 +28,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-defineOptions({
-  name: 'IconClose'
-});
-
-interface Emits {
-  (e: 'click'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-function handleClick() {
-  emit('click');
-}
-</script>
-
 <style scoped></style>

packages/materials/src/libs/page-tab/index.module.css.d.ts

@@ -11,4 +11,5 @@ declare const styles: {
   readonly 'chrome-tab_dark': string;
   readonly 'chrome-tab-divider': string;
 };
-export = styles;
+
+export default styles;

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

@@ -1,26 +1,12 @@
-<template>
-  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
-    <template #prefix>
-      <slot name="prefix"></slot>
-    </template>
-    <slot></slot>
-    <template #suffix>
-      <slot name="suffix">
-        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
-      </slot>
-    </template>
-  </component>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { createTabCssVars, ACTIVE_COLOR } from './shared';
+import type { PageTabMode, PageTabProps } from '../../types';
+import { ACTIVE_COLOR, createTabCssVars } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
 import SvgIconClose from './icon-close.vue';
 import style from './index.module.css';
-import type { PageTabProps, PageTabMode } from '../../types';
 
 defineOptions({
   name: 'PageTab'
@@ -33,34 +19,37 @@ const props = withDefaults(defineProps<PageTabProps>(), {
   closable: true
 });
 
+const emit = defineEmits<Emits>();
+
+defineSlots<Slots>();
+
 interface Emits {
   (e: 'close'): void;
 }
 
-const emit = defineEmits<Emits>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
   /**
-   * slot
-   * @description the center content of the tab
+   * Slot
+   *
+   * The center content of the tab
    */
   default?: SlotFn;
   /**
-   * slot
-   * @description the left content of the tab
+   * Slot
+   *
+   * The left content of the tab
    */
   prefix?: SlotFn;
   /**
-   * slot
-   * @description the right content of the tab
+   * Slot
+   *
+   * The right content of the tab
    */
   suffix?: SlotFn;
 };
 
-defineSlots<Slots>();
-
 const activeTabComponent = computed(() => {
   const { mode, chromeClass, buttonClass } = props;
 
@@ -91,4 +80,18 @@ function handleClose() {
 }
 </script>
 
+<template>
+  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <slot></slot>
+    <template #suffix>
+      <slot name="suffix">
+        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
+      </slot>
+    </template>
+  </component>
+</template>
+
 <style scoped></style>

packages/materials/src/libs/page-tab/shared.ts

@@ -1,9 +1,7 @@
 import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
-import type { PageTabCssVarsProps, PageTabCssVars } from '../../types';
+import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
 
-/**
- * the active color of the tab
- */
+/** The active color of the tab */
 export const ACTIVE_COLOR = '#1890ff';
 
 function createCssVars(props: PageTabCssVarsProps) {