plain-design 1.0.0-beta.2 → 1.0.0-beta.21

package/src/pages/index/components/normal/DemoLayout.tsx

@@ -0,0 +1,144 @@
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Layout, LayoutSection} from "../../../../packages";
+
+export const demo1 = designPage(() => {
+  return () => (
+    <DemoRow title="基本用法">
+      <Layout>
+        <LayoutSection position="left">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>左侧调节区域</div>
+            <div>(初始化时自动宽度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ height: '200px', padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+            主内容区域
+          </div>
+        </LayoutSection>
+        <LayoutSection position="right" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>右侧调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+  return () => (
+    <DemoRow title="纵向">
+      <Layout vertical style={{ height: '500px' }}>
+        <LayoutSection position="top">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>上方调节区域</div>
+            <div>(初始化时自动高度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+            主内容区域
+          </div>
+        </LayoutSection>
+        <LayoutSection position="bottom" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>下方调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo3 = designPage(() => {
+  return () => (
+    <DemoRow title="嵌套布局">
+      <Layout vertical style={{ height: '500px' }}>
+        <LayoutSection position="top">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>上方调节区域</div>
+            <div>(初始化时自动高度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ position: 'absolute', inset: '0' }}>
+            <Layout style={{ height: '100%' }}>
+              <LayoutSection position="left">
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                  <div>左侧调节区域</div>
+                  <div>(初始化时自动宽度)</div>
+                </div>
+              </LayoutSection>
+              <LayoutSection>
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+                  主内容区域
+                </div>
+              </LayoutSection>
+              <LayoutSection position="right" modelValue={80}>
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                  <div>右侧调节区域</div>
+                  <div>(初始化固定80px)</div>
+                </div>
+              </LayoutSection>
+            </Layout>
+          </div>
+        </LayoutSection>
+        <LayoutSection position="bottom" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>下方调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo4 = designPage(() => {
+  return () => (
+    <DemoRow title="嵌套布局2">
+      <Layout>
+        <LayoutSection position="left">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>左侧调节区域</div>
+            <div>(初始化时自动宽度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <Layout vertical style={{ height: '500px' }}>
+            <LayoutSection position="top">
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                <div>上方调节区域</div>
+                <div>(初始化时自动高度)</div>
+              </div>
+            </LayoutSection>
+            <LayoutSection>
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+                主内容区域
+              </div>
+            </LayoutSection>
+            <LayoutSection position="bottom" modelValue={80}>
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                <div>下方调节区域</div>
+                <div>(初始化固定80px)</div>
+              </div>
+            </LayoutSection>
+          </Layout>
+        </LayoutSection>
+        <LayoutSection position="right" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>右侧调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});

package/src/pages/index/components/normal/DemoLoading.tsx

@@ -1,6 +1,7 @@
 import {designPage, getComponentCls, reactive} from "plain-design-composition";
 import {DemoRow} from "../../Demo/DemoRow";
 import {Button, Checkbox, Loading, LoadingMask} from "../../../../packages";
+import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
 
 export const demo1 = designPage(() => () => (
   <DemoRow title="基本用法">
@@ -19,6 +20,7 @@ export const demo2 = designPage(() => () => (
     <Loading type="thet"/>
     <Loading type="iot"/>
     <Loading type="kappa"/>
+    <PlainLogo loading/>
   </DemoRow>
 ));
 export const demo3 = designPage(() => () => (
@@ -33,6 +35,7 @@ export const demo3 = designPage(() => () => (
     <Loading type="thet" style={{ fontSize: '32px' }}/>
     <Loading type="iot" style={{ fontSize: '32px' }}/>
     <Loading type="kappa" style={{ fontSize: '32px' }}/>
+    <PlainLogo loading style={{ fontSize: '32px' }}/>
   </DemoRow>
 ));
 export const demo4 = designPage(() => () => (

package/src/pages/index/components/normal/DemoTab.tsx

@@ -313,23 +313,23 @@ export const demoInit = designPage(() => {
         <Tab title="用户管理" style={{ padding: '20px 0' }}>
           <span>用户管理：</span>
           <Input
-            onMounted={() => console.log('用户管理 mouinted',)}
-            onBeforeMount={() => console.log('用户管理 unmount',)}
+            onMounted={() => console.log('用户管理 mounted',)}
+            onUnmounted={() => console.log('用户管理 unmount',)}
           />
         </Tab>
         <Tab title="立即初始化" style={{ padding: '20px 0' }} init>
           <span>子模块数据管理：</span>
           <Input
-            onMounted={() => console.log('立即初始化 mouinted',)}
-            onBeforeMount={() => console.log('立即初始化 unmount',)}
+            onMounted={() => console.log('立即初始化 mounted',)}
+            onUnmounted={() => console.log('立即初始化 unmount',)}
           />
         </Tab>
         <Tab title="关闭的时候销毁" style={{ padding: '20px 0' }} destroyOnHide>
           <span>数据集：</span>
           <Input
             modelValue={'初始值'}
-            onMounted={() => console.log('关闭的时候销毁 mouinted',)}
-            onBeforeMount={() => console.log('关闭的时候销毁 unmount',)}
+            onMounted={() => console.log('关闭的时候销毁 mounted',)}
+            onUnmounted={() => console.log('关闭的时候销毁 unmount',)}
           />
         </Tab>
       </TabGroup>

package/src/pages/index/components/normal/DemoTree.tsx

@@ -1,6 +1,6 @@
 import {designPage, getComponentCls, reactive, useRefs} from "plain-design-composition";
 import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Alert, Button, ButtonGroup, Checkbox, Input, Segment, SegmentGroup, Tree} from "../../../../packages";
+import {$message, Alert, Button, ButtonGroup, Checkbox, Input, Layout, LayoutSection, Segment, SegmentGroup, Tree, TreeNodeWithMenu} from "../../../../packages";
 import treeData from '../../../data/tree.data.json';
 import addressData from '../../../data/address.json';
 import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
@@ -8,6 +8,7 @@ import {deepcopy} from 'plain-utils/object/deepcopy';
 import {iTreeProps} from "../../../../packages/components/TreeCore/TreeCore.type";
 import {iTreeDragChangeData} from "../../../../packages/components/TreeCore/createTreeProps";
 import {delay} from "plain-utils/utils/delay";
+import {iTreeNodeWithMenuOption} from "../../../../packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils";
 
 export const demo1 = designPage(() => {
 
@@ -1089,7 +1090,7 @@ export const demoVirtualDraggable = designPage(() => {
           onDragChange={onDragChange}
           innerAttrs={{
             style: {
-              backgroundColor: `var(--custom-background-hover)`,
+              // backgroundColor: `var(--custom-background-hover)`,
             }
           }}
         />
@@ -1097,3 +1098,86 @@ export const demoVirtualDraggable = designPage(() => {
     </DemoRow>
   );
 });
+
+
+export const demoCustomDraggier = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+    undoDraggier: false,
+  });
+
+  const onDragChange = (data: iTreeDragChangeData) => {
+    console.log(data);
+    if (state.undoDraggier) {
+      delay(2000).then(() => {data.undo();});
+    }
+  };
+
+  const getNodeOptions = (treeNode: iTreeNode): iTreeNodeWithMenuOption[] | undefined => {
+    if (treeNode.level === 0) {
+      return [
+        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
+        { label: '新建菜单分组', onClick: () => {$message(`${treeNode.label()} -> 新建菜单分组`);} },
+      ];
+    }
+    if (treeNode.level === 1) {
+      return [
+        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
+      ];
+    }
+  };
+
+  return () => (
+    <DemoRow title="自定义拖拽节点">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+        <Button>
+          <Checkbox v-model={state.undoDraggier} label="拖拽移动2s后撤回拖拽操作"/>
+        </Button>
+      </ButtonGroup>
+      <Layout style={{ marginTop: '16px' }}>
+        <LayoutSection position="left" modelValue={120}>
+          <Tree
+            v-model={state.checked}
+            ref={onRef.tree}
+            data={addressData}
+            keyField="id"
+            labelField="name"
+            childrenField="children"
+            singleValueType="last"
+            virtual
+            onDragChange={onDragChange}
+            draggable
+            customDraggier
+            expandOnClickNode
+            v-slots={{
+              default: ({ treeNode }: { treeNode: iTreeNode }) => (
+                <TreeNodeWithMenu treeNode={treeNode} dropdownOptions={getNodeOptions(treeNode)}/>
+              )
+            }}
+          />
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ height: '500px', padding: '0 16px' }}>
+            内容区域
+          </div>
+        </LayoutSection>
+      </Layout>
+
+    </DemoRow>
+  );
+});

package/src/pages/index/components/service/DemoDialogService.tsx

@@ -195,6 +195,7 @@ export const demoInput = designPage(() => {
       <Button label={'input'} onClick={() => $dialog({
         editType: 'input',
         editValue: inputValue,
+        editRequired: true,
         handleConfirm: ({ editValue }) => {
           inputValue = editValue;
           $message(String(editValue));

package/src/pages/index/components/service/DemoPopupService.tsx

@@ -1,5 +1,5 @@
 import {designPage, getComponentCls, iMouseEvent, reactive, useRefs} from "plain-design-composition";
-import {Button, Checkbox} from "../../../../packages";
+import {Button, Checkbox, ClientZoom} from "../../../../packages";
 import {DemoRow} from "../../Demo/DemoRow";
 import {usePopup} from "../../../../packages/components/usePopup/usePopup";
 import {ePopupAnimation, ePopupTrigger, iPopupPlacement, iPopupUseOption} from "../../../../packages/components/usePopup/utils/popup.utils";
@@ -295,10 +295,13 @@ export const demoAbsolute = designPage(() => {
 
   const handler = {
     onContextmenu: (e: iMouseEvent) => {
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
       e.preventDefault();
       $popup.absolute({
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         type: 'demo-absolute',
         placement: 'right-start',
         trigger: 'contextmenu',

package/src/pages/index/home/AppHead.tsx

@@ -1,8 +1,8 @@
 import {designPage, reactive} from "plain-design-composition";
 import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-import {Select, SelectOption} from "../../../packages";
-import {PageThemeUtils, ThemePrimaryColors} from "../PageThemeUtils";
+import {PageThemeUtils, Select, SelectOption, ThemePrimaryColors} from "../../../packages";
 import ClientZoom from "../../../packages/components/ClientZoom";
+import logoImage from './plain-design.png';
 
 export const AppHead = designPage(() => {
 
@@ -46,8 +46,8 @@ export const AppHead = designPage(() => {
   return () => (
     <div className="app-head">
       <div className="app-head-logo">
-        <PlainLogo style={{ fontSize: '1.8em', marginRight: '0.4em' }}/>
-        <span>Plain Design</span>
+        <PlainLogo style={{ fontSize: '28px', marginRight: '0.4em' }}/>
+        <img src={logoImage}/>
       </div>
       <div className="app-head-operation">
         <Select v-model={state.inputMode} onChange={onInputModeChange} size="mini" width="100" placeholder="输入框" popperAttrs={publicPopperAttrs}>

package/src/pages/index/home/menus.tsx

@@ -117,6 +117,7 @@ export const MenuGroups: MenuGroup[] = [
       { name: 'Card', title: '卡片', page: '/normal/DemoCard', complete: true },
       { name: 'Carousel', title: '轮播', page: '/normal/DemoCarousel', complete: true },
       { name: 'Collapse', title: '折叠面板', page: '/normal/DemoCollapse', complete: true },
+      { name: 'Layout', title: '布局', page: '/normal/DemoLayout', complete: true },
       { name: 'Alert', title: '提示信息', page: '/normal/DemoAlert', complete: true },
       { name: 'KeepAlive', title: '保活', page: '/normal/DemoKeepAlive', complete: true },
       // {name: 'Triangle', title: '三角形元素', page: '/normal/triangle', complete: false},

package/src/pages/index/main.tsx

@@ -6,8 +6,6 @@ import {installAllIcon} from "../../packages/utils/installAllIcons";
 import {designPage, provide, setComponentPrefix} from "plain-design-composition";
 import {App} from "./App";
 import '../module';
-import {ClientZoom} from "../../packages";
-import {PageThemeUtils} from "./PageThemeUtils";
 
 setComponentPrefix(globalComponentPrefix);
 
@@ -17,8 +15,6 @@ installIconfontSymbol();
 installAllIcon();
 // installAllLazyIcons();
 
-PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
-
 const Main = designPage(() => {
   provide('customAppMessage', '全局上下文名称');
   return () => <App/>;