plain-design 1.0.0-beta.1 → 1.0.0-beta.10

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";
@@ -1089,7 +1089,7 @@ export const demoVirtualDraggable = designPage(() => {
           onDragChange={onDragChange}
           innerAttrs={{
             style: {
-              backgroundColor: `var(--custom-background-hover)`,
+              // backgroundColor: `var(--custom-background-hover)`,
             }
           }}
         />
@@ -1097,3 +1097,72 @@ 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();});
+    }
+  };
+
+  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}/>
+              )
+            }}
+          />
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ height: '500px', padding: '0 16px' }}>
+            内容区域
+          </div>
+        </LayoutSection>
+      </Layout>
+
+    </DemoRow>
+  );
+});

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/>;