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.
Files changed (35) hide show
  1. package/dist/plain-design.commonjs.min.js +2 -2
  2. package/dist/plain-design.min.css +7 -7
  3. package/dist/plain-design.min.js +2 -2
  4. package/dist/report.html +2 -2
  5. package/package.json +3 -3
  6. package/src/packages/components/$object/createObjectService.tsx +1 -0
  7. package/src/packages/components/Application/index.tsx +6 -3
  8. package/src/packages/components/Application/theme/theme.ts +3 -3
  9. package/src/packages/components/Application/utils/application.utils.ts +3 -2
  10. package/src/packages/components/AutoTable/AutoTable.tsx +1 -1
  11. package/src/packages/components/AutoTable/auto-table.scss +8 -41
  12. package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx +14 -18
  13. package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx +1 -0
  14. package/src/packages/components/AutoTable/use/useTableOption.hooks.tsx +9 -1
  15. package/src/packages/components/Button/button.scss +32 -0
  16. package/src/packages/components/Button/index.tsx +1 -1
  17. package/src/packages/components/ButtonGroup/button-group.scss +2 -2
  18. package/src/packages/components/ButtonGroup/index.tsx +1 -1
  19. package/src/packages/components/Checkbox/checkbox.scss +4 -0
  20. package/src/packages/components/FilterFormMultiple/filter-form-multiple.scss +10 -0
  21. package/src/packages/components/FilterFormMultiple/index.tsx +0 -1
  22. package/src/packages/components/Input/input.utils.ts +2 -2
  23. package/src/packages/components/PageRenderList/index.tsx +22 -0
  24. package/src/packages/components/PageThemeUtils/index.tsx +21 -4
  25. package/src/packages/components/Pagination/index.tsx +3 -3
  26. package/src/packages/components/Pagination/pagination.scss +2 -1
  27. package/src/packages/components/Table/table/Table.tsx +1 -0
  28. package/src/packages/components/ThemeEditor/index.tsx +23 -0
  29. package/src/packages/components/ThemeEditor/theme-editor.scss +1 -1
  30. package/src/packages/components/usePageRender/index.tsx +3 -0
  31. package/src/packages/components/usePageRenderContext/index.tsx +8 -0
  32. package/src/packages/i18n/i18n.utils.ts +17 -1
  33. package/src/packages/i18n/lang/en-us.ts +8 -1
  34. package/src/packages/i18n/lang/zh-cn.ts +8 -1
  35. 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.47",
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.57",
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",
@@ -23,6 +23,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
23
23
  title: i18n('base.selectData').d('选择数据'),
24
24
  confirmButton: true,
25
25
  cancelButton: true,
26
+ noContentPadding: true,
26
27
  maxHeight: ' ',
27
28
  maxWidth: ' ',
28
29
  width: '50vw'
@@ -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: 'flat',
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': '4px',
134
+ 'box-size-mini-border-radius': '2px',
135
135
  'box-size-small-border-radius': '4px',
136
- 'box-size-normal-border-radius': '4px',
137
- 'box-size-large-border-radius': '4px',
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: 'flat' | 'stroke',
10
+ inputMode: typeof InputMode.TYPE,
11
+ buttonMode: typeof ThemeMode.TYPE,
11
12
  },
12
13
  }
13
14
 
@@ -48,7 +48,7 @@ export const AutoTable = designComponent({
48
48
  refer,
49
49
  render: () => (
50
50
  <div className={classes.value} ref={onRefEl as any}>
51
- {props.option.hooks.onTableRender.exec()}
51
+ {props.option.hooks.onTableOuterRender.exec()}
52
52
  </div>
53
53
  ),
54
54
  };
@@ -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
- .#{componentName(filter-form-multiple)} {
22
- /* & + div {
23
- position: relative;
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
- &:after {
55
- position: absolute;
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.onTableRender.use({
163
- processor: ({ list, render }) => {list.push({ seq: 3.5, key: 'form-filter', render, });},
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
- <FilterFormMultiple
169
- ref={onRef.filter}
170
- filterOptions={filterOptions.value!}
171
- initialState={state.data}
172
- onSearch={handler.onNormalSearch}
173
- column={config.filterFormColumn}
174
- searchButtonAttrs={{ mode: 'flat' }}
175
- v-slots={{
176
- operation: () => (
177
- <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
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
- onTableRender: createRenderHook(), // AutoTable渲染主体内容
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 || 'flat');
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({
@@ -25,8 +25,8 @@
25
25
  }
26
26
  }
27
27
 
28
- &.button-mode-outline {
29
- border-right-color: transparent;
28
+ & + .button-mode-outline, & + .button-mode-stroke {
29
+ margin-left: -1px;
30
30
  }
31
31
  }
32
32
  }
@@ -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>, default: ThemeMode.flat }, // 按钮类型:fill填充,flat扁平,outline线性以及text文字
15
+ mode: { type: String as PropType<typeof ThemeMode.TYPE> }, // 按钮类型:fill填充,flat扁平,outline线性以及text文字
16
16
  vertical: { type: Boolean }, // 按钮组方向
17
17
  },
18
18
  slots: ['default'],
@@ -51,6 +51,10 @@
51
51
 
52
52
  @include sizeMixin(checkbox, (font-size)) {
53
53
  line-height: 1.7em;
54
+
55
+ .plain-click-node {
56
+ border-radius: $border-radius;
57
+ }
54
58
  }
55
59
 
56
60
  &:focus {
@@ -6,6 +6,16 @@
6
6
  .form-inner {
7
7
  width: 100%;
8
8
  }
9
+
10
+ @include sizeMixin(form, ()) {
11
+ .filter-form-multiple-operation {
12
+ @include comp(button) {
13
+ & + button {
14
+ margin-left: $margin;
15
+ }
16
+ }
17
+ }
18
+ }
9
19
  }
10
20
 
11
21
  .filter-form-multiple-first-column {
@@ -264,7 +264,6 @@ export const FilterFormMultiple = designComponent({
264
264
  <Button
265
265
  {...mergeAttrs({
266
266
  label: i18n('base.query').d('查询'),
267
- mode: "fill",
268
267
  icon: "pi-search",
269
268
  onClick: methods.search,
270
269
  }, props.searchButtonAttrs)}
@@ -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<'flat' | 'stroke'> }, // input的样式类型,flat填充,stroke线型
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<'flat' | 'stroke'>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
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: 'flat' | 'stroke' | null) => {
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
 
@@ -67,9 +67,9 @@ export const Pagination = designComponent({
67
67
  return props.jumperNumberWidth;
68
68
  } else {
69
69
  return {
70
- large: 140,
71
- normal: 130,
72
- small: 120,
70
+ large: 150,
71
+ normal: 140,
72
+ small: 130,
73
73
  mini: 120,
74
74
  }[styleComputed.value.size];
75
75
  }
@@ -41,7 +41,8 @@
41
41
  box-sizing: border-box;
42
42
 
43
43
  &:hover {
44
- background-color: plv(primary-2)
44
+ border-color: plv(primary-6);
45
+ color: plv(primary-6);
45
46
  }
46
47
 
47
48
  &:active, &.pagination-pager-button-active {
@@ -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>&nbsp;</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>
@@ -45,7 +45,7 @@
45
45
 
46
46
  &.is-expand {
47
47
  width: 300px;
48
- height: 260px;
48
+ height: 330px;
49
49
  border-top-left-radius: plv(box-size-normal-border-radius);
50
50
  border-bottom-left-radius: plv(box-size-normal-border-radius);
51
51
 
@@ -0,0 +1,3 @@
1
+ export function usePageRender() {
2
+
3
+ }
@@ -0,0 +1,8 @@
1
+ import {createRenderHook} from "plain-design-composition";
2
+
3
+ export function usePageRenderContext() {
4
+ const renderHook = createRenderHook();
5
+ return {
6
+ renderHook,
7
+ };
8
+ }
@@ -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
  }