plain-design 1.0.0-beta.2 → 1.0.0-beta.21
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 +8 -6
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +38 -38
- package/package.json +6 -6
- package/src/packages/build.ts +2 -10
- package/src/packages/components/Application/theme/theme.ts +1 -3
- 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/ColorPicker/sub/ColorSlider.tsx +8 -5
- package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx +7 -4
- package/src/packages/components/Dialog/index.tsx +2 -1
- 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/Input/useMultipleInput.tsx +5 -2
- package/src/packages/components/Input/useTextareaInput.tsx +10 -5
- 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/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx} +6 -4
- package/src/packages/components/Popup/index.tsx +20 -8
- 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/Slider/useSliderDotDragier.tsx +7 -4
- package/src/packages/components/StepGroup/step-group.scss +6 -6
- 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/table/head/useHeadCellResize.ts +8 -3
- 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/ThemePrimaryColors/index.ts +5 -0
- package/src/packages/components/Tree/RenderTreeNode.tsx +5 -1
- 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/useVirtualList.tsx +47 -15
- package/src/packages/components/VirtualTable/index.tsx +2 -2
- 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 +4 -0
- package/src/packages/components/usePopup/PopupItem.tsx +11 -1
- package/src/packages/components/usePopup/popup-item.scss +4 -0
- 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 +37 -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/app.scss +5 -0
- package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx +10 -5
- 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/service/DemoDialogService.tsx +1 -0
- package/src/pages/index/components/service/DemoPopupService.tsx +6 -3
- package/src/pages/index/home/AppHead.tsx +4 -4
- 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
@@ -3,6 +3,7 @@ import {delay} from "plain-utils/utils/delay";
|
|
3
3
|
import './virtual-list.scss';
|
4
4
|
import Scroll from "../Scroll";
|
5
5
|
import {unit} from "plain-utils/string/unit";
|
6
|
+
import {createEnum} from "plain-utils/utils/createEnum";
|
6
7
|
|
7
8
|
interface DataNode {
|
8
9
|
top: number;
|
@@ -13,6 +14,8 @@ interface DataNode {
|
|
13
14
|
index: number;
|
14
15
|
}
|
15
16
|
|
17
|
+
const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
|
18
|
+
|
16
19
|
export function useVirtualList(
|
17
20
|
{
|
18
21
|
props,
|
@@ -53,6 +56,7 @@ export function useVirtualList(
|
|
53
56
|
nodes: [] as DataNode[], // 格式化的data数组数据
|
54
57
|
scrollTop: 0, // 当前滚动scrollTop(非实时的)
|
55
58
|
pageSize: 0, // 页大小
|
59
|
+
scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
|
56
60
|
});
|
57
61
|
|
58
62
|
/**
|
@@ -189,18 +193,37 @@ export function useVirtualList(
|
|
189
193
|
* @date 2020/12/14 22:44
|
190
194
|
*/
|
191
195
|
getPageIndex: (scrollTop: number, pageSize: number) => {
|
196
|
+
if (scrollTop < 0) {
|
197
|
+
scrollTop = 0;
|
198
|
+
}
|
192
199
|
const data = props.data || [];
|
193
200
|
/*当前scrollTop对应的数据中数据的索引*/
|
194
201
|
let scrollIndex = utils.getIndex(scrollTop);
|
195
202
|
let pageIndex = Math.floor(scrollIndex / pageSize);
|
196
|
-
let start =
|
197
|
-
|
203
|
+
let start = (() => {
|
204
|
+
if (state.scrollDirection === 'none') {
|
205
|
+
return scrollIndex - Math.floor(pageSize * 0.5);
|
206
|
+
} else if (state.scrollDirection === 'up') {
|
207
|
+
return scrollIndex - pageSize;
|
208
|
+
} else {
|
209
|
+
return scrollIndex;
|
210
|
+
}
|
211
|
+
})();
|
212
|
+
let end = start + pageSize * 2;
|
213
|
+
start -= 1;
|
214
|
+
end += 1;
|
215
|
+
if (start < 0) {
|
216
|
+
end -= start;
|
217
|
+
start = 0;
|
218
|
+
}
|
198
219
|
/*console.log({
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
220
|
+
scrollIndex,
|
221
|
+
pageIndex,
|
222
|
+
start,
|
223
|
+
end,
|
224
|
+
pageSize,
|
225
|
+
scrollDirection: state.scrollDirection
|
226
|
+
});*/
|
204
227
|
const exceed = end - data.length;
|
205
228
|
if (exceed > 0) {
|
206
229
|
end = data.length;
|
@@ -242,13 +265,13 @@ export function useVirtualList(
|
|
242
265
|
if (props.disabled) {
|
243
266
|
return;
|
244
267
|
}
|
245
|
-
|
268
|
+
const newScrollTop = (e.target as HTMLDivElement).scrollTop;
|
269
|
+
state.scrollDirection = newScrollTop > freezeState.scrollTop ? ScrollDirection.down : ScrollDirection.up;
|
270
|
+
freezeState.scrollTop = newScrollTop;
|
246
271
|
const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
emit.onPageIndexChange(current);
|
251
|
-
}
|
272
|
+
state.scrollTop = (e.target as HTMLDivElement).scrollTop;
|
273
|
+
freezeState.current = current;
|
274
|
+
emit.onPageIndexChange(current);
|
252
275
|
}
|
253
276
|
};
|
254
277
|
|
@@ -265,8 +288,17 @@ export function useVirtualList(
|
|
265
288
|
});
|
266
289
|
|
267
290
|
onMounted(() => {
|
268
|
-
|
269
|
-
|
291
|
+
let hostHeight = refs.scroll!.refs.host!.offsetHeight;
|
292
|
+
const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
|
293
|
+
const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
|
294
|
+
if (!!headEl) {
|
295
|
+
hostHeight -= headEl.offsetHeight;
|
296
|
+
}
|
297
|
+
if (!!footEl) {
|
298
|
+
hostHeight -= footEl.offsetHeight;
|
299
|
+
}
|
300
|
+
|
301
|
+
state.pageSize = Math.floor(hostHeight / props.size);
|
270
302
|
if (props.dynamicSize && !props.disabled) {
|
271
303
|
utils.resetData(props.data);
|
272
304
|
}
|
@@ -157,7 +157,7 @@ export const VirtualTable = designComponent({
|
|
157
157
|
<>
|
158
158
|
{!!headHeight.value && (
|
159
159
|
<div className="virtual-table-head-table-wrapper" ref={onRef.head}>
|
160
|
-
<table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
|
160
|
+
<table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
|
161
161
|
{slots.headColgroup()}
|
162
162
|
<thead>{slots.head()}</thead>
|
163
163
|
</table>
|
@@ -175,7 +175,7 @@ export const VirtualTable = designComponent({
|
|
175
175
|
</div>
|
176
176
|
{!!props.summaryData?.length && (
|
177
177
|
<div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
|
178
|
-
<table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
|
178
|
+
<table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
|
179
179
|
{slots.colgroup()}
|
180
180
|
<tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
|
181
181
|
</table>
|
@@ -10,6 +10,7 @@ import Icon from "../Icon";
|
|
10
10
|
import {ThemeStatusIcons} from "../Application/theme/theme.utils";
|
11
11
|
import Input from "../Input";
|
12
12
|
import InputNumber from "../InputNumber";
|
13
|
+
import $message from "../$message";
|
13
14
|
|
14
15
|
/**
|
15
16
|
* 弹框服务单个组件
|
@@ -133,7 +134,15 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
133
134
|
const dialogProps = { ...targetOption.value.dialogProps };
|
134
135
|
|
135
136
|
/*wrap handleConfirm*/
|
136
|
-
dialogProps.handleConfirm = async (close: () => void) =>
|
137
|
+
dialogProps.handleConfirm = async (close: () => void) => {
|
138
|
+
if (!!targetOption.value.customOption.editRequired) {
|
139
|
+
if (state.editValue == null || !state.editValue.trim().length) {
|
140
|
+
$message.warn('不能为空!');
|
141
|
+
return false;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
return targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
|
145
|
+
};
|
137
146
|
|
138
147
|
/*wrap onClose*/
|
139
148
|
dialogProps.onClose = () => onClose.exec(undefined);
|
@@ -165,6 +174,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
165
174
|
v-model={state.editValue}
|
166
175
|
readonly={option.editReadonly}
|
167
176
|
onEnter={onEnter}
|
177
|
+
status={option.editRequired ? 'warn' : undefined}
|
168
178
|
/>
|
169
179
|
);
|
170
180
|
break;
|
@@ -176,6 +186,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
176
186
|
v-model={state.editValue}
|
177
187
|
readonly={option.editReadonly}
|
178
188
|
onEnter={onEnter}
|
189
|
+
status={option.editRequired ? 'warn' : undefined}
|
179
190
|
/>
|
180
191
|
);
|
181
192
|
break;
|
@@ -189,6 +200,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
189
200
|
v-model={state.editValue}
|
190
201
|
readonly={option.editReadonly}
|
191
202
|
onEnter={onEnter}
|
203
|
+
status={option.editRequired ? 'warn' : undefined}
|
192
204
|
/>
|
193
205
|
);
|
194
206
|
break;
|
@@ -8,6 +8,7 @@ import {Icon} from "../Icon";
|
|
8
8
|
import i18n from "../i18n";
|
9
9
|
import Transition from "../Transition";
|
10
10
|
import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
|
11
|
+
import {ClientZoom} from "../ClientZoom";
|
11
12
|
|
12
13
|
const nextCount = createCounter("image_preview");
|
13
14
|
|
@@ -167,18 +168,20 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
167
168
|
startY: 0,
|
168
169
|
};
|
169
170
|
const mousedown = (e: MouseEvent) => {
|
171
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
170
172
|
freezeState = {
|
171
173
|
startTop: state.adjust.top || 0,
|
172
174
|
startLeft: state.adjust.left || 0,
|
173
|
-
startX:
|
174
|
-
startY:
|
175
|
+
startX: clientX,
|
176
|
+
startY: clientY,
|
175
177
|
};
|
176
178
|
document.addEventListener('mousemove', mousemove);
|
177
179
|
document.addEventListener('mouseup', mouseup);
|
178
180
|
};
|
179
181
|
const mousemove = (e: MouseEvent) => {
|
180
|
-
|
181
|
-
state.adjust.
|
182
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
183
|
+
state.adjust.left = clientX - freezeState.startX + freezeState.startLeft;
|
184
|
+
state.adjust.top = clientY - freezeState.startY + freezeState.startTop;
|
182
185
|
};
|
183
186
|
const mouseup = (e: MouseEvent) => {
|
184
187
|
document.removeEventListener('mousemove', mousemove);
|
@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, Pro
|
|
2
2
|
import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
|
3
3
|
import Icon from "../Icon";
|
4
4
|
import './message.scss';
|
5
|
+
import {useStyle} from "../../uses/useStyle";
|
5
6
|
|
6
7
|
export const Message = designComponent({
|
7
8
|
name: 'message-service',
|
@@ -16,9 +17,12 @@ export const Message = designComponent({
|
|
16
17
|
|
17
18
|
onMounted(() => emit.onReady());
|
18
19
|
|
20
|
+
const { styleComputed } = useStyle();
|
21
|
+
|
19
22
|
const classes = useClasses(() => [
|
20
23
|
getComponentCls('message'),
|
21
|
-
`message-status-${props.option.status}
|
24
|
+
`message-status-${props.option.status}`,
|
25
|
+
`message-size-${styleComputed.value.size}`
|
22
26
|
]);
|
23
27
|
const styles = { zIndex: nextIndex() };
|
24
28
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
|
1
|
+
import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
|
2
2
|
import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
|
3
3
|
import {createEffects} from "plain-utils/utils/createEffects";
|
4
4
|
import {delay} from "plain-utils/utils/delay";
|
@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
|
|
82
82
|
'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
|
83
83
|
[`popup-item-status-${state.option.status}`]: !!state.option.status,
|
84
84
|
'popup-item-dark-app': application.value.theme.dark,
|
85
|
+
'popup-item-no-interactive': !state.option.interactive,
|
85
86
|
}
|
86
87
|
]);
|
87
88
|
|
@@ -262,6 +263,14 @@ export const PopupItem = designComponent({
|
|
262
263
|
};
|
263
264
|
return check;
|
264
265
|
})(),
|
266
|
+
/**
|
267
|
+
* 阻止点击popup的事件冒泡,如果有div包裹popup几点,在react中即使popup不是这个div的子节点也会导致事件冒泡到div上
|
268
|
+
* @author 韦胜健
|
269
|
+
* @date 2023/8/10 11:27
|
270
|
+
*/
|
271
|
+
onClickPopup: (e: iMouseEvent) => {
|
272
|
+
e.stopPropagation();
|
273
|
+
},
|
265
274
|
};
|
266
275
|
|
267
276
|
onMounted(async () => {
|
@@ -369,6 +378,7 @@ export const PopupItem = designComponent({
|
|
369
378
|
data-popup-show={String(state.isShow)}
|
370
379
|
onTransitionEnd={handler.onTransitionend}
|
371
380
|
style={styles.value}
|
381
|
+
onClick={handler.onClickPopup}
|
372
382
|
>
|
373
383
|
{/*slide的情况下,arrow得放body外面,避免被overflow:hidden*/}
|
374
384
|
{!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
|
@@ -112,6 +112,10 @@
|
|
112
112
|
&.popup-item-no-border {
|
113
113
|
filter: none !important;
|
114
114
|
}
|
115
|
+
|
116
|
+
&.popup-item-no-interactive {
|
117
|
+
pointer-events: none;
|
118
|
+
}
|
115
119
|
/*---------------------------------------animation-------------------------------------------*/
|
116
120
|
|
117
121
|
&.popup-item-animation-fade {
|
@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
|
|
46
46
|
if (option.overflow) {
|
47
47
|
if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
|
48
48
|
state.isOverflow = true;
|
49
|
+
} else {
|
50
|
+
state.isOverflow = false;
|
49
51
|
}
|
50
52
|
}
|
51
53
|
},
|
package/src/packages/entry.tsx
CHANGED
@@ -54,6 +54,7 @@ export {TabGroup} from './components/TabGroup';
|
|
54
54
|
export {Tab} from './components/Tab';
|
55
55
|
export {Tag} from './components/Tag';
|
56
56
|
export {Tree} from './components/Tree';
|
57
|
+
export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
|
57
58
|
export {ColorPicker} from './components/ColorPicker';
|
58
59
|
export {TimePicker} from './components/TimePicker';
|
59
60
|
export {DatePicker} from './components/DatePicker';
|
@@ -85,9 +86,28 @@ export {CascadePanel} from './components/CascadePanel';
|
|
85
86
|
export {usePopup} from './components/usePopup';
|
86
87
|
export {Popup} from './components/Popup';
|
87
88
|
export {createPopup} from './components/createPopup';
|
89
|
+
export type {
|
90
|
+
iPopupAlign,
|
91
|
+
iPopupAnimation,
|
92
|
+
iPopupBoundary,
|
93
|
+
iPopupCustomOption,
|
94
|
+
iPopupDefaultOption,
|
95
|
+
iPopupDirection,
|
96
|
+
iPopupManager,
|
97
|
+
iPopupOption,
|
98
|
+
iPopupPlacement,
|
99
|
+
iPopupRects,
|
100
|
+
iPopupRefreshBuildParams,
|
101
|
+
iPopupRefreshParams,
|
102
|
+
iPopupRefs,
|
103
|
+
iPopupTrigger,
|
104
|
+
iPopupUseOption,
|
105
|
+
} from './components/usePopup/utils/popup.utils';
|
88
106
|
export {createScrollUtils} from './components/createScrollUtils';
|
89
107
|
export {useAutoScrollUtils} from './components/useAutoScrollUtils';
|
90
108
|
export {ClientZoom} from './components/ClientZoom';
|
109
|
+
export {Layout} from './components/Layout';
|
110
|
+
export {LayoutSection} from './components/LayoutSection';
|
91
111
|
|
92
112
|
export {VirtualTable} from './components/VirtualTable';
|
93
113
|
export {Table} from './components/Table';
|
@@ -127,6 +147,11 @@ export type {iOvMeta} from './components/$ov/ov.utils';
|
|
127
147
|
export {$configuration} from './components/$configuration';
|
128
148
|
export {createAddressService} from './components/createAddressService';
|
129
149
|
export {createHttp} from './components/createHttp';
|
150
|
+
export type {
|
151
|
+
iHttpRequestConfig,
|
152
|
+
iPlainResponseDataType,
|
153
|
+
iHttpResponseDataType
|
154
|
+
} from './components/createHttp/http.utils';
|
130
155
|
|
131
156
|
export {Address} from './components/Address';
|
132
157
|
export {AddressCascade} from './components/AddressCascade';
|
@@ -162,5 +187,17 @@ export type {
|
|
162
187
|
iTableOptionCacheRegistryConfig,
|
163
188
|
iTableOptionGetCacheParam
|
164
189
|
} from './components/AutoTable/use/useTableOption.cache.utils';
|
190
|
+
export {PageThemeUtils} from './components/PageThemeUtils';
|
191
|
+
export {ThemePrimaryColors} from './components/ThemePrimaryColors';
|
192
|
+
export {useReferenceTrigger} from './components/useReferenceTrigger';
|
193
|
+
export {usePopupTrigger} from './components/usePopupTrigger';
|
194
|
+
export {useWatchAutoClear} from './components/useWatchAutoClear';
|
195
|
+
export {nextPopupId} from './components/nextPopupId';
|
196
|
+
export {createProvider} from './components/createProvider';
|
197
|
+
export {usePopupManager} from './components/usePopupManager';
|
198
|
+
export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
|
199
|
+
export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
|
200
|
+
export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
|
201
|
+
export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
|
165
202
|
|
166
203
|
setComponentPrefix(globalComponentPrefix);
|
@@ -14,7 +14,7 @@ export const EditProps = {
|
|
14
14
|
multiple: { type: Boolean }, // 是否多选
|
15
15
|
} as const;
|
16
16
|
|
17
|
-
interface EditProvideData {
|
17
|
+
export interface EditProvideData {
|
18
18
|
disabled: boolean | null,
|
19
19
|
readonly: boolean | null,
|
20
20
|
loading: boolean | null,
|
@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
|
|
74
74
|
}
|
75
75
|
}
|
76
76
|
|
77
|
+
onBeforeUnmount(() => {
|
78
|
+
editComputed.effect.stop();
|
79
|
+
});
|
80
|
+
|
77
81
|
return {
|
78
82
|
editState,
|
79
83
|
editComputed,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {computed, inject, PropType, provide} from "plain-design-composition";
|
1
|
+
import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
|
2
2
|
import {useFunctionWrapper} from "./useFunctionWrapper";
|
3
3
|
import {createEnum} from "plain-utils/utils/createEnum";
|
4
4
|
import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
|
@@ -19,7 +19,7 @@ export const StyleProps = {
|
|
19
19
|
status: { type: String as PropType<typeof ThemeStatus.TYPE> }, // 'secondary', 'primary', 'success', 'warn', 'error'
|
20
20
|
} as const;
|
21
21
|
|
22
|
-
interface UseStyleProvideData {
|
22
|
+
export interface UseStyleProvideData {
|
23
23
|
shape: typeof ThemeShape.TYPE,
|
24
24
|
size: typeof ThemeSize.TYPE,
|
25
25
|
status?: typeof ThemeStatus.TYPE,
|
@@ -62,6 +62,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
|
|
62
62
|
|
63
63
|
provide(USE_STYLE_PROVIDER, styleComputed);
|
64
64
|
|
65
|
+
onBeforeUnmount(() => {
|
66
|
+
setTimeout(() => {
|
67
|
+
(styleComputed.value as any).ctx = null;
|
68
|
+
(styleComputed.value as any).parent = null;
|
69
|
+
styleComputed.effect.stop();
|
70
|
+
});
|
71
|
+
});
|
72
|
+
|
65
73
|
return { styleComputed };
|
66
74
|
});
|
67
75
|
|
@@ -1,8 +1,10 @@
|
|
1
|
+
import {iMouseEvent} from 'plain-design-composition';
|
2
|
+
|
1
3
|
export const ClientZoom = (() => {
|
2
4
|
let zoom: '' | number = '';
|
3
5
|
return {
|
4
|
-
get: () => {
|
5
|
-
return zoom;
|
6
|
+
get: (): number => {
|
7
|
+
return zoom === '' ? 1 : zoom;
|
6
8
|
},
|
7
9
|
set: (_zoom: number | null) => {
|
8
10
|
const __zoom = _zoom == null ? '' : _zoom;
|
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
|
|
24
26
|
};
|
25
27
|
}
|
26
28
|
},
|
29
|
+
getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
|
30
|
+
const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
|
31
|
+
return {
|
32
|
+
clientX: ClientZoom.formatClientValue(clientX),
|
33
|
+
clientY: ClientZoom.formatClientValue(clientY),
|
34
|
+
offsetX: ClientZoom.formatClientValue(offsetX),
|
35
|
+
offsetY: ClientZoom.formatClientValue(offsetY),
|
36
|
+
};
|
37
|
+
},
|
38
|
+
formatClientValue: (val: number) => {
|
39
|
+
return ClientZoom.zoomPosition(val);
|
40
|
+
},
|
41
|
+
zoomPosition(val: number) {
|
42
|
+
const zoom = ClientZoom.get();
|
43
|
+
return Number((val / zoom).toFixed(2));
|
44
|
+
},
|
45
|
+
zoomSize(val: number) {
|
46
|
+
const zoom = ClientZoom.get();
|
47
|
+
return Number((val * zoom).toFixed(2));
|
48
|
+
},
|
27
49
|
};
|
28
50
|
})();
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import {createEffects} from "plain-utils/utils/createEffects";
|
2
2
|
import {watch} from "plain-design-composition";
|
3
3
|
import {removeUnit} from "plain-utils/string/removeUnit";
|
4
|
+
import {ClientZoom} from "../components/ClientZoom";
|
4
5
|
|
5
6
|
export function useMove(
|
6
7
|
{
|
@@ -26,6 +27,8 @@ export function useMove(
|
|
26
27
|
|
27
28
|
const onMousedown = (e: MouseEvent) => {
|
28
29
|
|
30
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
31
|
+
|
29
32
|
const { effects: draggierEffects } = createEffects();
|
30
33
|
|
31
34
|
const el = e.currentTarget as HTMLElement;
|
@@ -35,16 +38,19 @@ export function useMove(
|
|
35
38
|
const dragState = {
|
36
39
|
isDragging: false,
|
37
40
|
start: {
|
38
|
-
x:
|
39
|
-
y:
|
41
|
+
x: clientX,
|
42
|
+
y: clientY,
|
40
43
|
left: Number(removeUnit(style.left) || 0),
|
41
44
|
top: Number(removeUnit(style.top) || 0),
|
42
45
|
}
|
43
46
|
};
|
44
47
|
|
45
48
|
const onMousemove = (e: MouseEvent) => {
|
46
|
-
|
47
|
-
const
|
49
|
+
|
50
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
51
|
+
|
52
|
+
const durX = clientX - dragState.start.x;
|
53
|
+
const durY = clientY - dragState.start.y;
|
48
54
|
|
49
55
|
if (!dragState.isDragging) {
|
50
56
|
if (durX >= 5 || durY >= 5) {
|
package/src/pages/index/App.tsx
CHANGED
@@ -2,8 +2,9 @@ import {designPage} from 'plain-design-composition';
|
|
2
2
|
import './app.scss';
|
3
3
|
import {AppHome} from "./home/AppHome";
|
4
4
|
import {DemoRowController} from "./Demo/DemoRowController";
|
5
|
-
import {Application} from "../../packages";
|
6
|
-
|
5
|
+
import {Application, ClientZoom, PageThemeUtils} from "../../packages";
|
6
|
+
|
7
|
+
PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
|
7
8
|
|
8
9
|
export const App = designPage(() => {
|
9
10
|
return () => (
|
package/src/pages/index/app.scss
CHANGED
@@ -1,14 +1,19 @@
|
|
1
1
|
import {designPage} from "plain-design-composition";
|
2
2
|
import {useTableOption} from "../../../module/useTableOption";
|
3
3
|
import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
|
4
|
+
import TableOptionSpace from "../../../../packages/components/TableOptionSpace";
|
5
|
+
|
6
|
+
let option: TableOptionSpace.iTableOption;
|
4
7
|
|
5
8
|
export const demo1 = designPage(() => {
|
6
9
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
10
|
+
if (!option) {
|
11
|
+
option = useTableOption({
|
12
|
+
url: '/demo',
|
13
|
+
showRowsMode: 'auto',
|
14
|
+
fill: true,
|
15
|
+
});
|
16
|
+
}
|
12
17
|
|
13
18
|
|
14
19
|
const onClick = () => {
|