plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -1,10 +1,10 @@
-import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "plain-design-composition";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 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',
@@ -61,9 +61,10 @@ export const FormItem = designComponent({
 
     const classes = useClasses(() => [
       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-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
+        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
         'form-item-required': formItemValidation.isRequired.value,
         'form-item-has-label': !!props.label,
         'form-item-has-prepend': slots.prepend.isExist(),
@@ -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: {
@@ -89,8 +97,8 @@ export const FormItem = designComponent({
       },
       render: () => (
         <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
-          {props.label !== null && (
-            <div className="form-item-label" style={formItemLayout.labelStyles.value}>
+          {props.label !== null && !props.hideLabel && (
+            <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
               {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
               {slots.labelPrepend()}
               {slots.labelSlot(props.label)}
@@ -100,11 +108,15 @@ export const FormItem = designComponent({
           )}
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
-            <div className="form-item-content-inner">
-              {slots.default()}
+            <div className="form-item-content-inner" style={formItemLayout.contentInnerStyles.value}>
+              <Fragment key="slot_default">{slots.default()}</Fragment>
+              {/*校验消息放下边的时候放在 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/Formatter/index.tsx

@@ -48,7 +48,7 @@ export const Formatter: Record<string, undefined | ((...args: any[]) => string |
   cny: (value: string | number | null | undefined) => {
     if (value == null || value === 0) {return `¥0`;}
     value = Number(value);
-    if (isNaN(value)) {return i18n('base.invalidAmount').d('无效金额');}
+    if (isNaN(value)) {return i18n.$it('base.invalidAmount').d('无效金额');}
     return `¥ ${Formatter.money!(value)}`;
   },
   /**

package/src/packages/components/Grid/GridCol.tsx

@@ -47,10 +47,11 @@ export const GridCol = designComponent({
       return classList;
     });
     const styles = useStyles(style => {
-      if ((Number(row.props.gutter)) !== 0) {
+      const gutter = row.getColGutter();
+      if (!!gutter) {
         style = {
-          paddingLeft: (Number(row.props.gutter)) / 2 + 'px',
-          paddingRight: (Number(row.props.gutter)) / 2 + 'px'
+          paddingLeft: (gutter) / 2 + 'px',
+          paddingRight: (gutter) / 2 + 'px'
         };
       }
       return style;

package/src/packages/components/Grid/GridRow.tsx

@@ -1,8 +1,10 @@
-import {designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
 import {eGridAlign, eGridJustify} from "./grid.utils";
 import {unit} from 'plain-utils/string/unit';
 import {removeUnit} from 'plain-utils/string/removeUnit';
 import './grid.scss';
+import {ThemeSize, useStyle} from "../../uses/useStyle";
+import {ApplicationConfigurationProvider} from "../ApplicationConfigurationProvider";
 
 export const GridRow = designComponent({
   name: 'grid-row',
@@ -10,14 +12,39 @@ export const GridRow = designComponent({
     type: { type: String as PropType<undefined | null | string> },        //类型,type
     align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
     justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
-    gutter: { type: [Number, String], default: 0 },                       //间隔
+    gutter: { type: [Number, String], default: 0 },                       //列间隔
+    rowGutter: { type: [Number, String] },                                //行间隔
   },
   inheritPropsType: HTMLDivElement,
   slots: ['default'],
   provideRefer: true,
   setup({ props, slots }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const { styleComputed } = useStyle();
+
+    const formatGutter = (gutter: string | number | undefined): number | undefined => {
+      if (!gutter) {return undefined;}
+      if (typeof gutter === "string") {
+        if (gutter === 'default') {
+          gutter = styleComputed.value.size;
+        }
+        const varName = `margin-${gutter}`;
+        if (varName in configuration.value.theme.vars) {
+          // @ts-ignore
+          const varValue = configuration.value.theme.vars[varName];
+          return Number(removeUnit(varValue));
+        }
+      }
+      return Number(removeUnit(gutter));
+    };
+
+    const colGutter = computed(() => formatGutter(props.gutter));
+    const rowGutter = computed(() => formatGutter(props.rowGutter));
+
     const classes = useClasses(() => [
       getComponentCls('grid-row'),
       {
@@ -27,13 +54,20 @@ export const GridRow = designComponent({
       }
     ]);
     const styles = useStyles(style => {
-      const gutter = Number(props.gutter);
-      if (gutter !== 0) {
+
+      const gutter = colGutter.value;
+      if (!!gutter) {
         style = {
-          width: `calc(100% + ${unit(props.gutter)})`,
-          marginLeft: `-${unit(Number(removeUnit(props.gutter)) / 2)}`
+          width: `calc(100% + ${unit(gutter)})`,
+          marginLeft: `-${unit(gutter / 2)}`
         };
       }
+
+      if (rowGutter.value) {
+        if (ThemeSize.LIST.indexOf(rowGutter.value as any) == -1) {
+          style.marginBottom = unit(rowGutter.value);
+        }
+      }
       return style;
     });
     // console.log(styles.value)
@@ -42,6 +76,8 @@ export const GridRow = designComponent({
       refer: {
         props,
         refs,
+        getColGutter: () => colGutter.value,
+        getRowGutter: () => rowGutter.value,
       },
       render: () => (
         <div className={classes.value} style={styles.value} ref={onRef.el}>

package/src/packages/components/Grid/grid.scss

@@ -40,8 +40,8 @@ $screens: (
   flex-direction: row;
   flex-wrap: wrap;
 
-  &:not(:last-child) {
-    margin-bottom: 16px;
+  &:last-child {
+    margin-bottom: 0 !important;
   }
 
   &, & * {

package/src/packages/components/Image/image.scss

@@ -6,7 +6,7 @@
   right: 0;
   bottom: 0;
   background-color: rgba(black, 0.85);
-  color: white;
+  color: plv(pbfc);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,7 +213,7 @@
   &.image-uploader-status-fail {
     .image-uploader-fail {
       background-color: rgba(black, 0.85);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -247,7 +247,7 @@
       }
 
       .#{componentName(icon)} {
-        color: white;
+        color: plv(pbfc);
       }
     }
   }
@@ -261,8 +261,9 @@
 
 /*---------------------------------------image-------------------------------------------*/
 
-img.#{componentName(image)} {
+.#{componentName(image)} {
   vertical-align: bottom;
+  box-sizing: border-box;
 }
 
 img.image-preview-on-click {

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

@@ -30,6 +30,14 @@ export const ImagePropsOptions = {
   alt: { type: String },                                                        // 图片描述
   fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
   position: { type: String, default: 'top center' },                            // 图片 object-position 属性
+  maxHeight: { type: [String, Number] },                                        // 最大高度
+  minHeight: { type: [String, Number] },                                        // 最小高度
+  maxWidth: { type: [String, Number] },                                         // 最大宽度
+  minWidth: { type: [String, Number] },                                         // 最小宽度
+  width: { type: [String, Number] },                                            // 图片宽度
+  height: { type: [String, Number] },                                           // 图片高度
+  hideTips: { type: Boolean },                                                  // 隐藏提示文本
+  urlPrefix: { type: String },                                                  // 图片地址前缀
 };
 
 /**
@@ -56,16 +64,9 @@ export const Image = designComponent({
     formatImagePath,
   },
   props: {
-    src: { type: String as PropType<string | null> },                          // 图片地址
-    status: { type: String as PropType<typeof eImageStatus.TYPE> },      // 当前转股固态，fill, container, cover, none, scale-down
-    previewOnClick: { type: Boolean, default: true },                          // 是否点击的时候放大预览图片
-    maxHeight: { type: [String, Number] },                                     // 最大高度
-    minHeight: { type: [String, Number] },                                     // 最小高度
-    maxWidth: { type: [String, Number] },                                      // 最大宽度
-    minWidth: { type: [String, Number] },                                      // 最小宽度
-    width: { type: [String, Number] },                                         // 图片宽度
-    height: { type: [String, Number] },                                        // 图片高度
-    urlPrefix: { type: String },                                               // 图片地址前缀
+    src: { type: String as PropType<string | null> },                           // 图片地址
+    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
+    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
     ...ImagePropsOptions,
   },
   emits: {
@@ -125,9 +126,9 @@ export const Image = designComponent({
     });
 
     const tip = {
-      [eImageStatus.empty]: i18n('image.noPicture').d('无图片'),
-      [eImageStatus.pending]: i18n('base.loading').d('加载中'),
-      [eImageStatus.error]: i18n('base.loadFailed').d('加载失败'),
+      [eImageStatus.empty]: i18n.$it('image.noPicture').d('无图片'),
+      [eImageStatus.pending]: i18n.$it('base.loading').d('加载中'),
+      [eImageStatus.error]: i18n.$it('base.loadFailed').d('加载失败'),
     };
 
     const handler = {
@@ -148,7 +149,7 @@ export const Image = designComponent({
           return (
             <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
               <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
-              <span>{tip[status.value]}</span>
+              {!props.hideTips && <span>{tip[status.value]}</span>}
               {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
             </div>
           );