plain-design 1.0.0-beta.13 → 1.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Application/theme/theme.ts

@@ -128,9 +128,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
-    'message-padding': '12px 20px',
     'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-    'message-font-size': referenceVariable('font-size-normal'),
     /*---------------------------------------notice-------------------------------------------*/
     'notice-padding': '20px 24px',
     'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
 import {createCounter} from "plain-utils/utils/createCounter";
@@ -18,7 +18,7 @@ export const DropdownOption = designComponent({
   },
   slots: ['default', 'content'],
   emits: {
-    onClick: (e: MouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
   },
   setup({ props, event: { emit }, slots }) {
 
@@ -38,7 +38,7 @@ export const DropdownOption = designComponent({
     };
 
     const handler = {
-      onClick: (e: MouseEvent) => {
+      onClick: (e: iMouseEvent) => {
         if (props.disabled || props.readonly) {return;}
         emit.onClick(e);
         dropdown.handler.onClickOption(dropdownOptionContext);

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -1,10 +1,11 @@
-import {designComponent, mergeAttrs, nextTick, PropType, reactive, useStyles, watch} from "plain-design-composition";
+import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
 import {PlTabComponent} from "../Tab";
 
 export const TabsInner = designComponent({
   props: {
     item: { type: Object as PropType<PlTabComponent>, required: true },
     active: { type: Boolean },
+    render: { type: Function as PropType<() => RenderNode>, required: true }
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -51,7 +52,7 @@ export const TabsInner = designComponent({
           { class: 'inner-tab', style: styles.value },
           props.item.attrs
         )}>
-          {!!state.init && slots.default()}
+          {!!state.init && props.render()}
         </div>
       )
     };

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

@@ -101,9 +101,7 @@ export const TabGroup = designComponent({
         const body = (
           <div className="tabs-body">
             {[...tabs.value].sort((a, b) => String(a.val).localeCompare(String(b.val))).map((tab, index) => (
-              <TabsInner item={tab.item} key={index} active={tab.active}>
-                {tab.item.slots.default()}
-              </TabsInner>
+              <TabsInner item={tab.item} key={index} active={tab.active} render={() => tab.item.slots.default()}/>
             ))}
           </div>
         );

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -90,6 +90,7 @@ export const RenderTreeNode = designComponent({
        */
       onClickNodeContent: () => {
         if (props.treeNode.empty) {return;}
+        if (tree.draggier.value?.isDragging()) {return;}
         tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
       },
       /**

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

@@ -15,6 +15,7 @@ import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
 import {addClass} from "plain-utils/dom/addClass";
 import {iTreeHooks} from "./createTreeHooks";
 import {ClientZoom} from "../ClientZoom";
+import {delay} from "plain-utils/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 = 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/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 "plain-design-composition";
+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 "plain-design-composition";
+
+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/useMessage/Message.tsx

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, Pro
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
+import {useStyle} from "../../uses/useStyle";
 
 export const Message = designComponent({
   name: 'message-service',
@@ -16,9 +17,12 @@ export const Message = designComponent({
 
     onMounted(() => emit.onReady());
 
+    const { styleComputed } = useStyle();
+
     const classes = useClasses(() => [
       getComponentCls('message'),
-      `message-status-${props.option.status}`
+      `message-status-${props.option.status}`,
+      `message-size-${styleComputed.value.size}`
     ]);
     const styles = { zIndex: nextIndex() };
 

package/src/packages/components/useMessage/message.scss

@@ -142,4 +142,8 @@
       }
     }
   }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
 }

package/src/packages/entry.tsx

@@ -148,6 +148,11 @@ export type {iOvMeta} from './components/$ov/ov.utils';
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
 export {createHttp} from './components/createHttp';
+export type {
+  iHttpRequestConfig,
+  iPlainResponseDataType,
+  iHttpResponseDataType
+} from './components/createHttp/http.utils';
 
 export {Address} from './components/Address';
 export {AddressCascade} from './components/AddressCascade';

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

@@ -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(() => {
 
@@ -1115,6 +1116,20 @@ export const demoCustomDraggier = designPage(() => {
     }
   };
 
+  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' }}>
@@ -1151,7 +1166,7 @@ export const demoCustomDraggier = designPage(() => {
             expandOnClickNode
             v-slots={{
               default: ({ treeNode }: { treeNode: iTreeNode }) => (
-                <TreeNodeWithMenu treeNode={treeNode}/>
+                <TreeNodeWithMenu treeNode={treeNode} dropdownOptions={getNodeOptions(treeNode)}/>
               )
             }}
           />