plain-design 1.0.0-beta.86 → 1.0.0-beta.87
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.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/PageThemeUtils/index.tsx +16 -15
- package/src/packages/components/ThemeColorSelector/index.tsx +7 -2
- package/src/packages/components/ThemeDarkSelector/index.tsx +9 -3
- package/src/packages/components/ThemeLocaleSelector/index.tsx +6 -1
- package/src/packages/components/ThemeShapeSelector/index.tsx +7 -2
- package/src/packages/components/ThemeSizeSelector/index.tsx +7 -2
package/package.json
CHANGED
@@ -88,38 +88,39 @@ export const PageThemeUtils = (() => {
|
|
88
88
|
return config;
|
89
89
|
});
|
90
90
|
|
91
|
-
const toggle = (isDark?: boolean) => {
|
92
|
-
|
93
|
-
|
91
|
+
const toggle = (isDark?: boolean, onlyCache?: boolean) => {
|
92
|
+
const dark: boolean = isDark == null ? !isDark : isDark;
|
93
|
+
!onlyCache && (state.dark = dark);
|
94
|
+
darkCache.set(dark);
|
94
95
|
};
|
95
96
|
|
96
|
-
const primary = (val: string | null) => {
|
97
|
-
state.primaryKey = val;
|
97
|
+
const primary = (val: string | null, onlyCache?: boolean) => {
|
98
|
+
!onlyCache && (state.primaryKey = val);
|
98
99
|
primaryCache.set(val);
|
99
100
|
};
|
100
101
|
|
101
|
-
const size = (val: typeof ThemeSize.TYPE | null) => {
|
102
|
-
state.size = val;
|
102
|
+
const size = (val: typeof ThemeSize.TYPE | null, onlyCache?: boolean) => {
|
103
|
+
!onlyCache && (state.size = val);
|
103
104
|
sizeCache.set(val);
|
104
105
|
};
|
105
106
|
|
106
|
-
const shape = (val: typeof ThemeShape.TYPE | null) => {
|
107
|
-
state.shape = val;
|
107
|
+
const shape = (val: typeof ThemeShape.TYPE | null, onlyCache?: boolean) => {
|
108
|
+
!onlyCache && (state.shape = val);
|
108
109
|
shapeCache.set(val);
|
109
110
|
};
|
110
111
|
|
111
|
-
const inputMode = (val: typeof InputMode.TYPE | null) => {
|
112
|
-
state.inputMode = val;
|
112
|
+
const inputMode = (val: typeof InputMode.TYPE | null, onlyCache?: boolean) => {
|
113
|
+
!onlyCache && (state.inputMode = val);
|
113
114
|
inputModeCache.set(val);
|
114
115
|
};
|
115
116
|
|
116
|
-
const buttonMode = (val: typeof ThemeMode.TYPE | null) => {
|
117
|
-
state.buttonMode = val;
|
117
|
+
const buttonMode = (val: typeof ThemeMode.TYPE | null, onlyCache?: boolean) => {
|
118
|
+
!onlyCache && (state.buttonMode = val);
|
118
119
|
buttonModeCache.set(val);
|
119
120
|
};
|
120
121
|
|
121
|
-
const zoom = (val: number | null) => {
|
122
|
-
state.zoom = val;
|
122
|
+
const zoom = (val: number | null, onlyCache?: boolean) => {
|
123
|
+
!onlyCache && (state.zoom = val);
|
123
124
|
zoomCache.set(val);
|
124
125
|
};
|
125
126
|
|
@@ -8,10 +8,14 @@ import DropdownOption from "../DropdownOption";
|
|
8
8
|
export const ThemeColorSelector = designComponent({
|
9
9
|
name: 'theme-color-selector',
|
10
10
|
inheritPropsType: Dropdown,
|
11
|
+
props: {
|
12
|
+
reloadOnChange: { type: Boolean },
|
13
|
+
onlyCache: { type: Boolean },
|
14
|
+
},
|
11
15
|
emits: {
|
12
16
|
onChange: (primaryKey: string) => true,
|
13
17
|
},
|
14
|
-
setup({ event: { emit } }) {
|
18
|
+
setup({ props, event: { emit } }) {
|
15
19
|
|
16
20
|
const classes = useClassCache(() => [
|
17
21
|
getComponentCls('theme-selector'),
|
@@ -19,8 +23,9 @@ export const ThemeColorSelector = designComponent({
|
|
19
23
|
]);
|
20
24
|
|
21
25
|
const change = (key: string) => {
|
22
|
-
PageThemeUtils.primary(key);
|
26
|
+
PageThemeUtils.primary(key, props.onlyCache || props.reloadOnChange);
|
23
27
|
emit.onChange(key);
|
28
|
+
props.reloadOnChange && window.location.reload();
|
24
29
|
};
|
25
30
|
|
26
31
|
return () => (
|
@@ -7,10 +7,14 @@ import './theme-dark-selector.scss';
|
|
7
7
|
|
8
8
|
export const ThemeDarkSelector = designComponent({
|
9
9
|
name: 'theme-dark-selector',
|
10
|
+
props: {
|
11
|
+
reloadOnChange: { type: Boolean },
|
12
|
+
onlyCache: { type: Boolean },
|
13
|
+
},
|
10
14
|
emits: {
|
11
15
|
onChange: (dark: boolean) => true,
|
12
16
|
},
|
13
|
-
setup({ event: { emit } }) {
|
17
|
+
setup({ props, event: { emit } }) {
|
14
18
|
|
15
19
|
const classes = useClassCache(() => [
|
16
20
|
getComponentCls('theme-selector'),
|
@@ -18,8 +22,10 @@ export const ThemeDarkSelector = designComponent({
|
|
18
22
|
]);
|
19
23
|
|
20
24
|
const change = () => {
|
21
|
-
PageThemeUtils.
|
22
|
-
|
25
|
+
const dark = !(PageThemeUtils.state.dark == null ? false : PageThemeUtils.state.dark);
|
26
|
+
PageThemeUtils.toggle(dark, props.onlyCache || props.reloadOnChange);
|
27
|
+
emit.onChange(dark);
|
28
|
+
props.reloadOnChange && window.location.reload();
|
23
29
|
};
|
24
30
|
return () => (
|
25
31
|
<Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
|
@@ -7,10 +7,14 @@ import './theme-locale-selector.scss';
|
|
7
7
|
|
8
8
|
export const ThemeLocaleSelector = designComponent({
|
9
9
|
name: 'theme-locale-selector',
|
10
|
+
props: {
|
11
|
+
reloadOnChange: { type: Boolean },
|
12
|
+
onlyCache: { type: Boolean },
|
13
|
+
},
|
10
14
|
emits: {
|
11
15
|
onChange: (locale: string) => true,
|
12
16
|
},
|
13
|
-
setup({ event: { emit } }) {
|
17
|
+
setup({ props, event: { emit } }) {
|
14
18
|
const classes = useClassCache(() => [
|
15
19
|
getComponentCls('theme-selector'),
|
16
20
|
getComponentCls('theme-locale-selector'),
|
@@ -19,6 +23,7 @@ export const ThemeLocaleSelector = designComponent({
|
|
19
23
|
const change = (key: string, fn: () => any) => {
|
20
24
|
i18n.switchTo(key, fn);
|
21
25
|
emit.onChange(key);
|
26
|
+
props.reloadOnChange && window.location.reload();
|
22
27
|
};
|
23
28
|
|
24
29
|
return () => (
|
@@ -9,10 +9,14 @@ import './theme-shape-selector.scss';
|
|
9
9
|
|
10
10
|
export const ThemeShapeSelector = designComponent({
|
11
11
|
name: 'theme-shape-selector',
|
12
|
+
props: {
|
13
|
+
reloadOnChange: { type: Boolean },
|
14
|
+
onlyCache: { type: Boolean },
|
15
|
+
},
|
12
16
|
emits: {
|
13
17
|
onChange: (shape: typeof ThemeShape.TYPE) => true,
|
14
18
|
},
|
15
|
-
setup({ event: { emit } }) {
|
19
|
+
setup({ props, event: { emit } }) {
|
16
20
|
|
17
21
|
const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
|
18
22
|
{ label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
|
@@ -21,8 +25,9 @@ export const ThemeShapeSelector = designComponent({
|
|
21
25
|
]);
|
22
26
|
|
23
27
|
const change = (shape: typeof ThemeShape.TYPE) => {
|
24
|
-
PageThemeUtils.shape(shape);
|
28
|
+
PageThemeUtils.shape(shape, props.onlyCache || props.reloadOnChange);
|
25
29
|
emit.onChange(shape);
|
30
|
+
props.reloadOnChange && window.location.reload();
|
26
31
|
};
|
27
32
|
|
28
33
|
const classes = useClassCache(() => [
|
@@ -9,10 +9,14 @@ import {ThemeSize} from "../../uses/useStyle";
|
|
9
9
|
|
10
10
|
export const ThemeSizeSelector = designComponent({
|
11
11
|
name: 'theme-size-selector',
|
12
|
+
props: {
|
13
|
+
reloadOnChange: { type: Boolean },
|
14
|
+
onlyCache: { type: Boolean },
|
15
|
+
},
|
12
16
|
emits: {
|
13
17
|
onChange: (size: typeof ThemeSize.TYPE) => true,
|
14
18
|
},
|
15
|
-
setup({ event: { emit } }) {
|
19
|
+
setup({ props, event: { emit } }) {
|
16
20
|
|
17
21
|
const sizeOptions = computed((): { label: string, val: string }[] => [
|
18
22
|
{ label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
|
@@ -22,8 +26,9 @@ export const ThemeSizeSelector = designComponent({
|
|
22
26
|
]);
|
23
27
|
|
24
28
|
const change = (size: typeof ThemeSize.TYPE) => {
|
25
|
-
PageThemeUtils.size(size);
|
29
|
+
PageThemeUtils.size(size, props.onlyCache || props.reloadOnChange);
|
26
30
|
emit.onChange(size);
|
31
|
+
props.reloadOnChange && window.location.reload();
|
27
32
|
};
|
28
33
|
|
29
34
|
const classes = useClassCache(() => [
|