plain-design 1.0.0-beta.146 → 1.0.0-beta.147

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

@@ -1,213 +1,213 @@
-import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {throttle} from "@peryl/utils/throttle";
-import {unit} from "@peryl/utils/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";
-import {createEffects} from "@peryl/utils/createEffects";
-
-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;
-        }
-      },
-    });
-
-    const { effects: throttleClickEffects } = createEffects();
-    onBeforeUnmount(() => {throttleClickEffects.clear();});
-
-    watch(
-      () => props.throttleClick,
-      (val) => {
-        throttleClickEffects.clear();
-        if (!val) {
-          return state.handleClick = state.handleClickInner;
-        }
-        if (val === true) {
-          val = 1000;
-        }
-        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
-        throttleClickEffects.push(() => throttleClickHandler.dispose());
-        state.handleClick = throttleClickHandler;
-      },
-      { 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;
+import './button.scss';
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {throttle} from "@peryl/utils/throttle";
+import {unit} from "@peryl/utils/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";
+import {createEffects} from "@peryl/utils/createEffects";
+
+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;
+        }
+      },
+    });
+
+    const { effects: throttleClickEffects } = createEffects();
+    onBeforeUnmount(() => {throttleClickEffects.clear();});
+
+    watch(
+      () => props.throttleClick,
+      (val) => {
+        throttleClickEffects.clear();
+        if (!val) {
+          return state.handleClick = state.handleClickInner;
+        }
+        if (val === true) {
+          val = 1000;
+        }
+        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
+        throttleClickEffects.push(() => throttleClickHandler.dispose());
+        state.handleClick = throttleClickHandler;
+      },
+      { 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, & + .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;
-        }
-      }
-    }
-  }
-}
+@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 "@peryl/react-compose";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
-import {createEnum} from "@peryl/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;
+import './button-group.scss';
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
+import {createEnum} from "@peryl/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;