plain-design 1.0.0-beta.3 → 1.0.0-beta.30

package/src/pages/index/app.scss

@@ -69,6 +69,11 @@ html, body, #app {
         font-weight: 700;
         white-space: nowrap;
       }
+
+      img {
+        height: 18px;
+        transform: translateY(0.3em);
+      }
     }
 
     .app-head-operation {

package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx

@@ -1,14 +1,19 @@
 import {designPage} from "plain-design-composition";
 import {useTableOption} from "../../../module/useTableOption";
 import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
+import TableOptionSpace from "../../../../packages/components/TableOptionSpace";
+
+let option: TableOptionSpace.iTableOption;
 
 export const demo1 = designPage(() => {
 
-  const option = useTableOption({
-    url: '/demo',
-    showRowsMode: 'auto',
-    fill: true,
-  });
+  if (!option) {
+    option = useTableOption({
+      url: '/demo',
+      showRowsMode: 'auto',
+      fill: true,
+    });
+  }
 
 
   const onClick = () => {

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

@@ -432,7 +432,7 @@ export const demoDropdownScroll = designPage(() => {
 
 export const demoDropdownVirtualList = designPage(() => {
 
-  const options = new Array(10000).fill({});
+  const options = new Array(1000).fill({});
 
   return () => (
     <DemoRow title="虚拟滚动，长列表">

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/normal/DemoVirtualList.tsx

@@ -1,4 +1,4 @@
-import {computed, designPage, getComponentCls, classnames,reactive} from "plain-design-composition";
+import {computed, designPage, getComponentCls, classnames, reactive} from "plain-design-composition";
 import data2 from '../../../data/data-2.json';
 import {DemoRow} from "../../Demo/DemoRow";
 import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
@@ -11,7 +11,7 @@ export const demo1 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
@@ -91,7 +91,7 @@ export const demo2 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
@@ -100,11 +100,11 @@ export const demo2 = designPage(() => {
     <DemoRow title={'动态高度'}>
       <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
         <VirtualList data={list.value} size={60} dynamicSize v-slots={{
-          default: ({ item, index }) => (
+          default: ({ item, vid, index, vIndex }) => (
             <div
-              key={index}
-              data-vid={index}
-              onClick={() => console.log(index, { ...item })}
+              key={vIndex}
+              data-vid={vid}
+              onClick={() => console.log(vid, { ...item })}
               style={{
                 ...item.color,
                 height: item.size + 'px',
@@ -165,7 +165,7 @@ export const demo3 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
@@ -250,7 +250,7 @@ export const demo4 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));

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/components/table/DemoTableExpand.tsx

@@ -8,7 +8,19 @@ import {ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Plc, PlcExp
 export const demoExpand = designPage(() => {
 
   const state = reactive({
-    data,
+    data: data.map((item) => {
+      return {
+        ...item,
+        children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
+          return {
+            id: index,
+            date: item.date,
+            name: item.name + `_${index + 1}`,
+            address: item.addr,
+          };
+        })
+      };
+    }),
   });
 
   const summaryData = deepcopy(data.slice(0, 2));
@@ -19,6 +31,8 @@ export const demoExpand = designPage(() => {
         data={state.data}
         summaryData={summaryData}
         virtual
+        virtualRowType="realIndex"
+        dynamicSize
         showRows={10}
       >
         <PlcIndex/>
@@ -27,14 +41,12 @@ export const demoExpand = designPage(() => {
           v-slots={{
             expand: ({ row }) => {
               return (
-                <div style={{ padding: '12px' }}>
-                  <Form column={1} disabled key={row.id}>
-                    <FormItem label={'普通文本'}>{row.name}</FormItem>
-                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
-                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
-                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
-                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
-                  </Form>
+                <div style={{ padding: '20px' }}>
+                  <Table data={row.children} showRows="auto" size="small">
+                    <Plc title="名称" field="name"/>
+                    <Plc title="日期" field="date"/>
+                    <Plc title="地址" field="address"/>
+                  </Table>
                 </div>
               );
             }
@@ -68,7 +80,19 @@ export const demoExpand = designPage(() => {
 export const demoExpandVirtualCOlumn = designPage(() => {
 
   const state = reactive({
-    data,
+    data: data.map((item) => {
+      return {
+        ...item,
+        children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
+          return {
+            id: index,
+            date: item.date,
+            name: item.name + `_${index + 1}`,
+            address: item.addr,
+          };
+        })
+      };
+    }),
   });
 
   const summaryData = deepcopy(data.slice(0, 2));
@@ -80,23 +104,21 @@ export const demoExpandVirtualCOlumn = designPage(() => {
         summaryData={summaryData}
         virtual
         showRows={10}
+        dynamicSize
         virtualColumn
       >
         <PlcIndex/>
         <PlcExpand
-          toggleOnClickRow
           fixedWidth
           v-slots={{
             expand: ({ row }) => {
               return (
-                <div style={{ padding: '12px' }}>
-                  <Form column={1} disabled key={row.id}>
-                    <FormItem label={'普通文本'}>{row.name}</FormItem>
-                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
-                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
-                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
-                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
-                  </Form>
+                <div style={{ padding: '20px' }}>
+                  <Table data={row.children} showRows="auto" size="small">
+                    <Plc title="名称" field="name"/>
+                    <Plc title="日期" field="date"/>
+                    <Plc title="地址" field="address"/>
+                  </Table>
                 </div>
               );
             }

package/src/pages/index/components/table/DemoVirtualTable.tsx

@@ -69,8 +69,8 @@ export const demo1 = designPage(() => {
                   </tr>
                 ))
               ),
-              default: ({ item, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
+              default: ({ item, vid, vIndex }) => (
+                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                   {Object.keys(DATA[0] as any).map((key: string) => (
                     <td key={key}>{(item as any)[key]}</td>
                   ))}
@@ -104,8 +104,8 @@ export const demo1 = designPage(() => {
                   </tr>
                 ))
               ),
-              default: ({ item, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
+              default: ({ item, vIndex, vid }) => (
+                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                   {Object.keys(DATA[0] as any).map((key: string) => (
                     <td key={key}>{(item as any)[key]}</td>
                   ))}