github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: format code

pull/6358/head
tangjinzhou 2023-03-13 11:58:59 +08:00
parent b22bd85828
commit 77d0d188f0
22 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/space/demo/compact.vue
View File

@ -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" />

4
site/src/components/antdv-token-previewer/ColorPanel.tsx
View File

@ -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);

3
site/src/components/antdv-token-previewer/IconSwitch.tsx
View File

@ -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';

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

@ -1,7 +1,7 @@
import type { PropType } from 'vue';
import { defineComponent, toRefs, ref } from 'vue';
import { Button, CardProps } from 'ant-design-vue';
import { Card } from 'ant-design-vue';
import type { CardProps } 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';

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

@ -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> },

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

@ -115,16 +115,17 @@ const ComponentTokenDrawer = defineComponent({
const [, hashId] = useStyle();
const { component: componentToken, global: aliasTokenNames } = getComponentToken(
component.value,
) || {
global: [],
};
const componentToken = computed(
() =>
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)
}

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

@ -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 } };

2
site/src/components/antdv-token-previewer/interface.ts
View File

@ -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;

2
site/src/components/antdv-token-previewer/previewer.tsx
View File

@ -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';

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

@ -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';

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

@ -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 { defineComponent, watchEffect, computed, watch, ref } from 'vue';
import type { PropType } 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';

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

@ -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';

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

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

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

@ -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 { defineComponent, watchEffect, computed, ref } from 'vue';
import type { SelectedToken } from '../interface';
import type { PropType } from 'vue';
import { toRefs, defineComponent, watchEffect, computed, ref } from 'vue';
import { useInjectLocaleContext } from '../locale';
import { tokenCategory } from '../meta';
import type { TokenGroup } from '../meta/interface';

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

@ -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[] };

2
site/src/components/vue-colorful/components/HexColorPicker.tsx
View File

@ -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';

2
site/src/components/vue-colorful/components/RgbaColorPicker.tsx
View File

@ -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';

5
site/src/components/vue-colorful/hooks/useColorManipulation.ts
View File

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

2
site/src/components/vue-colorful/utils/compare.ts
View File

@ -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;

4
site/src/components/vue-colorful/utils/convert.ts
View File

@ -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,

2
site/src/views/theme-editor/JSONEditor/index.vue
View File

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

18
site/src/views/theme-editor/index.vue
View File

@ -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"
:mainMenuBar="false"
:on-change="handleEditConfigChange"
: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;
}