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

package/src/packages/components/FilterService/filter/filter.datetime.tsx

@@ -23,7 +23,7 @@ export function installFilterDatetime(
   }: iFilterService) {
   touch<iFilterConfigDate>('datetime')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       getDescription: defaultRangeGetDescription,
       ...defaultRangeHandlerAttrs,
       render: ({ formData, option }) => <DatePicker
@@ -55,7 +55,7 @@ export function installFilterDatetime(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} datetime/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

package/src/packages/components/FilterService/filter/filter.district.tsx

@@ -22,7 +22,7 @@ export function installFilterDistrict(
   }: iFilterService) {
   touch('district')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -33,7 +33,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
         const val = formData[option.field]?.district;
         const service = $configuration.get('address')!;
@@ -61,7 +61,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -71,7 +71,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.number.tsx

@@ -23,7 +23,7 @@ export function installFilterNumber(
 
   touch<iFilterConfigNumber>('number')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       ...defaultRangeHandlerAttrs,
       getDescription: defaultRangeGetDescription,
       render: ({ formData, option, confirm }) => (

package/src/packages/components/FilterService/filter/filter.province.tsx

@@ -46,7 +46,7 @@ export function installFilterProvince(
   }: iFilterService) {
   touch('province')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -57,7 +57,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createAddressDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<AddressCascade v-model:province={formData[option.field!]} types="p"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -67,7 +67,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -77,7 +77,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.select.tsx

@@ -32,7 +32,7 @@ export function installFilterSelect(
   }: iFilterService) {
   touch<iFilterConfigSelect>('select')
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]}>{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -42,7 +42,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -52,7 +52,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.text.tsx

@@ -17,7 +17,7 @@ export function installFilterText(
   }: iFilterService) {
   touch('text')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -26,7 +26,7 @@ export function installFilterText(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -35,7 +35,7 @@ export function installFilterText(
       },
     })
     .setHandler('in_like', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} multiple valueType="arraystring"/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -44,7 +44,7 @@ export function installFilterText(
       },
     })
     .setHandler('not_in_like', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} multiple valueType="arraystring"/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

package/src/packages/components/FilterService/filter/fitler.object.tsx

@@ -40,7 +40,7 @@ export function installFilterObject(
   }: iFilterService) {
   touch<iFilterConfigObject>('object')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -49,7 +49,7 @@ export function installFilterObject(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option, confirm }) => (
         <_Object
           v-model={formData[option.field]}
@@ -69,7 +69,7 @@ export function installFilterObject(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createDescriptionGetter(),
       render: ({ formData, option, confirm }) => (
         <_Object
@@ -90,7 +90,7 @@ export function installFilterObject(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createDescriptionGetter(),
       render: ({ formData, option, confirm }) => (
         <_Object

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

@@ -168,9 +168,9 @@ export const FilterService = (() => {
   const defaultNullHandler: Parameters<iFilterType<any>['setHandler']> = [
     'is_null',
     {
-      label: i18n('base.isEmpty').d('为空'),
+      label: () => i18n.$it('base.isEmpty').d('为空'),
       getDescription: () => undefined,
-      render: () => (<Input placeholder={i18n('base.isEmpty').d('为空')} disabled/>),
+      render: () => (<Input placeholder={i18n.$it('base.isEmpty').d('为空')} disabled/>),
       getQueryParam: ({ formData, option }) => {
         const { value, field } = checkEmpty(formData, option);
         if (!field) {return null;}
@@ -182,9 +182,9 @@ export const FilterService = (() => {
   const defaultNotnullHandler: Parameters<iFilterType<any>['setHandler']> = [
     'is_not_null',
     {
-      label: i18n('base.isNotEmpty').d('不为空'),
+      label: () => i18n.$it('base.isNotEmpty').d('不为空'),
       getDescription: () => undefined,
-      render: () => (<Input placeholder={i18n('base.isNotEmpty').d('不为空')} disabled/>),
+      render: () => (<Input placeholder={i18n.$it('base.isNotEmpty').d('不为空')} disabled/>),
       getQueryParam: ({ formData, option }) => {
         const { value, field } = checkEmpty(formData, option);
         if (!field) {return null;}
@@ -214,10 +214,10 @@ export const FilterService = (() => {
    * @date    2023.1.14 23:52
    */
   const defaultRangeGetDescription = ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
-    const start = !formData[option.startField] ? null : `${i18n('base.largerThan').d('大于')}${formData[option.startField]}`;
-    const end = !formData[option.endField] ? null : `${i18n('base.lessThan').d('小于')}${formData[option.endField]}`;
+    const start = !formData[option.startField] ? null : `${i18n.$it('base.largerThan').d('大于')}${formData[option.startField]}`;
+    const end = !formData[option.endField] ? null : `${i18n.$it('base.lessThan').d('小于')}${formData[option.endField]}`;
     if (!start && !end) {return null;}
-    return [start, end].filter(Boolean).join(` ${i18n('base.and').d('并且')} `);
+    return [start, end].filter(Boolean).join(` ${i18n.$it('base.and').d('并且')} `);
   };
 
   return {

package/src/packages/components/FilterService/utils/filter.service.utils.ts

@@ -82,7 +82,7 @@ export interface iFilterHandler<FilterConfig = PlainObject> {
   /*唯一标识*/
   name: string;
   /*显示名称*/
-  label: string,
+  label: () => string,
   /*排序*/
   seq: number,
   /*渲染内容*/

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) {
@@ -33,6 +49,12 @@
     .form-item-content {
       display: inline-block;
       box-sizing: border-box;
+
+      .form-item-content-inner {
+        & > .#{componentName(form-item)}:first-child {
+          margin-top: 0 !important;
+        }
+      }
     }
 
     &.form-item-label-align-left {
@@ -60,16 +82,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 +128,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 {
@@ -130,7 +186,7 @@
   }
 
   &:not(.form-column-1) {
-    overflow: hidden;
+    //overflow: hidden;
     @include prefix(form-item) {
       display: inline-block;
     }
@@ -154,11 +210,15 @@
 
   &.form-vertical-label {
     @include prefix(form-item) {
+      .form-item-label {
+        display: block;
+      }
       .form-item-label, .form-item-content {
         width: 100%;
       }
     }
   }
+
   &:not(.form-vertical-label) {
     @include prefix(form-item) {
       .form-item-label {
@@ -166,4 +226,27 @@
       }
     }
   }
+
+  &.form-hide-label {
+    .form-item-label {
+      display: none;
+    }
+  }
+
+  &.form-full {
+    height: 100%;
+    width: 100%;
+
+    .form-inner {
+      height: 100%;
+      width: 100%;
+      margin: 0 !important;
+    }
+  }
+
+  &.form-input-mode-text {
+    .form-item-label, .form-item-content {
+      line-height: calc(1em + 8px) !important;
+    }
+  }
 }

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

@@ -13,6 +13,7 @@ export const Form = designComponent({
     DefaultFormLabelWidth,
   },
   props: {
+    full: { type: Boolean },
     ...EditProps,
     ...StyleProps,
     ...FormValidatePropsOption,
@@ -25,7 +26,12 @@ export const Form = designComponent({
   setup({ props, slots }) {
 
     /*编辑控制*/
-    useEdit({ adjust: (ret) => {ret.loading = null;} });
+    useEdit({
+      adjust: (ret) => {
+        ret.loading = null;
+        props.inputMode === 'text' && (ret.readonly = true);
+      }
+    });
 
     /*样式控制*/
     const { styleComputed } = useStyle();
@@ -43,6 +49,9 @@ export const Form = designComponent({
       {
         ['form-vertical-label']: !!props.verticalLabel,
         ['form-column-center']: !!props.singleColumnCenter,
+        ['form-hide-label']: !!props.hideLabel,
+        'form-full': props.full,
+        'form-input-mode-text': props.inputMode === 'text',
       },
     ]);