plain-design 1.0.0-beta.15 → 1.0.0-beta.151

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -1,18 +1,18 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iHttp} from "../../createHttp";
-import {iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
+import {iAutoTableAiConfig, iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
 import {iUrl, tGetDefaultUrlConfig} from "./TableOption.url";
 import {iTableOperation, iTableOperationPermitConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
 import {iTableRefer} from "../../Table/table/Table";
 import {iTableOptionCacheData} from "../use/useTableOption.cache.utils";
 import {ThemeSize} from "../../../uses/useStyle";
-import {iMouseEvent, RenderNode} from "plain-design-composition";
+import {iMouseEvent, RenderNode} from "@peryl/react-compose";
 import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
 import {FilterFormSingle} from "../../FilterFormSingle";
 import {Pagination} from "../../Pagination";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {iEffects} from 'plain-utils/utils/createEffects';
-import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {iEffects} from '@peryl/utils/createEffects';
+import {iTableNode, iTablePropsType, iTableSortData} from "../../Table/table/utils/table.utils";
 import {eTableOptionEditType} from "./TableOption.utils";
 
 export namespace TableOptionSpace {
@@ -36,12 +36,14 @@ export namespace TableOptionSpace {
     loadOnStart?: boolean,                                              // 是否页面初始化的时候就加载数据
     copyDefaultExcludeKeys: string[],                                   // 复制一行的时候，不复制的属性
     showRows: number,                                                   // 显示的行数（自动计算表格的高度）
+    pageSize?: number,                                                  // 查询的行数
     showRowsMode: 'fixed' | 'auto',                                     // 显示行数的模式，自动根据 加载的数据展示还是固定行数
     sort?: iTableOptionSortParam | iTableOptionSortParam[],             // 排序方式
     getCache: (key: string) => iTableOptionCacheData | undefined,       // 获取缓存配置信息
     setCache: (cacheData: iTableOptionCacheData) => void,               // 保存缓存配置信息
     size?: typeof ThemeSize.TYPE,                                       // 表格尺寸
     filterFormColumn: number,                                           // 查询表单列数
+    ai?: false | Partial<iAutoTableAiConfig>,                           // AI设置
   }
 
   /**
@@ -50,6 +52,7 @@ export namespace TableOptionSpace {
    * @date    2022.12.20 10:47
    */
   export interface iTableOptionCustomConfig {
+    title?: string,                                                     // 表格标题
     url?: iUrl,                                                         // 请求配置
     data?: any[],                                                       // 默认数据
     fill?: boolean,                                                     // 是否自动计算高度
@@ -67,7 +70,8 @@ export namespace TableOptionSpace {
     paginationAttrs?: Partial<typeof Pagination.use.props>,             // 给分页组件传递的属性设置
     parentOption?: Record<string, any>,                                 // 父表的option
     parentMap?: Record<string, any>,                                    // 父表的字段映射
-    minShowRows?: number,                                              // BaseTable的minShowRows
+    minShowRows?: number,                                               // BaseTable的minShowRows
+    tableProps?: Partial<iTablePropsType>,                              // 传递给table的控制属性
     // todo
     noHead?: boolean,                                                   // 不显示表头
   }
@@ -118,6 +122,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],
@@ -144,6 +149,7 @@ export namespace TableOptionSpace {
     display: () => RenderNode,
     onClear?: (e: iMouseEvent) => void,
     onClick: () => void,
+    noClear?: boolean,
   }
 
   /**
@@ -160,6 +166,8 @@ export namespace TableOptionSpace {
    */
   export interface iTableOption {
     config: iTableOptionConfig;
+    useConfig: iTableOptionUseConfig,
+    defaultConfig: iTableOptionDefaultConfig,
     clone: iTableOptionClone;
   }
 

package/src/packages/components/AutoTable/utils/TableOption.url.ts

@@ -1,5 +1,5 @@
 import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {TableOptionSpace} from "./TableOption.space";
 
 /**

package/src/packages/components/AutoTable/utils/TableOption.utils.tsx

@@ -1,9 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iFilterOption} from "../../FilterService/utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {FilterService} from "../../FilterService";
 import {TableOptionSpace} from "./TableOption.space";
-import {iMouseEvent} from "plain-design-composition";
+import {iMouseEvent} from "@peryl/react-compose";
 
 
 /**
@@ -38,7 +38,7 @@ export const TableOptionUtils = (() => {
     if (description === null) {return null;}
     return {
       display: () => <>
-        {`${filterOption!.label}${handler.label}${!description ? '' : ':'}`}
+        {`${filterOption!.label} ${handler.label()} ${!description ? '' : ':'}`}
         {description}
       </>,
       onClick,

package/src/packages/components/AutoTable/utils/buildPlainDefaultUrlConfig.ts

@@ -39,7 +39,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:33
      */
     insert: async (param) => {
-      return processPublicRequest('insert', { ...param, method: 'post' });
+      return processPublicRequest('insert', { ...param, suffixUrl: 'insert', method: 'post' });
     },
     /**
      * 默认使用post请求调用接口base/batch批量插入数据
@@ -47,7 +47,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 22:25
      */
     batchInsert: async (param) => {
-      return processPublicRequest('batchInsert', { ...param, suffixUrl: 'batch', method: 'post' });
+      return processPublicRequest('batchInsert', { ...param, suffixUrl: 'batchInsert', method: 'post' });
     },
     /**
      * 默认使用put方法调用接口base更新数据
@@ -55,7 +55,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:34
      */
     update: async (param) => {
-      return processPublicRequest('update', { ...param, method: 'put' });
+      return processPublicRequest('update', { ...param, suffixUrl: 'update', method: 'post' });
     },
     /**
      * 默认使用put请求，调用接口base/batch批量更新数据
@@ -63,7 +63,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 22:25
      */
     batchUpdate: async (param) => {
-      return processPublicRequest('batchUpdate', { ...param, suffixUrl: 'batch', method: 'put' });
+      return processPublicRequest('batchUpdate', { ...param, suffixUrl: 'batchUpdate', method: 'post' });
     },
     /**
      * 默认使用delete方法调用接口base删除数据
@@ -71,7 +71,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:34
      */
     delete: async (param) => {
-      return processPublicRequest('delete', { ...param, method: 'delete' });
+      return processPublicRequest('delete', { ...param, suffixUrl: 'delete', method: 'post', });
     },
     /**
      * 批量删除
@@ -79,7 +79,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.27 21:02
      */
     batchDelete: async (param) => {
-      return processPublicRequest('batchDelete', { ...param, method: 'delete' });
+      return processPublicRequest('batchDelete', { ...param, suffixUrl: 'delete', method: 'post' });
     },
     /**
      * 默认使用post方法调用接口base/default查询默认新建数据

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

@@ -1,6 +1,6 @@
-import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import './auto-width-input.scss';
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 
 const FixInput = fixInputCursor('input');
 

package/src/packages/components/Badge/badge.scss

@@ -18,7 +18,11 @@
     @include statusMixin(badge-content) {
       background-color: $color-6;
       border-radius: 100px;
-      color: white;
+      color: plv(pbfc);
+      z-index: 2;
+      span {
+        transform: scale(0.8);
+      }
     }
 
     &.badge-content-top {

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

@@ -1,5 +1,5 @@
 import './badge.scss';
-import {computed, designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
 
 export const Badge = designComponent({
   name: '-badge',

package/src/packages/components/Box/box.scss

@@ -0,0 +1,6 @@
+@include comp(box) {
+
+  @include sizeMixin(box, (font-size, border-radius)) {
+  }
+
+}

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

@@ -0,0 +1,31 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './box.scss';
+
+export const Box = designComponent({
+  name: "box",
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+    useEdit();
+
+    const classes = useClassCache(() => [
+      getComponentCls('box'),
+      `box-size-${styleComputed.value.size}`,
+      `box-shape-${styleComputed.value.size}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/Button/button.scss

@@ -7,10 +7,11 @@
   outline: none;
   position: relative;
   text-align: center;
-  line-height: 1.5715;
+  line-height: plv(line-height);
   white-space: nowrap;
   display: inline-block;
   user-select: none;
+  z-index: 1;
 
   @include public-style;
 
@@ -37,7 +38,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
         border-color: $color-4;
@@ -108,6 +109,33 @@
     }
   }
 
+  &.button-mode-stroke {
+    @include statusMixin(button) {
+      background-color: plv(bg-2);
+      border-color: plv(secondary-light-3);
+      color: plv(text-2);
+
+      @include active(button) {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &:not(.button-disabled):hover {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &.button-disabled {
+        border-color: $color-2;
+        color: $color-2;
+      }
+    }
+
+    &:after {
+      //display: none !important;
+    }
+  }
+
   &.button-mode-text {
     padding: 0;
     min-width: initial;
@@ -141,17 +169,17 @@
     }
   }
 
-  .#{componentName(icon)} {
+  .#{componentName(icon)}, .#{componentName(loading)} {
     //vertical-align: text-top;
     position: relative;
-    top: 1px;
+    top: 0.15em;
   }
 
-  &:not(.button-icon-only) {
-    & > .button-icon {
-      margin-right: 4px;
-    }
-  }
+  //&:not(.button-icon-only) {
+  //  & > .button-icon {
+  //    margin-right: 4px;
+  //  }
+  //}
 
   &.button-no-padding {
     padding: 0;
@@ -168,4 +196,8 @@
   & > span + .#{componentName(icon)} {
     margin-left: 4px;
   }
+
+  &:hover {
+    z-index: 4;
+  }
 }

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

@@ -1,13 +1,16 @@
 import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
+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 "plain-utils/utils/throttle";
-import {unit} from "plain-utils/string/unit";
+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',
@@ -22,7 +25,7 @@ export const Button = designComponent({
     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,
 
@@ -41,14 +44,26 @@ export const Button = designComponent({
     });
     const { numberState } = useNumber(props, ['width']);
     const { styleComputed } = useStyle();
-    const { editState, editComputed } = useEdit();
+    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 || 'flat');
+    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) {
@@ -68,16 +83,22 @@ export const Button = designComponent({
       },
     });
 
+    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;
         }
-        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
+        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
+        throttleClickEffects.push(() => throttleClickHandler.dispose());
+        state.handleClick = throttleClickHandler;
       },
       { immediate: true }
     );
@@ -101,14 +122,50 @@ export const Button = designComponent({
         'button-block': !!props.block,
         'button-disabled': !!editComputed.value.disabled,
         'button-readonly': !!editComputed.value.readonly,
-        'button-icon-only': !!props.icon && !props.label,
+        'button-icon-only': buttonIconOnly.value,
       },
     ]));
 
-    const styles = useStyles(style => {style.width = unit(numberState.width);});
+    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,
@@ -124,19 +181,27 @@ export const Button = designComponent({
               },
               props.nativeAttrs,
               {
-                onClick: state.handleClick!,
+                onClick: state.handleClickWrapper!,
                 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}
+            {/*没有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>
         );

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

@@ -25,8 +25,8 @@
           }
         }
 
-        &.button-mode-outline {
-          border-right-color: transparent;
+        & + .button-mode-outline, & + .button-mode-stroke {
+          margin-left: -1px;
         }
       }
     }

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

@@ -1,8 +1,8 @@
 import './button-group.scss';
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+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 "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const ButtonGroupDirection = createEnum(['vertical', 'horizontal'] as const);
 
@@ -12,7 +12,7 @@ export const ButtonGroup = designComponent({
   props: {
     ...EditProps,
     ...StyleProps,
-    mode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.flat },         // 按钮类型：fill填充，flat扁平，outline线性以及text文字
+    mode: { type: String as PropType<typeof ThemeMode.TYPE> },                                  // 按钮类型：fill填充，flat扁平，outline线性以及text文字
     vertical: { type: Boolean },                                                                // 按钮组方向
   },
   slots: ['default'],

package/src/packages/components/Card/card.scss

@@ -48,7 +48,7 @@
     width: 100%;
     color: plv(text-2);
     padding: 9px 12px;
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .card-poster {

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

@@ -1,6 +1,6 @@
 import './card.scss';
-import {designComponent, getComponentCls, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {useStyle} from "../../uses/useStyle";
 
 export const Card = designComponent({