y-element-ultra 0.1.0 → 0.1.1

package/es/core-components.d.ts

@@ -72,3 +72,4 @@ export { default as YUploadList } from './y-upload-list/index';
 export { default as YViewer } from './y-viewer/index';
 export { default as YVirtualTable } from './y-virtual-table/index';
 export { default as YWatermark } from './y-watermark/index';
+export { default as YRangeInput } from './y-range-input/index';

package/es/core-components.js

@@ -72,6 +72,7 @@ import { default as default72 } from "./y-upload-list/index";
 import { default as default73 } from "./y-viewer/index";
 import { default as default74 } from "./y-virtual-table/index";
 import { default as default75 } from "./y-watermark/index";
+import { default as default76 } from "./y-range-input/index";
 export {
   default2 as YAdminLayout,
   default3 as YAlert,
@@ -123,6 +124,7 @@ export {
   default49 as YQrCode,
   default50 as YQrCodeSvg,
   default51 as YRadioGroup,
+  default76 as YRangeInput,
   default52 as YSegmented,
   default53 as YSelect,
   default54 as YSelectTree,

package/es/style/plus.scss

@@ -55,3 +55,4 @@
 @use '../y-upload-list/style/index.scss' as uploadList;
 @use '../y-viewer/style/index.scss' as viewer;
 @use '../y-virtual-table/style/index.scss' as virtualTable;
+@use '../y-range-input/style/index.scss' as rangeInput;

package/es/style/themes/default.scss

@@ -1516,7 +1516,10 @@ $y: map.deep-merge(
       // 文本域大尺寸
       'padding-top': 8px,
       'padding-bottom': 8px
-    )
+    ),
+    'range-input': (
+      // 范围输入框
+    ),
   ),
   $y
 );

package/es/y-input/index.d.ts

@@ -3,7 +3,7 @@ declare function __VLS_template(): Partial<Record<NonNullable<string | number>,
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
-        type: StringConstructor;
+        type: (NumberConstructor | StringConstructor)[];
         default: () => string;
     };
     inputType: {
@@ -26,7 +26,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     "update:modelValue": (_value: any, _e?: MouseEvent | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
-        type: StringConstructor;
+        type: (NumberConstructor | StringConstructor)[];
         default: () => string;
     };
     inputType: {
@@ -48,7 +48,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: any, _e?: MouseEvent | undefined) => any) | undefined;
 }>, {
-    modelValue: string;
+    modelValue: string | number;
     inputType: string;
     placeholder: string;
     decimalLimit: number;

package/es/y-input/props.d.ts

@@ -5,7 +5,7 @@ import { ExtractPropTypes } from 'vue';
  */
 export declare const inputProps: {
     modelValue: {
-        type: StringConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: () => string;
     };
     inputType: {

package/es/y-input/props.js

@@ -1,7 +1,7 @@
 const inputProps = {
   // v-model绑定的值
   modelValue: {
-    type: String,
+    type: [String, Number],
     default: () => ""
   },
   // 拓展类型标注(text、amount、phone、integer、decimal、idCard)

package/es/y-range-input/index.d.ts

@@ -0,0 +1,113 @@
+import { RangeInputValue } from './props';
+
+declare function __VLS_template(): {
+    prefix?(_: {}): any;
+    suffix?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: import('vue').PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').RangeInputSize>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (_value: RangeInputValue) => void;
+    clear: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: import('vue').PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').RangeInputSize>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: RangeInputValue) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {
+    modelValue: RangeInputValue;
+    min: number;
+    max: number;
+    precision: number;
+    rangeSeparator: string;
+    clearable: boolean;
+    disabled: boolean;
+    minPlaceholder: string;
+    maxPlaceholder: string;
+    size: import('./props').RangeInputSize;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/y-range-input/index.js

@@ -0,0 +1,152 @@
+import { defineComponent, ref, computed, watch, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, createElementVNode, createSlots, withCtx, renderSlot, toDisplayString, createCommentVNode, unref, withModifiers, createVNode, nextTick } from "vue";
+import { ElIcon } from "element-plus";
+import { CloseCircleFilled } from "../icons/index";
+import { rangeInputEmits, rangeInputProps } from "./props";
+const _hoisted_1 = { class: "y-range-separator" };
+const _hoisted_2 = { class: "y-range-input-suffix" };
+const _hoisted_3 = {
+  key: 0,
+  class: "y-range-input-suffix-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "YRangeInput" },
+  __name: "index",
+  props: rangeInputProps,
+  emits: rangeInputEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const displayValue = ref([null, null]);
+    const inputRenderKey = ref(0);
+    const isClearing = ref(false);
+    const hasValue = computed(
+      () => displayValue.value.some((item) => item !== null)
+    );
+    const showClear = computed(() => !props.disabled && hasValue.value);
+    const normalizeInputValue = (value) => {
+      if (value == null || Number.isNaN(value)) {
+        return null;
+      }
+      return value;
+    };
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (val.length === 0) {
+          displayValue.value = [null, null];
+          return;
+        }
+        displayValue.value = [...val];
+      },
+      { immediate: true }
+    );
+    const updateDisplayValue = (index, value) => {
+      if (isClearing.value) {
+        return;
+      }
+      const nextValue = normalizeInputValue(value);
+      const nextDisplay = [...displayValue.value];
+      nextDisplay[index] = nextValue;
+      displayValue.value = nextDisplay;
+    };
+    const onChange = (index) => {
+      if (isClearing.value) {
+        return;
+      }
+      let left = displayValue.value[0];
+      let right = displayValue.value[1];
+      if (left !== null && right !== null) {
+        if (left > right) {
+          if (index === 0) left = right;
+          else right = left;
+          displayValue.value = [left, right];
+        }
+      }
+      if (left === null && right === null) {
+        emit("update:modelValue", []);
+        return;
+      }
+      emit("update:modelValue", [left, right]);
+    };
+    const onClear = async () => {
+      if (!showClear.value) return;
+      isClearing.value = true;
+      displayValue.value = [null, null];
+      inputRenderKey.value += 1;
+      emit("update:modelValue", []);
+      emit("clear");
+      await nextTick();
+      isClearing.value = false;
+    };
+    return (_ctx, _cache) => {
+      const _component_el_input_number = resolveComponent("el-input-number");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{
+          "is-disabled": props.disabled
+        }, "y-range-input"])
+      }, [
+        (openBlock(), createBlock(_component_el_input_number, {
+          key: `left-${inputRenderKey.value}`,
+          "model-value": displayValue.value[0],
+          placeholder: props.minPlaceholder,
+          disabled: props.disabled,
+          min: props.min,
+          max: displayValue.value[1] !== null ? displayValue.value[1] : props.max,
+          size: props.size,
+          precision: props.precision,
+          controls: false,
+          class: "y-input-number-left",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => updateDisplayValue(0, $event)),
+          onChange: _cache[1] || (_cache[1] = ($event) => onChange(0))
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["model-value", "placeholder", "disabled", "min", "max", "size", "precision"])),
+        createElementVNode("span", _hoisted_1, toDisplayString(props.rangeSeparator), 1),
+        (openBlock(), createBlock(_component_el_input_number, {
+          key: `right-${inputRenderKey.value}`,
+          "model-value": displayValue.value[1],
+          placeholder: props.maxPlaceholder,
+          disabled: props.disabled,
+          min: displayValue.value[0] !== null ? displayValue.value[0] : props.min,
+          max: props.max,
+          size: props.size,
+          controls: false,
+          precision: props.precision,
+          class: "y-input-number-right",
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => updateDisplayValue(1, $event)),
+          onChange: _cache[4] || (_cache[4] = ($event) => onChange(1))
+        }, {
+          suffix: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "suffix")
+              ])) : createCommentVNode("", true),
+              showClear.value ? (openBlock(), createBlock(unref(ElIcon), {
+                key: 1,
+                class: "y-range-input-clear",
+                onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+                }, ["prevent"])),
+                onClick: withModifiers(onClear, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(CloseCircleFilled))
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 3
+        }, 8, ["model-value", "placeholder", "disabled", "min", "max", "size", "precision"]))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/y-range-input/props.d.ts

@@ -0,0 +1,62 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export type RangeInputValue = Array<number | null>;
+export type RangeInputSize = '' | 'default' | 'small' | 'large';
+/** 属性 */
+export declare const rangeInputProps: {
+    /** 输入框范围输入值 */
+    modelValue: {
+        type: PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    /** 最小值 */
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 最大值 */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 精度 */
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 分隔符 */
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否可清空 */
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否禁用 */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 最小值占位符 */
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 最大值占位符 */
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 输入框范围输入大小 */
+    size: {
+        type: PropType<RangeInputSize>;
+        default: string;
+    };
+};
+export type RangeInputProps = ExtractPropTypes<typeof rangeInputProps>;
+export declare const rangeInputEmits: {
+    'update:modelValue': (_value: RangeInputValue) => boolean;
+    clear: () => boolean;
+};

package/es/y-range-input/props.js

@@ -0,0 +1,60 @@
+const rangeInputProps = {
+  /** 输入框范围输入值 */
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  /** 最小值 */
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  /** 最大值 */
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  /** 精度 */
+  precision: {
+    type: Number,
+    default: 0
+  },
+  /** 分隔符 */
+  rangeSeparator: {
+    type: String,
+    default: "To"
+  },
+  /** 是否可清空 */
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** 最小值占位符 */
+  minPlaceholder: {
+    type: String,
+    default: "最小值"
+  },
+  /** 最大值占位符 */
+  maxPlaceholder: {
+    type: String,
+    default: "最大值"
+  },
+  /** 输入框范围输入大小 */
+  size: {
+    type: String,
+    default: "default"
+  }
+};
+const rangeInputEmits = {
+  "update:modelValue": (_value) => true,
+  clear: () => true
+};
+export {
+  rangeInputEmits,
+  rangeInputProps
+};

package/es/y-range-input/style/css-var.scss

@@ -0,0 +1,9 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表单主题变量 */
+@mixin set-range-input-var($var) {
+  .y-range-input {
+    @include set-y-var('input', $var);
+    @include set-y-var('input-error', $var);
+  }
+}

package/es/y-range-input/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/y-range-input/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/y-range-input/style/index.scss

@@ -0,0 +1,124 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-range-input-var($y);
+
+.el-form-item.is-error {
+  .y-range-input {
+    background: yVar('input-error', 'bg');
+    border-color: elVar('color-error');
+    box-shadow: yVar('input', 'hover-shadow');
+
+    &:hover:not(.is-disabled) {
+      background: yVar('input-error', 'hover-bg');
+      border-color: elVar('color-error');
+      box-shadow: yVar('input', 'hover-shadow');
+    }
+
+    &:focus-within:not(.is-disabled) {
+      background: yVar('input-error', 'focus-bg');
+      border-color: elVar('color-error');
+      box-shadow: yVar('input', 'focus-shadow');
+    }
+  }
+}
+
+.y-range-input {
+  width: 100%;
+  min-height: elVar('input', 'height');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: yVar('input', 'border');
+  background: yVar('input', 'bg');
+  border-radius: yVar('input', 'radius');
+  box-sizing: border-box;
+  transition: all $transition-base;
+  overflow: hidden;
+  cursor: text;
+  padding-left: yVar('input', 'padding-left');
+  padding-right: yVar('input', 'padding-right');
+
+  &:hover:not(.is-disabled) {
+    border-color: elVar('color-primary');
+    background: yVar('input', 'hover-bg');
+    box-shadow: yVar('input', 'hover-shadow');
+
+    .y-range-input-clear {
+      display: block;
+    }
+  }
+
+  &:focus-within:not(.is-disabled) {
+    border-color: elVar('color-primary');
+    background: yVar('input', 'hover-bg');
+    box-shadow: yVar('input', 'hover-shadow');
+  }
+
+  /** 左边数字输入  **/
+  .y-input-number-left {
+    .el-input__wrapper {
+      padding-left: 0 !important;
+    }
+  }
+
+  /** 右边数字输入 */
+  .y-input-number-right {
+    .el-input__wrapper {
+      padding-right: 0 !important;
+    }
+  }
+
+  .el-input-number {
+    width: 50%;
+
+    .el-input {
+      --el-input-hover-border-color: transparent;
+      --el-input-focus-border-color: transparent;
+    }
+
+    .el-input__wrapper {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .y-range-separator {
+    flex-shrink: 0;
+    padding: 0 8px;
+    color: elVar('text-color', 'placeholder');
+    user-select: none;
+  }
+
+  .y-range-input-suffix {
+    display: flex;
+    align-items: center;
+    gap: yVar('input', 'icon-space');
+  }
+
+  .y-range-input-suffix-content {
+    display: flex;
+    align-items: center;
+    color: inherit;
+  }
+
+  .y-range-input-clear {
+    cursor: pointer;
+    color: yVar('input', 'clear-color');
+    transition: color $transition-base;
+    display: none;
+  }
+
+  &.is-disabled {
+    border: yVar('input', 'disabled-border');
+    background: yVar('input', 'disabled-bg');
+    box-shadow: none;
+    cursor: not-allowed;
+
+    .y-range-separator {
+      color: yVar('input', 'disabled-color');
+    }
+  }
+}

package/lib/core-components.cjs

@@ -74,6 +74,7 @@ const index$16 = require("./y-upload-list/index");
 const index$17 = require("./y-viewer/index");
 const index$18 = require("./y-virtual-table/index");
 const index$19 = require("./y-watermark/index");
+const index$1a = require("./y-range-input/index");
 exports.YAdminLayout = index;
 exports.YAlert = index$1;
 exports.YApp = index$2;
@@ -148,3 +149,4 @@ exports.YUploadList = index$16;
 exports.YViewer = index$17;
 exports.YVirtualTable = index$18;
 exports.YWatermark = index$19;
+exports.YRangeInput = index$1a;

package/lib/core-components.d.ts

@@ -72,3 +72,4 @@ export { default as YUploadList } from './y-upload-list/index';
 export { default as YViewer } from './y-viewer/index';
 export { default as YVirtualTable } from './y-virtual-table/index';
 export { default as YWatermark } from './y-watermark/index';
+export { default as YRangeInput } from './y-range-input/index';

package/lib/style/plus.scss

@@ -55,3 +55,4 @@
 @use '../y-upload-list/style/index.scss' as uploadList;
 @use '../y-viewer/style/index.scss' as viewer;
 @use '../y-virtual-table/style/index.scss' as virtualTable;
+@use '../y-range-input/style/index.scss' as rangeInput;

package/lib/style/themes/default.scss

@@ -1516,7 +1516,10 @@ $y: map.deep-merge(
       // 文本域大尺寸
       'padding-top': 8px,
       'padding-bottom': 8px
-    )
+    ),
+    'range-input': (
+      // 范围输入框
+    ),
   ),
   $y
 );

package/lib/y-input/index.d.ts

@@ -3,7 +3,7 @@ declare function __VLS_template(): Partial<Record<NonNullable<string | number>,
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
-        type: StringConstructor;
+        type: (NumberConstructor | StringConstructor)[];
         default: () => string;
     };
     inputType: {
@@ -26,7 +26,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     "update:modelValue": (_value: any, _e?: MouseEvent | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
-        type: StringConstructor;
+        type: (NumberConstructor | StringConstructor)[];
         default: () => string;
     };
     inputType: {
@@ -48,7 +48,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: any, _e?: MouseEvent | undefined) => any) | undefined;
 }>, {
-    modelValue: string;
+    modelValue: string | number;
     inputType: string;
     placeholder: string;
     decimalLimit: number;

package/lib/y-input/props.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const inputProps = {
   // v-model绑定的值
   modelValue: {
-    type: String,
+    type: [String, Number],
     default: () => ""
   },
   // 拓展类型标注(text、amount、phone、integer、decimal、idCard)

package/lib/y-input/props.d.ts

@@ -5,7 +5,7 @@ import { ExtractPropTypes } from 'vue';
  */
 export declare const inputProps: {
     modelValue: {
-        type: StringConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: () => string;
     };
     inputType: {

package/lib/y-range-input/index.cjs

@@ -0,0 +1,151 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../icons/index");
+const props = require("./props");
+const _hoisted_1 = { class: "y-range-separator" };
+const _hoisted_2 = { class: "y-range-input-suffix" };
+const _hoisted_3 = {
+  key: 0,
+  class: "y-range-input-suffix-content"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "YRangeInput" },
+  __name: "index",
+  props: props.rangeInputProps,
+  emits: props.rangeInputEmits,
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
+    const displayValue = vue.ref([null, null]);
+    const inputRenderKey = vue.ref(0);
+    const isClearing = vue.ref(false);
+    const hasValue = vue.computed(
+      () => displayValue.value.some((item) => item !== null)
+    );
+    const showClear = vue.computed(() => !props2.disabled && hasValue.value);
+    const normalizeInputValue = (value) => {
+      if (value == null || Number.isNaN(value)) {
+        return null;
+      }
+      return value;
+    };
+    vue.watch(
+      () => props2.modelValue,
+      (val) => {
+        if (val.length === 0) {
+          displayValue.value = [null, null];
+          return;
+        }
+        displayValue.value = [...val];
+      },
+      { immediate: true }
+    );
+    const updateDisplayValue = (index2, value) => {
+      if (isClearing.value) {
+        return;
+      }
+      const nextValue = normalizeInputValue(value);
+      const nextDisplay = [...displayValue.value];
+      nextDisplay[index2] = nextValue;
+      displayValue.value = nextDisplay;
+    };
+    const onChange = (index2) => {
+      if (isClearing.value) {
+        return;
+      }
+      let left = displayValue.value[0];
+      let right = displayValue.value[1];
+      if (left !== null && right !== null) {
+        if (left > right) {
+          if (index2 === 0) left = right;
+          else right = left;
+          displayValue.value = [left, right];
+        }
+      }
+      if (left === null && right === null) {
+        emit("update:modelValue", []);
+        return;
+      }
+      emit("update:modelValue", [left, right]);
+    };
+    const onClear = async () => {
+      if (!showClear.value) return;
+      isClearing.value = true;
+      displayValue.value = [null, null];
+      inputRenderKey.value += 1;
+      emit("update:modelValue", []);
+      emit("clear");
+      await vue.nextTick();
+      isClearing.value = false;
+    };
+    return (_ctx, _cache) => {
+      const _component_el_input_number = vue.resolveComponent("el-input-number");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([{
+          "is-disabled": props2.disabled
+        }, "y-range-input"])
+      }, [
+        (vue.openBlock(), vue.createBlock(_component_el_input_number, {
+          key: `left-${inputRenderKey.value}`,
+          "model-value": displayValue.value[0],
+          placeholder: props2.minPlaceholder,
+          disabled: props2.disabled,
+          min: props2.min,
+          max: displayValue.value[1] !== null ? displayValue.value[1] : props2.max,
+          size: props2.size,
+          precision: props2.precision,
+          controls: false,
+          class: "y-input-number-left",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => updateDisplayValue(0, $event)),
+          onChange: _cache[1] || (_cache[1] = ($event) => onChange(0))
+        }, vue.createSlots({ _: 2 }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["model-value", "placeholder", "disabled", "min", "max", "size", "precision"])),
+        vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(props2.rangeSeparator), 1),
+        (vue.openBlock(), vue.createBlock(_component_el_input_number, {
+          key: `right-${inputRenderKey.value}`,
+          "model-value": displayValue.value[1],
+          placeholder: props2.maxPlaceholder,
+          disabled: props2.disabled,
+          min: displayValue.value[0] !== null ? displayValue.value[0] : props2.min,
+          max: props2.max,
+          size: props2.size,
+          controls: false,
+          precision: props2.precision,
+          class: "y-input-number-right",
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => updateDisplayValue(1, $event)),
+          onChange: _cache[4] || (_cache[4] = ($event) => onChange(1))
+        }, {
+          suffix: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2, [
+              _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                vue.renderSlot(_ctx.$slots, "suffix")
+              ])) : vue.createCommentVNode("", true),
+              showClear.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 1,
+                class: "y-range-input-clear",
+                onMousedown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                }, ["prevent"])),
+                onClick: vue.withModifiers(onClear, ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.CloseCircleFilled))
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          _: 3
+        }, 8, ["model-value", "placeholder", "disabled", "min", "max", "size", "precision"]))
+      ], 2);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/y-range-input/index.d.ts

@@ -0,0 +1,113 @@
+import { RangeInputValue } from './props';
+
+declare function __VLS_template(): {
+    prefix?(_: {}): any;
+    suffix?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: import('vue').PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').RangeInputSize>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (_value: RangeInputValue) => void;
+    clear: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: import('vue').PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').RangeInputSize>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: RangeInputValue) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {
+    modelValue: RangeInputValue;
+    min: number;
+    max: number;
+    precision: number;
+    rangeSeparator: string;
+    clearable: boolean;
+    disabled: boolean;
+    minPlaceholder: string;
+    maxPlaceholder: string;
+    size: import('./props').RangeInputSize;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/y-range-input/props.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const rangeInputProps = {
+  /** 输入框范围输入值 */
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  /** 最小值 */
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  /** 最大值 */
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  /** 精度 */
+  precision: {
+    type: Number,
+    default: 0
+  },
+  /** 分隔符 */
+  rangeSeparator: {
+    type: String,
+    default: "To"
+  },
+  /** 是否可清空 */
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** 最小值占位符 */
+  minPlaceholder: {
+    type: String,
+    default: "最小值"
+  },
+  /** 最大值占位符 */
+  maxPlaceholder: {
+    type: String,
+    default: "最大值"
+  },
+  /** 输入框范围输入大小 */
+  size: {
+    type: String,
+    default: "default"
+  }
+};
+const rangeInputEmits = {
+  "update:modelValue": (_value) => true,
+  clear: () => true
+};
+exports.rangeInputEmits = rangeInputEmits;
+exports.rangeInputProps = rangeInputProps;

package/lib/y-range-input/props.d.ts

@@ -0,0 +1,62 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export type RangeInputValue = Array<number | null>;
+export type RangeInputSize = '' | 'default' | 'small' | 'large';
+/** 属性 */
+export declare const rangeInputProps: {
+    /** 输入框范围输入值 */
+    modelValue: {
+        type: PropType<RangeInputValue>;
+        default: () => never[];
+    };
+    /** 最小值 */
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 最大值 */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 精度 */
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 分隔符 */
+    rangeSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否可清空 */
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否禁用 */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 最小值占位符 */
+    minPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 最大值占位符 */
+    maxPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 输入框范围输入大小 */
+    size: {
+        type: PropType<RangeInputSize>;
+        default: string;
+    };
+};
+export type RangeInputProps = ExtractPropTypes<typeof rangeInputProps>;
+export declare const rangeInputEmits: {
+    'update:modelValue': (_value: RangeInputValue) => boolean;
+    clear: () => boolean;
+};

package/lib/y-range-input/style/css-var.scss

@@ -0,0 +1,9 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表单主题变量 */
+@mixin set-range-input-var($var) {
+  .y-range-input {
+    @include set-y-var('input', $var);
+    @include set-y-var('input-error', $var);
+  }
+}

package/lib/y-range-input/style/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/y-range-input/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/y-range-input/style/index.scss

@@ -0,0 +1,124 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-range-input-var($y);
+
+.el-form-item.is-error {
+  .y-range-input {
+    background: yVar('input-error', 'bg');
+    border-color: elVar('color-error');
+    box-shadow: yVar('input', 'hover-shadow');
+
+    &:hover:not(.is-disabled) {
+      background: yVar('input-error', 'hover-bg');
+      border-color: elVar('color-error');
+      box-shadow: yVar('input', 'hover-shadow');
+    }
+
+    &:focus-within:not(.is-disabled) {
+      background: yVar('input-error', 'focus-bg');
+      border-color: elVar('color-error');
+      box-shadow: yVar('input', 'focus-shadow');
+    }
+  }
+}
+
+.y-range-input {
+  width: 100%;
+  min-height: elVar('input', 'height');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: yVar('input', 'border');
+  background: yVar('input', 'bg');
+  border-radius: yVar('input', 'radius');
+  box-sizing: border-box;
+  transition: all $transition-base;
+  overflow: hidden;
+  cursor: text;
+  padding-left: yVar('input', 'padding-left');
+  padding-right: yVar('input', 'padding-right');
+
+  &:hover:not(.is-disabled) {
+    border-color: elVar('color-primary');
+    background: yVar('input', 'hover-bg');
+    box-shadow: yVar('input', 'hover-shadow');
+
+    .y-range-input-clear {
+      display: block;
+    }
+  }
+
+  &:focus-within:not(.is-disabled) {
+    border-color: elVar('color-primary');
+    background: yVar('input', 'hover-bg');
+    box-shadow: yVar('input', 'hover-shadow');
+  }
+
+  /** 左边数字输入  **/
+  .y-input-number-left {
+    .el-input__wrapper {
+      padding-left: 0 !important;
+    }
+  }
+
+  /** 右边数字输入 */
+  .y-input-number-right {
+    .el-input__wrapper {
+      padding-right: 0 !important;
+    }
+  }
+
+  .el-input-number {
+    width: 50%;
+
+    .el-input {
+      --el-input-hover-border-color: transparent;
+      --el-input-focus-border-color: transparent;
+    }
+
+    .el-input__wrapper {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .y-range-separator {
+    flex-shrink: 0;
+    padding: 0 8px;
+    color: elVar('text-color', 'placeholder');
+    user-select: none;
+  }
+
+  .y-range-input-suffix {
+    display: flex;
+    align-items: center;
+    gap: yVar('input', 'icon-space');
+  }
+
+  .y-range-input-suffix-content {
+    display: flex;
+    align-items: center;
+    color: inherit;
+  }
+
+  .y-range-input-clear {
+    cursor: pointer;
+    color: yVar('input', 'clear-color');
+    transition: color $transition-base;
+    display: none;
+  }
+
+  &.is-disabled {
+    border: yVar('input', 'disabled-border');
+    background: yVar('input', 'disabled-bg');
+    box-shadow: none;
+    cursor: not-allowed;
+
+    .y-range-separator {
+      color: yVar('input', 'disabled-color');
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "y-element-ultra",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

package/typings/global.d.ts

@@ -60,6 +60,7 @@ declare module 'vue' {
     YQrCode: (typeof import('y-element-ultra'))['YQrCode'];
     YQrCodeSvg: (typeof import('y-element-ultra'))['YQrCodeSvg'];
     YRadioGroup: (typeof import('y-element-ultra'))['YRadioGroup'];
+    YRangeInput: (typeof import('y-element-ultra'))['YRangeInput'];
     YSegmented: (typeof import('y-element-ultra'))['YSegmented'];
     YSelect: (typeof import('y-element-ultra'))['YSelect'];
     YSelectTree: (typeof import('y-element-ultra'))['YSelectTree'];