plain-design 1.0.0-beta.3 → 1.0.0-beta.31
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 +20 -3
- package/src/packages/components/InputNumber/input-number.utils.tsx +7 -5
- package/src/packages/components/InputNumber/useInputNumber.public.tsx +25 -6
- 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/DemoNumber.tsx +4 -1
- 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
@@ -1,104 +1,17 @@
|
|
1
|
-
import {designPage
|
1
|
+
import {designPage} from "plain-design-composition";
|
2
2
|
import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
|
3
|
-
import
|
4
|
-
import {
|
5
|
-
import ClientZoom from "../../../packages/components/ClientZoom";
|
3
|
+
import logoImage from './plain-design.png';
|
4
|
+
import {ThemeEditor} from "../../../packages/components/ThemeEditor";
|
6
5
|
|
7
6
|
export const AppHead = designPage(() => {
|
8
|
-
|
9
|
-
const state = reactive({
|
10
|
-
size: PageThemeUtils.state.size || 'normal',
|
11
|
-
dark: PageThemeUtils.state.dark ? 'dark' : 'light',
|
12
|
-
shape: PageThemeUtils.state.shape || 'square',
|
13
|
-
zoom: PageThemeUtils.state.zoom || null,
|
14
|
-
primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
|
15
|
-
inputMode: PageThemeUtils.state.inputMode || 'flat',
|
16
|
-
});
|
17
|
-
|
18
|
-
const onSizeChange = () => {
|
19
|
-
PageThemeUtils.size(state.size);
|
20
|
-
};
|
21
|
-
|
22
|
-
const onShapeChange = () => {
|
23
|
-
PageThemeUtils.shape(state.shape);
|
24
|
-
};
|
25
|
-
|
26
|
-
const onZoomChange = () => {
|
27
|
-
PageThemeUtils.zoom(state.zoom);
|
28
|
-
ClientZoom.set(state.zoom);
|
29
|
-
};
|
30
|
-
|
31
|
-
const onDarkChange = () => {
|
32
|
-
const val = !state.dark ? false : state.dark === 'dark';
|
33
|
-
PageThemeUtils.toggle(val);
|
34
|
-
};
|
35
|
-
|
36
|
-
const onPrimaryChange = () => {
|
37
|
-
PageThemeUtils.primary(state.primaryKey);
|
38
|
-
};
|
39
|
-
|
40
|
-
const onInputModeChange = () => {
|
41
|
-
PageThemeUtils.inputMode(state.inputMode);
|
42
|
-
};
|
43
|
-
|
44
|
-
const publicPopperAttrs = { trigger: 'hover' };
|
45
|
-
|
46
7
|
return () => (
|
47
8
|
<div className="app-head">
|
48
9
|
<div className="app-head-logo">
|
49
|
-
<PlainLogo style={{ fontSize: '
|
50
|
-
<
|
10
|
+
<PlainLogo style={{ fontSize: '28px', marginRight: '0.4em' }}/>
|
11
|
+
<img src={logoImage}/>
|
51
12
|
</div>
|
52
13
|
<div className="app-head-operation">
|
53
|
-
<
|
54
|
-
<SelectOption label="输入框:填充" val="flat"/>
|
55
|
-
<SelectOption label="输入框:描边" val="stroke"/>
|
56
|
-
</Select>
|
57
|
-
|
58
|
-
<Select v-model={state.primaryKey} onChange={onPrimaryChange} size="mini" width="90" placeholder="主题色" popperAttrs={publicPopperAttrs}>
|
59
|
-
{Object.entries(ThemePrimaryColors).map(([key, value]) => (
|
60
|
-
<SelectOption label={value!.label} val={key} key={key}>
|
61
|
-
{!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
|
62
|
-
<span>{value!.label}</span>
|
63
|
-
</SelectOption>
|
64
|
-
))}
|
65
|
-
</Select>
|
66
|
-
|
67
|
-
<Select v-model={state.size} onChange={onSizeChange} size="mini" width="90" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
|
68
|
-
<SelectOption label="大尺寸" val="large"/>
|
69
|
-
<SelectOption label="中等尺寸" val="normal"/>
|
70
|
-
<SelectOption label="小尺寸" val="small"/>
|
71
|
-
<SelectOption label="极小尺寸" val="mini"/>
|
72
|
-
</Select>
|
73
|
-
|
74
|
-
<Select v-model={state.dark} onChange={onDarkChange} size="mini" width="90" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
|
75
|
-
<SelectOption label="黑色主题" val="dark"/>
|
76
|
-
<SelectOption label="白色主题" val="light"/>
|
77
|
-
</Select>
|
78
|
-
|
79
|
-
<Select v-model={state.shape} onChange={onShapeChange} size="mini" width="90" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
|
80
|
-
<SelectOption label="圆角" val="round"/>
|
81
|
-
<SelectOption label="小圆角" val="square"/>
|
82
|
-
<SelectOption label="无圆角" val="none"/>
|
83
|
-
</Select>
|
84
|
-
|
85
|
-
<Select v-model={state.zoom} onChange={onZoomChange} size="mini" width="90" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
|
86
|
-
<SelectOption label="0.6" val={0.6}/>
|
87
|
-
<SelectOption label="0.7" val={0.7}/>
|
88
|
-
<SelectOption label="0.8" val={0.8}/>
|
89
|
-
<SelectOption label="0.9" val={0.9}/>
|
90
|
-
<SelectOption label="1.0" val={null}/>
|
91
|
-
<SelectOption label="1.1" val={1.1}/>
|
92
|
-
<SelectOption label="1.2" val={1.2}/>
|
93
|
-
<SelectOption label="1.3" val={1.3}/>
|
94
|
-
<SelectOption label="1.4" val={1.4}/>
|
95
|
-
<SelectOption label="1.5" val={1.5}/>
|
96
|
-
<SelectOption label="1.6" val={1.6}/>
|
97
|
-
<SelectOption label="1.7" val={1.7}/>
|
98
|
-
<SelectOption label="1.8" val={1.8}/>
|
99
|
-
<SelectOption label="1.9" val={1.9}/>
|
100
|
-
<SelectOption label="2.0" val={2.0}/>
|
101
|
-
</Select>
|
14
|
+
<ThemeEditor/>
|
102
15
|
</div>
|
103
16
|
</div>
|
104
17
|
);
|
@@ -117,6 +117,7 @@ export const MenuGroups: MenuGroup[] = [
|
|
117
117
|
{ name: 'Card', title: '卡片', page: '/normal/DemoCard', complete: true },
|
118
118
|
{ name: 'Carousel', title: '轮播', page: '/normal/DemoCarousel', complete: true },
|
119
119
|
{ name: 'Collapse', title: '折叠面板', page: '/normal/DemoCollapse', complete: true },
|
120
|
+
{ name: 'Layout', title: '布局', page: '/normal/DemoLayout', complete: true },
|
120
121
|
{ name: 'Alert', title: '提示信息', page: '/normal/DemoAlert', complete: true },
|
121
122
|
{ name: 'KeepAlive', title: '保活', page: '/normal/DemoKeepAlive', complete: true },
|
122
123
|
// {name: 'Triangle', title: '三角形元素', page: '/normal/triangle', complete: false},
|
Binary file
|
package/src/pages/index/main.tsx
CHANGED
@@ -6,8 +6,6 @@ import {installAllIcon} from "../../packages/utils/installAllIcons";
|
|
6
6
|
import {designPage, provide, setComponentPrefix} from "plain-design-composition";
|
7
7
|
import {App} from "./App";
|
8
8
|
import '../module';
|
9
|
-
import {ClientZoom} from "../../packages";
|
10
|
-
import {PageThemeUtils} from "./PageThemeUtils";
|
11
9
|
|
12
10
|
setComponentPrefix(globalComponentPrefix);
|
13
11
|
|
@@ -17,8 +15,6 @@ installIconfontSymbol();
|
|
17
15
|
installAllIcon();
|
18
16
|
// installAllLazyIcons();
|
19
17
|
|
20
|
-
PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
|
21
|
-
|
22
18
|
const Main = designPage(() => {
|
23
19
|
provide('customAppMessage', '全局上下文名称');
|
24
20
|
return () => <App/>;
|