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

package/src/packages/components/TimePicker/time.utils.ts

@@ -2,7 +2,7 @@ import {useTimeHooks} from "./useTimeHooks";
 import {PDate} from "../../utils/plainDate";
 import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {TimePanelProps} from "./panel/TimePanel";
 import Input from "../Input";
 import {iPopupEditorUseOption} from "../usePopupEditor";
@@ -39,6 +39,7 @@ export type tTimeCompositionParams = {
   emit: ComponentEvent<typeof TimeEmitsOption>["emit"],
   props: iTimePropsType,
   editComputed: tEditComputed,
+  styleComputed: tStyleComputed,
   slots: tSlotsType<typeof TimeSlotsOption>,
   /*获取popper公共的属性设置*/
   getPublicPopperAttrs: () => any,

package/src/packages/components/TimePicker/useRangeTimeRender.tsx

@@ -209,6 +209,7 @@ export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern,
   );
 
   const getInputAttrs = () => ({
+    className: getComponentCls('time-picker'),
     ref: onRef.input,
     suffixIcon: 'pi-clock-circle',
     placeValue: [startModel.value, endModel.value].join('-'),

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

@@ -4,6 +4,7 @@ import './toggle.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {getKey, KEY} from "../KeyboardService";
+import i18n from "../i18n";
 
 export const Toggle = designComponent({
   name: '-toggle',
@@ -14,7 +15,7 @@ export const Toggle = designComponent({
     modelValue: {},                                                                // 双向绑定值
     trueValue: { default: true as any },                                           // 选中时绑定的值
     falseValue: { default: false as any },                                         // 未选中时绑定的值
-    square: { type: Boolean },                                                      // 方形开关
+    square: { type: Boolean },                                                     // 方形开关
   },
   inheritPropsType: HTMLDivElement,
   emits: {
@@ -53,6 +54,7 @@ export const Toggle = designComponent({
         'toggle-active': state.isActive,
         'toggle-disabled': editComputed.value.disabled,
         'toggle-square': props.square,
+        'toggle-input-mode-text': styleComputed.value.inputMode === 'text',
       },
     ]));
 
@@ -93,7 +95,9 @@ export const Toggle = designComponent({
     return {
       refer: { refs },
       render: () => (
-        <div
+        styleComputed.value.inputMode === 'text' ? (
+          <span className={classes.value}>{isChecked.value ? i18n.$it('base.yes').d('是') : i18n.$it('base.no').d('否')}</span>
+        ) : <div
           ref={onRef.el}
           className={classes.value}
           tabIndex={0}

package/src/packages/components/Toggle/toggle.scss

@@ -1,79 +1,53 @@
 @include prefix(toggle) {
-  background-color: plv(secondary-2);
-  position: relative;
-  outline: none;
-  display: inline-block;
-  vertical-align: middle;
-  user-select: none;
-  transition: background-color 300ms;
-  cursor: pointer;
-  border-radius: 100px;
-
-  .toggle-inner {
-    content: '';
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    bottom: 2px;
-    background: white;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
-    transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-    border-radius: inherit;
-  }
 
-  &:before {
-    position: absolute;
-    left: 2px;
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
-    border-radius: inherit;
+  &:not(.toggle-input-mode-text) {
     background-color: plv(secondary-2);
-    content: "";
-    transform: scaleX(1);
-    /*transform: scale3d(0, 0, 0);*/
-    transition: transform .3s;
-  }
+    position: relative;
+    outline: none;
+    display: inline-block;
+    vertical-align: middle;
+    user-select: none;
+    transition: background-color 300ms;
+    cursor: pointer;
+    border-radius: 100px;
 
-  @include sizeMixin(toggle, ()) {
-    height: calc(#{$height} - 6px);
-    width: calc((#{$height} - 6px) * 52 / 32);
-
-    &.toggle-on {
-      .toggle-inner {
-        left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-      }
-    }
     .toggle-inner {
-      right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-    }
-    &.toggle-active {
-      .toggle-inner {
-        right: calc((#{$height} - 6px) / 2);
-      }
-
-      &.toggle-on .toggle-inner {
-        left: calc((#{$height} - 6px) / 2);
-      }
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      background: white;
+      box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
+      transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+      border-radius: inherit;
     }
-  }
 
-  &.toggle-square {
-    &, & > .toggle-inner & > :before {
-      border-radius: plv(box-size-normal-border-radius);;
+    &:before {
+      position: absolute;
+      left: 2px;
+      right: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: inherit;
+      background-color: plv(secondary-2);
+      content: "";
+      transform: scaleX(1);
+      /*transform: scale3d(0, 0, 0);*/
+      transition: transform .3s;
     }
 
     @include sizeMixin(toggle, ()) {
       height: calc(#{$height} - 6px);
-      width: calc((#{$height} - 6px) * 52 / 30);
+      width: calc((#{$height} - 6px) * 52 / 32);
 
       &.toggle-on {
         .toggle-inner {
-          left: calc((#{$height} - 6px) / 2 + 8px);
+          left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
         }
       }
       .toggle-inner {
-        right: calc((#{$height} - 6px) / 2 + 8px);
+        right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
       }
       &.toggle-active {
         .toggle-inner {
@@ -85,63 +59,93 @@
         }
       }
     }
-  }
 
-  &.toggle-on {
-    &, &.toggle-square {
-      &:before {
-        transform: scale3d(0, 0, 0);
+    &.toggle-square {
+      &, & > .toggle-inner & > :before {
+        border-radius: plv(box-size-normal-border-radius);;
       }
 
-      .toggle-inner {
-        right: 2px;
+      @include sizeMixin(toggle, ()) {
+        height: calc(#{$height} - 6px);
+        width: calc((#{$height} - 6px) * 52 / 30);
+
+        &.toggle-on {
+          .toggle-inner {
+            left: calc((#{$height} - 6px) / 2 + 8px);
+          }
+        }
+        .toggle-inner {
+          right: calc((#{$height} - 6px) / 2 + 8px);
+        }
+        &.toggle-active {
+          .toggle-inner {
+            right: calc((#{$height} - 6px) / 2);
+          }
+
+          &.toggle-on .toggle-inner {
+            left: calc((#{$height} - 6px) / 2);
+          }
+        }
       }
     }
-  }
 
-  &.toggle-active {
-    &, &.toggle-square {
-      .toggle-inner {
-        left: 2px;
-      }
+    &.toggle-on {
+      &, &.toggle-square {
+        &:before {
+          transform: scale3d(0, 0, 0);
+        }
 
-      &.toggle-on .toggle-inner {
-        right: 2px;
+        .toggle-inner {
+          right: 2px;
+        }
       }
     }
-  }
 
-  @include statusMixin(toggle) {
-    &.toggle-on {
-      background-color: $color-6;
-    }
-    &:after {
-      border-color: $color-6;
-    }
-    /*&:focus {
-      .toggle-inner {
-        background-color: $color-4;
+    &.toggle-active {
+      &, &.toggle-square {
+        .toggle-inner {
+          left: 2px;
+        }
+
+        &.toggle-on .toggle-inner {
+          right: 2px;
+        }
       }
-    }*/
-  }
+    }
 
-  &.toggle-disabled {
-    cursor: not-allowed;
+    @include statusMixin(toggle) {
+      &.toggle-on {
+        background-color: $color-6;
+      }
+      &:after {
+        border-color: $color-6;
+      }
+      /*&:focus {
+        .toggle-inner {
+          background-color: $color-4;
+        }
+      }*/
+    }
 
-    background-color: plv(secondary-3);
+    &.toggle-disabled {
+      cursor: not-allowed;
 
-    &:before {
       background-color: plv(secondary-3);
-    }
 
-    .toggle-inner {
-      background-color: #eee;
-    }
+      &:before {
+        background-color: plv(secondary-3);
+      }
 
-    &.toggle-on {
-      @include statusMixin(toggle) {
-        background-color: $color-3;
+      .toggle-inner {
+        background-color: #eee;
+      }
+
+      &.toggle-on {
+        @include statusMixin(toggle) {
+          background-color: $color-3;
+        }
       }
     }
   }
+
 }

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {computed, getComponentCls, onBeforeUnmount, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
 import {createCounter} from 'plain-utils/utils/createCounter';
 import {delay} from "plain-utils/utils/delay";
 import './virtual-list.scss';
@@ -6,6 +6,7 @@ import Scroll from "../Scroll";
 import {unit} from "plain-utils/string/unit";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {PlainObject} from "plain-utils/utils/event";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
 
 interface DataNode {
   start: number;
@@ -71,10 +72,29 @@ export function useVirtualList(
   /*响应式属性*/
   const state = reactive({
     scrollValue: 0,                               // 当前滚动scrollTop（非实时的）
-    pageSize: 0,                                // 页大小
+    hostSize: null as null | number,              // 容器高度
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
     id2size: {} as Record<string, number | undefined>,
-    avgSize: props.size
+  });
+
+  const _avgSize = computed((): number => {
+    const total = Object.values(state.id2size).reduce((prev, item) => {
+      if (item != null) {
+        prev.total += item;
+        prev.count++;
+      }
+      return prev;
+    }, { total: 0, count: 0 });
+    if (!!total.count) {
+      return Math.floor(total.total / total.count);
+    } else {
+      return props.size;
+    }
+  });
+
+  const _pageSize = computed(() => {
+    if (state.hostSize == null) {return null;}
+    return Math.floor(state.hostSize / _avgSize.value);
   });
 
   const idMap = new WeakMap<PlainObject, string>();
@@ -88,7 +108,7 @@ export function useVirtualList(
         id = nextRowId();
         idMap.set(item, id);
       }
-      const size: number = state.id2size[id] || state.avgSize;
+      const size: number = state.id2size[id] || _avgSize.value;
       let start = prevEnd;
       let end = start + size;
       prevEnd = end;
@@ -102,7 +122,8 @@ export function useVirtualList(
    * @date    2020/11/15 9:28
    */
   const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, startIndex: number } => {
-    const { pageSize, scrollValue } = state;
+    const pageSize = _pageSize.value;
+    const { scrollValue } = state;
     if (!pageSize) {
       return { list: [], startPageIndex: 0, startIndex: 0 };
     }
@@ -113,7 +134,7 @@ export function useVirtualList(
         startPageIndex: 0,
       };
     }
-    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue, pageSize);
+    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue);
     return {
       list: nodes.value.slice(startIndex, endIndex),
       startPageIndex: pageIndex,
@@ -142,7 +163,7 @@ export function useVirtualList(
    * @date    2020/12/16 10:48
    */
   const strutStyles = useStyles(style => {
-    if (!state.pageSize) {
+    if (!_pageSize.value) {
       return;
     }
     if (props.disabled) {
@@ -180,7 +201,7 @@ export function useVirtualList(
    */
   const contentStyles = useStyles(style => {
 
-    if (!state.pageSize) {
+    if (!_pageSize.value) {
       return;
     }
     if (props.disabled) {
@@ -257,11 +278,20 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollValue: number, pageSize: number) => {
+    getPageIndex: (scrollValue: number) => {
       if (scrollValue < 0) {
         scrollValue = 0;
       }
+      const pageSize = _pageSize.value;
       const data = dataModel.value || [];
+      if (pageSize == null) {
+        return {
+          data,
+          startIndex: 0,
+          endIndex: 0,
+          pageIndex: 0,
+        };
+      }
       /*当前scrollTop对应的数据中数据的索引*/
       let scrollIndex = utils.getIndex(scrollValue);
       let pageIndex = Math.floor(scrollIndex / pageSize);
@@ -306,21 +336,16 @@ export function useVirtualList(
         pageIndex,
       };
     },
-    resetPageSize: () => {
-      let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
-      const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
-      if (!!headEl) {
-        hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
-      if (!!footEl) {
-        hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
+    resetHostSize: () => {
+      const hostEl = refs.scroll?.refs.host;
+      if (!hostEl) {return;}
+      let hostSize = hostEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      const headEl = hostEl.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
+      const footEl = hostEl.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
+      if (!!headEl) {hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
+      if (!!footEl) {hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
 
-      const newPageSize = Math.floor(hostSize / props.size);
-      if (newPageSize != state.pageSize) {
-        state.pageSize = newPageSize;
-      }
+      if (state.hostSize != hostSize) {state.hostSize = hostSize;}
     },
   };
 
@@ -335,7 +360,7 @@ export function useVirtualList(
       const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
       freezeState.scrollValue = newScrollValue;
-      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
+      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop);
       state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       freezeState.current = current;
       emit.onPageIndexChange(current);
@@ -344,7 +369,7 @@ export function useVirtualList(
 
   watch(() => dataModel.value || [], (data: any[]) => {
     delay().then(() => {
-      utils.resetPageSize();
+      utils.resetHostSize();
     });
     if (props.disabled) {
       return;
@@ -357,9 +382,13 @@ export function useVirtualList(
 
   onMounted(async () => {
     await delay(23);
-    utils.resetPageSize();
+    utils.resetHostSize();
   });
 
+  onBeforeUnmount(
+    addWindowListener('resize', () => delay(23).then(utils.resetHostSize))
+  );
+
   onUpdated(async () => {
     if (props.disabled) {
       return;
@@ -370,7 +399,6 @@ export function useVirtualList(
     await delay();
     // console.log('dynamic scan height')
     const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
-    let newAvgSize = state.avgSize;
 
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
@@ -381,13 +409,8 @@ export function useVirtualList(
       }
       if (state.id2size[vid] != size) {
         state.id2size[vid] = size;
-        newAvgSize = Number(((state.avgSize + size) / 2).toFixed(0));
       }
     }
-
-    if (newAvgSize != state.avgSize) {
-      state.avgSize = newAvgSize;
-    }
   });
 
   return {

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

@@ -2,6 +2,7 @@ import {createEffects} from 'plain-utils/utils/createEffects';
 import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
 import {iPopupService, usePopup} from "../usePopup/usePopup";
 import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+import {delay} from "plain-utils/utils/delay";
 
 /**
  * 提供两种用法，第一种实时地创建tooltip
@@ -147,7 +148,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         },
       )
     );
-    const close = () => popup.$popup.hide(popup.popupId);
+    const close = () => {delay(23).then(() => {popup.$popup.hide(popup.popupId);});};
     effects.push(close);
     return { close };
   })();

package/src/packages/entry.tsx

@@ -116,6 +116,11 @@ export {StackCard} from './components/StackCard';
 export {StackCardItem} from './components/StackCardItem';
 export {SortList} from './components/SortList';
 export {Space} from './components/Space';
+export {Box} from './components/Box';
+export {PageCard} from './components/PageCard';
+export {PageCardTitle} from './components/PageCardTitle';
+export {PageCardContent} from './components/PageCardContent';
+export {RollingNumber} from './components/RollingNumber';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -174,7 +179,7 @@ export type {
   iTableOuterOperationConfig,
   iTableOperationPermitConfig
 } from './components/Table/standard/PlcOperation/PlcOperation.utils';
-export {iTreeProps, iTreeState, iTreeKey2CheckStatus, iTreeKeyOrNode, iTreeNodeComputedData} from './components/TreeCore/TreeCore.type';
+export type {iTreeProps, iTreeState, iTreeKey2CheckStatus, iTreeKeyOrNode, iTreeNodeComputedData} from './components/TreeCore/TreeCore.type';
 
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
@@ -216,6 +221,19 @@ export {FormToggle} from './components/FormToggle';
 export {FilterFormSingle} from './components/FilterFormSingle';
 export {FilterFormMultiple} from './components/FilterFormMultiple';
 export {FilterService} from './components/FilterService';
+export type {
+  iValidateRule,
+  iValidateState,
+  iAnotherRule,
+  iFormItemValidatePropsType,
+  iFormValidatePropsType,
+  iRegistrationValidator,
+  iValidateResult,
+  iValidateValueGetter,
+  iValidationDisabledFields,
+  iValidationReadonlyFields,
+  iValidatorParam,
+} from './components/Form/validate/validate.utils';
 
 export {TableOptionUtils} from './components/TableOptionUtils';
 export {TableOptionSpace} from './components/TableOptionSpace';
@@ -238,7 +256,7 @@ export {createProvider} from './components/createProvider';
 export {usePopupManager} from './components/usePopupManager';
 export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
 export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
-export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
+export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus, InputMode} from './uses/useStyle';
 export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
 export {AutoLoadingObserver} from './components/AutoLoadingObserver';
 export {lighter, darken} from './utils/color.utils';

package/src/packages/i18n/lang/en-us.ts

@@ -117,6 +117,8 @@ export const EnUsLocale: tZhCnLocale = {
       save: 'Save',
       done: 'Done',
     },
+    yes: 'YES',
+    no: 'NO',
   },
   formatter: {
     week: 'Year gggg,week ww',

package/src/packages/i18n/lang/zh-cn.ts

@@ -115,6 +115,8 @@ export const ZhCnLocale = {
       save: '保存',
       done: '完成',
     },
+    yes:'是',
+    no:'否',
   },
   formatter: {
     week: 'gggg年第ww周',

package/src/packages/styles/global.import.scss

@@ -98,6 +98,22 @@
         #{$attr}: plv(box-size-#{$key}-#{$attr});
       }
       @content;
+
+      &.mt{margin-top: $margin}
+      &.mb{margin-bottom: $margin}
+      &.ml{margin-left: $margin}
+      &.mr{margin-right: $margin}
+      &.mx{margin-left: $margin;margin-right: $margin}
+      &.my{margin-top: $margin;margin-bottom: $margin}
+      &.margin {margin: $margin}
+
+      &.pt{padding-top: $margin}
+      &.pb{padding-bottom: $margin}
+      &.pl{padding-left: $margin}
+      &.pr{padding-right: $margin}
+      &.px{padding-left: $margin;padding-right: $margin}
+      &.py{padding-top: $margin;padding-bottom: $margin}
+      &.padding {padding: $margin}
     }
   }
 }

package/src/packages/uses/useStyle.tsx

@@ -12,22 +12,25 @@ export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text', 'stroke'
 export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
 export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
 export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
-export const InputMode = createEnum(['flat', 'stroke'] as const);
+export const InputMode = createEnum(['flat', 'stroke', 'text'] as const);
 
 export const StyleProps = {
   shape: { type: String as PropType<typeof ThemeShape.TYPE> },                      //  'square', 'round'
   size: { type: String as PropType<typeof ThemeSize.TYPE> },                        //  'large', 'normal', 'small', 'mini'
   status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                   // input的样式类型,flat填充，stroke线型
 } as const;
 
 export interface UseStyleProvideData {
   shape: typeof ThemeShape.TYPE,
   size: typeof ThemeSize.TYPE,
   status?: typeof ThemeStatus.TYPE,
+  inputMode?: typeof InputMode.TYPE,
+
   default: {
     shape: typeof ThemeShape.TYPE,
     size: typeof ThemeSize.TYPE,
-    inputMode: 'stroke' | 'flat',
+    inputMode: typeof InputMode.TYPE,
     buttonMode: typeof ThemeMode.TYPE,
   },
 }
@@ -44,14 +47,15 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
   const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
 
   const styleComputed = computed(() => {
-    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size }, option);
+    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
 
-    const { shape, size, status } = ctx.props;
+    const { shape, size, status, inputMode } = ctx.props;
     const parentData = !!parent ? parent.value : {} as any;
     let data: UseStyleProvideData = {
       shape: shape || parentData.shape || defaultData.shape,
       size: size || parentData.size || defaultData.size,
       status: status || parentData.status || defaultData.status,
+      inputMode: inputMode || parentData.inputMode || defaultData.inputMode,
       default: applicationConfiguration.value.default
     };
     if (!!defaultData.adjust) {