plain-design 1.0.0-beta.3 → 1.0.0-beta.30
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.css +22 -19
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +5 -5
- package/package.json +6 -6
- package/src/packages/build.ts +2 -10
- package/src/packages/components/Alert/alert.scss +1 -1
- package/src/packages/components/Application/theme/theme.ts +2 -3
- package/src/packages/components/ArrowStepGroup/arrow-step.scss +4 -4
- package/src/packages/components/AutoTable/use/useTableOption.methods.tsx +2 -0
- package/src/packages/components/AutoTable/use/useTableOption.state.tsx +1 -0
- package/src/packages/components/AutoTable/utils/TableOption.space.tsx +1 -0
- package/src/packages/components/Badge/badge.scss +1 -1
- package/src/packages/components/Button/button.scss +1 -1
- package/src/packages/components/CarouselGroup/carousel.scss +1 -1
- package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx +3 -3
- package/src/packages/components/CheckboxInner/checkbox-inner.scss +1 -1
- package/src/packages/components/ColorPicker/sub/ColorSlider.tsx +8 -5
- package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx +7 -4
- package/src/packages/components/DatePicker/date.scss +1 -1
- package/src/packages/components/Dialog/dialog.scss +1 -1
- package/src/packages/components/Dialog/index.tsx +4 -3
- package/src/packages/components/Dialog/useDialogMovable.tsx +7 -4
- package/src/packages/components/Dialog/utils/dialog.mouse.ts +4 -2
- package/src/packages/components/DropdownOption/index.tsx +3 -3
- package/src/packages/components/Image/image.scss +3 -3
- package/src/packages/components/Input/useMultipleInput.tsx +5 -2
- package/src/packages/components/Input/useTextareaInput.tsx +10 -5
- package/src/packages/components/Input/uses/useInputHooks.tsx +11 -11
- package/src/packages/components/InputNumber/NumberResize.tsx +6 -2
- package/src/packages/components/Layout/index.tsx +31 -0
- package/src/packages/components/Layout/layout.scss +227 -0
- package/src/packages/components/Layout/layout.utils.ts +3 -0
- package/src/packages/components/LayoutSection/index.tsx +67 -0
- package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx +184 -0
- package/src/packages/components/LoadingMask/index.tsx +1 -1
- package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx} +58 -18
- package/src/packages/components/Pagination/pagination.scss +2 -2
- package/src/packages/components/Popup/index.tsx +24 -10
- package/src/packages/components/ProgressBar/progress-bar.scss +1 -1
- package/src/packages/components/Rate/index.tsx +3 -1
- package/src/packages/components/Scroll/HorizontalScrollbar.tsx +7 -3
- package/src/packages/components/Scroll/VerticalScrollbar.tsx +7 -3
- package/src/packages/components/Select/createPublicSelectRender.tsx +1 -1
- package/src/packages/components/Slider/slider.scss +1 -1
- package/src/packages/components/Slider/useSliderDotDragier.tsx +7 -4
- package/src/packages/components/StepGroup/step-group.scss +9 -9
- package/src/packages/components/TabGroup/TabsInner.tsx +5 -3
- package/src/packages/components/TabGroup/header/horizontal/tabs-header-horizontal.scss +0 -1
- package/src/packages/components/TabGroup/index.tsx +5 -1
- package/src/packages/components/TabGroup/tabs.scss +3 -0
- 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/head/useHeadCellResize.ts +8 -3
- package/src/packages/components/Table/table/table.scss +1 -0
- package/src/packages/components/Table/table/use/useTableDraggier.col.tsx +10 -5
- package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +11 -6
- 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 +172 -0
- package/src/packages/components/ThemeEditor/theme-editor.scss +105 -0
- package/src/packages/components/ThemePrimaryColors/index.ts +5 -0
- package/src/packages/components/Tree/RenderTreeNode.tsx +6 -2
- package/src/packages/components/Tree/index.tsx +3 -3
- package/src/packages/components/Tree/tree.scss +42 -9
- package/src/packages/components/TreeCore/TreeCore.type.tsx +2 -0
- package/src/packages/components/TreeCore/createTreeCore.tsx +5 -1
- package/src/packages/components/TreeCore/createTreeDraggier.tsx +70 -56
- package/src/packages/components/TreeCore/createTreeMethods.tsx +1 -0
- package/src/packages/components/TreeCore/createTreeProps.ts +2 -1
- package/src/packages/components/TreeNodeWithMenu/index.tsx +91 -0
- package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss +39 -0
- package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts +12 -0
- package/src/packages/components/VirtualList/index.tsx +3 -3
- package/src/packages/components/VirtualList/useVirtualList.tsx +94 -62
- package/src/packages/components/VirtualTable/index.tsx +6 -6
- package/src/packages/components/createProvider/index.ts +5 -0
- package/src/packages/components/nextPopupId/index.ts +5 -0
- package/src/packages/components/useDialog/DialogService.tsx +13 -1
- package/src/packages/components/useImage/ImageService.tsx +7 -4
- package/src/packages/components/useMessage/Message.tsx +5 -1
- package/src/packages/components/useMessage/message.scss +5 -1
- package/src/packages/components/useNotice/notice.scss +1 -1
- package/src/packages/components/usePopup/PopupItem.tsx +45 -26
- package/src/packages/components/usePopup/popup-item.scss +5 -1
- package/src/packages/components/usePopup/usePopupManager.tsx +2 -1
- package/src/packages/components/usePopup/utils/popup.utils.ts +2 -1
- package/src/packages/components/usePopupManager/index.ts +5 -0
- package/src/packages/components/usePopupTrigger/index.tsx +5 -0
- package/src/packages/components/useReferenceTrigger/index.tsx +5 -0
- package/src/packages/components/useTooltip/index.tsx +2 -0
- package/src/packages/components/useWatchAutoClear/index.ts +5 -0
- package/src/packages/entry.tsx +39 -0
- package/src/packages/uses/useEdit.ts +5 -1
- package/src/packages/uses/useStyle.tsx +10 -2
- package/src/packages/utils/ClientZoom.ts +24 -2
- package/src/packages/utils/useMove.tsx +10 -4
- package/src/pages/index/App.tsx +3 -2
- package/src/pages/index/Demo/DemoRow.scss +9 -6
- package/src/pages/index/Demo/DemoRowController.tsx +2 -2
- package/src/pages/index/app.scss +5 -0
- package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx +10 -5
- package/src/pages/index/components/normal/DemoDropdown.tsx +1 -1
- package/src/pages/index/components/normal/DemoLayout.tsx +144 -0
- package/src/pages/index/components/normal/DemoLoading.tsx +3 -0
- package/src/pages/index/components/normal/DemoTab.tsx +6 -6
- package/src/pages/index/components/normal/DemoTree.tsx +86 -2
- package/src/pages/index/components/normal/DemoVirtualList.tsx +9 -9
- package/src/pages/index/components/service/DemoDialogService.tsx +1 -0
- package/src/pages/index/components/service/DemoPopupService.tsx +6 -3
- 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 +6 -93
- package/src/pages/index/home/menus.tsx +1 -0
- package/src/pages/index/home/plain-design.png +0 -0
- package/src/pages/index/main.tsx +0 -4
@@ -9,6 +9,7 @@ import {hasClass} from "plain-utils/dom/hasClass";
|
|
9
9
|
import {addClass} from "plain-utils/dom/addClass";
|
10
10
|
import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
|
11
11
|
import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
12
|
+
import {ClientZoom} from "../../../ClientZoom";
|
12
13
|
|
13
14
|
export function useTableDraggierRow(
|
14
15
|
{
|
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
|
|
85
86
|
};
|
86
87
|
let prevClientY = 0;
|
87
88
|
const update = (e?: MouseEvent) => {
|
89
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
88
90
|
const moveIndex = (() => {
|
89
91
|
const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
|
90
|
-
let index = Math.floor(((
|
92
|
+
let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
|
91
93
|
if (index < 0) {index = 0;}
|
92
94
|
if (index > bodyNodes.value.length - 1) {
|
93
95
|
index = bodyNodes.value.length - 1;
|
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
|
|
95
97
|
return index;
|
96
98
|
})();
|
97
99
|
if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
|
98
|
-
if (!!e) {prevClientY =
|
100
|
+
if (!!e) {prevClientY = clientY;}
|
99
101
|
};
|
100
102
|
return { state, update, start, get staticState() {return staticState;} };
|
101
103
|
})();
|
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
|
|
188
190
|
};
|
189
191
|
|
190
192
|
const start = (e: iMouseEvent, node: iTableNode) => {
|
193
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
191
194
|
const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
|
192
195
|
const rowRect = rowEl.getBoundingClientRect();
|
193
|
-
staticState = { startY:
|
196
|
+
staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
|
194
197
|
/*清理状态*/
|
195
198
|
draggierEffects.push(() => {staticState = null;});
|
196
199
|
};
|
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
|
|
199
202
|
const update = (e?: MouseEvent) => {
|
200
203
|
if (!staticState) {return;}
|
201
204
|
|
205
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
206
|
+
|
202
207
|
let isDragging = !!staticState.data;
|
203
208
|
|
204
209
|
if (!isDragging) {
|
205
210
|
/*拖拽超过一定距离的时候才开始拖拽,避免与点击事件冲突*/
|
206
|
-
if (!!e && Math.abs(
|
211
|
+
if (!!e && Math.abs(clientY - staticState.startY) > 5) {
|
207
212
|
isDragging = true;
|
208
213
|
initDraggierState();
|
209
214
|
}
|
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
|
|
214
219
|
return;
|
215
220
|
}
|
216
221
|
|
217
|
-
const durY =
|
222
|
+
const durY = clientY - staticState.startY;
|
218
223
|
let top = staticState.startTop + durY;
|
219
224
|
const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
|
220
225
|
if (top < minTop) {
|
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
|
|
229
234
|
|
230
235
|
staticState.data!.cloneRowEl.style.top = `${top}px`;
|
231
236
|
if (!!e) {
|
232
|
-
prevClientY =
|
237
|
+
prevClientY = clientY;
|
233
238
|
}
|
234
239
|
|
235
240
|
/*更细move index信息*/
|
@@ -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,172 @@
|
|
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
|
+
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
|
+
}
|
63
|
+
},
|
64
|
+
onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
|
65
|
+
onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
|
66
|
+
};
|
67
|
+
|
68
|
+
const publicPopperAttrs = {};
|
69
|
+
|
70
|
+
onBeforeUnmount(
|
71
|
+
addWindowListener('click', (e) => {
|
72
|
+
if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
|
73
|
+
state.isExpand = false;
|
74
|
+
}
|
75
|
+
})
|
76
|
+
);
|
77
|
+
|
78
|
+
const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
|
79
|
+
|
80
|
+
return () => (
|
81
|
+
<div className={classes.value} style={styles.value} ref={onRef.el}>
|
82
|
+
<div className="theme-editor-inner" onClick={handler.handleClickInner}>
|
83
|
+
<div className="theme-editor-inner-cover"/>
|
84
|
+
<Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
|
85
|
+
</div>
|
86
|
+
{state.isExpand && (
|
87
|
+
<div className="theme-editor-form">
|
88
|
+
<div>
|
89
|
+
<div>输入框类型</div>
|
90
|
+
<div>
|
91
|
+
<Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" placeholder="输入框" popperAttrs={publicPopperAttrs}>
|
92
|
+
<SelectOption label="输入框:填充" val="flat"/>
|
93
|
+
<SelectOption label="输入框:描边" val="stroke"/>
|
94
|
+
</Select>
|
95
|
+
</div>
|
96
|
+
</div>
|
97
|
+
|
98
|
+
<div>
|
99
|
+
<div>主题颜色</div>
|
100
|
+
<div>
|
101
|
+
<Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" placeholder="主题色" popperAttrs={publicPopperAttrs}>
|
102
|
+
{Object.entries(ThemePrimaryColors).map(([key, value]) => (
|
103
|
+
<SelectOption label={value!.label} val={key} key={key}>
|
104
|
+
<div className={getComponentCls('theme-editor-block-item')}>
|
105
|
+
{!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
|
106
|
+
<span>{value!.label}</span>
|
107
|
+
</div>
|
108
|
+
</SelectOption>
|
109
|
+
))}
|
110
|
+
</Select>
|
111
|
+
</div>
|
112
|
+
</div>
|
113
|
+
|
114
|
+
<div>
|
115
|
+
<div>大小尺寸</div>
|
116
|
+
<div>
|
117
|
+
<Select v-model={state.size} onChange={handler.onSizeChange} size="mini" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
|
118
|
+
<SelectOption label="大尺寸" val="large"/>
|
119
|
+
<SelectOption label="中等尺寸" val="normal"/>
|
120
|
+
<SelectOption label="小尺寸" val="small"/>
|
121
|
+
<SelectOption label="极小尺寸" val="mini"/>
|
122
|
+
</Select>
|
123
|
+
</div>
|
124
|
+
</div>
|
125
|
+
|
126
|
+
<div>
|
127
|
+
<div>黑白主题</div>
|
128
|
+
<div>
|
129
|
+
<Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
|
130
|
+
<SelectOption label="黑色主题" val="dark"/>
|
131
|
+
<SelectOption label="白色主题" val="light"/>
|
132
|
+
</Select>
|
133
|
+
</div>
|
134
|
+
</div>
|
135
|
+
|
136
|
+
<div>
|
137
|
+
<div>圆角类型</div>
|
138
|
+
<div>
|
139
|
+
<Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
|
140
|
+
<SelectOption label="圆角" val="round"/>
|
141
|
+
<SelectOption label="小圆角" val="square"/>
|
142
|
+
<SelectOption label="无圆角" val="none"/>
|
143
|
+
</Select>
|
144
|
+
</div>
|
145
|
+
</div>
|
146
|
+
|
147
|
+
<div>
|
148
|
+
<div>大小缩放</div>
|
149
|
+
<Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
|
150
|
+
<SelectOption label="0.6" val={0.6}/>
|
151
|
+
<SelectOption label="0.7" val={0.7}/>
|
152
|
+
<SelectOption label="0.8" val={0.8}/>
|
153
|
+
<SelectOption label="0.9" val={0.9}/>
|
154
|
+
<SelectOption label="1.0" val={null}/>
|
155
|
+
<SelectOption label="1.1" val={1.1}/>
|
156
|
+
<SelectOption label="1.2" val={1.2}/>
|
157
|
+
<SelectOption label="1.3" val={1.3}/>
|
158
|
+
<SelectOption label="1.4" val={1.4}/>
|
159
|
+
<SelectOption label="1.5" val={1.5}/>
|
160
|
+
<SelectOption label="1.6" val={1.6}/>
|
161
|
+
<SelectOption label="1.7" val={1.7}/>
|
162
|
+
<SelectOption label="1.8" val={1.8}/>
|
163
|
+
<SelectOption label="1.9" val={1.9}/>
|
164
|
+
<SelectOption label="2.0" val={2.0}/>
|
165
|
+
</Select>
|
166
|
+
</div>
|
167
|
+
</div>
|
168
|
+
)}
|
169
|
+
</div>
|
170
|
+
);
|
171
|
+
},
|
172
|
+
});
|
@@ -0,0 +1,105 @@
|
|
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: plv(pbfc);
|
33
|
+
display: flex;
|
34
|
+
align-items: center;
|
35
|
+
justify-content: center;
|
36
|
+
font-size: 24px;
|
37
|
+
transition: all ease 300ms;
|
38
|
+
|
39
|
+
.theme-editor-inner-cover {
|
40
|
+
position: absolute;
|
41
|
+
inset: 0;
|
42
|
+
user-select: none;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
&.is-expand {
|
47
|
+
width: 300px;
|
48
|
+
height: 260px;
|
49
|
+
border-top-left-radius: plv(box-size-normal-border-radius);
|
50
|
+
border-bottom-left-radius: plv(box-size-normal-border-radius);
|
51
|
+
|
52
|
+
&:before {
|
53
|
+
background-color: plv(background-color);
|
54
|
+
border: solid 1px plv(border-color);
|
55
|
+
}
|
56
|
+
|
57
|
+
.theme-editor-inner {
|
58
|
+
border-radius: plv(box-size-normal-border-radius);
|
59
|
+
background-color: transparent;
|
60
|
+
color: plv(text-2);
|
61
|
+
|
62
|
+
&:hover {
|
63
|
+
background-color: plv(secondary-2);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
&:not(.is-expand) {
|
69
|
+
width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
|
70
|
+
height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
|
71
|
+
}
|
72
|
+
|
73
|
+
.theme-editor-form {
|
74
|
+
padding: 8px;
|
75
|
+
box-sizing: border-box;
|
76
|
+
position: relative;
|
77
|
+
z-index: 2;
|
78
|
+
display: flex;
|
79
|
+
flex-wrap: wrap;
|
80
|
+
flex-direction: row;
|
81
|
+
|
82
|
+
& > div {
|
83
|
+
width: calc(50% - 4px);
|
84
|
+
font-size: 12px;
|
85
|
+
color: plv(text-2);
|
86
|
+
margin-bottom: 20px;
|
87
|
+
|
88
|
+
&:nth-child(2n) {
|
89
|
+
margin-left: 8px;
|
90
|
+
}
|
91
|
+
|
92
|
+
& > div {
|
93
|
+
&:first-child {
|
94
|
+
margin-left: 10px;
|
95
|
+
margin-bottom: 4px;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
@include comp(theme-editor-block-item){
|
103
|
+
display: flex;
|
104
|
+
align-items: center;
|
105
|
+
}
|
@@ -11,7 +11,7 @@ export const RenderTreeNode = designComponent({
|
|
11
11
|
props: {
|
12
12
|
multiple: { type: Boolean },
|
13
13
|
treeNode: { type: Object as PropType<iTreeNode>, required: true },
|
14
|
-
dataVid: { type:
|
14
|
+
dataVid: { type: String },
|
15
15
|
},
|
16
16
|
setup({ props }) {
|
17
17
|
|
@@ -34,13 +34,16 @@ export const RenderTreeNode = designComponent({
|
|
34
34
|
getComponentCls('tree-node'),
|
35
35
|
{
|
36
36
|
'tree-node-current': tree.state.current === props.treeNode.key,
|
37
|
+
'tree-node-lead': isLeaf.value,
|
37
38
|
'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
|
39
|
+
'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
|
38
40
|
'tree-node-disable-check': !props.treeNode.isCheckAble(),
|
39
41
|
}
|
40
42
|
]);
|
41
43
|
|
42
44
|
const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
|
43
45
|
const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
|
46
|
+
const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
|
44
47
|
|
45
48
|
const connectorClassesList = computed(() => {
|
46
49
|
|
@@ -89,6 +92,7 @@ export const RenderTreeNode = designComponent({
|
|
89
92
|
*/
|
90
93
|
onClickNodeContent: () => {
|
91
94
|
if (props.treeNode.empty) {return;}
|
95
|
+
if (tree.draggier.value?.isDragging()) {return;}
|
92
96
|
tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
|
93
97
|
},
|
94
98
|
/**
|
@@ -124,7 +128,7 @@ export const RenderTreeNode = designComponent({
|
|
124
128
|
/>
|
125
129
|
}
|
126
130
|
</div>
|
127
|
-
{tree.props.draggable && (
|
131
|
+
{tree.props.draggable && !tree.props.customDraggier && (
|
128
132
|
<div
|
129
133
|
className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
|
130
134
|
onMouseDown={handler.onMousedownDraggier.value}
|
@@ -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
|
);
|
@@ -3,6 +3,7 @@
|
|
3
3
|
align-items: center;
|
4
4
|
line-height: 22px;
|
5
5
|
padding-bottom: 1px;
|
6
|
+
position: relative;
|
6
7
|
|
7
8
|
.tree-node-operator > div, .tree-node-content {
|
8
9
|
transition: background-color linear 150ms, color linear 150ms;
|
@@ -88,19 +89,43 @@
|
|
88
89
|
.tree-node-content {
|
89
90
|
padding: 5px 8px;
|
90
91
|
color: plv(text-2);
|
92
|
+
}
|
91
93
|
|
92
|
-
|
94
|
+
.tree-node-operator, .tree-node-content {
|
95
|
+
position: relative;
|
96
|
+
z-index: 2;
|
97
|
+
}
|
98
|
+
|
99
|
+
&:after {
|
100
|
+
position: absolute;
|
101
|
+
top: 1px;
|
102
|
+
bottom: 1px;
|
103
|
+
left: 0;
|
104
|
+
right: 0;
|
105
|
+
z-index: 1;
|
106
|
+
border-radius: plv(border-radius-normal);
|
107
|
+
content: '';
|
108
|
+
transition: background-color ease 0.3s;
|
109
|
+
}
|
110
|
+
|
111
|
+
&:hover:not(.tree-node-current):not(.tree-node-single-check) {
|
112
|
+
cursor: pointer;
|
113
|
+
|
114
|
+
&:after {
|
93
115
|
background-color: plv(background-hover);
|
94
|
-
|
116
|
+
content: '';
|
95
117
|
}
|
96
118
|
}
|
97
119
|
|
98
|
-
&.tree-node-current, &.tree-node-single-check {
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
120
|
+
&.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
|
121
|
+
|
122
|
+
.tree-node-operator, .tree-node-content {
|
123
|
+
color: plv(primary-6);
|
124
|
+
}
|
125
|
+
|
126
|
+
&:after {
|
127
|
+
background-color: plv(primary-light-1);
|
128
|
+
content: '';
|
104
129
|
}
|
105
130
|
}
|
106
131
|
|
@@ -168,9 +193,16 @@
|
|
168
193
|
}
|
169
194
|
|
170
195
|
&.tree-expander-cover {
|
196
|
+
@include comp(tree-node) {
|
197
|
+
&:not(.tree-node-lead) {
|
198
|
+
.tree-node-expander {
|
199
|
+
background-color: plv(secondary-2);
|
200
|
+
}
|
201
|
+
}
|
202
|
+
}
|
203
|
+
|
171
204
|
.tree-node-expander {
|
172
205
|
border-radius: 2px;
|
173
|
-
background-color: plv(secondary-2);
|
174
206
|
transform: scale(0.75);
|
175
207
|
}
|
176
208
|
}
|
@@ -216,6 +248,7 @@
|
|
216
248
|
@include comp(tree-draggier-indicator) {
|
217
249
|
position: fixed;
|
218
250
|
pointer-events: none;
|
251
|
+
z-index: 10;
|
219
252
|
|
220
253
|
&[data-available=true] {
|
221
254
|
background-color: plv(primary-6);
|
@@ -63,6 +63,8 @@ export interface iTreeProps {
|
|
63
63
|
getNodeIcon?: (node: iTreeNode) => string,
|
64
64
|
/*是否开启拖拽节点功能*/
|
65
65
|
draggable?: boolean,
|
66
|
+
/*自定义draggier按钮*/
|
67
|
+
customDraggier?: boolean,
|
66
68
|
/*判断节点是否可以拖拽*/
|
67
69
|
isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
|
68
70
|
/*判断节点是否可以放置*/
|
@@ -327,7 +327,11 @@ export function createTreeCore(
|
|
327
327
|
hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
|
328
328
|
);
|
329
329
|
effects.push(
|
330
|
-
hooks.onClickNodeContent.use(({ treeNode }) => {
|
330
|
+
hooks.onClickNodeContent.use(({ treeNode }) => {
|
331
|
+
methods.singleSelect(treeNode);
|
332
|
+
if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
|
333
|
+
if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
|
334
|
+
})
|
331
335
|
);
|
332
336
|
effects.push(
|
333
337
|
hooks.onClickCheckbox.use(({ treeNode }) => {
|