plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/TreeCore/createTreeDraggier.tsx

@@ -1,20 +1,21 @@
 import Scroll from "../Scroll";
 import {iTreeNode} from "./createTreeNode";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iTreeMethods} from "./createTreeMethods";
-import {getComponentCls, iMouseEvent, nextTick, reactive} from "plain-design-composition";
+import {getComponentCls, iMouseEvent, nextTick, reactive} from "@peryl/react-compose";
 import {iElementRect} from "../../utils/getRowEl";
 import {iTreeUtils} from "./createTreeUtils";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useAutoScrollUtils} from "../useAutoScrollUtils";
-import {findParentElement} from "../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
-import {addClass} from "plain-utils/dom/addClass";
+import {addClass} from "@peryl/utils/addClass";
 import {iTreeHooks} from "./createTreeHooks";
 import {ClientZoom} from "../ClientZoom";
+import {delay} from "@peryl/utils/delay";
 
 export function createTreeDraggier(
   {
@@ -109,6 +110,8 @@ export function createTreeDraggier(
    */
   const shadowTreeNode = (() => {
 
+    const reactiveState = reactive({ dragging: false, });
+
     let staticState = null as null | {
       startNode: iTreeNode,                           // 拖拽开始的时候节点
       rowElement: HTMLElement,                        // 拖拽开始的row对象
@@ -233,62 +236,68 @@ export function createTreeDraggier(
         },
         data: null,
       };
+      reactiveState.dragging = true;
       /**
        * 拖拽结束之后，处理拖拽数据
        * @author  韦胜健
        * @date    2023/6/1 21:13
        */
       draggierEffects.push(async () => {
-        if (!!staticState?.data) {
-          const { startNode, } = staticState;
-          const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
-          if (!droppable || isHideDraggier) {
-            return;
-          }
-          const newParentNode = moveNode.parent;
-          const oldParentNode = startNode.parent;
-          const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
-          const newSiblingsBak = [...newSiblings];
-          const oldSiblings = methods.getParentChildrenData(startNode);
-          const oldSiblingsBak = [...oldSiblings];
-
-          methods.removeSelf(startNode!);
-          switch (dropType) {
-            case eTreeDropType.prev:
-              methods.previousSibling(moveNode!, startNode!);
-              break;
-            case eTreeDropType.inner:
-              methods.unshiftChild(moveNode!, startNode!);
-              await methods.expand(moveNode!);
-              break;
-            case eTreeDropType.next:
-              methods.nextSibling(moveNode!, startNode!);
-              await methods.collapse(moveNode);
-              break;
+        await (async () => {
+          if (!!staticState?.data) {
+            const { startNode, } = staticState;
+            const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
+            if (!droppable || isHideDraggier) {
+              return;
+            }
+            const newParentNode = dropType === eTreeDropType.inner ? moveNode : moveNode.parent;
+            const oldParentNode = startNode.parent;
+            const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
+            const newSiblingsBak = [...newSiblings];
+            const oldSiblings = methods.getParentChildrenData(startNode);
+            const oldSiblingsBak = [...oldSiblings];
+
+            methods.removeSelf(startNode!);
+            switch (dropType) {
+              case eTreeDropType.prev:
+                methods.previousSibling(moveNode!, startNode!);
+                break;
+              case eTreeDropType.inner:
+                methods.unshiftChild(moveNode!, startNode!);
+                await methods.expand(moveNode!);
+                break;
+              case eTreeDropType.next:
+                methods.nextSibling(moveNode!, startNode!);
+                await methods.collapse(moveNode);
+                break;
+            }
+            await nextTick();
+            await Promise.all([
+              methods.refreshCheckStatus(startNode!.parent),
+              methods.refreshCheckStatus(moveNode!.parent)
+            ]);
+            await hooks.onDragChange.exec({
+              data: startNode.data,
+              newParent: newParentNode?.data,
+              oldParent: oldParentNode?.data,
+              node: startNode,
+              newParentNode,
+              oldParentNode,
+              newSiblings,
+              oldSiblings,
+              newSiblingsBak,
+              oldSiblingsBak,
+              undo: () => {
+                newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
+                oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
+              },
+            });
           }
-          await nextTick();
-          await Promise.all([
-            methods.refreshCheckStatus(startNode!.parent),
-            methods.refreshCheckStatus(moveNode!.parent)
-          ]);
-          await hooks.onDragChange.exec({
-            data: startNode.data,
-            newParent: newParentNode?.data,
-            oldParent: oldParentNode?.data,
-            node: startNode,
-            newParentNode,
-            oldParentNode,
-            newSiblings,
-            oldSiblings,
-            newSiblingsBak,
-            oldSiblingsBak,
-            undo: () => {
-              newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
-              oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
-            },
-          });
-        }
-        staticState = null;
+        })();
+        delay().then(() => {
+          staticState = null;
+          reactiveState.dragging = false;
+        });
       });
     };
 
@@ -370,7 +379,7 @@ export function createTreeDraggier(
       indicatorHandler.update();
     };
 
-    const isDragging = () => !staticState;
+    const isDragging = () => reactiveState.dragging;
 
     const getState = () => staticState;
 
@@ -388,7 +397,8 @@ export function createTreeDraggier(
         document.removeEventListener('mouseup', draggierEffects.clear);
       });
     },
-    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void)
+    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void),
+    isDragging: () => shadowTreeNode.isDragging(),
   });
 
   return ret;

package/src/packages/components/TreeCore/createTreeHooks.ts

@@ -1,4 +1,4 @@
-import {createHooks} from "plain-design-composition";
+import {createHooks} from "@peryl/react-compose";
 import {iTreeNode} from "./createTreeNode";
 import {iTreeDragChangeData} from "./createTreeProps";
 

package/src/packages/components/TreeCore/createTreeMethods.tsx

@@ -1,8 +1,8 @@
 import {iTreeUtils} from "./createTreeUtils";
 import {iTreeKeyOrNode, iTreeProps, iTreeState} from "./TreeCore.type";
-import {nextTick, toRaw} from "plain-design-composition";
+import {nextTick, toRaw} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iTreeNode} from "./createTreeNode";
 
 export function createTreeMethods(
@@ -254,6 +254,7 @@ export function createTreeMethods(
      * @date    2022/9/22 19:56
      */
     refreshCheckStatus: async (keyOrNode: iTreeKeyOrNode, emitChange = true) => {
+      if (!props.multiple) {return;}
       const checkKeys: string[] = [];
       const unCheckKeys: string[] = [];
       await nextTick();

package/src/packages/components/TreeCore/createTreeNode.tsx

@@ -53,11 +53,11 @@ export function createTreeNode(
   /*设置子节点数据*/
   const setChildrenData = (childrenData: any[] | null | undefined) => {
     const { childrenField, setChildrenData } = props;
-    if (typeof childrenField === "string") {
-      (data as any)[childrenField] = childrenData;
+    if (!!setChildrenData) {
+      setChildrenData(data, childrenData);
     } else {
-      if (!!setChildrenData) {
-        setChildrenData(data, childrenData);
+      if (typeof childrenField === "string") {
+        (data as any)[childrenField] = childrenData;
       } else {
         throw new Error('tree: props.setChildrenData is required when childrenField is function');
       }

package/src/packages/components/TreeCore/createTreeProps.ts

@@ -1,7 +1,7 @@
-import {ComponentEvent, PropType} from "plain-design-composition";
+import {ComponentEvent, PropType} from "@peryl/react-compose";
 import {iTreeProps} from "./TreeCore.type";
 import {iTreeNode} from "./createTreeNode";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const TreePropsOptions = {
   data: { type: Array as PropType<iTreeProps["data"]> },
@@ -32,7 +32,7 @@ export const TreePropsOptions = {
   customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
   isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
   isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
-  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
+  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-drive-file' as string },
   folderCollapseIcon: { type: String as PropType<iTreeProps["folderCollapseIcon"]>, default: 'pi-caret-right' as string },
   folderExpandIcon: { type: String as PropType<iTreeProps["folderExpandIcon"]>, default: 'pi-down' as string },
   expanderCover: { type: Boolean as PropType<iTreeProps["expanderCover"]>, default: true },

package/src/packages/components/TreeCore/createTreeUtils.ts

@@ -1,7 +1,7 @@
 import {iTreeKeyOrNode, iTreeNodeComputedData, iTreeProps} from "./TreeCore.type";
 import {iTreeNode} from "./createTreeNode";
-import {toArray} from "plain-utils/utils/toArray";
-import {iterate as utilsIterate} from "../../utils/iterate";
+import {toArray} from "@peryl/utils/toArray";
+import {iterate as utilsIterate} from "@peryl/utils/iterate";
 import {eTreeDropType} from "./createTreeDraggier";
 
 export function createTreeUtils(

package/src/packages/components/TreeNodeWithMenu/index.tsx

@@ -1,14 +1,19 @@
-import {cacheComputed, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
-import Icon from "../Icon";
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "@peryl/react-compose";
+import {Icon} from "../Icon";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import './tree-node-with-menu.scss';
-import Tree from "../Tree";
+import {Tree} from "../Tree";
 import {useTooltip} from "../useTooltip";
+import {iTreeNodeWithMenuOption} from "./treeNodeWithMenu.utils";
+import {Dropdown} from "../Dropdown";
+import {DropdownOption} from "../DropdownOption";
 
 export const TreeNodeWithMenu = designComponent({
   name: 'tree-node-with-menu',
   props: {
     treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    dropdownOptions: { type: Array as PropType<iTreeNodeWithMenuOption[]> },
+    dropdownAttrs: { type: Object as PropType<ComponentPropsType<typeof Dropdown>> },
   },
   setup({ props }) {
 
@@ -25,6 +30,14 @@ export const TreeNodeWithMenu = designComponent({
       }
     ]);
 
+    const dropdownAttrs = computed(() => {
+      return {
+        trigger: 'hover' as const,
+        placement: 'right-start' as const,
+        ...props.dropdownAttrs,
+      };
+    });
+
     const handler = {
       onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
         tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
@@ -42,9 +55,34 @@ export const TreeNodeWithMenu = designComponent({
     return () => (
       <div className={classes.value}>
         <div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
-        <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
-          <Icon icon="pi-drag-dot-vertical"/>
-        </div>
+        {(() => {
+          let btn = (
+            <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
+              <Icon icon="pi-drag-dot-vertical"/>
+            </div>
+          );
+          let ret = btn;
+          if (!!props.dropdownOptions?.length && !tree.draggier.value?.isDragging()) {
+            ret = (
+              <Dropdown
+                {...dropdownAttrs.value}
+                v-slots={{
+                  default: () => btn,
+                  popper: () => (
+                    props.dropdownOptions?.map((option, index) => {
+                      const { renderDefault, renderContent, ...leftOption } = option;
+                      const vSlots = {} as any;
+                      if (!!renderDefault) {vSlots.default = () => renderDefault();}
+                      if (!!renderContent) {vSlots.content = () => renderContent();}
+                      return <DropdownOption key={index} {...leftOption} v-slots={vSlots}/>;
+                    })
+                  )
+                }}
+              />
+            );
+          }
+          return ret;
+        })()}
       </div>
     );
   },

package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss

@@ -23,6 +23,7 @@
   &.tree-node-with-menu-draggable {
     .tree-node-with-menu-button {
       cursor: row-resize;
+      padding-right: 6px;
     }
   }
 }

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -0,0 +1,12 @@
+import {iMouseEvent, RenderNode} from "@peryl/react-compose";
+
+export interface iTreeNodeWithMenuOption {
+  label?: string,
+  disabled?: boolean,
+  readonly?: boolean,
+  icon?: string,
+  val?: any,
+  onClick?: (e: iMouseEvent) => void
+  renderDefault?: () => RenderNode,
+  renderContent?: () => RenderNode,
+}

package/src/packages/components/Triangle/index.tsx

@@ -1,6 +1,6 @@
 import './triangle.scss';
-import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 
 const DirectionMap = {
   top: 'bottom',

package/src/packages/components/Upload/index.tsx

@@ -1,6 +1,6 @@
 import './upload.scss';
 import {$file, FileServiceDefaultAccept, FileServiceSingleFile, FileServiceValidator} from "../$file";
-import {computed, designComponent, getComponentCls, iDragEvent, PropType, RenderNode, useClasses, useModel, useRefs} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls, iDragEvent, PropType, RenderNode, useClasses, useModel, useRefs} from '@peryl/react-compose';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {Icon} from "../Icon";
 import {Loading} from "../Loading";
@@ -9,11 +9,11 @@ import {$dialog} from "../$dialog";
 import {ButtonGroup} from "../ButtonGroup";
 import {Button} from "../Button";
 import {$notice} from "../$notice";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {classnames} from "plain-utils/dom/classnames";
-import {toArray} from "plain-utils/utils/toArray";
-import {defer} from "plain-utils/utils/defer";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createCounter} from "@peryl/utils/createCounter";
+import {classnames} from "@peryl/utils/classnames";
+import {toArray} from "@peryl/utils/toArray";
+import {defer} from "@peryl/utils/defer";
+import {createEnum} from "@peryl/utils/createEnum";
 import i18n from "../i18n";
 
 const nextFileId = createCounter('upload');
@@ -110,7 +110,7 @@ export const Upload = designComponent({
       [eUploadStatus.empty]: <Icon icon="pi-info-circle"/>,
     };
     const singleEmptyFile: UploadFile = {
-      name: i18n('file.notUpload').d('未上传'),
+      name: i18n.$it('file.notUpload').d('未上传'),
       status: eUploadStatus.empty,
       id: 'nothing'
     };
@@ -151,7 +151,7 @@ export const Upload = designComponent({
           if (props.max != null) {
             if (f.calcSize > props.max) {
               $message.error(
-                i18n('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
+                i18n.$it('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
                 , { time: 5000 });
               return false;
             }
@@ -249,7 +249,7 @@ export const Upload = designComponent({
         // 状态不存在或者状态为success表示需要用户处理删除文件在后端的逻辑，否则其他状态直接前端删除
         if (!file.status || file.status === eUploadStatus.success) {
           if (props.removeConfirm) {
-            await $dialog.confirm(i18n('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
+            await $dialog.confirm(i18n.$it('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
           }
           if (!!props.beforeRemove) {await props.beforeRemove(file);}
           await props.handleRemove!(file);
@@ -289,7 +289,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => {
               file.status = eUploadStatus.success;
               file.percent = undefined;
-              $notice.success(i18n('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
+              $notice.success(i18n.$it('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
             });
             dfd.resolve();
             emit.onUploadSuccess({ file: uploadFiles, resp: data });
@@ -298,7 +298,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => file.status = eUploadStatus.error);
             dfd.reject();
             emit.onUploadError(error);
-            $notice.error(i18n('file.uploadFailed').d(`文件上传失败！`));
+            $notice.error(i18n.$it('file.uploadFailed').d(`文件上传失败！`));
           },
         };
 
@@ -339,7 +339,7 @@ export const Upload = designComponent({
         <div className="upload-item-inner">
           {!!custom ? custom() : <>
             {file.status ? renderIcon[file.status] : <Icon icon="pi-file"/>}
-            {file.status === eUploadStatus.ready ? `(${i18n('file.toBeUpload').d('待上传')}) ` : ''}
+            {file.status === eUploadStatus.ready ? `(${i18n.$it('file.toBeUpload').d('待上传')}) ` : ''}
             <div className="upload-item-content" onClick={() => !!props.handlePreview && props.handlePreview(file)}>
               {scopeSlots.default({ item: file, index }, file.name)}
             </div>
@@ -366,8 +366,8 @@ export const Upload = designComponent({
     const singleRender = computed(() => <>
       {editComputed.value.editable && (
         <ButtonGroup>
-          <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-          {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+          <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+          {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
           {slots.button()}
         </ButtonGroup>
       )}
@@ -378,8 +378,8 @@ export const Upload = designComponent({
         {!props.draggable ? (
           editComputed.value.editable && (
             <ButtonGroup>
-              <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-              {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+              <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+              {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
               {slots.button()}
             </ButtonGroup>
           )
@@ -388,9 +388,9 @@ export const Upload = designComponent({
             <div className="upload-drop-area" onClick={methods.chooseFile} {...dropHandler}>
               <Icon icon="pi-share-external"/>
               <div>
-                <span>{i18n('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
+                <span>{i18n.$it('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
                 <Button mode="text" className="upload-drop-upload-button" onClick={methods.chooseFile}>
-                  <span>{i18n('file.clickToUpload').d('点击上传')}</span>
+                  <span>{i18n.$it('file.clickToUpload').d('点击上传')}</span>
                   <Icon icon="pi-upload"/>
                 </Button>
                 {slots.button()}