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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -20,8 +20,8 @@
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
     "plain-design-composition": "^0.0.167",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1"
   },
   "resolutions": {
     "@types/react": "18.2.4",
@@ -32,7 +32,7 @@
     "@types/react-transition-group": "^4.4.1",
     "color": "^4.2.3",
     "dayjs": "^1.10.4",
-    "plain-icons": "0.0.6",
+    "plain-icons": "0.0.7",
     "plain-utils": "^0.1.48",
     "react-flip-move": "^3.0.4",
     "react-transition-group": "^4.4.1"

package/src/packages/build.ts

@@ -3,7 +3,7 @@ import Plain from './index';
 import allIcons from 'plain-icons/dist/icons.js';
 
 // @ts-ignore
-Plain.Icon.PlainIcon.props.getIcon.default = (icon: string) => {
+Plain.Icon.PlainIcon.use.options.props.getIcon.default = (icon: string) => {
   const iconMeta = (allIcons as any)[icon];
   if (!iconMeta) {
     throw new Error(`getIcon: can't find icon match ${icon}`);

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

@@ -203,7 +203,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
     const colors = {} as any;
-    Object.keys(BaseColors).forEach((colorName) => {
+    Object.keys(base).forEach((colorName) => {
       const baseColor = (base as any)[colorName];
       if (!baseColor) {return;}
       ThemeColorNum.forEach(i => {

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -5,6 +5,7 @@ import {createEffects} from "plain-utils/utils/createEffects";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import './color-slider.scss';
+import {ClientZoom} from "../../ClientZoom";
 
 export const ColorSlider = designComponent({
   name: 'color-slider',
@@ -110,12 +111,13 @@ export const ColorSlider = designComponent({
       };
       const handler = {
         onMousedown: (e: iMouseEvent) => {
-          utils.setOffsetX(e.nativeEvent.offsetX);
+          const { clientX, clientY, offsetX } = ClientZoom.getClientPosition(e);
+          utils.setOffsetX(offsetX);
           staticState = {
             start: {
-              x: e.clientX,
-              y: e.clientY,
-              offsetX: e.nativeEvent.offsetX,
+              x: clientX,
+              y: clientY,
+              offsetX: offsetX,
             }
           };
           draggierEffects.push(() => staticState = null);
@@ -129,7 +131,8 @@ export const ColorSlider = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durX = e.clientX - staticState.start.x;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          const durX = clientX - staticState.start.x;
           const newOffsetX = durX + staticState.start.offsetX;
           utils.setOffsetX(newOffsetX);
         },

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -5,6 +5,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
+import {ClientZoom} from "../../..";
 
 export const ColorSvPanel = designComponent({
   name: 'color-sv-panel',
@@ -71,14 +72,16 @@ export const ColorSvPanel = designComponent({
         document.body.addEventListener('mousemove', handler.mousemove);
         document.body.addEventListener('mouseup', handler.mouseup);
         disabledUserSelect();
-        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
-        state.startX = e.clientX;
-        state.startY = e.clientY;
+        const { offsetX, offsetY, clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(offsetX, offsetY);
+        state.startX = clientX;
+        state.startY = clientY;
         state.tempSaturation = state.saturation as number;
         state.tempValue = state.val as number;
       },
       mousemove: (e: MouseEvent) => {
-        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(clientX - state.startX, clientY - state.startY, false);
       },
       mouseup: () => {
         document.body.removeEventListener('mousemove', handler.mousemove);

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

@@ -42,6 +42,7 @@ export const Dialog = designComponent({
 
     noContentPadding: { type: Boolean },                                                    // 去掉内容默认内边距
     noHead: { type: Boolean, },                                                             // 去掉默认弹框标题
+    noFoot: { type: Boolean },                                                              // 去掉底部内容
     noMask: { type: Boolean },                                                              // 去掉遮罩
     noClose: { type: Boolean },                                                             // 去掉关闭按钮
 
@@ -417,7 +418,7 @@ export const Dialog = designComponent({
                 <div className="dialog-body">
                   {slots.default()}
                 </div>
-                {(!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
+                {!props.noFoot && (!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
                   <div className="dialog-foot">
                     {slots.foot()}
                     {(() => {

package/src/packages/components/Dialog/useDialogMovable.tsx

@@ -1,4 +1,5 @@
 import {watchEffect} from "plain-design-composition";
+import {ClientZoom} from "../..";
 
 export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement | undefined | null, content: HTMLElement | undefined | null }, movable: { value: boolean } }) {
 
@@ -20,9 +21,10 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState.start = {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: staticState.move.left,
         top: staticState.move.top,
       };
@@ -30,8 +32,9 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
-      staticState.move.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      staticState.move.y = clientY;
 
       const durX = staticState.move.x - staticState.start.x;
       const durY = staticState.move.y - staticState.start.y;

package/src/packages/components/Dialog/utils/dialog.mouse.ts

@@ -1,12 +1,14 @@
 import {isSSR} from "../../../utils/isSSR";
+import {ClientZoom} from "../../..";
 
 export const DialogMouse = (() => {
   const state = { x: 0, y: 0 };
 
   if (!isSSR()) {
     document.documentElement.addEventListener('mousedown', e => {
-      state.x = e.clientX;
-      state.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      state.x = clientX;
+      state.y = clientY;
     }, true);
   }
 

package/src/packages/components/Input/useMultipleInput.tsx

@@ -6,6 +6,7 @@ import {getKey, KEY} from "../KeyboardService";
 import {delay} from "plain-utils/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../..";
 
 /**
  * 渲染多值输入框
@@ -140,9 +141,10 @@ function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       staticState.isDragging = false;
       staticState.start = {
-        x: e.clientX,
+        x: clientX,
         left: staticState.el!.scrollLeft,
         width: staticState.el!.scrollWidth,
       };
@@ -150,7 +152,8 @@ function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
       document.documentElement.addEventListener('mouseup', handler.mouseup, true);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
       const durX = staticState.move.x - staticState.start.x;
       if (!staticState.isDragging) {
         if (Math.abs(durX) > 5) {

package/src/packages/components/Input/useTextareaInput.tsx

@@ -1,7 +1,10 @@
 import {iInputCompositionData} from "./input.utils";
-import {iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
+import {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
 import {unit} from "plain-utils/string/unit";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../ClientZoom";
+
+const _Textarea = fixInputCursor('textarea')
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -61,7 +64,7 @@ export function useTextareaInput(data: iInputCompositionData) {
         ))}
         {!model.value && <>&nbsp;</>}
       </span>
-      <textarea
+      <_Textarea
         ref={handler.onRef}
         value={model.value}
         onInput={handler.onInput}
@@ -95,8 +98,10 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
   const handler = {
     textarea: null as null | HTMLInputElement,
     mousedown: (e: MouseEvent) => {
-      const { offsetX, offsetY, clientY, target: { offsetWidth, offsetHeight } } = e as any;
-      if (!(offsetWidth - offsetX < 12 && offsetHeight - offsetY < 12)) {
+      const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
+      let { offsetWidth, offsetHeight } = e.target as any;
+      const dragSize = 12
+      if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }
       staticState.isDragging = false;
@@ -108,7 +113,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      const { clientY } = e;
+      const { clientY } = ClientZoom.getClientPosition(e);
       staticState.move = { y: clientY };
       const durY = staticState.move.y - staticState.start.y;
       if (!staticState.isDragging) {

package/src/packages/components/InputNumber/NumberResize.tsx

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs}
 import {Icon} from "../Icon";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {addClass} from "plain-utils/dom/addClass";
+import {ClientZoom} from "../ClientZoom";
 
 export const NumberResize = designComponent({
   name: "number-resize",
@@ -35,6 +36,8 @@ export const NumberResize = designComponent({
 
       const handler = {
         onMousedown: (e: iMouseEvent) => {
+          const { clientY } = ClientZoom.getClientPosition(e);
+
           event.emit.onMouseDown(e);
           const el = refs.el!.cloneNode(true) as HTMLDivElement;
           const { top, left, height, width } = refs.el!.getBoundingClientRect();
@@ -50,7 +53,7 @@ export const NumberResize = designComponent({
           addClass(el, 'number-resize-dragging');
 
           staticState = {
-            startY: e.clientY,
+            startY: clientY,
             startValue: props.value == null ? 0 : props.value,
             el,
             startTop: top,
@@ -71,7 +74,8 @@ export const NumberResize = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durY = (e.clientY - staticState.startY);
+          const { clientY } = ClientZoom.getClientPosition(e);
+          const durY = (clientY - staticState.startY);
           const elMoveTop = staticState.startTop + durY;
           staticState.el.style.transform = `translate3d(${staticState.startLeft}px,${elMoveTop}px,0)`;
           const newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;

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

@@ -0,0 +1,31 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import './layout.scss';
+
+export const Layout = designComponent({
+  name: 'layout',
+  props: {
+    vertical: { type: Boolean }
+  },
+  provideRefer: true,
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('layout'),
+      {
+        'layout-vertical': props.vertical,
+      }
+    ]);
+
+    return {
+      refer: { props },
+      render: () => (
+        <div className={classes.value}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default Layout;

package/src/packages/components/Layout/layout.scss

@@ -0,0 +1,227 @@
+$resize-width: 12px;
+
+@include comp(layout) {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+
+  &.layout-vertical {
+    flex-direction: column;
+  }
+
+  & > .#{componentName(layout-section)} {
+    &.layout-section-position-center {
+      flex: 1;
+      position: relative;
+      z-index: 1;
+    }
+
+    &.layout-section-position-top, &.layout-section-position-bottom, &.layout-section-position-left, &.layout-section-position-right {
+      position: relative;
+      flex-shrink: 0;
+      flex-grow: 0;
+      z-index: 2;
+
+      & > .layout-section-inner {
+        overflow: hidden;
+      }
+
+      &.layout-section-fixed {
+        & > .layout-section-inner {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+
+
+      & > .layout-section-separator {
+        user-select: none;
+      }
+
+      & > .layout-section-collapse-btn {
+        opacity: 0;
+        transition: all ease 0.3s;
+        cursor: pointer;
+      }
+
+      &:hover {
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+      }
+    }
+
+    /*---------------------------------------horizontal-------------------------------------------*/
+
+    &.layout-section-position-left, &.layout-section-position-right {
+
+      & > .layout-section-separator {
+        cursor: col-resize;
+      }
+
+      &.layout-section-collapse {
+        width: 0 !important;
+
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+
+        &.layout-section-position-left {
+          & > .layout-section-collapse-btn {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            right: -$resize-width;
+          }
+        }
+
+        &.layout-section-position-right {
+          & > .layout-section-collapse-btn {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            left: -$resize-width;
+          }
+        }
+      }
+    }
+
+    &.layout-section-position-left {
+      & > .layout-section-separator {
+        position: absolute;
+        right: 0;
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        border-right: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        right: calc(#{$resize-width} / 2 * -1);
+        top: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        height: calc(#{$resize-width} * 3);
+        width: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    &.layout-section-position-right {
+      & > .layout-section-separator {
+        position: absolute;
+        left: 0;
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        border-left: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        left: calc(#{$resize-width} / 2 * -1);
+        top: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        height: calc(#{$resize-width} * 3);
+        width: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    /*---------------------------------------vertical-------------------------------------------*/
+
+    &.layout-section-position-top, &.layout-section-position-bottom {
+
+      & > .layout-section-separator {
+        cursor: row-resize;
+      }
+
+      &.layout-section-collapse {
+        height: 0 !important;
+
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+
+        &.layout-section-position-top {
+          & > .layout-section-collapse-btn {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            bottom: -$resize-width;
+          }
+        }
+
+        &.layout-section-position-bottom {
+          & > .layout-section-collapse-btn {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            top: -$resize-width;
+          }
+        }
+      }
+    }
+
+    &.layout-section-position-top {
+      & > .layout-section-separator {
+        position: absolute;
+        bottom: 0;
+        height: 4px;
+        left: 0;
+        right: 0;
+        border-bottom: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        bottom: calc(#{$resize-width} / 2 * -1);
+        left: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        width: calc(#{$resize-width} * 3);
+        height: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    &.layout-section-position-bottom {
+      & > .layout-section-separator {
+        position: absolute;
+        top: 0;
+        height: 4px;
+        left: 0;
+        right: 0;
+        border-top: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        top: calc(#{$resize-width} / 2 * -1);
+        left: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        width: calc(#{$resize-width} * 3);
+        height: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+  }
+}

package/src/packages/components/Layout/layout.utils.ts

@@ -0,0 +1,3 @@
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const eLayoutSectionPosition = createEnum(['top', 'left', 'right', 'bottom', 'center'] as const);

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

@@ -0,0 +1,67 @@
+import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import Layout from "../Layout";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {useLayoutSectionResizer} from "./useLayoutSectionResizer";
+
+export const LayoutSection = designComponent({
+  name: 'layout-section',
+  props: {
+    position: { type: String as PropType<typeof eLayoutSectionPosition.TYPE>, default: eLayoutSectionPosition.center },
+    modelValue: { type: Number },
+    collapse: { type: Boolean }
+  },
+  emits: {
+    onUpdateModelValue: (val?: number) => true,
+    onUpdateCollapse: (val?: boolean) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event }) {
+
+    const layout = Layout.use.inject();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+
+    const collapseModel = useModel(() => props.collapse, event.emit.onUpdateCollapse);
+
+    const classes = useClassCache(() => [
+      getComponentCls('layout-section'),
+      `layout-section-position-${props.position}`,
+      {
+        'layout-section-fixed': !!model.value,
+        'layout-section-collapse': collapseModel.value,
+      }
+    ]);
+
+    const styles = useStyleCache(style => {
+      if (!!model.value) {
+        if (layout.props.vertical) {
+          style.height = unit(model.value);
+        } else {
+          style.width = unit(model.value);
+        }
+      }
+    });
+
+    const resizer = useLayoutSectionResizer({ props, model, collapseModel });
+
+    onMounted(() => {
+      if (!props.modelValue && props.position !== eLayoutSectionPosition.center) {
+        model.value = (layout.props.vertical ? refs.el!.offsetHeight : refs.el!.offsetWidth) + 1;
+      }
+    });
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} style={styles.value}>
+        <div className="layout-section-inner">
+          {slots.default()}
+        </div>
+        {resizer.render()}
+      </div>
+    );
+  },
+});
+
+export default LayoutSection;