plain-design 1.0.0-beta.10 → 1.0.0-beta.101

package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx

@@ -0,0 +1,136 @@
+import {PartialFields} from "../../utils/type";
+import {createHooks} from "plain-design-composition";
+import {createCounter} from 'plain-utils/utils/createCounter';
+import {notNull} from "plain-utils/utils/notNull";
+
+export const ImagePreviewerConstants = {
+  /*画廊高度，默认70px*/
+  DEFAULT_GALLERY_HEIGHT: 70,
+  /*画廊与大图之间的距离，默认24px*/
+  DEFAULT_SEPARATOR_HEIGHT: 0,
+};
+
+export interface iImagePreviewerOptionPartialFields {
+  imageElement?: null | HTMLImageElement,                 // 点击的图片原始dom对象，如果有传这个属性对象的话会有一个显示放大动画
+  galleryHeight: number,                                  // 底部画廊的高度
+  separatorHeight: number,                                // 底部画廊距离图片显示区域的距离
+  autoHeight: boolean,                                    // 自动高度，默认是true。这样设置之后图片会撑满宽度，高度自动；关闭的时候会设置高度100%，图片宽度自动
+  mask: boolean,                                          // 显示背部遮罩
+  button?: boolean | {                                    // 顶部按钮栏控制，button为false则禁用所有按钮；为对象则单独禁用某个按钮
+    zoomIn?: boolean,                                     // 放大按钮
+    zoomOut?: boolean,                                    // 缩小按钮
+    clockwise?: boolean,                                  // 顺时针旋转按钮
+    anticlockwise?: boolean,                              // 逆时针旋转按钮
+    reset?: boolean,                                      // 重置按钮
+    close?: boolean,                                      // 关闭按钮
+  },
+  swipeButton?: boolean                                   // 左右切换按钮控制，swipeButton为false则禁用前后按钮
+  gallery?: boolean,                                      // 底部画廊控制，为false则禁用底部画廊
+  globalKeyboardEvent?: boolean                           // 监听全局的键盘事件，默认不监听全局键盘按键事件，而是等鼠标移入的时候才监听
+  maskColor?: string,                                     // 遮罩颜色
+  disableZoomOnWheel?: boolean,                           // 禁用滚轮缩放
+  /*---------------------------------------以下为不可配置属性-------------------------------------------*/
+  id: string,                                             // option唯一标识
+  oldSourceImageOpacity?: string                          // 原始的img对象的opacity属性值
+}
+
+export interface iImagePreviewerOption extends iImagePreviewerOptionPartialFields {
+  current: number;                                        // 当前显示的元素索引
+  urls: { url: string, thumbUrl: string }[];              // 所有展示的图片，url为大图地址，thumbUrl为底部画廊图片预览地址
+}
+
+export type iImagePreviewerParamOption = string | string[] | iImagePreviewerOption['urls'] | Omit<PartialFields<iImagePreviewerOption, keyof iImagePreviewerOptionPartialFields>, 'urls'> & { urls: string[] | iImagePreviewerOption['urls'] }
+
+export const ImagePreviewerHooks = {
+  /*PreviewerComponent挂载完毕事件*/
+  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>()
+};
+
+const nextOptionId = createCounter('image_previewer');
+
+export function createImagePreviewerOption(
+  param: iImagePreviewerParamOption,
+  imageElement?: HTMLImageElement,
+  defaultParam?: Partial<iImagePreviewerOption>
+): iImagePreviewerOption {
+  if (typeof param === "string") {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: [{ url: param, thumbUrl: param }],
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (Array.isArray(param)) {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: param.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (!!imageElement) {
+    param.imageElement = imageElement;
+  }
+  return {
+    autoHeight: true,
+    mask: false,
+    galleryHeight: notNull(param.galleryHeight, ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT),
+    separatorHeight: notNull(param.separatorHeight, ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT),
+    ...defaultParam,
+    ...param,
+    id: nextOptionId(),
+    urls: param.urls.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+  };
+}
+
+/**
+ * 获取imageElement在containerElement容器中居中铺满的位置信息
+ * @author  韦胜健
+ * @date    2024/1/10 18:50
+ */
+export const getCenterRect = (
+  {
+    imageElement, containerElement
+  }: {
+    imageElement: HTMLDivElement,
+    containerElement: HTMLDivElement | { containerRatio: number, containerHeight: number, containerWidth: number },
+  }
+) => {
+  const imageRatio = Number((imageElement.offsetWidth / imageElement.offsetHeight).toFixed(2));
+  const { containerRatio, containerHeight, containerWidth } = 'tagName' in containerElement ? (() => {
+    const containerRatio = Number((containerElement.offsetWidth / containerElement.offsetHeight).toFixed(2));
+    return {
+      containerRatio,
+      containerHeight: containerElement.offsetHeight,
+      containerWidth: containerElement.offsetWidth,
+    };
+  })() : containerElement;
+
+
+  if (imageRatio > containerRatio) {
+    /*宽度更宽，固定宽度为屏幕宽度缩放*/
+    const left = 0;
+    const width = containerWidth;
+    const height = Number((imageElement.offsetHeight / imageElement.offsetWidth * width).toFixed(0));
+    const top = Number(((containerHeight - height) / 2).toFixed(0));
+    return { top, left, width, height };
+  } else {
+    /*高度更高，固定高度将宽度缩放*/
+    const top = 0;
+    const height = containerHeight;
+    const width = Number((imageElement.offsetWidth / imageElement.offsetHeight * height).toFixed(0));
+    const left = Number(((containerWidth - width) / 2).toFixed(0));
+    return { top, left, width, height };
+  }
+};

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

@@ -0,0 +1,5 @@
+import {ImagePreviewer} from "./ImagePreviewer";
+
+export default ImagePreviewer;
+
+export {ImagePreviewer};

package/src/packages/components/ImagePreviewer/previewer-loading.scss

@@ -0,0 +1,52 @@
+.previewer-loading {
+
+  $size: 1em;
+
+  height: $size;
+  width: $size;
+
+  .plain-loading-tag {
+    $centerRadius: (0.5*$size)/1.2;
+    $itemWidth: (0.35*$size)/1.2;
+    $itemHeight: (0.1*$size)/1.2;
+    $width: $centerRadius + $itemWidth * 2;
+    $height: $width;
+
+    width: $width;
+    height: $height;
+    position: relative;
+    display: block;
+
+    .plain-loading-inner {
+      background-color: currentColor;
+      display: inline-block;
+      width: $itemWidth;
+      height: $itemHeight;
+      margin-top: $itemHeight / 2 * -1;
+      margin-left: $centerRadius / 2;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
+      @for $i from 1 through 12 {
+        &:nth-child(#{$i}) {
+          transform: rotate(($i - 1) * 30deg);
+          animation: plain-loading-tag 1s linear infinite #{-1 + $i / 12}s;
+        }
+      }
+      @keyframes plain-loading-tag {
+        0% {
+          opacity: 1;
+        }
+        @for $i from 1 through 11 {
+          #{$i / 12 * 100}% {
+            opacity: 1 - $i / 12;
+          }
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

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('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('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/Input/index.scss

@@ -41,7 +41,7 @@
     border: none;
     background-color: transparent;
     box-sizing: border-box;
-    line-height: 1.5715;
+    line-height: plv(line-height);
     padding-top: 3px;
     padding-bottom: 3px;
     color: plv(text-2);
@@ -52,25 +52,41 @@
     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;
     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);
     }
   }
 
+  &.input-mode-text {
+    & > div, & > span, & > input, & > textarea {
+      &:not(:first-child) {
+        border-left: none;
+      }
+    }
+  }
+
   /*prefix icon and suffix icon*/
 
   /*prefix icon右侧的input-box不需要左边框以及左边距*/
   .input-prefix-icon {
     & + .input-box {
-      padding-left: 0;
+      padding-left: 0 !important;
       border-left: none;
     }
   }
@@ -179,9 +195,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 +207,16 @@
         line-height: 1.667;
       }
     }
+
+    /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
+    &: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});
+        }
+      }
+    }
   }
 
   /*input status*/
@@ -203,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;
@@ -321,18 +351,32 @@
           align-items: center;
           justify-content: center;
         }
+
+        &.input-tag-container-wrap {
+          .input-tag {
+            height: auto;
+            min-height: calc(#{$height} - 8px);
+            white-space: nowrap;
+            word-break: break-all;
+            max-width: 100%;
+          }
+        }
       }
     }
 
-    &:not(.input-empty) {
+    &:not(.input-empty):not(.input-mode-text) {
       .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;
         }
       }
@@ -348,15 +392,15 @@
       padding: 0;
       height: auto;
 
-      span, textarea {
+      .input-textarea-shadow, textarea {
         display: inline-block;
         padding: 3px 12px;
         box-sizing: border-box;
-        line-height: 1.5715;
+        line-height: plv(line-height);
         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, onMounted, useClasses, useRefs, useStyles} from "plain-design-composition";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
@@ -17,6 +17,7 @@ import {useFocusHandler} from "../../uses/useFocusHandler";
 import {useSuggestionInput} from "./useSuggestionInput";
 import {useMultipleModel} from "../../uses/useMultipleModel";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import {delay} from "plain-utils/utils/delay";
 
 export const Input = designComponent({
   name: '-input',
@@ -29,7 +30,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 +81,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 +93,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);
     });
@@ -98,6 +107,13 @@ export const Input = designComponent({
     hooks.onInput.use(val => emit.onInput(val));
     hooks.onSuggestion.use(data => emit.onSuggestion(data));
 
+    onMounted(async () => {
+      await delay(78);
+      if (props.autoFocus) {
+        refs.input?.focus();
+      }
+    });
+
     return {
       refer: {
         model,
@@ -126,7 +142,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

@@ -11,7 +11,6 @@ export const InputPropsOption = {
 
   /*public*/
   type: { type: String },                                                       // input type
-  mode: { type: String as PropType<'flat' | 'stroke'> },                        // input的样式类型,flat填充，stroke线型
   modelValue: {},                                                               // 输入框双向绑定值
   placeValue: {},                                                               // 与modelValue一起判断当前是否有值
   isFocus: { type: Boolean },                                                   // 当前是否为获取焦点的状态
@@ -27,10 +26,12 @@ export const InputPropsOption = {
   multipleSeparator: { default: /[\s\n,，]/ },                                  // 多值输入的时候的分隔符。类型为字符串或者正则表达式；有这个分隔符的话，会自动按照这个分隔符对输入的文本分割
   fixedWidth: { type: Boolean },                                                // InputGroup下是否固定宽度
   bare: { type: Boolean },                                                      // 去掉包裹节点
+  loadingType: { type: String },                                                // loading类型
+  autoFocus: { type: Boolean },                                                 // 初始化时自动获取焦点
 
   /*clear*/
   noClear: { type: Boolean },                                                   // 去掉清空按钮
-  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },     // 自定义处理清空逻辑
+  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },       // 自定义处理清空逻辑
 
   /*textarea*/
   textarea: { type: Boolean },                                                  // 当前是否为文本域输入框

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

@@ -1,19 +1,19 @@
 import {AutoWidthInput} from "../AutoWidthInput";
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
 import Icon from "../Icon";
-import {iHTMLElement, useClasses, useModel, useRefs, watch} from "plain-design-composition";
+import {iHTMLElement, useClasses, useModel, useRefs} from "plain-design-composition";
 import {getKey, KEY} from "../KeyboardService";
 import {delay} from "plain-utils/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "plain-utils/utils/createEffects";
-import {ClientZoom} from "../..";
+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={editComputed.value.placeholder}
-        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>
   )));
 
@@ -121,80 +123,3 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
 
   return effects.clear;
 });
-
-function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
-
-  const staticState = {
-    isDragging: false,
-    el: null as null | undefined | HTMLElement,
-    start: {
-      x: 0,
-      left: 0,
-      width: 0,
-    },
-    move: {
-      x: 0
-    }
-  };
-
-  const { effects } = createEffects();
-
-  const handler = {
-    mousedown: (e: MouseEvent) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.isDragging = false;
-      staticState.start = {
-        x: clientX,
-        left: staticState.el!.scrollLeft,
-        width: staticState.el!.scrollWidth,
-      };
-      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
-    },
-    mousemove: (e: MouseEvent) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.move.x = clientX;
-      const durX = staticState.move.x - staticState.start.x;
-      if (!staticState.isDragging) {
-        if (Math.abs(durX) > 5) {
-          staticState.isDragging = true;
-        }
-      }
-      if (!staticState.isDragging) {
-        return;
-      }
-      staticState.el!.scrollLeft = staticState.start.left - durX;
-    },
-    mouseup: () => {
-      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
-    },
-    onWheel: (e: WheelEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const el = e.currentTarget as HTMLElement;
-      const delta = e.deltaX + e.deltaY;
-      el.scrollLeft += delta;
-    },
-  };
-
-  effects.push(watch(() => getEl(), el => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-    staticState.el = el;
-    if (!staticState.el) {return;}
-    staticState.el.addEventListener('mousedown', handler.mousedown);
-    staticState.el.addEventListener('wheel', handler.onWheel);
-  }));
-
-  effects.push(() => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-  });
-
-  return effects.clear;
-}

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

@@ -4,7 +4,7 @@ import {createEffects} from "plain-utils/utils/createEffects";
 import {iKeyboardEvent} from "plain-design-composition";
 import {FixInput} from "../../utils/FixInput";
 
-export const useSingleInput = createEffectiveHandler(({ props, hooks, model, editComputed }: iInputCompositionData) => {
+export const useSingleInput = createEffectiveHandler(({ props, hooks, model, editComputed, styleComputed }: iInputCompositionData) => {
   const { effects } = createEffects();
 
   const handler = {
@@ -24,18 +24,20 @@ export const useSingleInput = createEffectiveHandler(({ props, hooks, model, edi
   effects.push(hooks.onRenderDefault.use((prev) => <>
     {prev}
     {!props.multiple && !props.textarea && (
-      <FixInput
-        ref={handler.onRef}
-        className="input-box input-fill"
-        type={props.type || "text"}
-        placeholder={editComputed.value.placeholder!}
-        value={model.value}
-        onInput={handler.onInput}
-        disabled={!!editComputed.value.disabled}
-        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        onKeyDown={handler.onKeydown}
-        {...props.nativeAttrs}
-      />
+      styleComputed.value.inputMode === 'text' ?
+        <span className="input-text">{model.value}</span> :
+        <FixInput
+          ref={handler.onRef}
+          className="input-box input-fill"
+          type={props.type || "text"}
+          placeholder={editComputed.value.placeholder!}
+          value={model.value}
+          onInput={handler.onInput}
+          disabled={!!editComputed.value.disabled}
+          readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+          onKeyDown={handler.onKeydown}
+          {...props.nativeAttrs}
+        />
     )}
   </>));