plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/packages/components/Cascade/cascade.scss

@@ -17,7 +17,7 @@
   .cascade-panel-item {
     transition: all ease 150ms;
     position: relative;
-    background-color: plv(background-lite);
+    background-color: plv(background-color);
     overflow: hidden;
 
     .cascade-panel-item-inner {
@@ -29,7 +29,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: solid 1px plv(background-lite);
+      border-bottom: solid 1px plv(background-color);
       cursor: pointer;
       color: plv(text-2);
 

package/src/packages/components/Cascade/createMultipleCascadeRender.tsx

@@ -140,7 +140,7 @@ export function createMultipleCascadeRender(
       const { labelField, ..._treeProps } = treeProps.value;
       return ({
         fixed: 'left',
-        title: props.plcTreeTitle || i18n('base.name').d('名称'),
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
         modelValue: model.value,
         onUpdateModelValue: treeHandler.onModelValueChange,
         field: labelField,

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -94,6 +94,7 @@ export function createSingleCascadeRender(
       ref={onRef.input}
       className={classes.value}
       suffixIcon="pi-mind-mapping"
+      customReadonly={props.disableFilter || props.lazy}
       {...mergeAttrs(
         { class: classes.value, },
         {
@@ -107,7 +108,6 @@ export function createSingleCascadeRender(
             }
         }
       )}
-      customReadonly={props.disableFilter || props.lazy}
     />
   )));
 
@@ -158,7 +158,7 @@ export function createSingleCascadeRender(
       return ({
         ref: onRef.plcTree,
         fixed: 'left',
-        title: props.plcTreeTitle || i18n('base.name').d('名称'),
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
         modelValue: model.value,
         onUpdateModelValue: treeHandler.onModelValueChange,
         field: labelField,

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

@@ -13,7 +13,7 @@ import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
 import {removeUnit} from "plain-utils/string/removeUnit";
 import {useStyle} from "../../uses/useStyle";
 import {CascadePanelCustomPropsOption} from "../CascadePanel/cascade-panel.utils";
-import {pick} from "../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
 import React from "react";

package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss

@@ -1,6 +1,15 @@
 @include prefix(cascade-panel-flat) {
   width: 500px;
 
+  & > .#{componentName(scroll)} {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: initial !important;
+        overflow-y: initial !important;
+      }
+    }
+  }
+
   .cascade-panel-flat-header {
     position: sticky;
     top: 0;
@@ -46,6 +55,7 @@
       cursor: pointer;
       transition: background-color linear 300ms;
       border-radius: plv(box-size-small-border-radius);
+      word-break: break-all;
 
       @include comp(checkbox) {
         line-height: 1.4em;
@@ -83,35 +93,26 @@
   &.cascade-panel-size-normal, &.cascade-panel-size-large {
     @include comp(cascade-panel-flat) {
       .cascade-panel-flat-header {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-header-item {
-          padding: 0 8px;
-          line-height: 28px;
-          cursor: pointer;
-
-          &:hover {
-            background-color: plv(background-hover);
-          }
-        }
       }
       .cascade-panel-flat-body {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-item {
-          padding: 8px 8px;
-        }
       }
     }
   }
-  &.cascade-panel-size-small, &.cascade-panel-size-mini {
+
+  @include sizeMixin(cascade-panel, ()) {
     @include comp(cascade-panel-flat) {
+      .cascade-panel-flat-item {
+        border-radius: plv(box-size-#{$name}-border-radius);
+      }
       .cascade-panel-flat-header {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-header-item {
-          padding: 0 4px;
-          line-height: 24px;
+          padding: 0 calc(#{plv(input-padding-x-#{$name})} - 2px);
+          line-height: 28px;
           cursor: pointer;
 
           &:hover {
@@ -120,26 +121,13 @@
         }
       }
       .cascade-panel-flat-body {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-item {
-          padding: 4px 4px;
+          padding: calc((#{plv(input-padding-x-#{$name})} - 2px) * 0.6) calc(#{plv(input-padding-x-#{$name})} - 2px);
         }
       }
     }
   }
-
-  @include sizeMixin(cascade-panel, ()) {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-item {
-        border-radius: plv(box-size-#{$name}-border-radius);
-      }
-      .cascade-panel-flat-header {
-        font-size: $font-size;
-      }
-      .cascade-panel-flat-body {
-        font-size: $font-size;
-      }
-    }
-  }
 }

package/src/packages/components/CascadePanel/flat/createCascadeFlatRender.tsx

@@ -28,7 +28,7 @@ export function createCascadeFlatRender(
         </Fragment>
       ))}
       <div className="cascade-panel-flat-header-item">
-        {props.flatPanelPlaceholder?.[panels.value.length - 1] || i18n('base.pleaseSelect').d('请选择')}
+        {props.flatPanelPlaceholder?.[panels.value.length - 1] || i18n.$it('base.pleaseSelect').d('请选择')}
       </div>
     </div>;
     return () => renderContent;

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
               return (
                 <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
                   {{
-                    default: ({ item: treeNode, index, virtualIndex }: { item: iTreeNode, index: number, virtualIndex: number }) => (
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
                       <CascadeListPanelNode
-                        data-vid={index}
+                        data-vid={vid}
                         treeNode={treeNode}
                         treeNodes={props.treeNodes}
                         index={index}
-                        key={virtualIndex}
+                        key={vIndex}
                         handleClickNode={props.handleClickNode}
                         {...props.nodeAttrs}
                       >

package/src/packages/components/Checkbox/checkbox.scss

@@ -51,6 +51,10 @@
 
   @include sizeMixin(checkbox, (font-size)) {
     line-height: 1.7em;
+
+    .plain-click-node {
+      border-radius: $border-radius;
+    }
   }
 
   &:focus {

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

@@ -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

@@ -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/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/sub/ColorSlider.tsx

@@ -5,6 +5,7 @@ import {createEffects} from "plain-utils/utils/createEffects";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import './color-slider.scss';
+import {ClientZoom} from "../../ClientZoom";
 
 export const ColorSlider = designComponent({
   name: 'color-slider',
@@ -110,12 +111,13 @@ export const ColorSlider = designComponent({
       };
       const handler = {
         onMousedown: (e: iMouseEvent) => {
-          utils.setOffsetX(e.nativeEvent.offsetX);
+          const { clientX, clientY, offsetX } = ClientZoom.getClientPosition(e);
+          utils.setOffsetX(offsetX);
           staticState = {
             start: {
-              x: e.clientX,
-              y: e.clientY,
-              offsetX: e.nativeEvent.offsetX,
+              x: clientX,
+              y: clientY,
+              offsetX: offsetX,
             }
           };
           draggierEffects.push(() => staticState = null);
@@ -129,7 +131,8 @@ export const ColorSlider = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durX = e.clientX - staticState.start.x;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          const durX = clientX - staticState.start.x;
           const newOffsetX = durX + staticState.start.offsetX;
           utils.setOffsetX(newOffsetX);
         },

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

@@ -5,6 +5,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
+import {ClientZoom} from "../../..";
 
 export const ColorSvPanel = designComponent({
   name: 'color-sv-panel',
@@ -71,14 +72,16 @@ export const ColorSvPanel = designComponent({
         document.body.addEventListener('mousemove', handler.mousemove);
         document.body.addEventListener('mouseup', handler.mouseup);
         disabledUserSelect();
-        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
-        state.startX = e.clientX;
-        state.startY = e.clientY;
+        const { offsetX, offsetY, clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(offsetX, offsetY);
+        state.startX = clientX;
+        state.startY = clientY;
         state.tempSaturation = state.saturation as number;
         state.tempValue = state.val as number;
       },
       mousemove: (e: MouseEvent) => {
-        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(clientX - state.startX, clientY - state.startY, false);
       },
       mouseup: () => {
         document.body.removeEventListener('mousemove', handler.mousemove);

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 "plain-design-composition";
+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 "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {unit} from "plain-utils/string/unit";
+import './corner.scss';
+import {createEnum} from "plain-utils/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

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

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

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

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

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

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

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