plain-design 1.0.0-beta.75 → 1.0.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.75",
+  "version": "1.0.0-beta.77",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,15 +1,10 @@
 import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
 import {iThemeConfiguration} from "../theme/theme";
-import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../../uses/useStyle";
+import {UseStyleProvideData} from "../../../uses/useStyle";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
-  default: {
-    size: typeof ThemeSize.TYPE,
-    shape: typeof ThemeShape.TYPE,
-    inputMode: typeof InputMode.TYPE,
-    buttonMode: typeof ThemeMode.TYPE,
-  },
+  default: UseStyleProvideData['default'];
 }
 
 export const ApplicationConfigurationProvider = (() => {

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -102,5 +102,18 @@
         color: plv(error-6);
       }
     }
+
+    &:first-child {
+      .arrow-step-content {
+        border-top-left-radius: plv(box-size-normal-border-radius);
+        border-bottom-left-radius: plv(box-size-normal-border-radius);
+      }
+    }
+    &:last-child {
+      .arrow-step-content {
+        border-top-right-radius: plv(box-size-normal-border-radius);
+        border-bottom-right-radius: plv(box-size-normal-border-radius);
+      }
+    }
   }
 }

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,29 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './box.scss';
+
+export const Box = designComponent({
+  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/ColorPicker/color-picker.scss

@@ -31,6 +31,12 @@
       }
     }
   }
+
+  &.input-mode-text {
+    .color-picker-tag {
+      margin-left: 0px;
+    }
+  }
 }
 
 @include prefix(color-button) {

package/src/packages/components/DatePicker/createDateRender.multiple.tsx

@@ -165,6 +165,7 @@ export function createDateRenderMultiple({ props, emit, formatString, getPublicP
       slotRender: slots.default,
       defaultRender: () => (
         <Input
+          className={getComponentCls('date-picker')}
           ref={onRef.input}
           suffixIcon="pi-calendar"
           multiple

package/src/packages/components/DatePicker/createDateRender.single.tsx

@@ -146,6 +146,7 @@ export function createDateRenderSingle({ props, emit, slots, hooks, formatString
       slotRender: slots.default,
       defaultRender: () => (
         <Input
+          className={getComponentCls('date-picker')}
           ref={onRef.input}
           suffixIcon="pi-calendar"
           modelValue={state.input}

package/src/packages/components/DatePicker/createRangeDateRender.range.tsx

@@ -6,6 +6,7 @@ import {DatePanel} from "./panel/DatePanel";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 /**
  * 日期范围选择
@@ -14,7 +15,7 @@ import {iKeyboardEvent} from "plain-design-composition";
  */
 export function createRangeDateRenderRange(params: tDateCompositionPublicParams) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicDateAttrs, formatString, slots } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicDateAttrs, formatString, slots, styleComputed } = params;
 
   const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference, focusRange } = useRangeDateRender({
     ...params,
@@ -66,30 +67,37 @@ export function createRangeDateRenderRange(params: tDateCompositionPublicParams)
       slotRender: slots.default,
       defaultRender: () => (
         <Input{...getInputAttrs()}>
-          <FixInput
-            ref={onRef.start}
-            type="text"
-            placeholder={props.startPlaceholder}
-            className="input-box input-fill"
-            value={state.input.start}
-            onInput={handler.onStartInputChange}
-            onKeyDown={customHandler.onKeyboardInput}
-            disabled={!!editComputed.value.disabled}
-            readOnly={!!editComputed.value.readonly}
-            onFocus={focusRange.onStartFocus}
-          />
-          <FixInput
-            ref={onRef.end}
-            type="text"
-            placeholder={props.endPlaceholder}
-            className="input-box input-fill"
-            value={state.input.end}
-            onInput={handler.onEndInputChange}
-            onKeyDown={customHandler.onKeyboardInput}
-            disabled={!!editComputed.value.disabled}
-            readOnly={!!editComputed.value.readonly}
-            onFocus={focusRange.onEndFocus}
-          />
+          {renderInputModeTextRangeValue({
+            styleComputed,
+            startValue: state.input.start,
+            endValue: state.input.end,
+            defaultRender: () => <>
+              <FixInput
+                ref={onRef.start}
+                type="text"
+                placeholder={props.startPlaceholder}
+                className="input-box input-fill"
+                value={state.input.start}
+                onInput={handler.onStartInputChange}
+                onKeyDown={customHandler.onKeyboardInput}
+                disabled={!!editComputed.value.disabled}
+                readOnly={!!editComputed.value.readonly}
+                onFocus={focusRange.onStartFocus}
+              />
+              <FixInput
+                ref={onRef.end}
+                type="text"
+                placeholder={props.endPlaceholder}
+                className="input-box input-fill"
+                value={state.input.end}
+                onInput={handler.onEndInputChange}
+                onKeyDown={customHandler.onKeyboardInput}
+                disabled={!!editComputed.value.disabled}
+                readOnly={!!editComputed.value.readonly}
+                onFocus={focusRange.onEndFocus}
+              />
+            </>
+          })}
         </Input>
       )
     })

package/src/packages/components/DatePicker/createRangeDateRender.separate.tsx

@@ -7,6 +7,7 @@ import {DatePanel} from "./panel/DatePanel";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 /**
  * 日期范围选择（分开选择）
@@ -15,7 +16,7 @@ import {iKeyboardEvent} from "plain-design-composition";
  */
 export function createRangeDateRenderSeparate(params: tDateCompositionPublicParams) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicDateAttrs, formatString } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicDateAttrs, formatString, styleComputed } = params;
 
   const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeDateRender({
     ...params,
@@ -91,8 +92,15 @@ export function createRangeDateRenderSeparate(params: tDateCompositionPublicPara
 
   effects.push(hooks.onRenderInput.use(() => (
     <Input{...getInputAttrs()}>
-      <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-      <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+      {renderInputModeTextRangeValue({
+        styleComputed,
+        startValue: state.input.start,
+        endValue: state.input.end,
+        defaultRender: () => <>
+          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+        </>
+      })}
     </Input>
   )));
 

package/src/packages/components/DatePicker/date.utils.tsx

@@ -9,7 +9,7 @@ import {classnames} from "plain-utils/dom/classnames";
 import {UseDateType} from "./panel/useDatePanel";
 import {eMultipleValueType} from "../../uses/useMultipleModel";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {Input} from "../Input";
 import i18n from "../i18n";
 import {iPopupEditorUseOption} from "../usePopupEditor";
@@ -390,6 +390,7 @@ export type tDateCompositionPublicParams = {
   },
   getPublicPopperAttrs: () => any,
   editComputed: tEditComputed,
+  styleComputed: tStyleComputed,
   getInheritPublicDateAttrs: () => any,
   displayPattern: { value: RegExp },
   today: { value: PDate },

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

@@ -62,7 +62,7 @@ export const DatePicker = designComponent({
       onReady: emit.onReady,
     });
 
-    const dateCompositionPublicParams: tDateCompositionPublicParams = { props, emit, hooks, slots, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin };
+    const dateCompositionPublicParams: tDateCompositionPublicParams = { props, emit, hooks, slots, formatString, getPublicPopperAttrs, editComputed, styleComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin };
 
     useWatchAutoClear(() => ({
       range: props.range,

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

@@ -290,6 +290,7 @@ export function useRangeDateRender(
   );
 
   const getInputAttrs = () => ({
+    className: getComponentCls('date-picker'),
     ref: onRef.input,
     suffixIcon: 'pi-calendar',
     placeValue: [startModel.value, endModel.value].join('-'),

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

@@ -223,4 +223,21 @@
       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();
@@ -44,6 +50,8 @@ 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',
       },
     ]);
 

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

@@ -2,7 +2,7 @@ import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "
 import {createEnum} from "plain-utils/utils/createEnum";
 import {unit} from "plain-utils/string/unit";
 import {removeUnit} from "plain-utils/string/removeUnit";
-import {ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+import {InputMode, ThemeSize, tStyleComputed} from "../../../uses/useStyle";
 
 /**
  * 表单的文本以及内容对齐方式
@@ -43,6 +43,7 @@ export const FormLayoutPropsOption = {
   rowGutter: { type: Number },                                                            // 行间隔
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
   hideLabel: { type: Boolean },                                                           // 隐藏form-item的label
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                         // 内部Input的类型mode
 } as const;
 
 /**
@@ -107,6 +108,7 @@ export const useFormLayout = (() => {
     });
     /*行间距*/
     const rowGutter = computed((): number => {
+      if (props.inputMode === 'text') {return 4;}
       if (props.rowGutter != null) {
         return removeUnit(props.rowGutter) as any;
       }

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

@@ -54,7 +54,7 @@ export function createValidation() {
    * @author  韦胜健
    * @date    2022.11.5 22:43
    */
-  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"] }) => {
+  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"], anotherRules?: iFormValidatePropsType['anotherRules'] }) => {
 
     /**
      * 从FormItem等子组件中收集来的校验规则
@@ -68,7 +68,11 @@ export function createValidation() {
      * @author  韦胜健
      * @date    2022/8/22 18:22
      */
-    const rules = computed((): iValidateRule[] => ruleGetters.value.map((i) => i()).flat(1));
+    const rules = computed((): iValidateRule[] => {
+      let ret = ruleGetters.value.map((i) => i()).flat(1);
+      !!formProps.anotherRules && (ret = [...formProps.anotherRules, ...ret]);
+      return ret;
+    });
 
     /**
      * field映射label

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

@@ -69,7 +69,8 @@ export type iFormItemValidatePropsType = ExtractPropTypes<typeof FormItemValidat
  */
 export const FormValidatePropsOption = {
   modelValue: { type: Object as PropType<PlainObject> },                                          // 校验的表单对象
-  rules: { type: Object as PropType<Record<string, iValidateRule | iValidateRule[]>> },           // 额外的校验规则，key为field，value为校验规则
+  rules: { type: Object as PropType<Record<string, iValidateRule | iValidateRule[]>> },           // 额外的校验规则，key为field，value为校验规则，依赖于FormItem，如果对应field的FormItem不存在，则这个校验规则也不存在
+  anotherRules: { type: Array as PropType<iAnotherRule[]> },                                      // 额外的校验规则，不同于rules, 不依赖于FormItem，一直有效
   validateMode: { type: String as PropType<typeof eFormValidateMode.TYPE> },                      // 校验模式，看eFormValidateMode说明
   // associateFields: { type: Object as PropType<Record<string, string>> },                       // 校验关联字段，当key的field校验时自动校验value对应的field
   hideRequiredAsterisk: { type: Boolean },                                                        // 是否隐藏label旁边的红色必填星号标识
@@ -127,6 +128,8 @@ export interface iValidateRule {
   message?: string | ((value: any, formData: PlainObject | null | undefined) => string), // 校验失败的时候的提示信息
 }
 
+export type iAnotherRule = Omit<iValidateRule, 'label' | 'field'> & { label: string, field: string }
+
 /**
  * 注册校验类型的函数类型
  * @author  韦胜健

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

@@ -1,4 +1,4 @@
-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";
@@ -98,7 +98,7 @@ 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}>
+            <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)}
@@ -109,7 +109,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">
-              {slots.default()}
+              <Fragment key="slot_default">{slots.default()}</Fragment>
               {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
               {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>

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

@@ -52,6 +52,16 @@
     flex: 1;
   }
 
+  .input-text {
+    word-break: break-all;
+    border: none !important;
+  }
+
+  .input-mode-text-separate-icon {
+    align-self: center;
+    margin: 0 0.5em;
+  }
+
   /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
   & > div, & > span, & > input, & > textarea {
     box-sizing: border-box;
@@ -63,6 +73,14 @@
     }
   }
 
+  &.input-mode-text {
+    & > div, & > span, & > input, & > textarea {
+      &:not(:first-child) {
+        border-left: none;
+      }
+    }
+  }
+
   /*prefix icon and suffix icon*/
 
   /*prefix icon右侧的input-box不需要左边框以及左边距*/
@@ -191,10 +209,12 @@
     }
 
     /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
-    & > div, & > span, & > input, & > textarea {
-      &:not(.input-suffix-icon-wrapper) {
-        padding-right: plv(input-padding-x-#{$name});
-        padding-left: plv(input-padding-x-#{$name});
+    &:not(.input-mode-text) {
+      & > div, & > span, & > input, & > textarea {
+        &:not(.input-suffix-icon-wrapper) {
+          padding-right: plv(input-padding-x-#{$name});
+          padding-left: plv(input-padding-x-#{$name});
+        }
       }
     }
   }
@@ -211,9 +231,11 @@
       background-color: plv(background-color);
       border-color: $color-3;
     }
-    @include hover(input) {
-      background-color: $color-light-3;
-      border-color: $color-light-4;
+    &:not(.input-mode-text) {
+      @include hover(input) {
+        background-color: $color-light-3;
+        border-color: $color-light-4;
+      }
     }
     @include focus(input) {
       border-color: $color-5;
@@ -332,7 +354,7 @@
       }
     }
 
-    &:not(.input-empty) {
+    &:not(.input-empty):not(.input-mode-text) {
       .input-box.input-tag-container {
         padding-left: 3px;
         padding-right: 0;
@@ -360,7 +382,7 @@
       padding: 0;
       height: auto;
 
-      span, textarea {
+      .input-textarea-shadow, textarea {
         display: inline-block;
         padding: 3px 12px;
         box-sizing: border-box;
@@ -368,7 +390,7 @@
         word-break: break-all;
       }
 
-      span {
+      .input-textarea-shadow {
         opacity: 0;
         pointer-events: none;
         min-height: calc(30px + 2em);

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
@@ -29,7 +29,11 @@ export const Input = designComponent({
 
     const { refs, onRef } = useRefs(InputRefsOptions);
     const { styleComputed } = useStyle();
-    const { editComputed, editState } = useEdit();
+    const { editComputed, editState } = useEdit({
+      adjust: (ret) => {
+        if (styleComputed.value.inputMode === 'text') {ret.readonly = true;}
+      },
+    });
     const parentPopupId = useParentPopupId();
     const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props);
     const hooks = useInputHooks();
@@ -76,7 +80,7 @@ export const Input = designComponent({
       attrs.className,
       `input-size-${styleComputed.value.size}`,
       `input-shape-${styleComputed.value.shape}`,
-      `input-mode-${props.mode || styleComputed.value.default.inputMode}`,
+      `input-mode-${styleComputed.value.inputMode}`,
       {
         [`input-status-${status.value}`]: !!status.value,
         [`input-align-${props.align}`]: !!props.align,
@@ -88,8 +92,12 @@ export const Input = designComponent({
     ]));
     const styles = useStyles((style) => {
       style.display = 'inline-flex';
-      if (!!props.width) {
-        style.width = unit(props.width);
+      if (styleComputed.value.inputMode === 'text') {
+        style.width = 'unset';
+      } else {
+        if (!!props.width) {
+          style.width = unit(props.width);
+        }
       }
       !!attrs.style && Object.assign(style, attrs.style);
     });
@@ -126,7 +134,7 @@ export const Input = designComponent({
             {content}
 
             {inputSuffixIcon.render()}
-            {hooks.onRenderSuffix.exec(slots.suffix())}
+            {hooks.onRenderSuffix.exec(<Fragment key="slot_suffix">{slots.suffix()}</Fragment>)}
           </span>
         );
       },

package/src/packages/components/Input/input.utils.ts

@@ -1,7 +1,7 @@
 import {tInputHooks} from "./uses/useInputHooks";
 import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "plain-design-composition";
 import {createError} from "../../utils/createError";
-import {InputMode, StyleProps, tStyleComputed} from "../../uses/useStyle";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
 import {iSelectOptionProps} from "../Select/select.utils";
 
@@ -11,7 +11,6 @@ export const InputPropsOption = {
 
   /*public*/
   type: { type: String },                                                       // input type
-  mode: { type: String as PropType<typeof InputMode.TYPE> },                    // input的样式类型,flat填充，stroke线型
   modelValue: {},                                                               // 输入框双向绑定值
   placeValue: {},                                                               // 与modelValue一起判断当前是否有值
   isFocus: { type: Boolean },                                                   // 当前是否为获取焦点的状态

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

@@ -13,7 +13,7 @@ import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
  * @author  韦胜健
  * @date    2022.5.22 10:06
  */
-export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit }: iInputCompositionData) => {
+export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit, styleComputed }: iInputCompositionData) => {
 
   const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText);
   const { effects } = createEffects();
@@ -22,7 +22,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
 
   const handler = {
     onRef: (input: typeof AutoWidthInput.use.class | null) => hooks.onRefInput.exec(input?.refs.input || null),
-    onMousedownContainer: () => {delay(23).then(() => refs.input!.focus());},
+    onMousedownContainer: () => {delay(23).then(() => refs.input?.focus());},
     onRemoveTag: async (index: number) => {
       if (!editComputed.value.editable) {return;}
       if (!model.value || !model.value.length) {return; }
@@ -103,17 +103,19 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
           {!!editComputed.value.editable && <Icon icon="pi-close" onClick={() => handler.onRemoveTag(index)}/>}
         </span>
       ))}
-      <AutoWidthInput
-        modelValue={text.value}
-        onChange={handler.onChange}
-        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}
-        ref={handler.onRef as any}
-        key="auto-width-input"
-        minWidth="1px"
-      />
+      {styleComputed.value.inputMode !== 'text' && (
+        <AutoWidthInput
+          modelValue={text.value}
+          onChange={handler.onChange}
+          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}
+          ref={handler.onRef as any}
+          key="auto-width-input"
+          minWidth="1px"
+        />
+      )}
     </span>
   )));