plain-design 1.0.0-beta.42 → 1.0.0-beta.44

package/src/packages/components/Cascade/cascade.scss

@@ -17,7 +17,7 @@
   .cascade-panel-item {
     transition: all ease 150ms;
     position: relative;
-    background-color: plv(background-lite);
+    background-color: plv(background-color);
     overflow: hidden;
 
     .cascade-panel-item-inner {
@@ -29,7 +29,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: solid 1px plv(background-lite);
+      border-bottom: solid 1px plv(background-color);
       cursor: pointer;
       color: plv(text-2);
 

package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss

@@ -1,6 +1,15 @@
 @include prefix(cascade-panel-flat) {
   width: 500px;
 
+  & > .#{componentName(scroll)} {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: initial !important;
+        overflow-y: initial !important;
+      }
+    }
+  }
+
   .cascade-panel-flat-header {
     position: sticky;
     top: 0;
@@ -83,35 +92,26 @@
   &.cascade-panel-size-normal, &.cascade-panel-size-large {
     @include comp(cascade-panel-flat) {
       .cascade-panel-flat-header {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-header-item {
-          padding: 0 8px;
-          line-height: 28px;
-          cursor: pointer;
-
-          &:hover {
-            background-color: plv(background-hover);
-          }
-        }
       }
       .cascade-panel-flat-body {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-item {
-          padding: 8px 8px;
-        }
       }
     }
   }
-  &.cascade-panel-size-small, &.cascade-panel-size-mini {
+
+  @include sizeMixin(cascade-panel, ()) {
     @include comp(cascade-panel-flat) {
+      .cascade-panel-flat-item {
+        border-radius: plv(box-size-#{$name}-border-radius);
+      }
       .cascade-panel-flat-header {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-header-item {
-          padding: 0 4px;
-          line-height: 24px;
+          padding: 0 calc(#{plv(input-padding-x-#{$name})} - 2px);
+          line-height: 28px;
           cursor: pointer;
 
           &:hover {
@@ -120,26 +120,13 @@
         }
       }
       .cascade-panel-flat-body {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-item {
-          padding: 4px 4px;
+          padding: calc((#{plv(input-padding-x-#{$name})} - 2px) * 0.6) calc(#{plv(input-padding-x-#{$name})} - 2px);
         }
       }
     }
   }
-
-  @include sizeMixin(cascade-panel, ()) {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-item {
-        border-radius: plv(box-size-#{$name}-border-radius);
-      }
-      .cascade-panel-flat-header {
-        font-size: $font-size;
-      }
-      .cascade-panel-flat-body {
-        font-size: $font-size;
-      }
-    }
-  }
 }

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -6,6 +6,7 @@
   vertical-align: -0.15em;
   border-width: 1px;
   border-style: solid;
+  border-radius: plv(box-size-small-border-radius);
   //border-radius: 2px;
 
   &.checkbox-inner-status-check {

package/src/packages/components/DatePicker/date.scss

@@ -194,7 +194,7 @@ $width: 276px;
   }
 
   .date-base-panel-year-list {
-    background-color: plv(background-lite);
+    background-color: inherit;
     transition: all ease 300ms;
     position: absolute;
     left: 0;

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

@@ -20,7 +20,7 @@ import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter"
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
 
 export const DatePicker = designComponent({
-  name: '-date',
+  name: '-date-picker',
   props: DatePropsOptions,
   expose: {
     DatePanel,

package/src/packages/components/Dialog/dialog.scss

@@ -12,7 +12,10 @@
   }
 
   .dialog-content {
-    background-color: plv(background-color);
+    background-color: plv(bg-3);
+    --#{componentName('background-color')}: #{plv(bg-3)};
+    --#{componentName('table-head-background')}: #{plv(bg-3)};
+
     border: solid 1px plv(border-color);
     display: flex;
     flex-direction: column;

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

@@ -28,6 +28,7 @@ export const FilterFormSingle = designComponent({
     hideHandlerSelector: { type: Boolean },
     hideSearchButton: { type: Boolean },
     width: { type: String, default: '440px' },
+    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
   },
   emits: {
     onSearch: (data: iFilterFormSingleData) => true,
@@ -111,7 +112,11 @@ export const FilterFormSingle = designComponent({
        * @author  韦胜健
        * @date    2023.1.6 12:46
        */
-      search: async () => {emit.onSearch(await methods.getData());},
+      search: async () => {
+        const data = await methods.getData();
+        emit.onSearch(data);
+        await props.handleSearch?.(data);
+      },
     };
 
     const handler = {
@@ -156,7 +161,7 @@ export const FilterFormSingle = designComponent({
           )}
           {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
           {!props.hideSearchButton && (
-            <Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill" onClick={methods.search}/>
+            <Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
           )}
           {slots.append()}
         </InputGroup>

package/src/packages/components/Form/form.scss

@@ -11,6 +11,22 @@
       line-height: $height;
       font-size: $font-size;
     }
+
+    /*@formatter:off*/
+    .form-item-validate-message-inner {
+      font-size: $font-size;
+
+    }
+    .form-item-validate-position-bottom-left { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-bottom-right { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        margin-left: $margin;
+        line-height: $height;
+        height: $height;
+      }
+    }
+/*@formatter:on*/
   }
 
   @include prefix(form-item) {
@@ -60,16 +76,19 @@
     &.form-item-content-align-left {
       .form-item-content-inner {
         text-align: left;
+        position: relative;
       }
     }
     &.form-item-content-align-center {
       .form-item-content-inner {
         text-align: center;
+        position: relative;
       }
     }
     &.form-item-content-align-right {
       .form-item-content-inner {
         text-align: right;
+        position: relative;
       }
     }
 
@@ -103,12 +122,43 @@
       }
     }
 
-
     &.form-item-no-label {
       .form-item-content {
         width: 100% !important;
       }
     }
+
+    .form-item-validate-message-inner {
+      color: plv(error-6);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      @include comp(icon) {
+        margin-right: 0.25em;
+      }
+    }
+    &.form-item-validate-position-bottom-left {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        left: 0;
+      }
+    }
+    &.form-item-validate-position-bottom-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        right: 0;
+      }
+    }
+    &.form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        left: 100%;
+        top: 0;
+      }
+    }
+
   }
 
   &.form-column-1 {

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -41,6 +41,7 @@ export const FormLayoutPropsOption = {
   verticalLabel: { type: Boolean as PropType<boolean> },                                  // 纵向的表单
   gutter: { type: Number },                                                               // 列间隔
   rowGutter: { type: Number },                                                            // 行间隔
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
 } as const;
 
 /**
@@ -63,6 +64,7 @@ export const FormItemLayoutPropsOption = {
   contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },          // content 对齐方式
   singleColumnContentWidth: { type: Number },                                         // 单列的时候form item content的宽度
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
 } as const;
 
 /**
@@ -96,14 +98,32 @@ export const useFormLayout = (() => {
     const isSingleColumn = computed(() => props.column === 1);
     /*列间距*/
     const gutter = computed((): number => {
-      if (props.gutter != null) {return removeUnit(props.gutter) as any;}
+      if (props.gutter != null) {
+        return removeUnit(props.gutter) as any;
+      }
       /*单列的情况下不设置列间距*/
       return isSingleColumn.value ? 0 : FormSizeGutter[styleComputed.value.size];
     });
     /*行间距*/
     const rowGutter = computed((): number => {
-      if (props.rowGutter != null) {return removeUnit(props.rowGutter) as any;}
-      return gutter.value || FormSizeRowsGutter[styleComputed.value.size];
+      if (props.rowGutter != null) {
+        return removeUnit(props.rowGutter) as any;
+      }
+      return FormSizeRowsGutter[styleComputed.value.size];
+    });
+    /*校验消息的位置*/
+    const validateMessagePosition = computed(() => {
+      if (!!props.validateMessagePosition) {return props.validateMessagePosition;}
+
+      /*纵向文本的情况下，校验消息默认放在左下角*/
+      if (props.verticalLabel) {return FormValidateMessagePosition["bottom-left"];}
+      if (isSingleColumn.value) {
+        /*单列的情况下，校验消息默认放在右侧*/
+        return FormValidateMessagePosition['right'];
+      } else {
+        /*其他都放在右下角*/
+        return FormValidateMessagePosition['bottom-right'];
+      }
     });
     /*根节点样式*/
     const styles = useStyles((styles) => {
@@ -118,7 +138,7 @@ export const useFormLayout = (() => {
         style.marginLeft = unit(-gutter.value / 2);
       }
     });
-    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn };
+    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
     provide(FORM_LAYOUT_PROVIDER, refer);
     return refer;
   };
@@ -178,7 +198,7 @@ export const useFormLayout = (() => {
      * @author  韦胜健
      * @date    2022.9.4 23:22
      */
-    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || eFormLabelAlign.left);
+    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || (form.props.verticalLabel ? eFormLabelAlign.left : eFormLabelAlign.right));
 
     /**
      * 内容对其方式
@@ -187,6 +207,7 @@ export const useFormLayout = (() => {
      */
     const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
 
+    const validateMessagePosition = computed(() => props.validateMessagePosition || form.validateMessagePosition.value);
     /**
      * 根节点样式
      * @author  韦胜健
@@ -196,7 +217,9 @@ export const useFormLayout = (() => {
       styles.width = (() => {
         const totalColumn = Number(form.props.column);
         const itemColumn = column.value;
-        if (itemColumn === totalColumn) {return '100%';}
+        if (itemColumn === totalColumn) {
+          return '100%';
+        }
         return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
       })();
       styles.padding = `0 ${unit(form.gutter.value / 2)}`;
@@ -227,12 +250,16 @@ export const useFormLayout = (() => {
         }
       } else {
         style.width = unit((() => {
-          if (props.singleColumnContentWidth) {return props.singleColumnContentWidth;}
-          if (form.props.singleColumnContentWidth) {return form.props.singleColumnContentWidth;}
+          if (props.singleColumnContentWidth) {
+            return props.singleColumnContentWidth;
+          }
+          if (form.props.singleColumnContentWidth) {
+            return form.props.singleColumnContentWidth;
+          }
           if (form.props.column === 1 && !!form.props.labelWidth) {
             return `calc(100% - ${unit(form.props.labelWidth)})`;
           }
-          return 300;
+          return 400;
         })());
       }
     });
@@ -245,6 +272,7 @@ export const useFormLayout = (() => {
       labelStyles,
       contentStyles,
       form,
+      validateMessagePosition,
     };
   };
 
@@ -259,8 +287,14 @@ const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
 };
 
 const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
-  large: 12,
-  normal: 8,
-  small: 4,
-  mini: 2,
+  large: 32,
+  normal: 24,
+  small: 16,
+  mini: 12,
 };
+
+export const FormValidateMessagePosition = createEnum([
+  'bottom-left',
+  'bottom-right',
+  'right'
+] as const);

package/src/packages/components/Form/validate/useFormValidation.tsx

@@ -2,6 +2,7 @@ import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iForm
 import {provide, reactive} from "plain-design-composition";
 import {$message} from "../../$message";
 import {Validation} from "./createValidation";
+import {AutoLoadingObserver} from "../../AutoLoadingObserver";
 
 /**
  * Form以及FormItem的上下文状态注入关键字
@@ -97,24 +98,28 @@ export function useFormValidation({ props }: { props: iFormValidatePropsType })
      * @date    2022.11.5 23:28
      */
     validate: async (config?: { autoLoading?: boolean, autoAlert?: boolean, }) => {
-      config = config || {};
-      if (config.autoLoading != false) {
-        loading.show();
-      }
-      try {
-        const validateResultData = await parentValidation.methods.validate({
-          state,
-          formData: props.modelValue,
-        });
-        if (!!validateResultData && validateResultData.length > 0) {
-          if (config.autoAlert !== false) {
-            $message(getValidateResultMessage(validateResultData[0], props.modelValue));
+      let promise = (async () => {
+        config = config || {};
+        if (config.autoLoading != false) {
+          loading.show();
+        }
+        try {
+          const validateResultData = await parentValidation.methods.validate({
+            state,
+            formData: props.modelValue,
+          });
+          if (!!validateResultData && validateResultData.length > 0) {
+            if (config.autoAlert !== false) {
+              $message(getValidateResultMessage(validateResultData[0], props.modelValue));
+            }
+            return Promise.reject(validateResultData);
           }
-          return Promise.reject(validateResultData);
+        } finally {
+          loading.hide();
         }
-      } finally {
-        loading.hide();
-      }
+      })();
+      AutoLoadingObserver.subject(promise);
+      return promise;
     },
   };
 

package/src/packages/components/FormItem/FormItemValidateMessage.tsx

@@ -0,0 +1,16 @@
+import {designComponent} from "plain-design-composition";
+import Icon from "../Icon";
+
+export const FormItemValidateMessage = designComponent({
+  props: {
+    message: { type: String }
+  },
+  setup({ props }) {
+    return () => (
+      !!props.message && <div className="form-item-validate-message-inner">
+        <Icon icon="pi-exclamation-polygon-fill"/>
+        <span>{props.message}</span>
+      </div>
+    );
+  },
+});

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

@@ -4,7 +4,7 @@ import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
 import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
-import {useTooltip} from "../useTooltip";
+import {FormItemValidateMessage} from "./FormItemValidateMessage";
 
 export const FormItem = designComponent({
   name: '-form-item',
@@ -63,6 +63,7 @@ export const FormItem = designComponent({
       getComponentCls('form-item'),
       `form-item-label-align-${formItemLayout.labelAlign.value}`,
       `form-item-content-align-${formItemLayout.contentAlign.value}`,
+      `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
       {
         'form-item-required': formItemValidation.isRequired.value,
         'form-item-has-label': !!props.label,
@@ -72,16 +73,23 @@ export const FormItem = designComponent({
       },
     ]);
 
-    useTooltip({
-      ignoreEmptyMessage: true,
-      tooltip: () => ({
-        popperSize: styleComputed.value.size,
-        reference: refs.el,
-        message: formItemValidation.validateMessage.value,
-        status: 'error',
-        placement: formItemLayout.form.props.singleColumnCenter ? 'right-start' : 'bottom-end'
-      })
-    });
+    /*    useTooltip({
+          ignoreEmptyMessage: true,
+          alwaysShow: true,
+          tooltip: () => ({
+            type: uuid(),
+            trigger: 'manual',
+            popperSize: styleComputed.value.size,
+            reference: refs.el,
+            message: formItemValidation.validateMessage.value,
+            status: 'error',
+            placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
+            minWidth: 0,
+            noBackground: true,
+            noArrow: true,
+            offset: 16,
+          })
+        });*/
 
     return {
       refer: {
@@ -102,9 +110,13 @@ export const FormItem = designComponent({
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
             <div className="form-item-content-inner">
               {slots.default()}
+              {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
+              {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>
             {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
           </div>
+          {/*校验消息放在右边的时候，放在外部，使得与输入框横向对齐*/}
+          {formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
         </div>
       )
     };
@@ -112,3 +124,4 @@ export const FormItem = designComponent({
 });
 
 export default FormItem;
+

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

@@ -14,7 +14,7 @@ export const Icon = designComponent({
   inheritPropsType: iHTMLElement,
   props: {
     icon: { type: String },
-    strokeWidth: { type: Number, default: 4 },
+    strokeWidth: { type: Number, default: 2 },
     strokeLinecap: { type: String as PropType<tStrokeLinecap>, default: "butt", },
     strokeLinejoin: { type: String as PropType<tStrokeLinejoin>, default: "miter", },
 

package/src/packages/components/Input/index.scss

@@ -57,8 +57,6 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    padding-right: plv(input-padding-x);
-    padding-left: plv(input-padding-x);
 
     &:not(:first-child) {
       border-left: solid 1px plv(border-color);
@@ -70,7 +68,7 @@
   /*prefix icon右侧的input-box不需要左边框以及左边距*/
   .input-prefix-icon {
     & + .input-box {
-      padding-left: 0;
+      padding-left: 0 !important;
       border-left: none;
     }
   }
@@ -179,9 +177,11 @@
     /*prefix icon以及suffix icon的宽度与高度相同，显示为正方形*/
     .input-prefix-icon {
       width: $height;
+      color: plv(text-2);
     }
     .input-suffix-icon-wrapper {
-      width: 18px;
+      color: plv(text-2);
+      width: plv(input-clear-size-#{$name})
     }
 
     &.input-size-mini {
@@ -189,6 +189,14 @@
         line-height: 1.667;
       }
     }
+
+    /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
+    & > div, & > span, & > input, & > textarea {
+      &:not(.input-suffix-icon-wrapper) {
+        padding-right: plv(input-padding-x-#{$name});
+        padding-left: plv(input-padding-x-#{$name});
+      }
+    }
   }
 
   /*input status*/
@@ -327,12 +335,16 @@
     &:not(.input-empty) {
       .input-box.input-tag-container {
         padding-left: 3px;
+        padding-right: 0;
+        @include comp(auto-width-input) {
+          padding: 0 3px;
+        }
       }
     }
 
     &.input-empty {
       .input-tag-container {
-        .custom-auto-width-input {
+        @include comp(auto-width-input) {
           flex: 1;
         }
       }

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

@@ -106,7 +106,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
       <AutoWidthInput
         modelValue={text.value}
         onChange={handler.onChange}
-        placeholder={editComputed.value.placeholder}
+        placeholder={!(model.value as any)?.length ? editComputed.value.placeholder : undefined}
         disabled={!!editComputed.value.disabled}
         readonly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
         {...props.nativeAttrs}

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

@@ -8,7 +8,7 @@ import {useInputNumberSingle} from "./useInputNumber.single";
 import {useInputNumberMultiple} from "./useInputNumber.multiple";
 
 export const InputNumber = designComponent({
-  name: '-number',
+  name: '-input-number',
   inheritPropsType: Input,
   props: InputNumberPropsOption,
   emits: InputNumberEmitsOption,

package/src/packages/components/InputNumber/number.scss

@@ -33,7 +33,7 @@
       flex-direction: column;
       align-items: stretch;
       justify-content: center;
-      padding: 0;
+      padding: 0 !important;
       position: relative;
 
       &:after {

package/src/packages/components/Object/object.scss

@@ -1,11 +1,18 @@
 @include comp(object) {
   .object-icon {
     cursor: pointer;
-    padding-right: calc(#{plv(input-padding-x)} - 4px);
-    padding-left: calc(#{plv(input-padding-x)} - 4px);
 
     &:active {
       background-color: plv(secondary-light-2);
     }
   }
+  @include sizeMixin(input, ()) {
+    span.object-icon {
+      width: calc(#{$height} - 2px);
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }