plain-design 1.0.0-beta.6 → 1.0.0-beta.60

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

@@ -1,148 +1,206 @@
-import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {throttle} from "plain-utils/utils/throttle";
-import {unit} from "plain-utils/string/unit";
-import {useClickWave} from "../../directives/ClickWave";
-import {Icon} from "../Icon";
-import {Loading} from "../Loading";
-import {ButtonGroup} from "../ButtonGroup";
-
-export const Button = designComponent({
-  name: '-button',
-  inheritPropsType: iHTMLButtonElement,
-  props: {
-    mode: { type: String as PropType<typeof ThemeMode.TYPE> },              // 按钮类型：fill填充，flat扁平，outline线性以及text文字
-    label: { type: String },                                                // 按钮文本
-    width: { type: [String, Number] },                                      // 按钮宽度
-    icon: { type: String },                                                 // 按钮图标
-    active: { type: Boolean },                                              // 按钮是否高亮
-    noPadding: { type: Boolean },                                           // 按钮是否无边距
-    block: { type: Boolean },                                               // 块级元素
-    throttleClick: { type: [Number, Boolean] },                             // click节流
-    asyncHandler: { type: Function as PropType<(e: MouseEvent) => void> },  // 异步处理函数，会自动开启关闭loading状态
-
-    ...EditProps,
-    ...StyleProps,
-
-    /*native*/
-    type: { type: String, default: 'button' },
-    nativeAttrs: { type: Object },
-  },
-  emits: {
-    onClick: (e: MouseEvent) => true,
-  },
-  slots: ['default'],
-  setup({ props, event: { emit }, slots }) {
-
-    const { refs, onRef } = useRefs({
-      el: HTMLButtonElement,
-    });
-    const { numberState } = useNumber(props, ['width']);
-    const { styleComputed } = useStyle();
-    const { editState, editComputed } = useEdit();
-
-    const group = ButtonGroup.use.inject(null);
-    const mode = computed(() => props.mode || group?.props.mode || 'flat');
-    const status = computed(() => styleComputed.value.status || (mode.value === ThemeMode.flat ? ThemeStatus.secondary : ThemeStatus.primary));
-
-    const state = reactive({
-      handleClick: null as ((e: MouseEvent) => void) | null,
-      handleClickInner: async (e: MouseEvent) => {
-        // e.stopPropagation();
-        if (!editComputed.value.editable) {
-          return;
-        }
-        if (!props.asyncHandler) {
-          return emit.onClick(e);
-        }
-        editState.loading = true;
-        try {
-          await props.asyncHandler(e);
-        } catch (e) {
-          console.error(e);
-        } finally {
-          editState.loading = null;
-        }
-      },
-    });
-
-    watch(
-      () => props.throttleClick,
-      (val) => {
-        if (!val) {
-          return state.handleClick = state.handleClickInner;
-        }
-        if (val === true) {
-          val = 1000;
-        }
-        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
-      },
-      { immediate: true }
-    );
-
-    const classes = useClasses(() => ([
-      getComponentCls('button'),
-      'plain-click-node',
-
-      `button-mode-${mode.value}`,
-      `button-status-${status.value}`,
-      `button-shape-${styleComputed.value.shape}`,
-      `button-size-${styleComputed.value.size}`,
-
-      {
-        'button-icon': !!props.icon,
-        'button-active': !!props.active,
-        'button-no-padding': !!props.noPadding,
-
-        'button-loading': !!editComputed.value.loading,
-        'button-has-icon': !!props.icon,
-        'button-block': !!props.block,
-        'button-disabled': !!editComputed.value.disabled,
-        'button-readonly': !!editComputed.value.readonly,
-        'button-icon-only': !!props.icon && !props.label,
-      },
-    ]));
-
-    const styles = useStyles(style => {style.width = unit(numberState.width);});
-
-    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }), });
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => {
-        return (
-          <button
-            ref={onRef.el}
-            {...mergeAttrs(
-              {
-                style: styles.value,
-                class: classes.value,
-              },
-              props.nativeAttrs,
-              {
-                onClick: state.handleClick!,
-                type: props.type as any,
-                disabled: editComputed.value.disabled!,
-                readOnly: editComputed.value.readonly || props.customReadonly,
-              }
-            )}
-          >
-            {(editComputed.value.loading || props.icon) && (
-              <span className="button-icon">
-                {!!editComputed.value.loading && <Loading type="kappa"/>}
-                {(!!props.icon && !editComputed.value.loading) ? <Icon icon={props.icon} style={{ verticalAlign: '' }}/> : null}
-              </span>
-            )}
-            {slots.default(!props.icon && props.label?.length === 2 ? props.label.split('').join(' ') : props.label)}
-          </button>
-        );
-      }
-    };
-  },
-});
-
-export default Button;
+import './button.scss';
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {throttle} from "plain-utils/utils/throttle";
+import {unit} from "plain-utils/string/unit";
+import {useClickWave} from "../../directives/ClickWave";
+import {Icon} from "../Icon";
+import {Loading} from "../Loading";
+import {ButtonGroup} from "../ButtonGroup";
+import {AutoLoadingObserver} from "../AutoLoadingObserver";
+import {useCollapseStyles} from "../../uses/useCollapseStyles";
+
+export const Button = designComponent({
+  name: '-button',
+  inheritPropsType: iHTMLButtonElement,
+  props: {
+    mode: { type: String as PropType<typeof ThemeMode.TYPE> },              // 按钮类型：fill填充，flat扁平，outline线性以及text文字
+    label: { type: String },                                                // 按钮文本
+    width: { type: [String, Number] },                                      // 按钮宽度
+    icon: { type: String },                                                 // 按钮图标
+    active: { type: Boolean },                                              // 按钮是否高亮
+    noPadding: { type: Boolean },                                           // 按钮是否无边距
+    block: { type: Boolean },                                               // 块级元素
+    throttleClick: { type: [Number, Boolean] },                             // click节流
+    asyncHandler: { type: Function as PropType<(e: MouseEvent) => void> },  // 异步处理函数，会自动开启关闭loading状态
+    autoLoading: { type: Boolean, default: true, },                         // 是否自动检测异步任务的执行并且开启loading
+    ...EditProps,
+    ...StyleProps,
+
+    /*native*/
+    type: { type: String, default: 'button' },
+    nativeAttrs: { type: Object },
+  },
+  emits: {
+    onClick: (e: MouseEvent) => true,
+  },
+  slots: ['default'],
+  setup({ props, event: { emit }, slots }) {
+
+    const { refs, onRef } = useRefs({
+      el: HTMLButtonElement,
+    });
+    const { numberState } = useNumber(props, ['width']);
+    const { styleComputed } = useStyle();
+    const autoLoadingObserver = AutoLoadingObserver.useObserver();
+    const { editState, editComputed } = useEdit({
+      adjust: (ret) => {
+        if (props.autoLoading && autoLoadingObserver.isLoading && !ret.loading) {
+          ret.loading = true;
+        }
+      }
+    });
+
+    const group = ButtonGroup.use.inject(null);
+    const mode = computed(() => props.mode || group?.props.mode || styleComputed.value.default.buttonMode);
+    const status = computed(() => styleComputed.value.status || (mode.value === ThemeMode.flat ? ThemeStatus.secondary : ThemeStatus.primary));
+
+    const state = reactive({
+      handleClick: null as ((e: MouseEvent) => void) | null,
+      handleClickWrapper: (e: MouseEvent) => {
+        props.autoLoading && autoLoadingObserver.tapStart();
+        state.handleClick?.(e);
+        props.autoLoading && autoLoadingObserver.tapEnd();
+      },
+      handleClickInner: async (e: MouseEvent) => {
+        // e.stopPropagation();
+        if (!editComputed.value.editable) {
+          return;
+        }
+        if (!props.asyncHandler) {
+          return emit.onClick(e);
+        }
+        editState.loading = true;
+        try {
+          await props.asyncHandler(e);
+        } catch (e) {
+          console.error(e);
+        } finally {
+          editState.loading = null;
+        }
+      },
+    });
+
+    watch(
+      () => props.throttleClick,
+      (val) => {
+        if (!val) {
+          return state.handleClick = state.handleClickInner;
+        }
+        if (val === true) {
+          val = 1000;
+        }
+        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
+      },
+      { immediate: true }
+    );
+
+    const classes = useClasses(() => ([
+      getComponentCls('button'),
+      'plain-click-node',
+
+      `button-mode-${mode.value}`,
+      `button-status-${status.value}`,
+      `button-shape-${styleComputed.value.shape}`,
+      `button-size-${styleComputed.value.size}`,
+
+      {
+        'button-icon': !!props.icon,
+        'button-active': !!props.active,
+        'button-no-padding': !!props.noPadding,
+
+        'button-loading': !!editComputed.value.loading,
+        'button-has-icon': !!props.icon,
+        'button-block': !!props.block,
+        'button-disabled': !!editComputed.value.disabled,
+        'button-readonly': !!editComputed.value.readonly,
+        'button-icon-only': buttonIconOnly.value,
+      },
+    ]));
+
+    const buttonIconOnly = computed(() => !!props.icon && !props.label);
+
+    const styles = useStyles(style => {
+      style.width = unit(numberState.width);
+    });
+
+    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }), });
+
+    const { loadingCollapse, iconCollapse } = (() => {
+      const active = () => ({
+        height: '1em',
+        width: '1em',
+        transition: 'all 300ms ease',
+        transformOrigin: 'center',
+        paddingRight: !buttonIconOnly.value ? '4px' : '',
+        transform: 'scale(1)'
+      });
+      const inactive = (): StyleProperties => ({
+        height: '0',
+        width: '0',
+        transition: 'all 300ms ease',
+        transformOrigin: 'center',
+        paddingRight: !buttonIconOnly.value ? '0' : '',
+        transform: 'scale(0)'
+      });
+      /*没有icon的时候，单独处理loading，有icon的情况下，loading在icon中渲染*/
+      const loadingCollapse = useCollapseStyles({
+        isShow: () => !!editComputed.value.loading && !props.icon,
+        active,
+        inactive,
+      });
+      /*有icon的时候一直显示icon*/
+      const iconCollapse = useCollapseStyles({
+        isShow: () => !!props.icon,
+        active,
+        inactive,
+      });
+      return { loadingCollapse, iconCollapse };
+    })();
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => {
+        return (
+          <button
+            ref={onRef.el}
+            {...mergeAttrs(
+              {
+                style: styles.value,
+                class: classes.value,
+              },
+              props.nativeAttrs,
+              {
+                onClick: state.handleClickWrapper!,
+                type: props.type as any,
+                disabled: editComputed.value.disabled!,
+                readOnly: editComputed.value.readonly || props.customReadonly,
+              }
+            )}
+          >
+            {/*没有icon的时候，单独处理loading，有icon的情况下，loading在icon中渲染*/}
+            {!props.icon && loadingCollapse.show && (
+              <span className="button-icon" style={loadingCollapse.styles} onTransitionEnd={loadingCollapse.onTransitionEnd} key="loading">
+                <Loading type="kappa"/>
+              </span>
+            )}
+            {iconCollapse.show && (
+              <span className="button-icon" style={iconCollapse.styles} onTransitionEnd={iconCollapse.onTransitionEnd} key="icon">
+                {editComputed.value.loading ?
+                  <Loading type="kappa"/> :
+                  <Icon icon={props.icon} style={{ verticalAlign: '' }}/>}
+              </span>
+            )}
+
+            {slots.default(!props.icon && props.label?.length === 2 ? props.label.split('').join(' ') : props.label)}
+          </button>
+        );
+      }
+    };
+  },
+});
+
+export default Button;

package/src/packages/components/ButtonGroup/button-group.scss

@@ -1,73 +1,73 @@
-@include prefix(button-group) {
-  &.button-group-direction-horizontal {
-    & > .#{componentName(button)}:not(.button-mode-text) {
-      &:not(:first-child) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-
-        &.button-mode-flat {
-          @include statusMixin(button) {
-            border-right-color: $color-light-3;
-            &.button-disabled {
-              border-right-color: $color-light-2;
-            }
-          }
-        }
-
-        &.button-mode-fill {
-          @include statusMixin(button) {
-            border-right-color: $color-4;
-          }
-        }
-
-        &.button-mode-outline {
-          border-right-color: transparent;
-        }
-      }
-    }
-
-    & > .#{componentName(button)}.button-mode-text {
-      & + .#{componentName(button)}.button-mode-text {
-        margin-left: 12px;
-      }
-    }
-  }
-
-  &.button-group-direction-vertical {
-    display: inline-flex;
-    flex-direction: column;
-
-    & > .#{componentName(button)}:not(.button-mode-text) {
-      &:not(:first-child) {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-
-      &:not(:last-child) {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-
-        &.button-mode-flat {
-          @include statusMixin(button) {
-            border-bottom-color: $color-light-3;
-          }
-        }
-
-        &.button-mode-fill {
-          @include statusMixin(button) {
-            border-bottom-color: $color-4;
-          }
-        }
-
-        &.button-mode-outline {
-          border-bottom-color: transparent;
-        }
-      }
-    }
-  }
-}
+@include prefix(button-group) {
+  &.button-group-direction-horizontal {
+    & > .#{componentName(button)}:not(.button-mode-text) {
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &.button-mode-flat {
+          @include statusMixin(button) {
+            border-right-color: $color-light-3;
+            &.button-disabled {
+              border-right-color: $color-light-2;
+            }
+          }
+        }
+
+        &.button-mode-fill {
+          @include statusMixin(button) {
+            border-right-color: $color-4;
+          }
+        }
+
+        & + .button-mode-outline, & + .button-mode-stroke {
+          margin-left: -1px;
+        }
+      }
+    }
+
+    & > .#{componentName(button)}.button-mode-text {
+      & + .#{componentName(button)}.button-mode-text {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  &.button-group-direction-vertical {
+    display: inline-flex;
+    flex-direction: column;
+
+    & > .#{componentName(button)}:not(.button-mode-text) {
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &.button-mode-flat {
+          @include statusMixin(button) {
+            border-bottom-color: $color-light-3;
+          }
+        }
+
+        &.button-mode-fill {
+          @include statusMixin(button) {
+            border-bottom-color: $color-4;
+          }
+        }
+
+        &.button-mode-outline {
+          border-bottom-color: transparent;
+        }
+      }
+    }
+  }
+}

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

@@ -1,43 +1,43 @@
-import './button-group.scss';
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
-import {createEnum} from "plain-utils/utils/createEnum";
-
-export const ButtonGroupDirection = createEnum(['vertical', 'horizontal'] as const);
-
-export const ButtonGroup = designComponent({
-  name: 'button-group',
-  provideRefer: true,
-  props: {
-    ...EditProps,
-    ...StyleProps,
-    mode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.flat },         // 按钮类型：fill填充，flat扁平，outline线性以及text文字
-    vertical: { type: Boolean },                                                                // 按钮组方向
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    useEdit();
-    const { styleComputed } = useStyle();
-
-    const classes = useClasses(() => [
-      getComponentCls('button-group'),
-      `button-group-shape-${styleComputed.value.shape || styleComputed.value.default.shape}`,
-      `button-group-direction-${props.vertical ? ButtonGroupDirection.vertical : ButtonGroupDirection.horizontal}`,
-    ]);
-
-    return {
-      refer: {
-        props,
-      },
-      render: () => (
-        <div className={classes.value}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export default ButtonGroup;
+import './button-group.scss';
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const ButtonGroupDirection = createEnum(['vertical', 'horizontal'] as const);
+
+export const ButtonGroup = designComponent({
+  name: 'button-group',
+  provideRefer: true,
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    mode: { type: String as PropType<typeof ThemeMode.TYPE> },                                  // 按钮类型：fill填充，flat扁平，outline线性以及text文字
+    vertical: { type: Boolean },                                                                // 按钮组方向
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    useEdit();
+    const { styleComputed } = useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('button-group'),
+      `button-group-shape-${styleComputed.value.shape || styleComputed.value.default.shape}`,
+      `button-group-direction-${props.vertical ? ButtonGroupDirection.vertical : ButtonGroupDirection.horizontal}`,
+    ]);
+
+    return {
+      refer: {
+        props,
+      },
+      render: () => (
+        <div className={classes.value}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default ButtonGroup;