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

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

@@ -63,6 +63,8 @@ export interface iTreeProps {
   getNodeIcon?: (node: iTreeNode) => string,
   /*是否开启拖拽节点功能*/
   draggable?: boolean,
+  /*自定义draggier按钮*/
+  customDraggier?: boolean,
   /*判断节点是否可以拖拽*/
   isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
   /*判断节点是否可以放置*/

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

@@ -327,7 +327,11 @@ export function createTreeCore(
     hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
   );
   effects.push(
-    hooks.onClickNodeContent.use(({ treeNode }) => {methods.singleSelect(treeNode);})
+    hooks.onClickNodeContent.use(({ treeNode }) => {
+      methods.singleSelect(treeNode);
+      if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
+      if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
+    })
   );
   effects.push(
     hooks.onClickCheckbox.use(({ treeNode }) => {

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

@@ -14,6 +14,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
 import {addClass} from "plain-utils/dom/addClass";
 import {iTreeHooks} from "./createTreeHooks";
+import {ClientZoom} from "../ClientZoom";
 
 export function createTreeDraggier(
   {
@@ -222,12 +223,13 @@ export function createTreeDraggier(
       if (!rowElement) {
         throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
       }
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         startNode: node,
         rowElement,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null,
       };
@@ -302,7 +304,8 @@ export function createTreeDraggier(
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.start.y) > 5) {
+        const { clientY } = ClientZoom.getClientPosition(e);
+        if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -323,9 +326,10 @@ export function createTreeDraggier(
         staticState.data.move.isHideDraggier = true;
         staticState.data.cloneTreeNode.style.opacity = '0';
       } else {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         staticState.data.move.isHideDraggier = false;
-        staticState.data.move.x = e.clientX;
-        staticState.data.move.y = e.clientY;
+        staticState.data.move.x = clientX;
+        staticState.data.move.y = clientY;
         staticState.data.move.moveNode = node;
         staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
         const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;

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

@@ -29,6 +29,7 @@ export const TreePropsOptions = {
   defaultExpandAll: { type: Boolean as PropType<iTreeProps["defaultExpandAll"]> },
   getNodeIcon: { type: Function as PropType<iTreeProps["getNodeIcon"]> },
   draggable: { type: Boolean as PropType<iTreeProps["draggable"]> },
+  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 },

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

@@ -0,0 +1,53 @@
+import {cacheComputed, 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 {useTooltip} from "../useTooltip";
+
+export const TreeNodeWithMenu = designComponent({
+  name: 'tree-node-with-menu',
+  props: {
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ content: iHTMLDivElement });
+
+    const tree = Tree.use.inject();
+
+    const isDraggable = cacheComputed(() => tree.props.draggable && tree.utils.isAllowDraggable(props.treeNode));
+
+    const classes = useClassCache(() => [
+      getComponentCls('tree-node-with-menu'),
+      {
+        'tree-node-with-menu-draggable': isDraggable.value,
+      }
+    ]);
+
+    const handler = {
+      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
+        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+    };
+
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        reference: refs.content,
+        message: props.treeNode.label()
+      }),
+    });
+
+    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>
+      </div>
+    );
+  },
+});
+
+export default TreeNodeWithMenu;

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

@@ -0,0 +1,38 @@
+@include comp(tree-node-with-menu) {
+  display: flex;
+  align-items: center;
+
+  .tree-node-with-menu-content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tree-node-with-menu-button {
+    height: 1em;
+    width: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    //transition: all ease 0.3s;
+  }
+
+  &.tree-node-with-menu-draggable {
+    .tree-node-with-menu-button {
+      cursor: row-resize;
+    }
+  }
+}
+
+@include comp(tree-node) {
+  &:not(:hover) {
+    .tree-node-with-menu-button {
+      opacity: 0;
+      width: 0;
+      pointer-events: none;
+    }
+  }
+}

package/src/packages/components/createProvider/index.ts

@@ -0,0 +1,5 @@
+import {createProvider} from "../../utils/createProvider";
+
+export {createProvider};
+
+export default createProvider;

package/src/packages/components/nextPopupId/index.ts

@@ -0,0 +1,5 @@
+import {nextPopupId} from "../usePopup/utils/popup.utils";
+
+export default nextPopupId;
+
+export {nextPopupId};

package/src/packages/components/useImage/ImageService.tsx

@@ -8,6 +8,7 @@ import {Icon} from "../Icon";
 import i18n from "../i18n";
 import Transition from "../Transition";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
+import {ClientZoom} from "../ClientZoom";
 
 const nextCount = createCounter("image_preview");
 
@@ -167,18 +168,20 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         startY: 0,
       };
       const mousedown = (e: MouseEvent) => {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         freezeState = {
           startTop: state.adjust.top || 0,
           startLeft: state.adjust.left || 0,
-          startX: e.clientX,
-          startY: e.clientY,
+          startX: clientX,
+          startY: clientY,
         };
         document.addEventListener('mousemove', mousemove);
         document.addEventListener('mouseup', mouseup);
       };
       const mousemove = (e: MouseEvent) => {
-        state.adjust.left = e.clientX - freezeState.startX + freezeState.startLeft;
-        state.adjust.top = e.clientY - freezeState.startY + freezeState.startTop;
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        state.adjust.left = clientX - freezeState.startX + freezeState.startLeft;
+        state.adjust.top = clientY - freezeState.startY + freezeState.startTop;
       };
       const mouseup = (e: MouseEvent) => {
         document.removeEventListener('mousemove', mousemove);

package/src/packages/components/usePopupManager/index.ts

@@ -0,0 +1,5 @@
+import {usePopupManager} from "../usePopup/usePopupManager";
+
+export default usePopupManager;
+
+export {usePopupManager};

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

@@ -0,0 +1,5 @@
+import {usePopupTrigger} from '../usePopup/trigger/usePopupTrigger';
+
+export default usePopupTrigger;
+
+export {usePopupTrigger};

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

@@ -0,0 +1,5 @@
+import {useReferenceTrigger} from '../usePopup/trigger/useReferenceTrigger';
+
+export default useReferenceTrigger;
+
+export {useReferenceTrigger};

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

@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         if (option.overflow) {
           if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
             state.isOverflow = true;
+          } else {
+            state.isOverflow = false;
           }
         }
       },

package/src/packages/components/useWatchAutoClear/index.ts

@@ -0,0 +1,5 @@
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export {useWatchAutoClear};
+
+export default useWatchAutoClear;

package/src/packages/entry.tsx

@@ -1,4 +1,5 @@
 import {setComponentPrefix} from "plain-design-composition";
+import {createProvider} from "./utils/createProvider";
 
 export {Application} from "./components/Application";
 export type {iApplicationConfiguration} from './components/Application/utils/application.utils';
@@ -54,6 +55,7 @@ export {TabGroup} from './components/TabGroup';
 export {Tab} from './components/Tab';
 export {Tag} from './components/Tag';
 export {Tree} from './components/Tree';
+export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
 export {ColorPicker} from './components/ColorPicker';
 export {TimePicker} from './components/TimePicker';
 export {DatePicker} from './components/DatePicker';
@@ -85,9 +87,28 @@ export {CascadePanel} from './components/CascadePanel';
 export {usePopup} from './components/usePopup';
 export {Popup} from './components/Popup';
 export {createPopup} from './components/createPopup';
+export type {
+  iPopupAlign,
+  iPopupAnimation,
+  iPopupBoundary,
+  iPopupCustomOption,
+  iPopupDefaultOption,
+  iPopupDirection,
+  iPopupManager,
+  iPopupOption,
+  iPopupPlacement,
+  iPopupRects,
+  iPopupRefreshBuildParams,
+  iPopupRefreshParams,
+  iPopupRefs,
+  iPopupTrigger,
+  iPopupUseOption,
+} from './components/usePopup/utils/popup.utils';
 export {createScrollUtils} from './components/createScrollUtils';
 export {useAutoScrollUtils} from './components/useAutoScrollUtils';
 export {ClientZoom} from './components/ClientZoom';
+export {Layout} from './components/Layout';
+export {LayoutSection} from './components/LayoutSection';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -162,5 +183,13 @@ export type {
   iTableOptionCacheRegistryConfig,
   iTableOptionGetCacheParam
 } from './components/AutoTable/use/useTableOption.cache.utils';
+export {PageThemeUtils} from './components/PageThemeUtils';
+export {ThemePrimaryColors} from './components/ThemePrimaryColors';
+export {useReferenceTrigger} from './components/useReferenceTrigger';
+export {usePopupTrigger} from './components/usePopupTrigger';
+export {useWatchAutoClear} from './components/useWatchAutoClear';
+export {nextPopupId} from './components/nextPopupId';
+export {createProvider} from './components/createProvider';
+export {usePopupManager} from './components/usePopupManager';
 
 setComponentPrefix(globalComponentPrefix);

package/src/packages/utils/ClientZoom.ts

@@ -1,8 +1,10 @@
+import {iMouseEvent} from 'plain-design-composition';
+
 export const ClientZoom = (() => {
   let zoom: '' | number = '';
   return {
-    get: () => {
-      return zoom;
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
     },
     set: (_zoom: number | null) => {
       const __zoom = _zoom == null ? '' : _zoom;
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
         };
       }
     },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
   };
 })();

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,7 @@
 import {createEffects} from "plain-utils/utils/createEffects";
 import {watch} from "plain-design-composition";
 import {removeUnit} from "plain-utils/string/removeUnit";
+import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(
   {
@@ -26,6 +27,8 @@ export function useMove(
 
   const onMousedown = (e: MouseEvent) => {
 
+    const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
     const { effects: draggierEffects } = createEffects();
 
     const el = e.currentTarget as HTMLElement;
@@ -35,16 +38,19 @@ export function useMove(
     const dragState = {
       isDragging: false,
       start: {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: Number(removeUnit(style.left) || 0),
         top: Number(removeUnit(style.top) || 0),
       }
     };
 
     const onMousemove = (e: MouseEvent) => {
-      const durX = e.clientX - dragState.start.x;
-      const durY = e.clientY - dragState.start.y;
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      const durX = clientX - dragState.start.x;
+      const durY = clientY - dragState.start.y;
 
       if (!dragState.isDragging) {
         if (durX >= 5 || durY >= 5) {

package/src/pages/index/App.tsx

@@ -2,8 +2,9 @@ import {designPage} from 'plain-design-composition';
 import './app.scss';
 import {AppHome} from "./home/AppHome";
 import {DemoRowController} from "./Demo/DemoRowController";
-import {Application} from "../../packages";
-import {PageThemeUtils} from "./PageThemeUtils";
+import {Application, ClientZoom, PageThemeUtils} from "../../packages";
+
+PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
 
 export const App = designPage(() => {
   return () => (

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/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(() => () => (