plain-design 1.0.0-beta.22 → 1.0.0-beta.24
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 +1 -0
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +5 -5
- package/package.json +3 -3
- package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx +3 -3
- package/src/packages/components/Select/createPublicSelectRender.tsx +1 -1
- package/src/packages/components/Table/standard/PlcExpand.tsx +12 -20
- package/src/packages/components/Table/table/Table.tsx +10 -3
- package/src/packages/components/Table/table/utils/createTableHooks.ts +3 -1
- package/src/packages/components/Table/table/utils/table.utils.ts +6 -1
- package/src/packages/components/ThemeEditor/index.tsx +160 -0
- package/src/packages/components/ThemeEditor/theme-editor.scss +94 -0
- package/src/packages/components/Tree/RenderTreeNode.tsx +1 -1
- package/src/packages/components/Tree/index.tsx +3 -3
- package/src/packages/components/VirtualList/index.tsx +3 -3
- package/src/packages/components/VirtualList/useVirtualList.tsx +46 -47
- package/src/packages/components/VirtualTable/index.tsx +4 -4
- package/src/packages/entry.tsx +1 -0
- package/src/pages/index/Demo/DemoRow.scss +9 -6
- package/src/pages/index/Demo/DemoRowController.tsx +2 -2
- package/src/pages/index/components/normal/DemoDropdown.tsx +1 -1
- package/src/pages/index/components/normal/DemoVirtualList.tsx +9 -9
- package/src/pages/index/components/table/DemoTableExpand.tsx +41 -19
- package/src/pages/index/components/table/DemoVirtualTable.tsx +4 -4
- package/src/pages/index/home/AppHead.tsx +3 -90
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.24",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/plain-design.min.js",
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
@@ -19,7 +19,7 @@
|
|
19
19
|
"peerDependencies": {
|
20
20
|
"exceljs": "^4.2.1",
|
21
21
|
"file-saver": "^2.0.5",
|
22
|
-
"plain-design-composition": "^0.0.
|
22
|
+
"plain-design-composition": "^0.0.177",
|
23
23
|
"react": "^18.0.1",
|
24
24
|
"react-dom": "^18.0.1"
|
25
25
|
},
|
@@ -68,7 +68,7 @@
|
|
68
68
|
"fork-ts-checker-webpack-plugin": "^6.2.4",
|
69
69
|
"mini-css-extract-plugin": "^1.4.1",
|
70
70
|
"mockjs": "^1.1.0",
|
71
|
-
"plain-design-composition": "^0.0.
|
71
|
+
"plain-design-composition": "^0.0.177",
|
72
72
|
"postcss": "^8.2.13",
|
73
73
|
"postcss-loader": "^4.2.0",
|
74
74
|
"qs": "^6.10.1",
|
@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
|
|
59
59
|
return (
|
60
60
|
<VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
|
61
61
|
{{
|
62
|
-
default: ({ item: treeNode, index,
|
62
|
+
default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
|
63
63
|
<CascadeListPanelNode
|
64
|
-
data-vid={
|
64
|
+
data-vid={vid}
|
65
65
|
treeNode={treeNode}
|
66
66
|
treeNodes={props.treeNodes}
|
67
67
|
index={index}
|
68
|
-
key={
|
68
|
+
key={vIndex}
|
69
69
|
handleClickNode={props.handleClickNode}
|
70
70
|
{...props.nodeAttrs}
|
71
71
|
>
|
@@ -236,7 +236,7 @@ export function createPublicSelectRender(
|
|
236
236
|
const { virtualRowSize } = props;
|
237
237
|
return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
|
238
238
|
})()}>
|
239
|
-
{{ default: ({ item, index }: { item: iSelectOptionProps, index: number }) => <SelectOption {...item} index={index} key={
|
239
|
+
{{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
|
240
240
|
</VirtualList>
|
241
241
|
</div>) : (
|
242
242
|
matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))
|
@@ -65,9 +65,9 @@ export const PlcExpand = designComponent({
|
|
65
65
|
* @author 韦胜健
|
66
66
|
* @date 2022/11/17 10:46
|
67
67
|
*/
|
68
|
-
renderExpand: (node: iTableNode) => {
|
68
|
+
renderExpand: (node: iTableNode, vIndex: number, vid: string, index: number) => {
|
69
69
|
return (
|
70
|
-
<tr className="plt-row plt-expand-row" key={`expand_${
|
70
|
+
<tr className="plt-row plt-expand-row" key={`expand_${table.props.virtualRowType === 'virtualIndex' ? vIndex : index}`} data-vid={vid}>
|
71
71
|
<td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
|
72
72
|
<div className="plt-expand-body" style={expandStyles.value}>
|
73
73
|
{scopeSlots.expand({ node, row: node.data })}
|
@@ -128,29 +128,21 @@ export const PlcExpand = designComponent({
|
|
128
128
|
},
|
129
129
|
};
|
130
130
|
|
131
|
-
/**
|
132
|
-
* 不允许启用行虚拟滚动
|
133
|
-
* @author 韦胜健
|
134
|
-
* @date 2022/11/17 13:56
|
135
|
-
*/
|
136
|
-
onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
|
137
|
-
|
138
131
|
/**
|
139
132
|
* 拦截行渲染
|
140
133
|
* @author 韦胜健
|
141
134
|
* @date 2022/11/17 14:15
|
142
135
|
*/
|
143
|
-
onBeforeUnmount(table.hooks.
|
144
|
-
const
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
};
|
136
|
+
onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
|
137
|
+
const newData = [] as any[];
|
138
|
+
data.forEach(item => {
|
139
|
+
newData.push(item);
|
140
|
+
if (typeof item === "function") {return;}
|
141
|
+
if (utils.isExpand(item.data)) {
|
142
|
+
newData.push((param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index));
|
143
|
+
}
|
144
|
+
});
|
145
|
+
return { data: newData };
|
154
146
|
}));
|
155
147
|
|
156
148
|
/**
|
@@ -108,6 +108,8 @@ export const Table = designComponent({
|
|
108
108
|
*/
|
109
109
|
const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
|
110
110
|
|
111
|
+
const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
|
112
|
+
|
111
113
|
const showRows = computed((): number => {
|
112
114
|
const bodyRows = bodyNodes.value.length;
|
113
115
|
if (props.showRows === 'auto') {
|
@@ -323,9 +325,10 @@ export const Table = designComponent({
|
|
323
325
|
<VirtualTable
|
324
326
|
ref={onRefVirtual}
|
325
327
|
height={tableHeight.value || undefined}
|
326
|
-
data={
|
328
|
+
data={tableBodyNodes.value}
|
327
329
|
headData={plcData.value?.headPlcListArray}
|
328
330
|
size={numberState.bodyRowHeight}
|
331
|
+
dynamicSize={props.dynamicSize}
|
329
332
|
headSize={numberState.headRowHeight}
|
330
333
|
width={plcData.value!.targetTableWidth!}
|
331
334
|
summaryData={summaryNodes.value}
|
@@ -351,8 +354,12 @@ export const Table = designComponent({
|
|
351
354
|
</tr>
|
352
355
|
))
|
353
356
|
),
|
354
|
-
default: ({ item,
|
355
|
-
|
357
|
+
default: ({ item, vid, vIndex, index }) => (
|
358
|
+
typeof item !== "function" ? (
|
359
|
+
<PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
|
360
|
+
) : (
|
361
|
+
item({ vid, vIndex, index })
|
362
|
+
)
|
356
363
|
),
|
357
364
|
}}
|
358
365
|
/>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "plain-design-composition";
|
2
2
|
import {tPlcType} from "../../plc/utils/plc.utils";
|
3
|
-
import {iTableNode} from "./table.utils";
|
3
|
+
import {iTableMessyData, iTableNode} from "./table.utils";
|
4
4
|
import {PlainObject} from "plain-utils/utils/event";
|
5
5
|
import {VirtualTable} from "../../../VirtualTable";
|
6
6
|
|
@@ -52,6 +52,8 @@ export const createTableHooks = () => {
|
|
52
52
|
onRenderRow: createSyncHooks<(scope: { node: iTableNode, row: any, content: RenderNode }) => void>(),
|
53
53
|
/*表格数据*/
|
54
54
|
onData: createSyncHooks<(scope: { data: PlainObject[] | undefined }) => void>(true),
|
55
|
+
/*表格渲染行数据(其中的行数据不一定是tableNode)*/
|
56
|
+
onTableMessyData: createSyncHooks<(scope: { data: iTableMessyData[] }) => void>(true),
|
55
57
|
/*处理行样式*/
|
56
58
|
onRowClass: createSyncHooks<(data: { node: iTableNode, classList: any[] }) => void>(true),
|
57
59
|
/*鼠标移动经过row时*/
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
|
2
|
-
import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, StyleProperties, tSlotsType} from "plain-design-composition";
|
2
|
+
import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "plain-design-composition";
|
3
3
|
import {PlainObject} from "plain-utils/utils/event";
|
4
4
|
import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
|
5
5
|
import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
|
@@ -28,7 +28,9 @@ export const TablePropsOptions = {
|
|
28
28
|
headRowHeight: { type: [String, Number] }, // 表头行高
|
29
29
|
bodyRowHeight: { type: [String, Number] }, // 表体行高
|
30
30
|
virtual: { type: Boolean }, // 开启虚拟行滚动
|
31
|
+
virtualRowType: { type: String as PropType<'virtualIndex' | 'realIndex'>, }, // 虚拟滚动的行渲染类型,virtualIndex意思为使用虚拟的行索引作为key渲染行,好处是虚拟滚动时完全复用行组件实例;realIndex意味着虚拟滚动时新的行会重新初始化
|
31
32
|
virtualColumn: { type: Boolean }, // 开启虚拟列滚动
|
33
|
+
dynamicSize: { type: Boolean }, // 行虚拟滚动时启用动态高度
|
32
34
|
colDraggable: { type: Boolean }, // 列是否可拖拽移动
|
33
35
|
rowDraggable: { type: Boolean }, // 行是否可以拖拽移动
|
34
36
|
sort: { type: [Object, Array] as PropType<TablePropsSort> }, // 当前排序字段
|
@@ -130,6 +132,9 @@ export interface iTableNode {
|
|
130
132
|
saveEdit: (newRow?: PlainObject) => Promise<void>, // 保存编辑,将editRow以及newRow(请求得到的新对象)覆盖data
|
131
133
|
}
|
132
134
|
|
135
|
+
export type iTableMessyRender = (data: { vIndex: number, vid: string }) => RenderNode
|
136
|
+
export type iTableMessyData = iTableNode | iTableMessyRender
|
137
|
+
|
133
138
|
/**
|
134
139
|
* 创建table node节点数据
|
135
140
|
* @author 韦胜健
|
@@ -0,0 +1,160 @@
|
|
1
|
+
import './theme-editor.scss';
|
2
|
+
import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
|
3
|
+
import Icon from "../Icon";
|
4
|
+
import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
|
5
|
+
import {unit} from "plain-utils/string/unit";
|
6
|
+
import {Select} from '../Select';
|
7
|
+
import {SelectOption} from "../SelectOption";
|
8
|
+
import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
|
9
|
+
import ClientZoom from "../ClientZoom";
|
10
|
+
import {addWindowListener} from 'plain-utils/dom/addWindowListener';
|
11
|
+
|
12
|
+
export const ThemeEditor = designComponent({
|
13
|
+
name: 'theme-editor',
|
14
|
+
props: {
|
15
|
+
bottom: { type: Number, default: 55 }
|
16
|
+
},
|
17
|
+
setup({ props }) {
|
18
|
+
|
19
|
+
const { refs, onRef } = useRefs({ el: iHTMLDivElement });
|
20
|
+
|
21
|
+
const state = reactive({
|
22
|
+
isExpand: false,
|
23
|
+
|
24
|
+
size: PageThemeUtils.state.size || 'normal',
|
25
|
+
dark: PageThemeUtils.state.dark ? 'dark' : 'light',
|
26
|
+
shape: PageThemeUtils.state.shape || 'square',
|
27
|
+
zoom: PageThemeUtils.state.zoom || null,
|
28
|
+
primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
|
29
|
+
inputMode: PageThemeUtils.state.inputMode || 'flat',
|
30
|
+
});
|
31
|
+
|
32
|
+
const applicationConfiguration = ApplicationConfigurationProvider.inject();
|
33
|
+
|
34
|
+
const classes = useClasses(() => [
|
35
|
+
getComponentCls('theme-editor'),
|
36
|
+
{
|
37
|
+
'is-expand': state.isExpand
|
38
|
+
}
|
39
|
+
]);
|
40
|
+
|
41
|
+
const styles = useStyles((style) => {
|
42
|
+
style.bottom = unit(props.bottom);
|
43
|
+
});
|
44
|
+
|
45
|
+
const handler = {
|
46
|
+
handleClickInner: () => {state.isExpand = !state.isExpand;},
|
47
|
+
onSizeChange: () => {PageThemeUtils.size(state.size);},
|
48
|
+
onShapeChange: () => {PageThemeUtils.shape(state.shape);},
|
49
|
+
onZoomChange: () => {
|
50
|
+
PageThemeUtils.zoom(state.zoom);
|
51
|
+
ClientZoom.set(state.zoom);
|
52
|
+
},
|
53
|
+
onDarkChange: () => {
|
54
|
+
const val = !state.dark ? false : state.dark === 'dark';
|
55
|
+
PageThemeUtils.toggle(val);
|
56
|
+
},
|
57
|
+
onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
|
58
|
+
onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
|
59
|
+
};
|
60
|
+
|
61
|
+
const publicPopperAttrs = {};
|
62
|
+
|
63
|
+
onBeforeUnmount(
|
64
|
+
addWindowListener('click', (e) => {
|
65
|
+
if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
|
66
|
+
state.isExpand = false;
|
67
|
+
}
|
68
|
+
})
|
69
|
+
);
|
70
|
+
|
71
|
+
return () => (
|
72
|
+
<div className={classes.value} style={styles.value} ref={onRef.el}>
|
73
|
+
<div className="theme-editor-inner" onClick={handler.handleClickInner}>
|
74
|
+
<Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
|
75
|
+
</div>
|
76
|
+
{state.isExpand && (
|
77
|
+
<div className="theme-editor-form">
|
78
|
+
<div>
|
79
|
+
<div>输入框类型</div>
|
80
|
+
<div>
|
81
|
+
<Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" placeholder="输入框" popperAttrs={publicPopperAttrs}>
|
82
|
+
<SelectOption label="输入框:填充" val="flat"/>
|
83
|
+
<SelectOption label="输入框:描边" val="stroke"/>
|
84
|
+
</Select>
|
85
|
+
</div>
|
86
|
+
</div>
|
87
|
+
|
88
|
+
<div>
|
89
|
+
<div>主题颜色</div>
|
90
|
+
<div>
|
91
|
+
<Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" placeholder="主题色" popperAttrs={publicPopperAttrs}>
|
92
|
+
{Object.entries(ThemePrimaryColors).map(([key, value]) => (
|
93
|
+
<SelectOption label={value!.label} val={key} key={key}>
|
94
|
+
{!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
|
95
|
+
<span>{value!.label}</span>
|
96
|
+
</SelectOption>
|
97
|
+
))}
|
98
|
+
</Select>
|
99
|
+
</div>
|
100
|
+
</div>
|
101
|
+
|
102
|
+
<div>
|
103
|
+
<div>大小尺寸</div>
|
104
|
+
<div>
|
105
|
+
<Select v-model={state.size} onChange={handler.onSizeChange} size="mini" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
|
106
|
+
<SelectOption label="大尺寸" val="large"/>
|
107
|
+
<SelectOption label="中等尺寸" val="normal"/>
|
108
|
+
<SelectOption label="小尺寸" val="small"/>
|
109
|
+
<SelectOption label="极小尺寸" val="mini"/>
|
110
|
+
</Select>
|
111
|
+
</div>
|
112
|
+
</div>
|
113
|
+
|
114
|
+
<div>
|
115
|
+
<div>黑白主题</div>
|
116
|
+
<div>
|
117
|
+
<Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
|
118
|
+
<SelectOption label="黑色主题" val="dark"/>
|
119
|
+
<SelectOption label="白色主题" val="light"/>
|
120
|
+
</Select>
|
121
|
+
</div>
|
122
|
+
</div>
|
123
|
+
|
124
|
+
<div>
|
125
|
+
<div>圆角类型</div>
|
126
|
+
<div>
|
127
|
+
<Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
|
128
|
+
<SelectOption label="圆角" val="round"/>
|
129
|
+
<SelectOption label="小圆角" val="square"/>
|
130
|
+
<SelectOption label="无圆角" val="none"/>
|
131
|
+
</Select>
|
132
|
+
</div>
|
133
|
+
</div>
|
134
|
+
|
135
|
+
<div>
|
136
|
+
<div>大小缩放</div>
|
137
|
+
<Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
|
138
|
+
<SelectOption label="0.6" val={0.6}/>
|
139
|
+
<SelectOption label="0.7" val={0.7}/>
|
140
|
+
<SelectOption label="0.8" val={0.8}/>
|
141
|
+
<SelectOption label="0.9" val={0.9}/>
|
142
|
+
<SelectOption label="1.0" val={null}/>
|
143
|
+
<SelectOption label="1.1" val={1.1}/>
|
144
|
+
<SelectOption label="1.2" val={1.2}/>
|
145
|
+
<SelectOption label="1.3" val={1.3}/>
|
146
|
+
<SelectOption label="1.4" val={1.4}/>
|
147
|
+
<SelectOption label="1.5" val={1.5}/>
|
148
|
+
<SelectOption label="1.6" val={1.6}/>
|
149
|
+
<SelectOption label="1.7" val={1.7}/>
|
150
|
+
<SelectOption label="1.8" val={1.8}/>
|
151
|
+
<SelectOption label="1.9" val={1.9}/>
|
152
|
+
<SelectOption label="2.0" val={2.0}/>
|
153
|
+
</Select>
|
154
|
+
</div>
|
155
|
+
</div>
|
156
|
+
)}
|
157
|
+
</div>
|
158
|
+
);
|
159
|
+
},
|
160
|
+
});
|
@@ -0,0 +1,94 @@
|
|
1
|
+
@include comp(theme-editor) {
|
2
|
+
position: fixed;
|
3
|
+
right: 0;
|
4
|
+
border-right: none;
|
5
|
+
padding: 5px 10px 5px 5px;
|
6
|
+
border-top-left-radius: 999px;
|
7
|
+
border-bottom-left-radius: 999px;
|
8
|
+
box-sizing: border-box;
|
9
|
+
transition: all ease 300ms;
|
10
|
+
overflow-y: hidden;
|
11
|
+
z-index: 99999;
|
12
|
+
|
13
|
+
&:before {
|
14
|
+
content: '';
|
15
|
+
background-color: plv(primary-light-2);
|
16
|
+
border-radius: inherit;
|
17
|
+
position: absolute;
|
18
|
+
inset: 0;
|
19
|
+
pointer-events: none;
|
20
|
+
}
|
21
|
+
|
22
|
+
.theme-editor-inner {
|
23
|
+
position: absolute;
|
24
|
+
z-index: 1;
|
25
|
+
bottom: 5px;
|
26
|
+
right: 10px;
|
27
|
+
cursor: pointer;
|
28
|
+
height: calc(#{plv(box-size-normal-height)} * 1.5);
|
29
|
+
width: calc(#{plv(box-size-normal-height)} * 1.5);
|
30
|
+
border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
|
31
|
+
background-color: plv(primary-6);
|
32
|
+
color: #FFFFFF;
|
33
|
+
display: flex;
|
34
|
+
align-items: center;
|
35
|
+
justify-content: center;
|
36
|
+
font-size: 24px;
|
37
|
+
transition: all ease 300ms;
|
38
|
+
}
|
39
|
+
|
40
|
+
&.is-expand {
|
41
|
+
width: 300px;
|
42
|
+
height: 260px;
|
43
|
+
border-top-left-radius: plv(box-size-normal-border-radius);
|
44
|
+
border-bottom-left-radius: plv(box-size-normal-border-radius);
|
45
|
+
|
46
|
+
&:before {
|
47
|
+
background-color: plv(background-color);
|
48
|
+
border: solid 1px plv(border-color);
|
49
|
+
}
|
50
|
+
|
51
|
+
.theme-editor-inner {
|
52
|
+
border-radius: plv(box-size-normal-border-radius);
|
53
|
+
background-color: transparent;
|
54
|
+
color: plv(text-2);
|
55
|
+
|
56
|
+
&:hover {
|
57
|
+
background-color: plv(secondary-2);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
&:not(.is-expand) {
|
63
|
+
width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
|
64
|
+
height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
|
65
|
+
}
|
66
|
+
|
67
|
+
.theme-editor-form {
|
68
|
+
padding: 8px;
|
69
|
+
box-sizing: border-box;
|
70
|
+
position: relative;
|
71
|
+
z-index: 2;
|
72
|
+
display: flex;
|
73
|
+
flex-wrap: wrap;
|
74
|
+
flex-direction: row;
|
75
|
+
|
76
|
+
& > div {
|
77
|
+
width: calc(50% - 4px);
|
78
|
+
font-size: 12px;
|
79
|
+
color: plv(text-2);
|
80
|
+
margin-bottom: 20px;
|
81
|
+
|
82
|
+
&:nth-child(2n) {
|
83
|
+
margin-left: 8px;
|
84
|
+
}
|
85
|
+
|
86
|
+
& > div {
|
87
|
+
&:first-child {
|
88
|
+
margin-left: 10px;
|
89
|
+
margin-bottom: 4px;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}
|
@@ -92,9 +92,9 @@ export const Tree = designComponent({
|
|
92
92
|
return (
|
93
93
|
<VirtualList data={treeCore.flatNodeComputedData.value} ref={treeCore.onRef.list} size={props.virtualSize != null ? props.virtualSize : TreeSizeToRowHeight[styleComputed.value.size]} dynamicSize={props.virtualDynamicSize}>
|
94
94
|
{{
|
95
|
-
content: ({ data }: { data: { item: iTreeNode, index: number }[] }) => (
|
95
|
+
content: ({ data }: { data: { item: iTreeNode, index: number, vIndex: number, vid: string }[] }) => (
|
96
96
|
<div className="tree-node-list">
|
97
|
-
{data.map(({ item }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={
|
97
|
+
{data.map(({ item, vid }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={vid} multiple={props.multiple}/>)}
|
98
98
|
</div>
|
99
99
|
)
|
100
100
|
}}
|
@@ -104,7 +104,7 @@ export const Tree = designComponent({
|
|
104
104
|
const content = (
|
105
105
|
<div className="tree-node-list">
|
106
106
|
{treeCore.flatNodeComputedData.value.map((item) => (
|
107
|
-
<RenderTreeNode key={item.key} treeNode={item} dataVid={item.
|
107
|
+
<RenderTreeNode key={item.key} treeNode={item} dataVid={item.key} multiple={props.multiple}/>
|
108
108
|
))}
|
109
109
|
</div>
|
110
110
|
);
|
@@ -19,7 +19,7 @@ export const VirtualList = designComponent({
|
|
19
19
|
onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
|
20
20
|
},
|
21
21
|
scopeSlots: {
|
22
|
-
default: (scope: { item: any, index: number,
|
22
|
+
default: (scope: { item: any, index: number, vid: string, vIndex: number }) => {},
|
23
23
|
content: (scope: { data: any[] }) => {},
|
24
24
|
},
|
25
25
|
setup({ props, scopeSlots, event: { emit } }) {
|
@@ -48,8 +48,8 @@ export const VirtualList = designComponent({
|
|
48
48
|
<div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
|
49
49
|
{scopeSlots.content.isExist() ?
|
50
50
|
scopeSlots.content({ data: list }, null) :
|
51
|
-
list.map((node,
|
52
|
-
scopeSlots.default({ item: node.item, index: node.index,
|
51
|
+
list.map((node, vIndex) =>
|
52
|
+
scopeSlots.default({ item: node.item, index: node.index, vid: node.id, vIndex })
|
53
53
|
)}
|
54
54
|
</div>
|
55
55
|
</div>
|