doc: format code

components/space/demo/compact.vue

@@ -17,7 +17,7 @@ Compact Mode for form component.
 </docs>
 
 <template>
-  <div className="site-space-compact-wrapper">
+  <div class="site-space-compact-wrapper">
     <a-space-compact block>
       <a-input :style="{ width: '20%' }" default-value="0571" />
       <a-input :style="{ width: '30%' }" default-value="26888888" />

site/src/components/antdv-token-previewer/ColorPanel.tsx

@@ -94,7 +94,7 @@ export type HexColorInputProps = {
   alpha?: boolean;
 };
 
-const getHexValue = (value: string, alpha: boolean = false) => {
+const getHexValue = (value: string, alpha = false) => {
   return alpha ? tinycolor(value).toHex8() : tinycolor(value).toHex();
 };
 const HexColorInput = defineComponent({
@@ -231,12 +231,12 @@ const getColorStr = (color: any, mode: ColorMode) => {
 };
 const ColorPanel = defineComponent({
   name: 'ColorPanel',
+  inheritAttrs: false,
   props: {
     color: { type: String },
     onChange: { type: Function as PropType<(color: string) => void> },
     alpha: { type: Boolean },
   },
-  inheritAttrs: false,
   setup(props, { attrs }) {
     const { color, alpha } = toRefs(props);
 

site/src/components/antdv-token-previewer/IconSwitch.tsx

@@ -1,6 +1,7 @@
 import classNames from 'ant-design-vue/es/_util/classNames';
 import makeStyle from './utils/makeStyle';
-import { defineComponent, PropType, toRefs } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, toRefs } from 'vue';
 
 const useStyle = makeStyle('IconSwitch', () => {
   const activeBackground = '#314659';

site/src/components/antdv-token-previewer/component-panel/ComponentCard.tsx

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import { defineComponent, toRefs, ref } from 'vue';
-import { Button, CardProps } from 'ant-design-vue';
+import type { CardProps } from 'ant-design-vue';
-import { Card } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 import { Control } from '../icons';
 import makeStyle from '../utils/makeStyle';
 import classNames from 'ant-design-vue/es/_util/classNames';

site/src/components/antdv-token-previewer/component-panel/ComponentDemoGroup.tsx

@@ -66,7 +66,7 @@ export const ComponentDemoBlock = defineComponent({
     size: { type: String as PropType<'small' | 'middle' | 'large'>, default: 'middle' },
     disabled: { type: Boolean, default: false },
     demos: {
-      type: Object as PropType<(ComponentDemo & { active?: boolean })[]>,
+      type: Array as PropType<(ComponentDemo & { active?: boolean })[]>,
       default: () => [],
     },
     theme: { type: Object as PropType<MutableTheme> },

site/src/components/antdv-token-previewer/component-panel/ComponentTokenDrawer.tsx

@@ -115,16 +115,17 @@ const ComponentTokenDrawer = defineComponent({
 
     const [, hashId] = useStyle();
 
-    const { component: componentToken, global: aliasTokenNames } = getComponentToken(
+    const componentToken = computed(
-      component.value,
+      () =>
-    ) || {
+        getComponentToken(component.value) || {
           global: [],
-    };
+        },
+    );
 
-    const componentTokenData = computed(() => Object.keys(componentToken.value ?? {}));
+    const componentTokenData = computed(() => Object.keys(componentToken.value.component ?? {}));
 
     const aliasTokenData = computed(() => {
-      return aliasTokenNames.sort();
+      return componentToken.value.global.slice().sort();
     });
 
     const handleComponentTokenChange = (token: string, value: TokenValue) => {
@@ -177,7 +178,7 @@ const ComponentTokenDrawer = defineComponent({
                 tokenArr={componentTokenData.value}
                 tokenPath={['components', component.value]}
                 themes={[theme.value]}
-                fallback={() => componentToken.value}
+                fallback={() => componentToken.value.component}
                 onTokenChange={(_, tokenName, value) =>
                   handleComponentTokenChange(tokenName, value)
                 }

site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx

@@ -41,7 +41,7 @@ const useControlledTheme: UseControlledTheme = ({ theme: customTheme, defaultThe
 
   const getNewTheme = (newTheme: Theme, force?: boolean): Theme => {
     const newToken = { ...newTheme.config.token };
-    if (infoFollowPrimary || force) {
+    if (infoFollowPrimary.value || force) {
       newToken.colorInfo = getDesignToken(newTheme.config).colorPrimary;
     }
     return { ...newTheme, config: { ...newTheme.config, token: newToken } };

site/src/components/antdv-token-previewer/interface.ts

@@ -1,5 +1,5 @@
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import { VueNode } from 'ant-design-vue/es/_util/type';
+import type { VueNode } from 'ant-design-vue/es/_util/type';
 
 export type Theme = {
   name: string;

site/src/components/antdv-token-previewer/previewer.tsx

@@ -1,8 +1,8 @@
 import { Button, Layout, message, theme as antdTheme } from 'ant-design-vue';
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import classNames from 'ant-design-vue/es/_util/classNames';
-import { PropType } from 'vue';
 import { defineComponent, toRefs, watchEffect, computed, ref } from 'vue';
+import type { PropType } from 'vue';
 import ComponentPanel from './component-panel';
 import type { FilterMode } from './FilterPanel';
 import FilterPanel from './FilterPanel';

site/src/components/antdv-token-previewer/token-panel-pro/AliasPanel.tsx

@@ -5,13 +5,12 @@ import {
   ShrinkOutlined,
 } from '@ant-design/icons-vue';
 import { Button, Collapse, Empty, Tooltip } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, AliasToken, SelectedToken } from '../interface';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import useMergedState from 'ant-design-vue/es/_util/hooks/useMergedState';
-import { PropType, Ref } from 'vue';
 import { defineComponent, toRefs, computed } from 'vue';
+import type { PropType, Ref } from 'vue';
 import { Pick } from '../icons';
-import type { AliasToken, SelectedToken } from '../interface';
 import { mapRelatedAlias, seedRelatedAlias } from '../meta/TokenRelation';
 import makeStyle from '../utils/makeStyle';
 import { getRelatedComponents } from '../utils/statistic';

site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx

@@ -9,21 +9,20 @@ import {
   Tooltip,
   Typography,
 } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, SelectedToken } from '../interface';
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import seed from 'ant-design-vue/es/theme/themes/seed';
 import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
 import classNames from 'ant-design-vue/es/_util/classNames';
 
-import { PropType, toRefs } from 'vue';
+import type { PropType } from 'vue';
-import { defineComponent, watchEffect, computed, watch, ref } from 'vue';
+import { toRefs, defineComponent, watchEffect, computed, watch, ref } from 'vue';
 import { debounce } from 'lodash';
 
 import type { ThemeCode } from '../hooks/useControlledTheme';
 import { themeMap } from '../hooks/useControlledTheme';
 import { CompactTheme, DarkTheme, Light, Pick } from '../icons';
 
-import type { SelectedToken } from '../interface';
 import { useInjectLocaleContext } from '../locale';
 import type { TokenCategory, TokenGroup } from '../meta/interface';
 import getDesignToken from '../utils/getDesignToken';

site/src/components/antdv-token-previewer/token-panel-pro/TokenDetail.tsx

@@ -1,10 +1,9 @@
 import { Tooltip } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, TokenValue } from '../interface';
 import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import type { PropType } from 'vue';
 import { defineComponent, computed, toRefs } from 'vue';
-import type { TokenValue } from '../interface';
 import { useInjectLocaleContext } from '../locale';
 import { mapRelatedAlias } from '../meta/TokenRelation';
 import TokenInput from '../TokenInput';

site/src/components/antdv-token-previewer/token-panel-pro/TokenPreview.tsx

@@ -1,6 +1,6 @@
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import { PropType, toRefs } from 'vue';
+import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { toRefs, defineComponent } from 'vue';
 
 import getColorBgImg from '../utils/getColorBgImg';
 import getDesignToken from '../utils/getDesignToken';

site/src/components/antdv-token-previewer/token-panel-pro/index.tsx

@@ -1,9 +1,8 @@
 import { Tabs } from 'ant-design-vue';
-import type { Theme } from '../interface';
+import type { Theme, SelectedToken } from '../interface';
 import classNames from 'ant-design-vue/es/_util/classNames';
-import { PropType, toRefs } from 'vue';
+import type { PropType } from 'vue';
-import { defineComponent, watchEffect, computed, ref } from 'vue';
+import { toRefs, defineComponent, watchEffect, computed, ref } from 'vue';
-import type { SelectedToken } from '../interface';
 import { useInjectLocaleContext } from '../locale';
 import { tokenCategory } from '../meta';
 import type { TokenGroup } from '../meta/interface';

site/src/components/antdv-token-previewer/utils/statistic.ts

@@ -26,4 +26,5 @@ export const getRelatedComponents = (token: string | string[]): string[] => {
   );
 };
 
-export const getComponentToken = (component: string) => (tokenStatistic as any)[component];
+export const getComponentToken = (component: string) =>
+  tokenStatistic[component] as { component?: Record<string, any>; global: string[] };

site/src/components/vue-colorful/components/HexColorPicker.tsx

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 import { ColorPicker } from './common/ColorPicker';
-import { ColorModel } from '../types';
+import type { ColorModel } from '../types';
 import { equalHex } from '../utils/compare';
 import { hexToHsva, hsvaToHex } from '../utils/convert';
 

site/src/components/vue-colorful/components/RgbaColorPicker.tsx

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 import { AlphaColorPicker } from './common/AlphaColorPicker';
-import { ColorModel, RgbaColor } from '../types';
+import type { ColorModel, RgbaColor } from '../types';
 import { equalColorObjects } from '../utils/compare';
 import { rgbaToHsva, hsvaToRgba } from '../utils/convert';
 

site/src/components/vue-colorful/hooks/useColorManipulation.ts

@@ -1,5 +1,6 @@
-import { Ref, ref, watch } from 'vue';
+import type { Ref } from 'vue';
-import { ColorModel, AnyColor, HsvaColor } from '../types';
+import { ref, watch } from 'vue';
+import type { ColorModel, AnyColor, HsvaColor } from '../types';
 import { equalColorObjects } from '../utils/compare';
 import { useEventCallback } from './useEventCallback';
 

site/src/components/vue-colorful/utils/compare.ts

@@ -1,5 +1,5 @@
 import { hexToRgba } from './convert';
-import { ObjectColor } from '../types';
+import type { ObjectColor } from '../types';
 
 export const equalColorObjects = (first: ObjectColor, second: ObjectColor): boolean => {
   if (first === second) return true;

site/src/components/vue-colorful/utils/convert.ts

@@ -1,5 +1,5 @@
 import { round } from './round';
-import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
+import type { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
 
 /**
  * Valid CSS <angle> units.
@@ -58,7 +58,7 @@ export const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {
   s *= (l < 50 ? l : 100 - l) / 100;
 
   return {
-    h: h,
+    h,
     s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
     v: l + s,
     a,

site/src/views/theme-editor/JSONEditor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div className="svelte-jsoneditor-vue" ref="editor"></div>
+  <div ref="editor" class="svelte-jsoneditor-vue"></div>
 </template>
 
 <script>

site/src/views/theme-editor/index.vue

@@ -12,7 +12,7 @@
             v-model:open="editModelOpen"
             :title="locale.editModelTitle"
             :width="600"
-            :okText="locale.save"
+            :ok-text="locale.save"
             @ok="editSave"
             @cancel="editModelClose"
           >
@@ -25,19 +25,19 @@
               <template #default>
                 <JSONEditor
                   :content="themeConfigContent"
-                  :onChange="handleEditConfigChange"
+                  :on-change="handleEditConfigChange"
-                  :mainMenuBar="false"
+                  :main-menu-bar="false"
                 />
               </template>
             </Suspense>
           </a-modal>
-          <a-button @click="handleExport" class="theme-editor-header-actions">
+          <a-button class="theme-editor-header-actions" @click="handleExport">
             {{ locale.export }}
           </a-button>
-          <a-button @click="handleEditConfig" class="theme-editor-header-actions">
+          <a-button class="theme-editor-header-actions" @click="handleEditConfig">
             {{ locale.edit }}
           </a-button>
-          <a-button type="primary" @click="handleSave" class="theme-editor-header-actions">
+          <a-button type="primary" class="theme-editor-header-actions" @click="handleSave">
             {{ locale.save }}
           </a-button>
         </div>
@@ -45,8 +45,8 @@
       <ThemeEditor
         :theme="{ name: 'Custom Theme', key: 'test', config: theme }"
         :style="{ height: 'calc(100vh - 64px - 56px)' }"
-        @themeChange="handleThemeChange"
         :locale="lang === 'cn' ? zhCN : enUS"
+        @themeChange="handleThemeChange"
       />
     </a-config-provider>
   </div>
@@ -58,7 +58,7 @@ import { message } from 'ant-design-vue';
 import { useLocale } from '../../i18n';
 import locales from './locales';
 
-import Header from '../../layouts/Header/index.vue';
+import Header from '../../layouts/header/index.vue';
 
 // antd换肤编辑器
 import { enUS, ThemeEditor, zhCN } from '../../components/antdv-token-previewer';
@@ -108,7 +108,7 @@ export default defineComponent({
     };
 
     const editSave = () => {
-      if (!editThemeFormatRight) {
+      if (!editThemeFormatRight.value) {
         message.error(locale.value.editJsonContentTypeError);
         return;
       }