plain-design 1.0.0-beta.47 → 1.0.0-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +7 -7
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +3 -3
- package/src/packages/components/$object/createObjectService.tsx +1 -0
- package/src/packages/components/Application/index.tsx +6 -3
- package/src/packages/components/Application/theme/theme.ts +3 -3
- package/src/packages/components/Application/utils/application.utils.ts +3 -2
- package/src/packages/components/AutoTable/AutoTable.tsx +1 -1
- package/src/packages/components/AutoTable/auto-table.scss +8 -41
- package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx +14 -18
- package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx +1 -0
- package/src/packages/components/AutoTable/use/useTableOption.hooks.tsx +9 -1
- package/src/packages/components/Button/button.scss +32 -0
- package/src/packages/components/Button/index.tsx +1 -1
- package/src/packages/components/ButtonGroup/button-group.scss +2 -2
- package/src/packages/components/ButtonGroup/index.tsx +1 -1
- package/src/packages/components/Checkbox/checkbox.scss +4 -0
- package/src/packages/components/FilterFormMultiple/filter-form-multiple.scss +10 -0
- package/src/packages/components/FilterFormMultiple/index.tsx +0 -1
- package/src/packages/components/Input/input.utils.ts +2 -2
- package/src/packages/components/PageRenderList/index.tsx +22 -0
- package/src/packages/components/PageThemeUtils/index.tsx +21 -4
- package/src/packages/components/Pagination/index.tsx +3 -3
- package/src/packages/components/Pagination/pagination.scss +2 -1
- package/src/packages/components/Table/table/Table.tsx +1 -0
- package/src/packages/components/ThemeEditor/index.tsx +23 -0
- package/src/packages/components/ThemeEditor/theme-editor.scss +1 -1
- package/src/packages/components/usePageRender/index.tsx +3 -0
- package/src/packages/components/usePageRenderContext/index.tsx +8 -0
- package/src/packages/i18n/i18n.utils.ts +17 -1
- package/src/packages/i18n/lang/en-us.ts +8 -1
- package/src/packages/i18n/lang/zh-cn.ts +8 -1
- package/src/packages/uses/useStyle.tsx +3 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "plain-design",
|
3
|
-
"version": "1.0.0-beta.
|
3
|
+
"version": "1.0.0-beta.49",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/plain-design.min.js",
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
@@ -34,7 +34,7 @@
|
|
34
34
|
"color": "4.2.3",
|
35
35
|
"dayjs": "1.11.10",
|
36
36
|
"plain-icons": "0.0.7",
|
37
|
-
"plain-utils": "0.1.
|
37
|
+
"plain-utils": "^0.1.58",
|
38
38
|
"react-flip-move": "3.0.5",
|
39
39
|
"react-transition-group": "4.4.5"
|
40
40
|
},
|
@@ -42,7 +42,7 @@
|
|
42
42
|
"@babel/plugin-proposal-optional-chaining": "7.21.0",
|
43
43
|
"@babel/plugin-transform-class-properties": "7.23.3",
|
44
44
|
"@babel/preset-env": "7.23.7",
|
45
|
-
"@babel/preset-react":"7.23.3",
|
45
|
+
"@babel/preset-react": "7.23.3",
|
46
46
|
"@babel/preset-typescript": "7.23.3",
|
47
47
|
"@types/classnames": "^2.2.11",
|
48
48
|
"@types/react": "18.2.4",
|
@@ -4,13 +4,15 @@ import {DeepPartial} from "../../utils/type";
|
|
4
4
|
import './application.scss';
|
5
5
|
import {useApplicationService} from "./service/useApplicationService";
|
6
6
|
import {createThemeConfigurationData} from "./theme/theme";
|
7
|
-
import {ThemeShape, ThemeSize} from "../../uses/useStyle";
|
7
|
+
import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
|
8
8
|
import {useApplicationPopup} from "../usePopup/usePopupManager";
|
9
9
|
|
10
10
|
export const Application = designComponent({
|
11
11
|
name: 'application',
|
12
12
|
props: {
|
13
|
-
configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, }
|
13
|
+
configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, },
|
14
|
+
defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.flat },
|
15
|
+
defaultButtonMode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.stroke },
|
14
16
|
},
|
15
17
|
slots: ['default'],
|
16
18
|
setup({ props, slots }) {
|
@@ -21,7 +23,8 @@ export const Application = designComponent({
|
|
21
23
|
default: {
|
22
24
|
size: ThemeSize.normal,
|
23
25
|
shape: ThemeShape.square,
|
24
|
-
inputMode:
|
26
|
+
inputMode: props.defaultInputMode,
|
27
|
+
buttonMode: props.defaultButtonMode,
|
25
28
|
...props.configuration?.default,
|
26
29
|
},
|
27
30
|
}));
|
@@ -131,10 +131,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
|
|
131
131
|
'box-size-normal-font-size': referenceVariable('font-size-normal'),
|
132
132
|
'box-size-large-font-size': referenceVariable('font-size-normal'),
|
133
133
|
/*border radius of sizes*/
|
134
|
-
'box-size-mini-border-radius': '
|
134
|
+
'box-size-mini-border-radius': '2px',
|
135
135
|
'box-size-small-border-radius': '4px',
|
136
|
-
'box-size-normal-border-radius': '
|
137
|
-
'box-size-large-border-radius': '
|
136
|
+
'box-size-normal-border-radius': '6px',
|
137
|
+
'box-size-large-border-radius': '8px',
|
138
138
|
/*---------------------------------------input-------------------------------------------*/
|
139
139
|
'input-padding-x-mini': '9px',
|
140
140
|
'input-padding-x-small': '11px',
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
|
2
2
|
import {iThemeConfiguration} from "../theme/theme";
|
3
|
-
import {ThemeShape, ThemeSize} from "../../../uses/useStyle";
|
3
|
+
import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../../uses/useStyle";
|
4
4
|
|
5
5
|
export interface iApplicationConfiguration {
|
6
6
|
theme: iThemeConfiguration;
|
7
7
|
default: {
|
8
8
|
size: typeof ThemeSize.TYPE,
|
9
9
|
shape: typeof ThemeShape.TYPE,
|
10
|
-
inputMode:
|
10
|
+
inputMode: typeof InputMode.TYPE,
|
11
|
+
buttonMode: typeof ThemeMode.TYPE,
|
11
12
|
},
|
12
13
|
}
|
13
14
|
|
@@ -2,6 +2,7 @@
|
|
2
2
|
position: relative;
|
3
3
|
|
4
4
|
@include sizeMixin(auto-table, (font-size)) {
|
5
|
+
|
5
6
|
.table-operation-bar {
|
6
7
|
.table-operation-bar-left {
|
7
8
|
@include comp(input-group) {
|
@@ -18,48 +19,13 @@
|
|
18
19
|
margin-bottom: $margin;
|
19
20
|
}
|
20
21
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
&:before {
|
26
|
-
position: absolute;
|
27
|
-
left: calc(#{$margin} * -1);
|
28
|
-
right: calc(#{$margin} * -1);
|
29
|
-
bottom: calc(100% + #{$margin});
|
30
|
-
height: $margin;
|
31
|
-
background-color: plv(bg-1);
|
32
|
-
content: '';
|
33
|
-
}
|
34
|
-
}*/
|
35
|
-
}
|
36
|
-
|
37
|
-
.auto-table-filter-form-separator {
|
38
|
-
background-color: plv(bg-1);
|
39
|
-
margin: calc(#{$margin} - #{$border-radius}) calc(#{$margin} * -1);
|
40
|
-
height: calc(#{$margin} + #{$border-radius} * 2);
|
41
|
-
position: relative;
|
42
|
-
|
43
|
-
&:before {
|
44
|
-
position: absolute;
|
45
|
-
top: 0;
|
46
|
-
left: 0;
|
47
|
-
right: 0;
|
48
|
-
height: $border-radius;
|
49
|
-
background-color: plv(bg-2);
|
50
|
-
content: '';
|
51
|
-
border-radius: $border-radius;
|
52
|
-
}
|
22
|
+
& > div {
|
23
|
+
padding: $margin;
|
24
|
+
background-color: plv(background-color);
|
25
|
+
border-radius: $border-radius;
|
53
26
|
|
54
|
-
|
55
|
-
|
56
|
-
bottom: 0;
|
57
|
-
left: 0;
|
58
|
-
right: 0;
|
59
|
-
height: $border-radius;
|
60
|
-
background-color: plv(bg-2);
|
61
|
-
content: '';
|
62
|
-
border-radius: $border-radius;
|
27
|
+
& + div {
|
28
|
+
margin-top: $margin;
|
63
29
|
}
|
64
30
|
}
|
65
31
|
}
|
@@ -78,6 +44,7 @@
|
|
78
44
|
cursor: pointer;
|
79
45
|
}
|
80
46
|
}
|
47
|
+
|
81
48
|
.table-operation-bar {
|
82
49
|
position: relative;
|
83
50
|
/*virtual-table-head-table-wrapper的z-index是4*/
|
@@ -159,27 +159,23 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
|
|
159
159
|
if (state.show) {list.push('filter-form-expanded');}
|
160
160
|
});
|
161
161
|
|
162
|
-
hooks.
|
163
|
-
processor: ({ list, render }) => {list.push({ seq:
|
162
|
+
hooks.onTableOuterRender.use({
|
163
|
+
processor: ({ list, render }) => {list.push({ seq: 0, key: 'form-filter', render, });},
|
164
164
|
render: () => (
|
165
165
|
!!filterOptions.value &&
|
166
166
|
filterOptions.value.length > 0 &&
|
167
|
-
state.show &&
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
}}
|
180
|
-
/>
|
181
|
-
<div className="auto-table-filter-form-separator"/>
|
182
|
-
</>
|
167
|
+
state.show && <FilterFormMultiple
|
168
|
+
ref={onRef.filter}
|
169
|
+
filterOptions={filterOptions.value!}
|
170
|
+
initialState={state.data}
|
171
|
+
onSearch={handler.onNormalSearch}
|
172
|
+
column={config.filterFormColumn}
|
173
|
+
v-slots={{
|
174
|
+
operation: () => (
|
175
|
+
<Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
|
176
|
+
)
|
177
|
+
}}
|
178
|
+
/>
|
183
179
|
),
|
184
180
|
});
|
185
181
|
|
@@ -259,6 +259,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
|
|
259
259
|
size: config.size,
|
260
260
|
confirmButton: true,
|
261
261
|
cancelButton: true,
|
262
|
+
noContentPadding: true,
|
262
263
|
handleConfirm: () => {onConfirm(field, openState.data);},
|
263
264
|
render: () => {
|
264
265
|
return (
|
@@ -29,7 +29,8 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
|
|
29
29
|
onRefAutoTableEl: createHooks<(el: HTMLDivElement | null) => void>(), // AutoTable el引用
|
30
30
|
onTableSetup: createSyncHooks<() => void>(), // AutoTable初始化
|
31
31
|
onTableDestroy: createSyncHooks<() => void>(), // AutoTable销毁
|
32
|
-
|
32
|
+
onTableOuterRender: createRenderHook(), // AutoTable渲染外部内容
|
33
|
+
onTableRender: createRenderHook(), // AutoTable渲染内部内容
|
33
34
|
onTableClass: createSyncHooks<(list: any[]) => void>(),// AutoTable计算class
|
34
35
|
onRefBaseTable: createHooks<(refer: iTableRefer | null) => void>(),// 获取base table的引用
|
35
36
|
onBaseTableSetup: createSyncHooks<(refer: iTableRefer) => void>(), // basic table初始化动作
|
@@ -128,5 +129,12 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
|
|
128
129
|
onAfterBatchUpsert: createHooks<(responseData: iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']) => void>(),
|
129
130
|
};
|
130
131
|
const hooks = _hooks as typeof _hooks & TableOptionSpace.iTableOptionHooks;
|
132
|
+
|
133
|
+
hooks.onTableOuterRender.use({
|
134
|
+
separate: false,
|
135
|
+
processor: ({ list, render }) => {list.push({ render, key: 'table-render', seq: 1 });},
|
136
|
+
render: () => (<div className="auto-table-body">{hooks.onTableRender.exec()}</div>),
|
137
|
+
});
|
138
|
+
|
131
139
|
return hooks;
|
132
140
|
});
|
@@ -11,6 +11,7 @@
|
|
11
11
|
white-space: nowrap;
|
12
12
|
display: inline-block;
|
13
13
|
user-select: none;
|
14
|
+
z-index: 1;
|
14
15
|
|
15
16
|
@include public-style;
|
16
17
|
|
@@ -108,6 +109,33 @@
|
|
108
109
|
}
|
109
110
|
}
|
110
111
|
|
112
|
+
&.button-mode-stroke {
|
113
|
+
@include statusMixin(button) {
|
114
|
+
background-color: transparent;
|
115
|
+
border-color: plv(secondary-light-3);
|
116
|
+
color: plv(text-2);
|
117
|
+
|
118
|
+
@include active(button) {
|
119
|
+
border-color: $color-6;
|
120
|
+
color: $color-6;
|
121
|
+
}
|
122
|
+
|
123
|
+
&:not(.button-disabled):hover {
|
124
|
+
border-color: $color-6;
|
125
|
+
color: $color-6;
|
126
|
+
}
|
127
|
+
|
128
|
+
&.button-disabled {
|
129
|
+
border-color: $color-2;
|
130
|
+
color: $color-2;
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
&:after {
|
135
|
+
//display: none !important;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
111
139
|
&.button-mode-text {
|
112
140
|
padding: 0;
|
113
141
|
min-width: initial;
|
@@ -168,4 +196,8 @@
|
|
168
196
|
& > span + .#{componentName(icon)} {
|
169
197
|
margin-left: 4px;
|
170
198
|
}
|
199
|
+
|
200
|
+
&:hover {
|
201
|
+
z-index: 4;
|
202
|
+
}
|
171
203
|
}
|
@@ -53,7 +53,7 @@ export const Button = designComponent({
|
|
53
53
|
});
|
54
54
|
|
55
55
|
const group = ButtonGroup.use.inject(null);
|
56
|
-
const mode = computed(() => props.mode || group?.props.mode ||
|
56
|
+
const mode = computed(() => props.mode || group?.props.mode || styleComputed.value.default.buttonMode);
|
57
57
|
const status = computed(() => styleComputed.value.status || (mode.value === ThemeMode.flat ? ThemeStatus.secondary : ThemeStatus.primary));
|
58
58
|
|
59
59
|
const state = reactive({
|
@@ -12,7 +12,7 @@ export const ButtonGroup = designComponent({
|
|
12
12
|
props: {
|
13
13
|
...EditProps,
|
14
14
|
...StyleProps,
|
15
|
-
mode: { type: String as PropType<typeof ThemeMode.TYPE
|
15
|
+
mode: { type: String as PropType<typeof ThemeMode.TYPE> }, // 按钮类型:fill填充,flat扁平,outline线性以及text文字
|
16
16
|
vertical: { type: Boolean }, // 按钮组方向
|
17
17
|
},
|
18
18
|
slots: ['default'],
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import {tInputHooks} from "./uses/useInputHooks";
|
2
2
|
import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "plain-design-composition";
|
3
3
|
import {createError} from "../../utils/createError";
|
4
|
-
import {StyleProps, tStyleComputed} from "../../uses/useStyle";
|
4
|
+
import {InputMode, StyleProps, tStyleComputed} from "../../uses/useStyle";
|
5
5
|
import {EditProps, tEditComputed} from "../../uses/useEdit";
|
6
6
|
import {iSelectOptionProps} from "../Select/select.utils";
|
7
7
|
|
@@ -11,7 +11,7 @@ export const InputPropsOption = {
|
|
11
11
|
|
12
12
|
/*public*/
|
13
13
|
type: { type: String }, // input type
|
14
|
-
mode: { type: String as PropType<
|
14
|
+
mode: { type: String as PropType<typeof InputMode.TYPE> }, // input的样式类型,flat填充,stroke线型
|
15
15
|
modelValue: {}, // 输入框双向绑定值
|
16
16
|
placeValue: {}, // 与modelValue一起判断当前是否有值
|
17
17
|
isFocus: { type: Boolean }, // 当前是否为获取焦点的状态
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import {designComponent} from "plain-design-composition";
|
2
|
+
import {usePageRenderContext} from "../usePageRenderContext";
|
3
|
+
|
4
|
+
export const PageRenderList = designComponent({
|
5
|
+
name: 'page-render-list',
|
6
|
+
props: {},
|
7
|
+
slots: ['default'],
|
8
|
+
setup({ props, slots }) {
|
9
|
+
|
10
|
+
const pageRenderContext = usePageRenderContext();
|
11
|
+
|
12
|
+
pageRenderContext.renderHook.use({
|
13
|
+
separate: false,
|
14
|
+
processor: ({ list, render }) => {list.push({ render, key: '', seq: 1 });},
|
15
|
+
render: () => slots.default()
|
16
|
+
});
|
17
|
+
|
18
|
+
return () => {
|
19
|
+
return pageRenderContext.renderHook.exec();
|
20
|
+
};
|
21
|
+
},
|
22
|
+
});
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import {computed, getComponentCls, reactive} from "plain-design-composition";
|
2
2
|
import {createCache} from "../../utils/createCache";
|
3
|
-
import {ThemeShape, ThemeSize} from "../../uses/useStyle";
|
3
|
+
import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
|
4
4
|
import {DeepPartial} from "../../utils/type";
|
5
5
|
import {iApplicationConfiguration} from "../Application/utils/application.utils";
|
6
6
|
|
@@ -10,7 +10,8 @@ export const PageThemeUtils = (() => {
|
|
10
10
|
const primaryCache = createCache<string>(getComponentCls('@@PAGE_THEME_PRIMARY'));
|
11
11
|
const sizeCache = createCache<typeof ThemeSize.TYPE>(getComponentCls('@@PAGE_THEME_SIZE'));
|
12
12
|
const shapeCache = createCache<typeof ThemeShape.TYPE>(getComponentCls('@@PAGE_THEME_SHAPE'));
|
13
|
-
const inputModeCache = createCache<
|
13
|
+
const inputModeCache = createCache<typeof InputMode.TYPE>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
|
14
|
+
const buttonModeCache = createCache<typeof ThemeMode.TYPE>(getComponentCls('@@PAGE_THEME_BUTTON_MODE'));
|
14
15
|
const zoomCache = createCache<number | undefined>(getComponentCls('@@PAGE_THEME_ZOOM'));
|
15
16
|
|
16
17
|
const state = reactive({
|
@@ -19,6 +20,7 @@ export const PageThemeUtils = (() => {
|
|
19
20
|
size: sizeCache.get(),
|
20
21
|
shape: shapeCache.get(),
|
21
22
|
inputMode: inputModeCache.get(),
|
23
|
+
buttonMode: buttonModeCache.get(),
|
22
24
|
zoom: zoomCache.get(),
|
23
25
|
});
|
24
26
|
|
@@ -28,7 +30,7 @@ export const PageThemeUtils = (() => {
|
|
28
30
|
if (!config.theme.base) {config.theme.base = {};}
|
29
31
|
if (!config.theme.vars) {config.theme.vars = {};}
|
30
32
|
|
31
|
-
let { dark, primaryKey, size, shape, inputMode, zoom } = state;
|
33
|
+
let { dark, primaryKey, size, shape, inputMode, buttonMode, zoom } = state;
|
32
34
|
|
33
35
|
config.theme.dark = !!dark;
|
34
36
|
|
@@ -99,6 +101,9 @@ export const PageThemeUtils = (() => {
|
|
99
101
|
if (!!inputMode) {
|
100
102
|
config.default.inputMode = inputMode;
|
101
103
|
}
|
104
|
+
if (!!buttonMode) {
|
105
|
+
config.default.buttonMode = buttonMode;
|
106
|
+
}
|
102
107
|
return config;
|
103
108
|
});
|
104
109
|
|
@@ -122,16 +127,26 @@ export const PageThemeUtils = (() => {
|
|
122
127
|
shapeCache.set(val);
|
123
128
|
};
|
124
129
|
|
125
|
-
const inputMode = (val:
|
130
|
+
const inputMode = (val: typeof InputMode.TYPE | null) => {
|
126
131
|
state.inputMode = val;
|
127
132
|
inputModeCache.set(val);
|
128
133
|
};
|
129
134
|
|
135
|
+
const buttonMode = (val: typeof ThemeMode.TYPE | null) => {
|
136
|
+
state.buttonMode = val;
|
137
|
+
buttonModeCache.set(val);
|
138
|
+
};
|
139
|
+
|
130
140
|
const zoom = (val: number | null) => {
|
131
141
|
state.zoom = val;
|
132
142
|
zoomCache.set(val);
|
133
143
|
};
|
134
144
|
|
145
|
+
const clear = () => {
|
146
|
+
window.localStorage.clear();
|
147
|
+
window.location.reload();
|
148
|
+
};
|
149
|
+
|
135
150
|
return {
|
136
151
|
configuration,
|
137
152
|
toggle,
|
@@ -140,7 +155,9 @@ export const PageThemeUtils = (() => {
|
|
140
155
|
size,
|
141
156
|
shape,
|
142
157
|
inputMode,
|
158
|
+
buttonMode,
|
143
159
|
zoom,
|
160
|
+
clear,
|
144
161
|
};
|
145
162
|
})();
|
146
163
|
|
@@ -236,6 +236,7 @@ export const Table = designComponent({
|
|
236
236
|
/*---------------------------------------内置hooks-------------------------------------------*/
|
237
237
|
|
238
238
|
hooks.onRender.use({
|
239
|
+
separate: false,
|
239
240
|
processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
|
240
241
|
render: () => (
|
241
242
|
<div className="table-empty">
|
@@ -9,6 +9,7 @@ import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
|
|
9
9
|
import ClientZoom from "../ClientZoom";
|
10
10
|
import {addWindowListener} from 'plain-utils/dom/addWindowListener';
|
11
11
|
import i18n from "../i18n";
|
12
|
+
import Button from "../Button";
|
12
13
|
|
13
14
|
export const ThemeEditor = designComponent({
|
14
15
|
name: 'theme-editor',
|
@@ -28,6 +29,7 @@ export const ThemeEditor = designComponent({
|
|
28
29
|
zoom: PageThemeUtils.state.zoom || null,
|
29
30
|
primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
|
30
31
|
inputMode: PageThemeUtils.state.inputMode || 'flat',
|
32
|
+
buttonMode: PageThemeUtils.state.buttonMode || 'flat',
|
31
33
|
});
|
32
34
|
|
33
35
|
const applicationConfiguration = ApplicationConfigurationProvider.inject();
|
@@ -64,6 +66,7 @@ export const ThemeEditor = designComponent({
|
|
64
66
|
},
|
65
67
|
onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
|
66
68
|
onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
|
69
|
+
onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
|
67
70
|
};
|
68
71
|
|
69
72
|
const publicPopperAttrs = {};
|
@@ -96,6 +99,19 @@ export const ThemeEditor = designComponent({
|
|
96
99
|
</div>
|
97
100
|
</div>
|
98
101
|
|
102
|
+
<div>
|
103
|
+
<div>{i18n('theme.buttonMode').d('按钮类型')}</div>
|
104
|
+
<div>
|
105
|
+
<Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
|
106
|
+
<SelectOption label={i18n('theme.buttonModeFlat').d('扁平')} val="flat"/>
|
107
|
+
<SelectOption label={i18n('theme.buttonModeFill').d('填充')} val="fill"/>
|
108
|
+
<SelectOption label={i18n('theme.buttonModeOutline').d('线框')} val="outline"/>
|
109
|
+
<SelectOption label={i18n('theme.buttonModeStroke').d('描边')} val="stroke"/>
|
110
|
+
<SelectOption label={i18n('theme.buttonModeText').d('文字')} val="text"/>
|
111
|
+
</Select>
|
112
|
+
</div>
|
113
|
+
</div>
|
114
|
+
|
99
115
|
<div>
|
100
116
|
<div>{i18n('theme.primaryColor').d('主题颜色')}</div>
|
101
117
|
<div>
|
@@ -165,6 +181,13 @@ export const ThemeEditor = designComponent({
|
|
165
181
|
<SelectOption label="2.0" val={2.0}/>
|
166
182
|
</Select>
|
167
183
|
</div>
|
184
|
+
|
185
|
+
<div>
|
186
|
+
<div> </div>
|
187
|
+
<Button block size="mini" label={i18n('theme.reset').d('重置')} onClick={() => {
|
188
|
+
PageThemeUtils.clear();
|
189
|
+
}}/>
|
190
|
+
</div>
|
168
191
|
</div>
|
169
192
|
)}
|
170
193
|
</div>
|
@@ -79,6 +79,8 @@ type UnionToIntersection<T> = (T extends any ? ((t: T) => void) : never) extends
|
|
79
79
|
export function createI18n<Locale extends Record<string, any>, OM = ObjectMap<Locale>, K extends keyof OM = keyof OM>(defaultLocale: Locale): UnionToIntersection<K extends keyof OM ? ((k: K, params?: Record<string, any>) => { d: <D = unknown>(defaultLang?: D) => OM[K] | D }) : never> & {
|
80
80
|
setLocale: (locale: any) => void,
|
81
81
|
setDefaultLocale: (defaultLocale: any) => void,
|
82
|
+
getLocale: () => Locale,
|
83
|
+
getDefaultLocale: () => Locale,
|
82
84
|
} {
|
83
85
|
|
84
86
|
const state = reactive({
|
@@ -121,6 +123,20 @@ export function createI18n<Locale extends Record<string, any>, OM = ObjectMap<Lo
|
|
121
123
|
*/
|
122
124
|
const setDefaultLocale = (defaultLocale: Locale) => state.defaultLocale = defaultLocale as any;
|
123
125
|
|
126
|
+
/**
|
127
|
+
* 获取当前语言
|
128
|
+
* @author 韦胜健
|
129
|
+
* @date 2024.4.20 8:49
|
130
|
+
*/
|
131
|
+
const getLocale = () => state.locale;
|
132
|
+
|
133
|
+
/**
|
134
|
+
* 获取默认语言
|
135
|
+
* @author 韦胜健
|
136
|
+
* @date 2024.4.20 8:49
|
137
|
+
*/
|
138
|
+
const getDefaultLocale = () => state.defaultLocale;
|
139
|
+
|
124
140
|
/**
|
125
141
|
* 取值
|
126
142
|
* @author 韦胜健
|
@@ -144,5 +160,5 @@ export function createI18n<Locale extends Record<string, any>, OM = ObjectMap<Lo
|
|
144
160
|
};
|
145
161
|
};
|
146
162
|
|
147
|
-
return Object.assign(getter, { setLocale, setDefaultLocale }) as any;
|
163
|
+
return Object.assign(getter, { setLocale, setDefaultLocale, getLocale, getDefaultLocale }) as any;
|
148
164
|
}
|