plain-design 1.0.0-beta.97 → 1.0.0-beta.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.97",
+  "version": "1.0.0-beta.99",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -11,6 +11,7 @@
     "src/index.ts"
   ],
   "scripts": {
+    "local": "cross-env APP_ENV=local vue-cli-service serve",
     "dev": "cross-env APP_ENV=prod vue-cli-service serve",
     "build": "cross-env APP_ENV=prod vue-cli-service build",
     "release": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress"

package/src/packages/components/$object/createObjectService.tsx

@@ -3,7 +3,7 @@ import {iObjectServiceDefaultConfig, iObjectServicePickConfig, iObjectServicePic
 import {$dialog} from "../$dialog";
 import {AutoTable} from "../AutoTable";
 import {PlcCheck} from "../Table/standard/PlcCheck/PlcCheck";
-import {reactive} from "plain-design-composition";
+import {getComponentCls, reactive} from "plain-design-composition";
 import {deepcopy} from "plain-utils/object/deepcopy";
 import {convertRowToSelected, convertSelectedToRow} from "./object.conver";
 import {createEffects} from "plain-utils/utils/createEffects";
@@ -111,6 +111,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       ...serviceConfig.dialogProps,
       ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
       title: serviceConfig.option.config.title || publicDialogOption.title,
+      externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: handler.handleConfirm,
@@ -168,6 +169,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       ...serviceConfig.dialogProps,
       ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
       title: serviceConfig.option.config.title || publicDialogOption.title,
+      externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: async () => {

package/src/packages/components/AutoTable/auto-table.scss

@@ -1,8 +1,17 @@
 @include prefix(auto-table) {
   position: relative;
 
+  .auto-table-title {
+    font-size: 1.25em;
+    color: plv(text-1);
+  }
+
   @include sizeMixin(auto-table, (font-size)) {
 
+    .auto-table-title {
+      padding-bottom: $margin;
+    }
+
     .table-operation-bar {
       .table-operation-bar-left {
         @include comp(input-group) {
@@ -29,7 +38,7 @@
       }
     }
 
-    & + .#{componentName(auto-table)} {
+    & + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
       margin-top: $margin;
     }
   }

package/src/packages/components/AutoTable/use/useTableOption.table.tsx

@@ -51,6 +51,13 @@ export const useTableOptionTable = AutoModule.createRegistration((
     </>
   });
 
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {config.title && list.push({ key: 'table_title', seq: 3, render });},
+    render: () => (
+      <div className="auto-table-title">{config.title}</div>
+    )
+  });
+
   hooks.onTableRender.use({
     processor: ({ list, render }) => {list.push({ key: 'table', seq: 5, render });},
     render: () => {

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

@@ -111,8 +111,8 @@
           align-items: center;
           justify-content: center;
           z-index: 1;
-          right: -1px;
-          top: -1px;
+          right: 0;
+          top: 0;
           overflow: hidden;
           position: absolute;
           cursor: pointer;

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

@@ -70,6 +70,7 @@ export const FormItemLayoutPropsOption = {
   singleColumnContentWidth: { type: Number },                                         // 单列的时候form item content的宽度
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+  negativeInnerMarginTop: { type: Boolean },                                          // inner节点启用负的marginTop值
 } as const;
 
 /**
@@ -287,6 +288,10 @@ export const useFormLayout = (() => {
       }
     });
 
+    const contentInnerStyles = useStyles(style => {
+      if (props.negativeInnerMarginTop) {style.marginTop = `-${form.rowGutter.value}px`;}
+    });
+
     const refer = {
       colon,
       labelAlign,
@@ -294,6 +299,7 @@ export const useFormLayout = (() => {
       styles,
       labelStyles,
       contentStyles,
+      contentInnerStyles,
       form,
       validateMessagePosition,
     };

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

@@ -108,7 +108,7 @@ 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">
+            <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!}/>}

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

@@ -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: {
@@ -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>
           );

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

@@ -180,6 +180,13 @@ export const ImageUploader = designComponent({
       },
     };
 
+    const imageAttrs = computed(() => {
+      return Object.keys(ImagePropsOptions).reduce((prev, key) => {
+        prev[key] = (props as any)[key];
+        return prev;
+      }, {} as any);
+    });
+
     return {
       refer: {
         refs,
@@ -189,23 +196,18 @@ export const ImageUploader = designComponent({
           {(!!model.value || !!state.chooseBase64) && (
             <Image
               src={model.value || state.chooseBase64}
-              fit={props.fit}
-              alt={props.alt}
-              position={props.position}
               previewOnClick={false}
-              height={props.height}
-              width={props.width}
-              urlPrefix={urlPrefix.value}
               onClick={handler.onClickImage}
+              {...imageAttrs.value}
             />
           )}
           {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
             <Icon icon="pi-image"/>
-            <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>}
           </div>}
           {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
             <Icon icon="pi-image-close"/>
-            <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>}
           </div>}
           <div className="image-uploader-button-group">
             <div className="image-uploader-button" onClick={handler.onClick}>

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

@@ -16,3 +16,9 @@
     }
   }
 }
+
+@include comp(object-dialog) {
+  .auto-table-title {
+    display: none
+  }
+}

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

@@ -29,8 +29,8 @@ export const PlcImage = designComponent({
     const upload = $configuration.use('upload');
 
     const size = computed(() => {
-      const bodyRowHeight = table.props.bodyRowHeight;
-      return Math.ceil((bodyRowHeight as number) - 20);
+      const bodyRowHeight = table.numberState.bodyRowHeight;
+      return Math.ceil((bodyRowHeight as number) - 8);
     });
 
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
@@ -52,6 +52,9 @@ export const PlcImage = designComponent({
             src={row[plc.props.field]}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             fit="cover"
             onClick={() => preview(node.state.index)}
           />
@@ -64,6 +67,9 @@ export const PlcImage = designComponent({
             uploadConfig={props.uploadConfig}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             handleDelete={() => {
               row[plc.props.field!] = null;
               row[props.imgKeyField!] = null;

package/src/packages/components/TabGroup/tabs.scss

@@ -6,6 +6,10 @@
     display: block;
   }
 
+  .tabs-header {
+    background-color: plv(bg-2);
+  }
+
   .tabs-header-item {
     cursor: pointer;
     user-select: none;
@@ -34,6 +38,25 @@
     }
   }
 
+  .inner-tab {
+    & > .#{componentName(auto-table)}:first-child, & > .#{componentName(page-card)}:first-child {
+      .auto-table-body, & > div:first-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
   @include sizeMixin(tab-group, (font-size)) {
+    .tabs-header {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+
+      .tabs-header-list {
+        box-sizing: border-box;
+        padding-left: $margin;
+        padding-right: $margin;
+      }
+    }
   }
 }

package/src/packages/components/useDialog/DialogService.tsx

@@ -52,7 +52,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
        */
       if (dialogProps.position === DialogPositions.center) {
         if (!dialogProps.headAlign) {dialogProps.headAlign = DialogAlign.center;}
-        if (!dialogProps.contentAlign) {dialogProps.contentAlign = DialogAlign.center;}
+        if (!dialogProps.contentAlign && !customOption.render) {dialogProps.contentAlign = DialogAlign.center;}
         if (!dialogProps.footAlign) {dialogProps.footAlign = DialogAlign.center;}
         if (dialogProps.closeType === undefined) {dialogProps.closeType = DialogCloseType.triangle;}
         if (dialogProps.maxWidth == null) {dialogProps.maxWidth = '50vw';}