plain-design 1.0.0-beta.24 → 1.0.0-beta.25
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +1 -1
- package/dist/plain-design.min.css +2 -2
- package/dist/plain-design.min.js +1 -1
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/PageThemeUtils/index.tsx +52 -14
- package/src/packages/components/Table/table/table.scss +1 -0
- package/src/packages/components/ThemeEditor/index.tsx +14 -2
- package/src/packages/components/ThemeEditor/theme-editor.scss +11 -0
package/package.json
CHANGED
@@ -24,26 +24,62 @@ export const PageThemeUtils = (() => {
|
|
24
24
|
|
25
25
|
const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
|
26
26
|
const config: DeepPartial<iApplicationConfiguration> = {};
|
27
|
-
if (!config.theme) {
|
28
|
-
|
27
|
+
if (!config.theme) {config.theme = {};}
|
28
|
+
if (!config.theme.base) {config.theme.base = {};}
|
29
|
+
if (!config.theme.vars) {config.theme.vars = {};}
|
30
|
+
|
31
|
+
let { dark, primaryKey, size, shape, inputMode, zoom } = state;
|
32
|
+
|
33
|
+
config.theme.dark = !!dark;
|
34
|
+
|
35
|
+
if (!!primaryKey) {
|
36
|
+
if (dark && primaryKey === 'dark') {
|
37
|
+
primaryKey = 'white';
|
38
|
+
} else if (!dark && primaryKey === 'light') {
|
39
|
+
primaryKey = 'dark';
|
40
|
+
}
|
29
41
|
}
|
30
|
-
|
31
|
-
|
42
|
+
|
43
|
+
config.theme.base.primary = !primaryKey ? undefined : ThemePrimaryColors[primaryKey]?.primary;
|
44
|
+
|
45
|
+
if (primaryKey === 'dark') {
|
46
|
+
Object.assign(config.theme.vars!, {
|
47
|
+
'primary-light-1': '#f2f3f5',
|
48
|
+
'primary-1': '#f2f3f5',
|
49
|
+
'primary-light-2': '#e1e2e7',
|
50
|
+
'primary-2': '#e1e2e7',
|
51
|
+
'primary-light-3': '#c9cdd4',
|
52
|
+
'primary-3': '#c9cdd4',
|
53
|
+
'primary-light-4': '#a9aeb8',
|
54
|
+
'primary-4': '#a9aeb8',
|
55
|
+
'primary-light-5': '#86909c',
|
56
|
+
'primary-5': '#86909c',
|
57
|
+
'primary-light-6': '#0c0e10',
|
58
|
+
'primary-6': '#0b0b0b',
|
59
|
+
'primary-light-7': '#464f5e',
|
60
|
+
'primary-7': '#464f5e',
|
61
|
+
'primary-light-8': '#272e3b',
|
62
|
+
'primary-8': '#272e3b',
|
63
|
+
'primary-light-9': '#1d2129',
|
64
|
+
'primary-9': '#111318',
|
65
|
+
'primary-light-10': '#0c0e10',
|
66
|
+
'primary-10': '#0b0b0b',
|
67
|
+
});
|
32
68
|
}
|
33
|
-
|
34
|
-
|
69
|
+
|
70
|
+
|
35
71
|
if (!config.default) {
|
36
72
|
config.default = {};
|
37
73
|
}
|
38
|
-
if (!!
|
39
|
-
config.default.size =
|
74
|
+
if (!!size) {
|
75
|
+
config.default.size = size;
|
40
76
|
}
|
41
|
-
if (!!
|
42
|
-
config.default.shape =
|
77
|
+
if (!!shape) {
|
78
|
+
config.default.shape = shape;
|
43
79
|
if (!config.theme.vars) {
|
44
80
|
config.theme.vars = {};
|
45
81
|
}
|
46
|
-
if (
|
82
|
+
if (shape === 'square') {
|
47
83
|
Object.assign(config.theme.vars, {
|
48
84
|
'box-size-mini-border-radius': '2px',
|
49
85
|
'box-size-small-border-radius': '2px',
|
@@ -51,7 +87,7 @@ export const PageThemeUtils = (() => {
|
|
51
87
|
'box-size-large-border-radius': '4px',
|
52
88
|
});
|
53
89
|
}
|
54
|
-
if (
|
90
|
+
if (shape === 'none') {
|
55
91
|
Object.assign(config.theme.vars, {
|
56
92
|
'box-size-mini-border-radius': '0',
|
57
93
|
'box-size-small-border-radius': '0',
|
@@ -60,8 +96,8 @@ export const PageThemeUtils = (() => {
|
|
60
96
|
});
|
61
97
|
}
|
62
98
|
}
|
63
|
-
if (!!
|
64
|
-
config.default.inputMode =
|
99
|
+
if (!!inputMode) {
|
100
|
+
config.default.inputMode = inputMode;
|
65
101
|
}
|
66
102
|
return config;
|
67
103
|
});
|
@@ -122,6 +158,8 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
|
|
122
158
|
geek: { label: '极客蓝', primary: '#2f54eb', },
|
123
159
|
purple: { label: '酱紫', primary: '#722ed1', },
|
124
160
|
magenta: { label: '洋红', primary: '#eb2f96', },
|
161
|
+
light: { label: '极昼', primary: '#9fa4af', },
|
162
|
+
dark: { label: '黑夜', primary: '#000000', },
|
125
163
|
};
|
126
164
|
|
127
165
|
export default PageThemeUtils;
|
@@ -53,6 +53,13 @@ export const ThemeEditor = designComponent({
|
|
53
53
|
onDarkChange: () => {
|
54
54
|
const val = !state.dark ? false : state.dark === 'dark';
|
55
55
|
PageThemeUtils.toggle(val);
|
56
|
+
if (val && state.primaryKey === 'dark') {
|
57
|
+
state.primaryKey = 'light';
|
58
|
+
handler.onPrimaryChange();
|
59
|
+
} else if (!val && state.primaryKey === 'light') {
|
60
|
+
state.primaryKey = 'dark';
|
61
|
+
handler.onPrimaryChange();
|
62
|
+
}
|
56
63
|
},
|
57
64
|
onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
|
58
65
|
onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
|
@@ -68,9 +75,12 @@ export const ThemeEditor = designComponent({
|
|
68
75
|
})
|
69
76
|
);
|
70
77
|
|
78
|
+
const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
|
79
|
+
|
71
80
|
return () => (
|
72
81
|
<div className={classes.value} style={styles.value} ref={onRef.el}>
|
73
82
|
<div className="theme-editor-inner" onClick={handler.handleClickInner}>
|
83
|
+
<div className="theme-editor-inner-cover"/>
|
74
84
|
<Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
|
75
85
|
</div>
|
76
86
|
{state.isExpand && (
|
@@ -91,8 +101,10 @@ export const ThemeEditor = designComponent({
|
|
91
101
|
<Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" placeholder="主题色" popperAttrs={publicPopperAttrs}>
|
92
102
|
{Object.entries(ThemePrimaryColors).map(([key, value]) => (
|
93
103
|
<SelectOption label={value!.label} val={key} key={key}>
|
94
|
-
|
95
|
-
|
104
|
+
<div className={getComponentCls('theme-editor-block-item')}>
|
105
|
+
{!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
|
106
|
+
<span>{value!.label}</span>
|
107
|
+
</div>
|
96
108
|
</SelectOption>
|
97
109
|
))}
|
98
110
|
</Select>
|
@@ -35,6 +35,12 @@
|
|
35
35
|
justify-content: center;
|
36
36
|
font-size: 24px;
|
37
37
|
transition: all ease 300ms;
|
38
|
+
|
39
|
+
.theme-editor-inner-cover {
|
40
|
+
position: absolute;
|
41
|
+
inset: 0;
|
42
|
+
user-select: none;
|
43
|
+
}
|
38
44
|
}
|
39
45
|
|
40
46
|
&.is-expand {
|
@@ -92,3 +98,8 @@
|
|
92
98
|
}
|
93
99
|
}
|
94
100
|
}
|
101
|
+
|
102
|
+
@include comp(theme-editor-block-item){
|
103
|
+
display: flex;
|
104
|
+
align-items: center;
|
105
|
+
}
|