plain-design 1.0.0-beta.74 → 1.0.0-beta.76

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

@@ -4,7 +4,7 @@ import {unit} from "plain-utils/string/unit";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {ClientZoom} from "../ClientZoom";
 
-const _Textarea = fixInputCursor('textarea')
+const _Textarea = fixInputCursor('textarea');
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -56,24 +56,27 @@ export function useTextareaInput(data: iInputCompositionData) {
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value}>
-      <span style={takeoverStyles.value}>
-        {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
-          <div key={index}>
-            {item}
-          </div>
-        ))}
-        {!model.value && <>&nbsp;</>}
-      </span>
-      <_Textarea
-        ref={handler.onRef}
-        value={model.value}
-        onInput={handler.onInput}
-        onKeyDown={handler.onKeydown}
-        placeholder={editComputed.value.placeholder!}
-        disabled={!!editComputed.value.disabled}
-        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        {...props.nativeAttrs}
-      />
+      {data.styleComputed.value.inputMode === 'text' ?
+        <span className="input-text">{model.value}</span> : <>
+          <span style={takeoverStyles.value} className="input-textarea-shadow">
+            {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
+              <div key={index}>
+                {item}
+              </div>
+            ))}
+            {!model.value && <>&nbsp;</>}
+          </span>
+          <_Textarea
+            ref={handler.onRef}
+            value={model.value}
+            onInput={handler.onInput}
+            onKeyDown={handler.onKeydown}
+            placeholder={editComputed.value.placeholder!}
+            disabled={!!editComputed.value.disabled}
+            readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+            {...props.nativeAttrs}
+          />
+        </>}
     </span>
   )));
 
@@ -100,7 +103,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
     mousedown: (e: MouseEvent) => {
       const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
       let { offsetWidth, offsetHeight } = e.target as any;
-      const dragSize = 12
+      const dragSize = 12;
       if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }

package/src/packages/components/Input/uses/useInputSuffixIcon.tsx

@@ -4,7 +4,7 @@ import Icon from "../../Icon";
 import Loading from "../../Loading";
 import {delay} from "plain-utils/utils/delay";
 
-export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty }: iInputCompositionData) {
+export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty, styleComputed }: iInputCompositionData) {
 
   const hasSuffixClear = computed(() => !props.textarea && !props.noClear && (!editComputed.value.disabled && !editComputed.value.readonly));
   const hasSuffixIcon = computed(() => !props.textarea && (slots.suffixIconContent.isExist() || !!props.suffixIcon));
@@ -51,13 +51,17 @@ export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, e
     }
   ]);
 
-  const render = () => (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) && !props.textarea && (
-    <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
-      {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
-      {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
-      {editComputed.value.loading && <Loading/>}
-    </span>
-  );
+  const render = () =>
+    (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) &&
+    styleComputed.value.inputMode !== 'text' &&
+    !props.textarea &&
+    (
+      <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
+        {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
+        {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
+        {editComputed.value.loading && <Loading/>}
+      </span>
+    );
 
   return { render };
 }

package/src/packages/components/InputNumber/number.scss

@@ -62,6 +62,12 @@
   .input-box {
     align-self: center;
   }
+
+  &.input-mode-text {
+    .number-prepend-button, .number-append-button, .number-button-container {
+      display: none;
+    }
+  }
 }
 
 @include prefix(number-resize) {

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

@@ -0,0 +1,48 @@
+import {designComponent, getComponentCls, useClassCache, useModel} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {Box} from "../Box";
+import './page-card.scss';
+
+export const PageCard = designComponent({
+  name: 'page-card',
+  inheritPropsType: Box,
+  provideRefer: true,
+  props: {
+    modelValue: { type: Boolean, default: null },
+    collapsable: { type: Boolean },
+    full: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  emits: {
+    onUpdateModelValue: (val: boolean) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card'),
+      `page-card-size-${styleComputed.value.size}`,
+      {
+        'page-card-full': props.full,
+      }
+    ]);
+
+    return {
+      refer: {
+        props,
+        model,
+      },
+      render: () => (
+        <div className={classes.value}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default PageCard;

package/src/packages/components/PageCard/page-card.scss

@@ -0,0 +1,124 @@
+@include comp(page-card) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  & > * {
+    background-color: plv(bg-2);
+
+    & + * {
+      border-top: solid 1px plv(border-color);
+    }
+  }
+
+  &.page-card-full {
+    height: 100%;
+    width: 100%;
+  }
+
+  .#{componentName(page-card-title)} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .page-card-title-left {
+      display: flex;
+      align-items: center;
+
+      .page-card-title-icon {
+        color: plv(primary-6);
+        height: 1em;
+        width: 1em;
+        position: relative;
+        margin-right: 0.75em;
+
+        .page-card-title-icon-inner {
+          position: absolute;
+          inset: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: plv(primary-1);
+        }
+
+        &.page-card-title-icon-collapse {
+          .page-card-title-icon-inner {
+            cursor: pointer;
+            user-select: none;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    .page-card-title-right {
+      color: plv(primary-6);
+      cursor: pointer;
+    }
+  }
+
+  /*@formatter:off*/
+  @include comp(page-card-content) {
+    box-sizing: border-box;
+    &.page-card-content-align-left{text-align: left}
+    &.page-card-content-align-center{text-align: center}
+    &.page-card-content-align-right{text-align: right}
+    @include sizeMixin(page-card-content, ()) {}
+    &.page-card-content-full {
+      flex: 1;
+      position: relative;
+      .page-card-content-full-inner{
+        position: absolute;
+        inset: 0;
+        padding: inherit;
+      }
+    }
+  }
+  @include comp(page-card-title) {
+    box-sizing: border-box;
+    @include sizeMixin(page-card-title, ()) {}
+  }
+  /*@formatter:on*/
+
+  @include sizeMixin(page-card, (font-size)) {
+    & + * {
+      margin-top: $margin;
+    }
+
+    & > *:not(.no-padding) {
+      padding: $margin;
+    }
+
+    & > * {
+      &:first-child {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+
+    .#{componentName(page-card-title)} {
+
+      .page-card-title-left {
+        .page-card-title-icon-inner {
+          border-radius: $border-radius;
+        }
+      }
+
+      .page-card-title-right {
+        & > * + * {
+          margin-left: $margin;
+        }
+      }
+    }
+
+    .#{componentName(page-card-content)} {
+    }
+  }
+
+
+}

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

@@ -0,0 +1,44 @@
+import {designComponent, getComponentCls, PropType, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import PageCard from "../PageCard";
+
+export const PageCardContent = designComponent({
+  name: 'page-card-content',
+  props: {
+    align: { type: String as PropType<'left' | 'center' | 'right'> },
+    full: { type: Boolean },
+    noPadding: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-content'),
+      `page-card-content-size-${styleComputed.value.size}`,
+      {
+        [`page-card-content-align-${props.align}`]: !!props.align,
+        'page-card-content-full': props.full,
+        'no-padding': props.noPadding,
+      }
+    ]);
+
+    return () => (
+      pageCard.model.value != false && (
+        <div className={classes.value}>
+          {
+            props.full ?
+              (<div className="page-card-content-full-inner">
+                {slots.default()}
+              </div>) :
+              slots.default()
+          }
+        </div>
+      )
+    );
+  },
+});

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

@@ -0,0 +1,51 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import Icon from "../Icon";
+import PageCard from "../PageCard";
+
+export const PageCardTitle = designComponent({
+  name: 'page-card-title',
+  props: {
+    title: { type: String },
+    icon: { type: String },
+    ...StyleProps,
+  },
+  slots: ['default', 'titleContent'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-title'),
+      `page-card-title-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        <div className="page-card-title-left">
+          {pageCard.props.collapsable && (
+            <div className="page-card-title-icon page-card-title-icon-collapse">
+              <div className="page-card-title-icon-inner" onClick={() => pageCard.model.value = pageCard.model.value === false}>
+                <Icon icon={pageCard.model.value == false ? 'pi-caret-right' : 'pi-caret-down'}/>
+              </div>
+            </div>
+          )}
+          {!!props.icon && (
+            <div className="page-card-title-icon">
+              <div className="page-card-title-icon-inner">
+                <Icon icon={props.icon}/>
+              </div>
+            </div>
+          )}
+          <span>{slots.titleContent(props.title)}</span>
+        </div>
+        <div className="page-card-title-right">
+          {slots.default()}
+        </div>
+      </div>
+    );
+
+  },
+});

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

@@ -128,6 +128,8 @@ export const PageThemeUtils = (() => {
     window.location.reload();
   };
 
+  const variable = (varName: string) => `var(--${getComponentCls(varName)})`;
+
   return {
     configuration,
     toggle,
@@ -139,6 +141,7 @@ export const PageThemeUtils = (() => {
     buttonMode,
     zoom,
     clear,
+    variable,
   };
 })();
 

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

@@ -0,0 +1,66 @@
+import {delay, designComponent, onBeforeUnmount, onMounted, reactive, watch} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+export const RollingNumber = designComponent({
+  name: 'rolling-number',
+  props: {
+    val: { type: Number }
+  },
+  setup({ props }) {
+
+    const state = reactive({ val: 0 });
+
+    const utils = {
+      update: (space = 1) => {
+        // console.log('update');
+        space = Math.abs(space);
+        const val = state.val;
+        if (props.val == null) {
+          state.val = 0;
+          return;
+        }
+        if (val == props.val) {
+          return;
+        }
+        if (val > props.val) {
+          state.val = Math.max(val - space, props.val);
+          delay(20).then(() => utils.update(space));
+        } else {
+          state.val = Math.min(val + space, props.val);
+          delay(20).then(() => utils.update(space));
+        }
+      },
+      format: (num: number) => {
+        const [prepend, append] = String(num).split('.');
+        const list = String(prepend).split('').reverse();
+        const lastIndex = list.length - 1;
+        return list.reduce((prev, item, index) => {
+          return (lastIndex != index && (index + 1) % 3 == 0 ? ',' : '') + item + prev;
+        }, '') + (!append ? '' : `.${append}`);
+      },
+    };
+
+    const { effects } = createEffects();
+
+    onMounted(() => {
+      effects.push(
+        watch(() => props.val, () => {
+          const curVal = state.val || 0;
+          const newVal = props.val == null ? 0 : props.val;
+          const space = Math.ceil((newVal - curVal) / 50);
+          utils.update(space);
+        }, { immediate: true })
+      );
+    });
+
+    onBeforeUnmount(effects.clear);
+
+    return () => (
+      props.val != null && (
+        <span>{utils.format(state.val)}</span>
+      )
+    );
+  },
+});
+
+export default RollingNumber;

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

@@ -1,11 +1,13 @@
 import './space.scss';
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const Space = designComponent({
   name: 'space',
   props: {
     vertical: { type: Boolean },
+    inlineBlock: { type: Boolean },
+    align: { type: String as PropType<'left' | 'center' | 'right'> },
     ...StyleProps,
   },
   slots: ['default'],
@@ -17,6 +19,10 @@ export const Space = designComponent({
       getComponentCls('space'),
       `space-${props.vertical ? 'vertical' : 'horizontal'}`,
       `space-size-${styleComputed.value.size}`,
+      {
+        'space-inline-block': props.inlineBlock,
+        [`space-align-${props.align}`]: !!props.align,
+      }
     ]);
 
     return () => (

package/src/packages/components/Space/space.scss

@@ -23,4 +23,17 @@
     flex-direction: column;
   }
 
+  &.space-inline-block {
+    display: inline-block;
+  }
+
+  &.space-align-left {
+    text-align: left
+  }
+  &.space-align-center {
+    text-align: center
+  }
+  &.space-align-right {
+    text-align: right
+  }
 }

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -35,6 +35,7 @@ export const TablePropsOptions = {
   rowDraggable: { type: Boolean },                                      // 行是否可以拖拽移动
   sort: { type: [Object, Array] as PropType<TablePropsSort> },          // 当前排序字段
   rules: { type: Object as PropType<iFormValidatePropsType["rules"]> }, // 校验规则
+  anotherRules: { type: Object as PropType<iFormValidatePropsType["anotherRules"]> }, // 校验规则
   spanMethod: { type: Function as PropType<TablePropsSpanMethod> },     // 合并表体单元格的方法
   size: { ...StyleProps["size"] },                                      // 表格尺寸
   loading: { type: Boolean },                                           // 开启加载状态

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

@@ -6,10 +6,11 @@ import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createRangeTimeRender(params: tTimeCompositionParams,) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots, styleComputed } = params;
 
   const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference } = useRangeTimeRender({
     ...params,
@@ -59,8 +60,15 @@ export function createRangeTimeRender(params: tTimeCompositionParams,) {
       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}/>
-          <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}/>
+          {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}/>
+              <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}/>
+            </>
+          })}
         </Input>
       )
     })

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

@@ -7,10 +7,11 @@ import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, styleComputed } = params;
 
   const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
     ...params,
@@ -82,8 +83,15 @@ export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
 
   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/TimePicker/createSingleTimeRender.tsx

@@ -181,6 +181,7 @@ export function createSingleTimeRender({ emit, props, hooks, displayPattern, tod
       slotRender: slots.default,
       defaultRender: () => (
         <Input
+          className={getComponentCls('time-picker')}
           ref={onRef.input}
           suffixIcon="pi-clock-circle"
           modelValue={state.input}

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

@@ -46,7 +46,7 @@ export const TimePicker = designComponent({
       return prev;
     }, {} as any));
 
-    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
+    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed,styleComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
 
     useWatchAutoClear(() => ({ range: props.range, separate: props.separate }), (data) => {
       if (!data || (!data.range && !data.separate)) {

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}