plain-design 1.0.0-beta.63 → 1.0.0-beta.64
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +2 -2
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/Button/button.scss +1 -1
- package/src/packages/components/Loading/loading.scss +2 -0
- package/src/packages/components/ThemeColor/index.tsx +22 -0
- package/src/packages/components/ThemeColor/theme-color.scss +36 -0
- package/src/packages/components/ThemeColorSelector/index.tsx +34 -0
- package/src/packages/components/ThemeDarkSelector/index.tsx +20 -0
- package/src/packages/components/ThemeDarkSelector/theme-dark-selector.scss +5 -0
- package/src/packages/components/ThemeLocaleSelector/index.tsx +27 -0
- package/src/packages/components/ThemeLocaleSelector/theme-locale-selector.scss +5 -0
- package/src/packages/components/ThemeShapeSelector/index.tsx +40 -0
- package/src/packages/components/ThemeShapeSelector/theme-shape-selector.scss +5 -0
- package/src/packages/components/ThemeSizeSelector/index.tsx +36 -0
- package/src/packages/components/ThemeSizeSelector/theme-size-selector.scss +5 -0
- package/src/packages/i18n/i18n.utils.ts +12 -10
- package/src/packages/i18n/lang/en-us.ts +12 -0
- package/src/packages/i18n/lang/zh-cn.ts +12 -0
package/package.json
CHANGED
@@ -0,0 +1,22 @@
|
|
1
|
+
import {computed, designComponent, getComponentCls, useClasses, useStyles} from "plain-design-composition";
|
2
|
+
import {getPrimaryColor} from "../PageThemeUtils";
|
3
|
+
import './theme-color.scss';
|
4
|
+
|
5
|
+
export const ThemeColor = designComponent({
|
6
|
+
name: 'theme-color',
|
7
|
+
props: {
|
8
|
+
primaryKey: { type: String }
|
9
|
+
},
|
10
|
+
setup({ props }) {
|
11
|
+
const classes = useClasses(() => [getComponentCls('theme-color')]);
|
12
|
+
const primaryColor = computed(() => getPrimaryColor(props.primaryKey));
|
13
|
+
const style1 = useStyles(styles => {styles.backgroundColor = primaryColor.value.light;});
|
14
|
+
const style2 = useStyles(styles => {styles.backgroundColor = primaryColor.value.dark;});
|
15
|
+
return () => (
|
16
|
+
<div className={classes.value}>
|
17
|
+
<div style={style1.value}/>
|
18
|
+
<div style={style2.value}/>
|
19
|
+
</div>
|
20
|
+
);
|
21
|
+
},
|
22
|
+
});
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@include comp(theme-color) {
|
2
|
+
display: flex;
|
3
|
+
align-items: center;
|
4
|
+
justify-content: center;
|
5
|
+
position: relative;
|
6
|
+
background-color: plv(secondary-2);
|
7
|
+
transform: rotate(45deg);
|
8
|
+
transform-origin: center;
|
9
|
+
|
10
|
+
$size: 24px;
|
11
|
+
$inset: 4px;
|
12
|
+
|
13
|
+
border-radius: $size;
|
14
|
+
height: $size;
|
15
|
+
width: $size;
|
16
|
+
|
17
|
+
& > div:first-child {
|
18
|
+
border-top-left-radius: $size;
|
19
|
+
border-bottom-left-radius: $size;
|
20
|
+
position: absolute;
|
21
|
+
top: $inset;
|
22
|
+
left: $inset;
|
23
|
+
height: calc(100% - #{$inset} * 2);
|
24
|
+
width: calc((100% - #{$inset} * 2) / 2 + 1px);
|
25
|
+
}
|
26
|
+
& > div:last-child {
|
27
|
+
border-top-right-radius: $size;
|
28
|
+
border-bottom-right-radius: $size;
|
29
|
+
position: absolute;
|
30
|
+
top: $inset;
|
31
|
+
right: $inset;
|
32
|
+
height: calc(100% - #{$inset} * 2);
|
33
|
+
width: calc((100% - #{$inset} * 2) / 2);
|
34
|
+
|
35
|
+
}
|
36
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import {designComponent} from "plain-design-composition";
|
2
|
+
import Dropdown from "../Dropdown";
|
3
|
+
import {ThemeColor} from "../ThemeColor";
|
4
|
+
import PageThemeUtils from "../PageThemeUtils";
|
5
|
+
import ThemePrimaryColors from "../ThemePrimaryColors";
|
6
|
+
import DropdownOption from "../DropdownOption";
|
7
|
+
|
8
|
+
export const ThemeColorSelector = designComponent({
|
9
|
+
name: 'theme-color-selector',
|
10
|
+
inheritPropsType: Dropdown,
|
11
|
+
setup({}) {
|
12
|
+
return () => (
|
13
|
+
<Dropdown
|
14
|
+
trigger="hover"
|
15
|
+
align="center"
|
16
|
+
placement="bottom"
|
17
|
+
v-slots={{
|
18
|
+
default: () => (
|
19
|
+
<div className="theme-color-selector">
|
20
|
+
<ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
|
21
|
+
</div>
|
22
|
+
),
|
23
|
+
popper: () => Object.entries(ThemePrimaryColors).map(([key]) => (
|
24
|
+
<DropdownOption key={key} onClick={() => PageThemeUtils.primary(key)}>
|
25
|
+
<ThemeColor className="dropdown-theme-color" primaryKey={key}/>
|
26
|
+
</DropdownOption>
|
27
|
+
))
|
28
|
+
}}
|
29
|
+
/>
|
30
|
+
);
|
31
|
+
},
|
32
|
+
});
|
33
|
+
|
34
|
+
export default ThemeColorSelector;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import {designComponent, getComponentCls} from "plain-design-composition";
|
2
|
+
import i18n from "../i18n";
|
3
|
+
import Tooltip from "../Tooltip";
|
4
|
+
import PageThemeUtils from "../PageThemeUtils";
|
5
|
+
import Icon from "../Icon";
|
6
|
+
import './theme-dark-selector.scss';
|
7
|
+
|
8
|
+
export const ThemeDarkSelector = designComponent({
|
9
|
+
name: 'theme-dark-selector',
|
10
|
+
setup() {
|
11
|
+
const toggleDarkTheme = () => {PageThemeUtils.toggle();};
|
12
|
+
return () => (
|
13
|
+
<Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
|
14
|
+
<div className={getComponentCls('theme-dark-selector')} onClick={toggleDarkTheme}>
|
15
|
+
<Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
|
16
|
+
</div>
|
17
|
+
</Tooltip>
|
18
|
+
);
|
19
|
+
},
|
20
|
+
});
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import {designComponent, getComponentCls} from "plain-design-composition";
|
2
|
+
import Dropdown from "../Dropdown";
|
3
|
+
import DropdownOption from "../DropdownOption";
|
4
|
+
import Icon from "../Icon";
|
5
|
+
import i18n from "../i18n";
|
6
|
+
import './theme-locale-selector.scss';
|
7
|
+
|
8
|
+
export const ThemeLocaleSelector = designComponent({
|
9
|
+
name: 'theme-locale-selector',
|
10
|
+
props: {
|
11
|
+
i18nManager: {},
|
12
|
+
},
|
13
|
+
setup({}) {
|
14
|
+
return () => (
|
15
|
+
<Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
|
16
|
+
popper: () => i18n.state.localeOptions.map(opt => (
|
17
|
+
<DropdownOption label={opt.label} key={opt.label} onClick={() => i18n.switchTo(opt.key, () => opt.lang)}/>
|
18
|
+
)),
|
19
|
+
default: () => (
|
20
|
+
<div className={getComponentCls('theme-locale-selector')}>
|
21
|
+
<Icon icon="pi-language"/>
|
22
|
+
</div>
|
23
|
+
)
|
24
|
+
}}/>
|
25
|
+
);
|
26
|
+
},
|
27
|
+
});
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import {computed, designComponent, getComponentCls} from "plain-design-composition";
|
2
|
+
import Dropdown from "../Dropdown";
|
3
|
+
import DropdownOption from "../DropdownOption";
|
4
|
+
import i18n from "../i18n";
|
5
|
+
import Icon from "../Icon";
|
6
|
+
import {ThemeShape} from "../../uses/useStyle";
|
7
|
+
import PageThemeUtils from "../PageThemeUtils";
|
8
|
+
import './theme-shape-selector.scss';
|
9
|
+
|
10
|
+
export const ThemeShapeSelector = designComponent({
|
11
|
+
name: 'theme-shape-selector',
|
12
|
+
setup() {
|
13
|
+
|
14
|
+
const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
|
15
|
+
{ label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
|
16
|
+
{ label: i18n.$it('theme.radiusOptions.square').d('小圆角'), val: ThemeShape.square },
|
17
|
+
{ label: i18n.$it('theme.radiusOptions.none').d('无圆角'), val: ThemeShape.none },
|
18
|
+
]);
|
19
|
+
|
20
|
+
const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
|
21
|
+
|
22
|
+
return () => (
|
23
|
+
<Dropdown
|
24
|
+
trigger="hover"
|
25
|
+
align="center"
|
26
|
+
placement="bottom"
|
27
|
+
v-slots={{
|
28
|
+
default: () => (
|
29
|
+
<div className={getComponentCls('theme-shape-selector')}>
|
30
|
+
<Icon icon="pi-copy"/>
|
31
|
+
</div>
|
32
|
+
),
|
33
|
+
popper: () => radiusOptions.value.map(opt => (
|
34
|
+
<DropdownOption label={opt.label} val={opt.val} key={opt.val || ""} onClick={() => toggleShape(opt.val)}/>
|
35
|
+
)),
|
36
|
+
}}
|
37
|
+
/>
|
38
|
+
);
|
39
|
+
},
|
40
|
+
});
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import {computed, designComponent, getComponentCls} from "plain-design-composition";
|
2
|
+
import Dropdown from "../Dropdown";
|
3
|
+
import DropdownOption from "../DropdownOption";
|
4
|
+
import i18n from "../i18n";
|
5
|
+
import Icon from "../Icon";
|
6
|
+
import PageThemeUtils from "../PageThemeUtils";
|
7
|
+
import './theme-size-selector.scss';
|
8
|
+
|
9
|
+
export const ThemeSizeSelector = designComponent({
|
10
|
+
name: 'theme-size-selector',
|
11
|
+
props: {},
|
12
|
+
setup() {
|
13
|
+
|
14
|
+
const sizeOptions = computed((): { label: string, val: string }[] => [
|
15
|
+
{ label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
|
16
|
+
{ label: i18n.$it('theme.sizeOptions.normal').d('中'), val: 'normal' },
|
17
|
+
{ label: i18n.$it('theme.sizeOptions.small').d('小'), val: 'small' },
|
18
|
+
{ label: i18n.$it('theme.sizeOptions.mini').d('极小'), val: 'mini' },
|
19
|
+
]);
|
20
|
+
|
21
|
+
const toggleSize = (val: any) => {PageThemeUtils.size(val);};
|
22
|
+
|
23
|
+
return () => (
|
24
|
+
<Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
|
25
|
+
popper: () => sizeOptions.value.map(opt => (
|
26
|
+
<DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => toggleSize(opt.val)}/>
|
27
|
+
)),
|
28
|
+
default: () => (
|
29
|
+
<div className={getComponentCls('theme-size-selector')}>
|
30
|
+
<Icon icon="pi-font-colors"/>
|
31
|
+
</div>
|
32
|
+
)
|
33
|
+
}}/>
|
34
|
+
);
|
35
|
+
},
|
36
|
+
});
|
@@ -2,6 +2,7 @@ import {createSyncHooks, reactive} from "plain-design-composition";
|
|
2
2
|
import {ZhCnLocale} from './lang/zh-cn';
|
3
3
|
import {deepmerge} from "../components/PageThemeUtils/deepmerge";
|
4
4
|
import {PlainObject} from "plain-utils/utils/event";
|
5
|
+
import {createCache} from "../utils/createCache";
|
5
6
|
|
6
7
|
/**
|
7
8
|
/**
|
@@ -11,15 +12,6 @@ import {PlainObject} from "plain-utils/utils/event";
|
|
11
12
|
*/
|
12
13
|
const DEFAULT_LANG = 'zh-cn';
|
13
14
|
|
14
|
-
/**
|
15
|
-
* 组件内置中文以及英文
|
16
|
-
* @author 韦胜健
|
17
|
-
* @date 2023/10/12 15:14
|
18
|
-
*/
|
19
|
-
const LANGS = {
|
20
|
-
[DEFAULT_LANG]: ZhCnLocale,
|
21
|
-
};
|
22
|
-
|
23
15
|
/**
|
24
16
|
* 根据中文解析出来允许访问的编码类型
|
25
17
|
* @author 韦胜健
|
@@ -47,9 +39,15 @@ type iFormat<
|
|
47
39
|
type iStandardLangPath = iFormat<typeof ZhCnLocale>;
|
48
40
|
|
49
41
|
export const i18n = (() => {
|
42
|
+
|
50
43
|
const state = reactive({
|
51
44
|
currentLang: DEFAULT_LANG,
|
52
|
-
langs:
|
45
|
+
langs: {
|
46
|
+
[DEFAULT_LANG]: ZhCnLocale,
|
47
|
+
} as any,
|
48
|
+
localeOptions: [
|
49
|
+
{ label: '中文', key: DEFAULT_LANG, lang: ZhCnLocale }
|
50
|
+
] as { label: string, key: string, lang: PlainObject }[]
|
53
51
|
});
|
54
52
|
|
55
53
|
const hooks = {
|
@@ -215,6 +213,10 @@ export const i18n = (() => {
|
|
215
213
|
return result;
|
216
214
|
};
|
217
215
|
|
216
|
+
const cache = createCache<string>('@@I18N_LANG');
|
217
|
+
|
218
|
+
if (cache.get()) {switchTo(cache.get()!);}
|
219
|
+
|
218
220
|
return {
|
219
221
|
$t,
|
220
222
|
$intl,
|
@@ -274,6 +274,18 @@ export const EnUsLocale: tZhCnLocale = {
|
|
274
274
|
radiusModeNone: 'None',
|
275
275
|
scale: 'SCALE',
|
276
276
|
reset: 'RESET',
|
277
|
+
darkOrLight: '深浅主题',
|
278
|
+
sizeOptions: {
|
279
|
+
large: '大',
|
280
|
+
normal: '中',
|
281
|
+
small: '小',
|
282
|
+
mini: '极小',
|
283
|
+
},
|
284
|
+
radiusOptions: {
|
285
|
+
round: '圆角',
|
286
|
+
square: '小圆角',
|
287
|
+
none: '无圆角',
|
288
|
+
}
|
277
289
|
},
|
278
290
|
colorName: {
|
279
291
|
默认主题: 'Default',
|
@@ -272,6 +272,18 @@ export const ZhCnLocale = {
|
|
272
272
|
radiusModeNone: '无圆角',
|
273
273
|
scale: '大小缩放',
|
274
274
|
reset: '重置',
|
275
|
+
darkOrLight: '深浅主题',
|
276
|
+
sizeOptions: {
|
277
|
+
large: '大',
|
278
|
+
normal: '中',
|
279
|
+
small: '小',
|
280
|
+
mini: '极小',
|
281
|
+
},
|
282
|
+
radiusOptions: {
|
283
|
+
round: '圆角',
|
284
|
+
square: '小圆角',
|
285
|
+
none: '无圆角',
|
286
|
+
}
|
275
287
|
},
|
276
288
|
colorName: {
|
277
289
|
默认主题: '默认主题',
|