plain-design 1.0.0-beta.12 → 1.0.0-beta.120

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

@@ -1,14 +1,14 @@
 import './checkbox.scss';
-import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {useClickWave} from "../../directives/ClickWave";
 import {CheckboxInner} from "../CheckboxInner";
 import {CheckboxGroupCollector} from "../CheckboxGroup";
 import {i18n} from "../../i18n";
-import {getKey, KEY} from "../KeyboardService";
+import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
 import {Transition} from "../Transition";
 
 export const Checkbox = designComponent({
@@ -99,7 +99,7 @@ export const Checkbox = designComponent({
         }*/
       },
       keydown: (e: iKeyboardEvent) => {
-        if (getKey(e) === KEY.space) {
+        if (getKeyNameByKeyboardEvent(e) === eKeyboardKeys.space) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);
@@ -132,7 +132,7 @@ export const Checkbox = designComponent({
                 disabled={editComputed.value.disabled!}/>
             </Transition>
           </span>
-          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n('base.select.all').d('全选') : '')}</span>)}
+          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n.$it('base.select.all').d('全选') : '')}</span>)}
         </div>))
     };
   },

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
@@ -116,7 +116,7 @@ export const CheckboxGroup = designComponent({
          */
         add: (val: (string | number)[]) => {
           if (utils.exceed.max(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
           } else {
             modelValue.value = val;
           }
@@ -128,7 +128,7 @@ export const CheckboxGroup = designComponent({
          */
         delete: (val: (string | number)[]) => {
           if (utils.exceed.min(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
           } else {
             modelValue.value = val;
           }

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -6,6 +6,7 @@
   vertical-align: -0.15em;
   border-width: 1px;
   border-style: solid;
+  border-radius: plv(box-size-small-border-radius);
   //border-radius: 2px;
 
   &.checkbox-inner-status-check {
@@ -14,7 +15,7 @@
 
     .checkbox-inner-check-polyline {
       fill: transparent;
-      stroke: white;
+      stroke: plv(pbfc);
       stroke-width: 10;
     }
   }

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
 import './checkbox-inner.scss';
 import {SVGAttributes} from "react";

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

@@ -1,5 +1,5 @@
-import {createCounter} from "plain-utils/utils/createCounter";
-import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "plain-design-composition";
+import {createCounter} from "@peryl/utils/createCounter";
+import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import CollapseGroup from "../CollapseGroup";
 import Icon from "../Icon";
 import './collapse.scss';

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useModel, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, useModel, useRefs} from "@peryl/react-compose";
 
 export const CollapseGroup = designComponent({
   name: 'collapse-group',

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

@@ -1,10 +1,10 @@
 import React from "react";
-import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "plain-design-composition";
+import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "@peryl/react-compose";
 import {findDOMNode} from "react-dom";
-import {unit} from "plain-utils/string/unit";
-import {addClass} from "plain-utils/dom/addClass";
-import {delay} from "plain-utils/utils/delay";
-import {removeClass} from "plain-utils/dom/removeClass";
+import {unit} from "@peryl/utils/unit";
+import {addClass} from "@peryl/utils/addClass";
+import {delay} from "@peryl/utils/delay";
+import {removeClass} from "@peryl/utils/removeClass";
 import {ClassWrapper} from "../Reference";
 
 type CollapseElStyles = {

package/src/packages/components/ColorPicker/ColorPanel.tsx

@@ -1,5 +1,5 @@
 import './color-panel.scss';
-import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "@peryl/react-compose";
 import {ColorSvPanel} from "./sub/ColorSvPanel";
 import {ColorHueSlider} from "./sub/ColorHueSlider";
 import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";

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/ColorPicker/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, PropType, reactive, RenderNode, useClasses, useRefs} from "@peryl/react-compose";
 import {ColorPanel} from "./ColorPanel";
 import {ColorSvPanel} from "./sub/ColorSvPanel";
 import {ColorHueSlider} from "./sub/ColorHueSlider";
@@ -6,7 +6,7 @@ import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
 import {Input} from "../Input";
 import './color-picker.scss';
 import Color from "color";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 //@ts-ignore
 import opacityImage from './utils/opacity.png';
 import {Reference} from "../Reference";

package/src/packages/components/ColorPicker/sub/ColorAlphaSlider.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useStyles} from 'plain-design-composition';
+import {designComponent, getComponentCls, useStyles} from '@peryl/react-compose';
 import './color-alpha-slider.scss';
 // @ts-ignore
 import opacityImage from '../utils/opacity.png';

package/src/packages/components/ColorPicker/sub/ColorHueSlider.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from 'plain-design-composition';
+import {designComponent, getComponentCls} from '@peryl/react-compose';
 import './color-hue-slider.scss';
 import {ColorSlider} from "./ColorSlider";
 

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -1,9 +1,9 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../../uses/useEdit";
-import {unit} from "plain-utils/string/unit";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {unit} from "@peryl/utils/unit";
+import {createEffects} from "@peryl/utils/createEffects";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import './color-slider.scss';
 import {ClientZoom} from "../../ClientZoom";
 

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -1,8 +1,8 @@
 import './color-sv-panel.scss';
-import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
 import {ClientZoom} from "../../..";

package/src/packages/components/ColorPicker/useColorPanelEditor.tsx

@@ -1,4 +1,4 @@
-import {computed, reactive, watch} from "plain-design-composition";
+import {computed, reactive, watch} from "@peryl/react-compose";
 import {PlainColor} from "./utils/PlainColor";
 import {iColorPublicPropsType} from "./utils/color-picker.utils";
 

package/src/packages/components/ColorPicker/useColorPanelHistory.tsx

@@ -1,4 +1,4 @@
-import {computed, reactive} from "plain-design-composition";
+import {computed, reactive} from "@peryl/react-compose";
 import {PlainColor} from "./utils/PlainColor";
 
 export function useColorPanelHistory(

package/src/packages/components/ColorPicker/utils/color-picker.utils.tsx

@@ -1,6 +1,6 @@
 //@ts-ignore
 import opacityImage from "./opacity.png";
-import {classnames, ExtractPropTypes, getComponentCls, PropType} from "plain-design-composition";
+import {classnames, ExtractPropTypes, getComponentCls, PropType} from "@peryl/react-compose";
 
 export function renderColorButton({ size, value }: { size: string, value: any }) {
   return (

package/src/packages/components/ConfirmPopup/confirm-popup.scss

@@ -0,0 +1,16 @@
+@include comp(confirm-popup) {
+  .popup-content {
+    .popper-head {
+      color: plv(text-1);
+      text-align: center;
+      padding: 1em 1.25em 0;
+    }
+
+    .confirm-popup-button-bar {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 1em 1.25em;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import {designComponent, getComponentCls, PropType, useModel} from "@peryl/react-compose";
+import Popup from "../Popup";
+import Space from "../Space";
+import Button from "../Button";
+import i18n from "../i18n";
+import './confirm-popup.scss';
+import {ePopupTrigger, iPopupTrigger} from "../usePopup/utils/popup.utils";
+
+export const ConfirmPopup = designComponent({
+  name: 'confirm-popup',
+  inheritPropsType: Popup,
+  props: {
+    title: { type: String },
+    trigger: { type: String as PropType<iPopupTrigger>, default: ePopupTrigger.click },
+    confirmLabel: { type: String },
+    cancelLabel: { type: String },
+    modelValue: { type: Boolean },
+  },
+  emits: {
+    onConfirm: () => true,
+    onCancel: () => true,
+    onUpdateModelValue: (val: boolean) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, attrs, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const handler = {
+      onConfirm: () => {
+        model.value = false;
+        emit.onConfirm();
+      },
+      onCancel: () => {
+        model.value = false;
+        emit.onCancel();
+      },
+    };
+
+    return () => {
+      const hasTitle = !!props.title;
+      return (
+        <Popup
+          title={props.title}
+          placement={attrs.placement || (hasTitle ? 'bottom-end' : 'bottom-center')}
+          popperClass={getComponentCls('confirm-popup')}
+          v-model={model.value}
+          trigger={props.trigger}
+          noPadding
+          v-slots={{
+            default: () => slots.default(),
+            popper: () => (
+              hasTitle ? (
+                <Space className="confirm-popup-button-bar" size="mini">
+                  <Button mode="fill" status="primary" label={props.confirmLabel || i18n.$it('base.confirm').d('确定')} onClick={handler.onConfirm}/>
+                  <Button mode="stroke" status="secondary" label={props.cancelLabel || i18n.$it('base.cancel').d('取消')} onClick={handler.onCancel}/>
+                </Space>
+              ) : (
+                <Space className="confirm-popup-button-bar">
+                  <Button mode="text" status="primary" icon="pi-check" label={props.confirmLabel || i18n.$it('base.confirm').d('确定')} onClick={handler.onConfirm}/>
+                  <Button mode="text" status="error" icon="pi-close" label={props.cancelLabel || i18n.$it('base.cancel').d('取消')} onClick={handler.onCancel}/>
+                </Space>
+              )
+            )
+          }}
+        />
+      );
+    };
+  },
+});
+
+export default ConfirmPopup;

package/src/packages/components/Corner/corner.scss

@@ -0,0 +1,14 @@
+@include comp(corner) {
+  path {
+    fill: currentColor;
+  }
+  @include sizeMixin(corner, ()) {
+    height: $border-radius;
+    width: $border-radius;
+  }
+  @include statusMixin(corner) {
+    path {
+      fill: $color-6;
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import {designComponent, getComponentCls, PropType, useClassCache, useStyleCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {unit} from "@peryl/utils/unit";
+import './corner.scss';
+import {createEnum} from "@peryl/utils/createEnum";
+
+const eCornerType = createEnum([
+  'bottom-left',
+  'bottom-right',
+  'top-left',
+  'top-right',
+
+  'left-top',
+  'left-bottom',
+  'right-top',
+  'right-bottom',
+] as const);
+
+export const Corner = designComponent({
+  name: 'corner',
+  props: {
+    ...StyleProps,
+    customSize: { type: String },
+    type: { type: String as PropType<typeof eCornerType.TYPE>, required: true },
+    color: { type: String },
+  },
+  setup({ props }) {
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('corner'),
+      {
+        [`corner-status-${props.status}`]: !!props.status,
+        [`corner-size-${styleComputed.value.size}`]: !props.customSize,
+      },
+    ]);
+
+    const styles = useStyleCache((style) => {
+      if (!!props.customSize) {
+        style.height = unit(props.customSize);
+        style.width = unit(props.customSize);
+      }
+      if (!!props.color) {
+        style.color = props.color;
+      }
+    });
+
+    return () => {
+      return (
+        <svg viewBox="0 0 100 100" className={classes.value} style={styles.value}>
+          <path d={pathDValues[type2key[props.type]]}></path>
+        </svg>
+      );
+    };
+  },
+});
+
+const pathDValues = {
+  1: 'M 100 0 L 100 100 L 0 100 A 100 100 0 0 0 100 0 Z',
+  2: 'M 0 0 L 0 100 L 100 100 A 100 100 0 0 1 0 0 Z',
+  3: 'M 0 0 L 100 0 L 100 100 A 100 100 0 0 0 0 0',
+  4: 'M 100 0 L 0 0 L 0 100 A 100 100 0 0 1 100 0',
+};
+
+const type2key: Record<typeof eCornerType.TYPE, keyof typeof pathDValues> = {
+  [eCornerType["bottom-left"]]: 1 as const,
+  [eCornerType["right-top"]]: 1 as const,
+
+  [eCornerType["bottom-right"]]: 2 as const,
+  [eCornerType["left-top"]]: 2 as const,
+
+  [eCornerType["top-left"]]: 3 as const,
+  [eCornerType["right-bottom"]]: 3 as const,
+
+  [eCornerType["top-right"]]: 4 as const,
+  [eCornerType["left-bottom"]]: 4 as const,
+};
+
+export default Corner;

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

@@ -1,13 +1,12 @@
-import {computed, getComponentCls, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, reactive, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {DatePanel} from "./panel/DatePanel";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {tDateCompositionPublicParams} from "./date.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 /**
@@ -16,13 +15,14 @@ import {createPopupEditor} from "../usePopupEditor";
  * @date    2022.7.4 14:05
  */
 export function createDateRenderMultiple({ props, emit, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, slots, displayPattern, today, hooks, maxmin, }: tDateCompositionPublicParams) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const { getReference, renderReference } = useRenderReference();
 
+  const format = effectComputed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+
   const getFormatValue = () => format.value?.map(i => i.getDisplay());
-  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) });
-  const format = computed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) }, effects);
   const state = reactive({ input: getFormatValue() });
 
   const popper = createPopupEditor({
@@ -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

@@ -3,23 +3,24 @@
  * @author  韦胜健
  * @date    2022.7.4 14:04
  */
-import {computed, getComponentCls, reactive, useModel, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
 import {tDateCompositionPublicParams} from "./date.utils";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {DatePanel} from "./panel/DatePanel";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function createDateRenderSingle({ props, emit, slots, hooks, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin }: tDateCompositionPublicParams) {
 
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
-  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) });
-  const format = computed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
+
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
   const state = reactive({ input: format.value?.getDisplay() });
   const reference = useRenderReference();
 
@@ -146,6 +147,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

@@ -1,11 +1,12 @@
 import {tDateCompositionPublicParams} from "./date.utils";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import Input from "../Input";
 import {useRangeDateRender} from "./useRangeDateRender";
 import {DatePanel} from "./panel/DatePanel";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
+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,
@@ -54,7 +55,7 @@ export function createRangeDateRenderRange(params: tDateCompositionPublicParams)
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard<iKeyboardEvent>({
       enter: () => popper.methods.toggle(),
       esc: () => popper.methods.hide(),
     })(e),
@@ -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>
       )
     })