plain-design 1.0.0-beta.72 → 1.0.0-beta.74

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

@@ -1,72 +1,72 @@
-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 } }) {
-
-  const staticState = {
-    moving: false,
-    start: {
-      x: 0,
-      y: 0,
-      left: 0,
-      top: 0,
-    },
-    move: {
-      x: 0,
-      y: 0,
-      top: 0,
-      left: 0,
-    },
-  };
-
-  const handler = {
-    mousedown: (e: MouseEvent) => {
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      staticState.start = {
-        x: clientX,
-        y: clientY,
-        left: staticState.move.left,
-        top: staticState.move.top,
-      };
-      document.documentElement.addEventListener('mousemove', handler.mousemove);
-      document.documentElement.addEventListener('mouseup', handler.mouseup);
-    },
-    mousemove: (e: MouseEvent) => {
-      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;
-
-      if (!staticState.moving) {
-        if (durX < 5 && durY < 5) {
-          return;
-        } else {
-          staticState.moving = true;
-        }
-      }
-
-      let left = staticState.start.left + durX;
-      let top = staticState.start.top + durY;
-      refs.content!.style.transition = "none";
-      refs.content!.style.left = `${left}px`;
-      refs.content!.style.top = `${top}px`;
-
-      staticState.move.left = left;
-      staticState.move.top = top;
-    },
-    mouseup: () => {
-      refs.content!.style.transition = "";
-      document.documentElement.removeEventListener('mousemove', handler.mousemove);
-      document.documentElement.removeEventListener('mouseup', handler.mouseup);
-    },
-  };
-
-  watchEffect(() => {
-    if (!movable.value) {return;}
-    const { head, content } = refs;
-    if (!head || !content) {return;}
-    head.addEventListener('mousedown', handler.mousedown);
-  });
-}
+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 } }) {
+
+  const staticState = {
+    moving: false,
+    start: {
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+    },
+    move: {
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+    },
+  };
+
+  const handler = {
+    mousedown: (e: MouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState.start = {
+        x: clientX,
+        y: clientY,
+        left: staticState.move.left,
+        top: staticState.move.top,
+      };
+      document.documentElement.addEventListener('mousemove', handler.mousemove);
+      document.documentElement.addEventListener('mouseup', handler.mouseup);
+    },
+    mousemove: (e: MouseEvent) => {
+      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;
+
+      if (!staticState.moving) {
+        if (durX < 5 && durY < 5) {
+          return;
+        } else {
+          staticState.moving = true;
+        }
+      }
+
+      let left = staticState.start.left + durX;
+      let top = staticState.start.top + durY;
+      refs.content!.style.transition = "none";
+      refs.content!.style.left = `${left}px`;
+      refs.content!.style.top = `${top}px`;
+
+      staticState.move.left = left;
+      staticState.move.top = top;
+    },
+    mouseup: () => {
+      refs.content!.style.transition = "";
+      document.documentElement.removeEventListener('mousemove', handler.mousemove);
+      document.documentElement.removeEventListener('mouseup', handler.mouseup);
+    },
+  };
+
+  watchEffect(() => {
+    if (!movable.value) {return;}
+    const { head, content } = refs;
+    if (!head || !content) {return;}
+    head.addEventListener('mousedown', handler.mousedown);
+  });
+}

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

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

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

@@ -1,10 +1,10 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-
-/*弹框位置可选项*/
-export const DialogPositions = createEnum(['center', 'top', 'bottom', 'left', 'right'] as const);
-/*弹框动画可选项*/
-export const DialogAnimations = createEnum(['fade', 'scale', 'top', 'bottom', 'left', 'right'] as const);
-/*弹框底部操作栏对齐方式可选项*/
-export const DialogAlign = createEnum(['left', 'center', 'right'] as const);
-/*弹框关闭按钮样式类型*/
-export const DialogCloseType = createEnum(['square', 'triangle'] as const);
+import {createEnum} from "plain-utils/utils/createEnum";
+
+/*弹框位置可选项*/
+export const DialogPositions = createEnum(['center', 'top', 'bottom', 'left', 'right'] as const);
+/*弹框动画可选项*/
+export const DialogAnimations = createEnum(['fade', 'scale', 'top', 'bottom', 'left', 'right'] as const);
+/*弹框底部操作栏对齐方式可选项*/
+export const DialogAlign = createEnum(['left', 'center', 'right'] as const);
+/*弹框关闭按钮样式类型*/
+export const DialogCloseType = createEnum(['square', 'triangle'] as const);

package/src/packages/components/Dropdown/dropdown.public.scss

@@ -1,94 +1,94 @@
-@include prefix(dropdown-panel) {
-  @include sizeMixin(dropdown-panel, ()) {
-    padding: 0 2px;
-
-    .dropdown-option {
-      position: relative;
-      font-size: $font-size;
-      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
-      border-radius: $border-radius;
-      margin: 2px 0;
-
-      &.dropdown-option-has-children {
-        padding-right: calc(#{plv(dropdown-size-#{$name}-padding-x)} + 1em);
-      }
-    }
-    .dropdown-group {
-      font-size: $font-size;
-      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
-      color: plv(text-2);
-      opacity: 0.5;
-      transform: scale(0.8);
-      transform-origin: left;
-      font-weight: 700;
-    }
-
-    &.dropdown-panel-size-equal {
-      width: 100%;
-    }
-
-    .dropdown-separator {
-      height: 1px;
-      background-color: plv(border-color);
-      margin: 2px 0;
-    }
-  }
-
-  &.dropdown-panel-align-center {
-    .dropdown-option {
-      justify-content: center;
-    }
-  }
-  &.dropdown-panel-align-end {
-    .dropdown-option {
-      justify-content: flex-end;
-    }
-  }
-
-  .dropdown-option {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    transition: background-color ease 300ms;
-    color: plv(text-2);
-    cursor: pointer;
-    box-sizing: border-box;
-
-    @include prefix(icon) {
-      margin-right: 0.5em;
-    }
-
-    &:not(.dropdown-option-disabled) {
-      @include prefix(icon) {
-        color: plv(text-3);
-      }
-    }
-
-    .dropdown-option-arrow {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    @include hover(dropdown-option) {
-      background-color: plv(background-hover);
-    }
-
-    &.dropdown-option-expanded {
-      background-color: plv(background-hover);
-    }
-
-    &.dropdown-option-disabled {
-      color: plv(text-4);
-      cursor: not-allowed;
-
-      @include prefix(icon) {
-        color: plv(text-4);
-      }
-    }
-  }
-}
+@include prefix(dropdown-panel) {
+  @include sizeMixin(dropdown-panel, ()) {
+    padding: 0 2px;
+
+    .dropdown-option {
+      position: relative;
+      font-size: $font-size;
+      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+      border-radius: $border-radius;
+      margin: 2px 0;
+
+      &.dropdown-option-has-children {
+        padding-right: calc(#{plv(dropdown-size-#{$name}-padding-x)} + 1em);
+      }
+    }
+    .dropdown-group {
+      font-size: $font-size;
+      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+      color: plv(text-2);
+      opacity: 0.5;
+      transform: scale(0.8);
+      transform-origin: left;
+      font-weight: 700;
+    }
+
+    &.dropdown-panel-size-equal {
+      width: 100%;
+    }
+
+    .dropdown-separator {
+      height: 1px;
+      background-color: plv(border-color);
+      margin: 2px 0;
+    }
+  }
+
+  &.dropdown-panel-align-center {
+    .dropdown-option {
+      justify-content: center;
+    }
+  }
+  &.dropdown-panel-align-end {
+    .dropdown-option {
+      justify-content: flex-end;
+    }
+  }
+
+  .dropdown-option {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    transition: background-color ease 300ms;
+    color: plv(text-2);
+    cursor: pointer;
+    box-sizing: border-box;
+
+    @include prefix(icon) {
+      margin-right: 0.5em;
+    }
+
+    &:not(.dropdown-option-disabled) {
+      @include prefix(icon) {
+        color: plv(text-3);
+      }
+    }
+
+    .dropdown-option-arrow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @include hover(dropdown-option) {
+      background-color: plv(background-hover);
+    }
+
+    &.dropdown-option-expanded {
+      background-color: plv(background-hover);
+    }
+
+    &.dropdown-option-disabled {
+      color: plv(text-4);
+      cursor: not-allowed;
+
+      @include prefix(icon) {
+        color: plv(text-4);
+      }
+    }
+  }
+}

package/src/packages/components/Dropdown/dropdown.scss

@@ -1,13 +1,13 @@
-@include prefix(dropdown) {
-  & > .popup-item-body > .popup-item-content > .popup-content {
-    display: flex;
-    align-items: stretch;
-    flex-wrap: nowrap;
-  }
-}
-
-@include prefix(dropdown-panel) {
-  & + .#{componentName(dropdown-panel)} {
-    border-left: solid 1px plv(border-color);
-  }
-}
+@include prefix(dropdown) {
+  & > .popup-item-body > .popup-item-content > .popup-content {
+    display: flex;
+    align-items: stretch;
+    flex-wrap: nowrap;
+  }
+}
+
+@include prefix(dropdown-panel) {
+  & + .#{componentName(dropdown-panel)} {
+    border-left: solid 1px plv(border-color);
+  }
+}

package/src/packages/components/Dropdown/dropdown.utils.tsx

@@ -1,109 +1,109 @@
-import {getComponentCls, mergeAttrs, RenderNode} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createProvider} from "../../utils/createProvider";
-import {Icon} from "../Icon";
-import './dropdown.public.scss';
-import {ePopupTrigger} from "../usePopup/utils/popup.utils";
-
-export const DropdownOptionAlign = createEnum(['start', 'center', 'end'] as const);
-
-export const DropdownOptionTrigger = createEnum(['click', 'hover'] as const);
-
-export interface iDropdownOptionContext {
-  id: string,
-  props: {
-    label?: string | number,
-    val?: any,
-    trigger?: typeof DropdownOptionTrigger.TYPE,
-  };
-  hasChildren: { value: boolean };
-  parentOption: iDropdownOptionContext | null,
-  slots: { content: () => RenderNode }
-}
-
-export interface iDropdownContext {
-  handler: {
-    onClickOption: (optionContext: iDropdownOptionContext) => void,
-    openDropdownOption: (optionContext: iDropdownOptionContext) => void,
-    onPopperClose: () => void,
-  };
-  state: {
-    cascadeOptions: iDropdownOptionContext[],
-  },
-  trigger: { value: typeof ePopupTrigger.TYPE },
-  props: {
-    optionWidth?: any,
-  }
-}
-
-export const DropdownContextProvider = createProvider<iDropdownContext>("@@DROPDOWN_PROVIDER");
-
-export const DropdownOptionContextProvider = createProvider<iDropdownOptionContext>("@@DROPDOWN_OPTION_PROVIDER");
-
-/**
- * 渲染dropdown option
- * @author  韦胜健
- * @date    2022.7.9 19:15
- */
-export function renderDropdownOption(
-  {
-    disabled,
-    attrs,
-    icon,
-    content,
-    externalClass,
-  }: {
-    disabled?: boolean,
-    attrs?: any,
-    icon?: string,
-    content: RenderNode,
-    externalClass?: any,
-  }
-) {
-
-  const classes = [
-    externalClass,
-    'dropdown-option',
-    {
-      'dropdown-option-disabled': disabled,
-    }
-  ];
-
-  return (
-    <div {...mergeAttrs({ class: classes }, attrs)}>
-      {!!icon && <Icon icon={icon}/>}
-      {content}
-    </div>
-  );
-}
-
-/**
- * 渲染dropdown panel
- * @author  韦胜健
- * @date    2022.7.9 19:18
- */
-export function renderDropdownPanel(
-  {
-    size,
-    align,
-    attrs,
-    externalClass,
-    content,
-    sizeEqual,
-  }: {
-    size: string,
-    align?: string,
-    attrs?: any,
-    externalClass?: any,
-    content: RenderNode,
-    sizeEqual?: boolean,
-  }
-) {
-  return (
-    <div {...mergeAttrs({
-      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`, sizeEqual ? 'dropdown-panel-size-equal' : ''],
-    }, attrs)}>
-      {content}
-    </div>
-  );
-}
+import {getComponentCls, mergeAttrs, RenderNode} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {createProvider} from "../../utils/createProvider";
+import {Icon} from "../Icon";
+import './dropdown.public.scss';
+import {ePopupTrigger} from "../usePopup/utils/popup.utils";
+
+export const DropdownOptionAlign = createEnum(['start', 'center', 'end'] as const);
+
+export const DropdownOptionTrigger = createEnum(['click', 'hover'] as const);
+
+export interface iDropdownOptionContext {
+  id: string,
+  props: {
+    label?: string | number,
+    val?: any,
+    trigger?: typeof DropdownOptionTrigger.TYPE,
+  };
+  hasChildren: { value: boolean };
+  parentOption: iDropdownOptionContext | null,
+  slots: { content: () => RenderNode }
+}
+
+export interface iDropdownContext {
+  handler: {
+    onClickOption: (optionContext: iDropdownOptionContext) => void,
+    openDropdownOption: (optionContext: iDropdownOptionContext) => void,
+    onPopperClose: () => void,
+  };
+  state: {
+    cascadeOptions: iDropdownOptionContext[],
+  },
+  trigger: { value: typeof ePopupTrigger.TYPE },
+  props: {
+    optionWidth?: any,
+  }
+}
+
+export const DropdownContextProvider = createProvider<iDropdownContext>("@@DROPDOWN_PROVIDER");
+
+export const DropdownOptionContextProvider = createProvider<iDropdownOptionContext>("@@DROPDOWN_OPTION_PROVIDER");
+
+/**
+ * 渲染dropdown option
+ * @author  韦胜健
+ * @date    2022.7.9 19:15
+ */
+export function renderDropdownOption(
+  {
+    disabled,
+    attrs,
+    icon,
+    content,
+    externalClass,
+  }: {
+    disabled?: boolean,
+    attrs?: any,
+    icon?: string,
+    content: RenderNode,
+    externalClass?: any,
+  }
+) {
+
+  const classes = [
+    externalClass,
+    'dropdown-option',
+    {
+      'dropdown-option-disabled': disabled,
+    }
+  ];
+
+  return (
+    <div {...mergeAttrs({ class: classes }, attrs)}>
+      {!!icon && <Icon icon={icon}/>}
+      {content}
+    </div>
+  );
+}
+
+/**
+ * 渲染dropdown panel
+ * @author  韦胜健
+ * @date    2022.7.9 19:18
+ */
+export function renderDropdownPanel(
+  {
+    size,
+    align,
+    attrs,
+    externalClass,
+    content,
+    sizeEqual,
+  }: {
+    size: string,
+    align?: string,
+    attrs?: any,
+    externalClass?: any,
+    content: RenderNode,
+    sizeEqual?: boolean,
+  }
+) {
+  return (
+    <div {...mergeAttrs({
+      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`, sizeEqual ? 'dropdown-panel-size-equal' : ''],
+    }, attrs)}>
+      {content}
+    </div>
+  );
+}