feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -0,0 +1,33 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./button.vue.js";
import { ComponentPublicInstance, ExtractPropTypes, ExtractPublicPropTypes, Ref } from "vue";
import * as _popperjs_core0 from "@popperjs/core";
//#region ../../packages/components/slider/src/button.d.ts
declare const sliderButtonProps: {
readonly modelValue: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: EpPropFinalized<StringConstructor, _popperjs_core0.Placement, unknown, "top", boolean>;
};
type SliderButtonProps = ExtractPropTypes<typeof sliderButtonProps>;
declare const sliderButtonEmits: {
"update:modelValue": (value: number) => boolean;
};
type SliderButtonEmits = typeof sliderButtonEmits;
type SliderButtonInstance = ComponentPublicInstance<typeof _default>;
interface SliderButtonInitData {
hovering: boolean;
dragging: boolean;
isClick: boolean;
startX: number;
currentX: number;
startY: number;
currentY: number;
startPosition: number;
newPosition: number;
oldValue: number;
}
//#endregion
export { SliderButtonEmits, SliderButtonInitData, SliderButtonInstance, SliderButtonProps };
+27
View File
@@ -0,0 +1,27 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_types = require('../../../utils/types.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
let _popperjs_core = require("@popperjs/core");
//#region ../../packages/components/slider/src/button.ts
const sliderButtonProps = require_runtime$1.buildProps({
modelValue: {
type: Number,
default: 0
},
vertical: Boolean,
tooltipClass: String,
placement: {
type: String,
values: _popperjs_core.placements,
default: "top"
}
});
const sliderButtonEmits = { [require_event.UPDATE_MODEL_EVENT]: (value) => require_types.isNumber(value) };
//#endregion
exports.sliderButtonEmits = sliderButtonEmits;
exports.sliderButtonProps = sliderButtonProps;
//# sourceMappingURL=button.js.map
@@ -0,0 +1 @@
{"version":3,"file":"button.js","names":["buildProps","placements","UPDATE_MODEL_EVENT","isNumber"],"sources":["../../../../../../packages/components/slider/src/button.ts"],"sourcesContent":["import { placements } from '@popperjs/core'\nimport { buildProps, isNumber } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n ComponentPublicInstance,\n ExtractPropTypes,\n ExtractPublicPropTypes,\n Ref,\n} from 'vue'\nimport type Button from './button.vue'\n\nexport const sliderButtonProps = buildProps({\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: Boolean,\n tooltipClass: String,\n placement: {\n type: String,\n values: placements,\n default: 'top',\n },\n} as const)\nexport type SliderButtonProps = ExtractPropTypes<typeof sliderButtonProps>\nexport type SliderButtonPropsPublic = ExtractPublicPropTypes<\n typeof sliderButtonProps\n>\n\nexport const sliderButtonEmits = {\n [UPDATE_MODEL_EVENT]: (value: number) => isNumber(value),\n}\nexport type SliderButtonEmits = typeof sliderButtonEmits\n\nexport type SliderButtonInstance = ComponentPublicInstance<typeof Button>\n\nexport type ButtonRefs = Record<\n 'firstButton' | 'secondButton',\n Ref<SliderButtonInstance | undefined>\n>\n\nexport interface SliderButtonInitData {\n hovering: boolean\n dragging: boolean\n isClick: boolean\n startX: number\n currentX: number\n startY: number\n currentY: number\n startPosition: number\n newPosition: number\n oldValue: number\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,oBAAoBA,6BAAW;CAC1C,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,UAAU;CACV,cAAc;CACd,WAAW;EACT,MAAM;EACN,QAAQC;EACR,SAAS;EACV;CACF,CAAU;AAMX,MAAa,oBAAoB,GAC9BC,oCAAsB,UAAkBC,uBAAS,MAAM,EACzD"}
@@ -0,0 +1,35 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import "../../../index.js";
import { Placement } from "../../popper/index.js";
import * as vue from "vue";
//#region ../../packages/components/slider/src/button.vue.d.ts
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
readonly modelValue: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: EpPropFinalized<StringConstructor, Placement, unknown, "top", boolean>;
}>, {
onButtonDown: (event: MouseEvent | TouchEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
setPosition: (newPosition: number) => Promise<void>;
hovering: vue.Ref<boolean, boolean>;
dragging: vue.Ref<boolean, boolean>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
"update:modelValue": (value: number) => void;
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly modelValue: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: EpPropFinalized<StringConstructor, Placement, unknown, "top", boolean>;
}>> & Readonly<{
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
}>, {
readonly modelValue: number;
readonly vertical: boolean;
readonly placement: EpPropMergeType<StringConstructor, Placement, unknown>;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { _default };
@@ -0,0 +1,92 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../tooltip/index.js');
const require_use_slider_button = require('./composables/use-slider-button.js');
const require_button = require('./button.js');
let vue = require("vue");
//#region ../../packages/components/slider/src/button.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["tabindex"];
var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElSliderButton",
__name: "button",
props: require_button.sliderButtonProps,
emits: require_button.sliderButtonEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = require_index.useNamespace("slider");
const initData = (0, vue.reactive)({
hovering: false,
dragging: false,
isClick: false,
startX: 0,
currentX: 0,
startY: 0,
currentY: 0,
startPosition: 0,
newPosition: 0,
oldValue: props.modelValue
});
const tooltipPersistent = (0, vue.computed)(() => !showTooltip.value ? false : persistent.value);
const { disabled, button, tooltip, showTooltip, persistent, tooltipVisible, wrapperStyle, formatValue, handleMouseEnter, handleMouseLeave, onButtonDown, onKeyDown, setPosition } = require_use_slider_button.useSliderButton(props, initData, emit);
const { hovering, dragging } = (0, vue.toRefs)(initData);
__expose({
onButtonDown,
onKeyDown,
setPosition,
hovering,
dragging
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "button",
ref: button,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button-wrapper"), {
hover: (0, vue.unref)(hovering),
dragging: (0, vue.unref)(dragging)
}]),
style: (0, vue.normalizeStyle)((0, vue.unref)(wrapperStyle)),
tabindex: (0, vue.unref)(disabled) ? void 0 : 0,
onMouseenter: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(handleMouseEnter) && (0, vue.unref)(handleMouseEnter)(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handleMouseLeave) && (0, vue.unref)(handleMouseLeave)(...args)),
onMousedown: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(onButtonDown) && (0, vue.unref)(onButtonDown)(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(handleMouseEnter) && (0, vue.unref)(handleMouseEnter)(...args)),
onBlur: _cache[4] || (_cache[4] = (...args) => (0, vue.unref)(handleMouseLeave) && (0, vue.unref)(handleMouseLeave)(...args)),
onKeydown: _cache[5] || (_cache[5] = (...args) => (0, vue.unref)(onKeyDown) && (0, vue.unref)(onKeyDown)(...args))
}, [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElTooltip), {
ref_key: "tooltip",
ref: tooltip,
visible: (0, vue.unref)(tooltipVisible),
placement: _ctx.placement,
"fallback-placements": [
"top",
"bottom",
"right",
"left"
],
"stop-popper-mouse-event": false,
"popper-class": _ctx.tooltipClass,
disabled: !(0, vue.unref)(showTooltip),
persistent: tooltipPersistent.value
}, {
content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(formatValue)), 1)]),
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button"), {
hover: (0, vue.unref)(hovering),
dragging: (0, vue.unref)(dragging)
}]) }, null, 2)]),
_: 1
}, 8, [
"visible",
"placement",
"popper-class",
"disabled",
"persistent"
])], 46, _hoisted_1);
};
}
});
//#endregion
exports.default = button_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=button.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"button.vue_vue_type_script_setup_true_lang.js","names":["placement","tooltipClass"],"sources":["../../../../../../packages/components/slider/src/button.vue"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n :class=\"[ns.e('button-wrapper'), { hover: hovering, dragging }]\"\n :style=\"wrapperStyle\"\n :tabindex=\"disabled ? undefined : 0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown=\"onKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n :visible=\"tooltipVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['top', 'bottom', 'right', 'left']\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n :persistent=\"tooltipPersistent\"\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div :class=\"[ns.e('button'), { hover: hovering, dragging }]\" />\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, toRefs } from 'vue'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useSliderButton } from './composables'\nimport { sliderButtonEmits, sliderButtonProps } from './button'\n\nimport type { SliderButtonInitData } from './button'\n\ndefineOptions({\n name: 'ElSliderButton',\n})\n\nconst props = defineProps(sliderButtonProps)\nconst emit = defineEmits(sliderButtonEmits)\n\nconst ns = useNamespace('slider')\n\nconst initData = reactive<SliderButtonInitData>({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n})\n\nconst tooltipPersistent = computed(() =>\n !showTooltip.value ? false : persistent.value\n)\n\nconst {\n disabled,\n button,\n tooltip,\n showTooltip,\n persistent,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onKeyDown,\n setPosition,\n} = useSliderButton(props, initData, emit)\n\nconst { hovering, dragging } = toRefs(initData)\n\ndefineExpose({\n onButtonDown,\n onKeyDown,\n setPosition,\n hovering,\n dragging,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,KAAK,2BAAa,SAAQ;EAEhC,MAAM,6BAA0C;GAC9C,UAAU;GACV,UAAU;GACV,SAAS;GACT,QAAQ;GACR,UAAU;GACV,QAAQ;GACR,UAAU;GACV,eAAe;GACf,aAAa;GACb,UAAU,MAAM;GACjB,CAAA;EAED,MAAM,4CACJ,CAAC,YAAY,QAAQ,QAAQ,WAAW,MAC1C;EAEA,MAAM,EACJ,UACA,QACA,SACA,aACA,YACA,gBACA,cACA,aACA,kBACA,kBACA,cACA,WACA,gBACE,0CAAgB,OAAO,UAAU,KAAI;EAEzC,MAAM,EAAE,UAAU,6BAAoB,SAAQ;AAE9C,WAAa;GACX;GACA;GACA;GACA;GACA;GACD,CAAA;;4DA9DO,OAAA;aA1BA;IAAJ,KAAI;IACH,+BAAK,gBAAG,GAAE,CAAC,EAAC,iBAAA,EAAA;KAAA,sBAA6B,SAAQ;KAAA,yBAAE,SAAQ;KAAA,CAAA,CAAA;IAC3D,8CAAO,aAAY,CAAA;IACnB,yBAAU,SAAQ,GAAG,SAAS;IAC9B,cAAU,OAAA,OAAA,OAAA,iCAAE,iBAAA,mBAAA,iBAAA,CAAA,GAAA,KAAgB;IAC5B,cAAU,OAAA,OAAA,OAAA,iCAAE,iBAAA,mBAAA,iBAAA,CAAA,GAAA,KAAgB;IAC5B,aAAS,OAAA,OAAA,OAAA,iCAAE,aAAA,mBAAA,aAAA,CAAA,GAAA,KAAY;IACvB,SAAK,OAAA,OAAA,OAAA,iCAAE,iBAAA,mBAAA,iBAAA,CAAA,GAAA,KAAgB;IACvB,QAAI,OAAA,OAAA,OAAA,iCAAE,iBAAA,mBAAA,iBAAA,CAAA,GAAA,KAAgB;IACtB,WAAO,OAAA,OAAA,OAAA,iCAAE,UAAA,mBAAA,UAAA,CAAA,GAAA,KAAS;2CAgBN,0BAAA,EAAA;aAbP;IAAJ,KAAI;IACH,wBAAS,eAAc;IACvB,WAAWA,KAAAA;IACX,uBAAqB;KAAA;KAAA;KAAA;KAAA;KAAkC;IACvD,2BAAyB;IACzB,gBAAcC,KAAAA;IACd,UAAQ,gBAAG,YAAW;IACtB,YAAY,kBAAA;;IAEF,gCACqB,6BAAA,QAAA,8CAArB,YAAW,CAAA,EAAA,EAAA;oCAE0C,6BAAA,OAAA,EAA1D,+BAAK,gBAAG,GAAE,CAAC,EAAC,SAAA,EAAA;KAAA,sBAAqB,SAAQ;KAAA,yBAAE,SAAQ;KAAA,CAAA,CAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_button_vue_vue_type_script_setup_true_lang = require('./button.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/slider/src/button.vue
var button_default = require_button_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = button_default;
//# sourceMappingURL=button2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"button2.js","names":[],"sources":["../../../../../../packages/components/slider/src/button.vue"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n :class=\"[ns.e('button-wrapper'), { hover: hovering, dragging }]\"\n :style=\"wrapperStyle\"\n :tabindex=\"disabled ? undefined : 0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown=\"onKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n :visible=\"tooltipVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['top', 'bottom', 'right', 'left']\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n :persistent=\"tooltipPersistent\"\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div :class=\"[ns.e('button'), { hover: hovering, dragging }]\" />\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, toRefs } from 'vue'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useSliderButton } from './composables'\nimport { sliderButtonEmits, sliderButtonProps } from './button'\n\nimport type { SliderButtonInitData } from './button'\n\ndefineOptions({\n name: 'ElSliderButton',\n})\n\nconst props = defineProps(sliderButtonProps)\nconst emit = defineEmits(sliderButtonEmits)\n\nconst ns = useNamespace('slider')\n\nconst initData = reactive<SliderButtonInitData>({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n})\n\nconst tooltipPersistent = computed(() =>\n !showTooltip.value ? false : persistent.value\n)\n\nconst {\n disabled,\n button,\n tooltip,\n showTooltip,\n persistent,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onKeyDown,\n setPosition,\n} = useSliderButton(props, initData, emit)\n\nconst { hovering, dragging } = toRefs(initData)\n\ndefineExpose({\n onButtonDown,\n onKeyDown,\n setPosition,\n hovering,\n dragging,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,7 @@
import { Mark, useMarks } from "./use-marks.js";
import { useLifecycle } from "./use-lifecycle.js";
import { useSlide } from "./use-slide.js";
import { useSliderButton } from "./use-slider-button.js";
import { useStops } from "./use-stops.js";
import { useWatch } from "./use-watch.js";
export { Mark, useLifecycle, useMarks, useSlide, useSliderButton, useStops, useWatch };
@@ -0,0 +1,14 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_use_lifecycle = require('./use-lifecycle.js');
const require_use_marks = require('./use-marks.js');
const require_use_slide = require('./use-slide.js');
const require_use_slider_button = require('./use-slider-button.js');
const require_use_stops = require('./use-stops.js');
const require_use_watch = require('./use-watch.js');
exports.useLifecycle = require_use_lifecycle.useLifecycle;
exports.useMarks = require_use_marks.useMarks;
exports.useSlide = require_use_slide.useSlide;
exports.useSliderButton = require_use_slider_button.useSliderButton;
exports.useStops = require_use_stops.useStops;
exports.useWatch = require_use_watch.useWatch;
@@ -0,0 +1,9 @@
import { SliderInitData, SliderProps } from "../slider.js";
import * as vue from "vue";
//#region ../../packages/components/slider/src/composables/use-lifecycle.d.ts
declare const useLifecycle: (props: SliderProps, initData: SliderInitData, resetSize: () => void) => {
sliderWrapper: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
};
//#endregion
export { useLifecycle };
@@ -0,0 +1,35 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../../utils/types.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/slider/src/composables/use-lifecycle.ts
const useLifecycle = (props, initData, resetSize) => {
const sliderWrapper = (0, vue.ref)();
(0, vue.onMounted)(async () => {
if (props.range) {
if ((0, _vue_shared.isArray)(props.modelValue)) {
initData.firstValue = Math.max(props.min, props.modelValue[0]);
initData.secondValue = Math.min(props.max, props.modelValue[1]);
} else {
initData.firstValue = props.min;
initData.secondValue = props.max;
}
initData.oldValue = [initData.firstValue, initData.secondValue];
} else {
if (!require_types.isNumber(props.modelValue) || Number.isNaN(props.modelValue)) initData.firstValue = props.min;
else initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue));
initData.oldValue = initData.firstValue;
}
(0, _vueuse_core.useEventListener)(window, "resize", resetSize);
await (0, vue.nextTick)();
resetSize();
});
return { sliderWrapper };
};
//#endregion
exports.useLifecycle = useLifecycle;
//# sourceMappingURL=use-lifecycle.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-lifecycle.js","names":["isNumber"],"sources":["../../../../../../../packages/components/slider/src/composables/use-lifecycle.ts"],"sourcesContent":["import { nextTick, onMounted, ref } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isArray, isNumber } from '@element-plus/utils'\n\nimport type { SliderInitData, SliderProps } from '../slider'\n\nexport const useLifecycle = (\n props: SliderProps,\n initData: SliderInitData,\n resetSize: () => void\n) => {\n const sliderWrapper = ref<HTMLElement>()\n\n onMounted(async () => {\n if (props.range) {\n if (isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n } else {\n if (!isNumber(props.modelValue) || Number.isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n }\n\n useEventListener(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n return {\n sliderWrapper,\n }\n}\n"],"mappings":";;;;;;;;AAMA,MAAa,gBACX,OACA,UACA,cACG;CACH,MAAM,8BAAkC;AAExC,oBAAU,YAAY;AACpB,MAAI,MAAM,OAAO;AACf,gCAAY,MAAM,WAAW,EAAE;AAC7B,aAAS,aAAa,KAAK,IAAI,MAAM,KAAK,MAAM,WAAW,GAAG;AAC9D,aAAS,cAAc,KAAK,IAAI,MAAM,KAAK,MAAM,WAAW,GAAG;UAC1D;AACL,aAAS,aAAa,MAAM;AAC5B,aAAS,cAAc,MAAM;;AAE/B,YAAS,WAAW,CAAC,SAAS,YAAY,SAAS,YAAY;SAC1D;AACL,OAAI,CAACA,uBAAS,MAAM,WAAW,IAAI,OAAO,MAAM,MAAM,WAAW,CAC/D,UAAS,aAAa,MAAM;OAE5B,UAAS,aAAa,KAAK,IACzB,MAAM,KACN,KAAK,IAAI,MAAM,KAAK,MAAM,WAAW,CACtC;AAEH,YAAS,WAAW,SAAS;;AAG/B,qCAAiB,QAAQ,UAAU,UAAU;AAE7C,2BAAgB;AAChB,aAAW;GACX;AAEF,QAAO,EACL,eACD"}
@@ -0,0 +1,12 @@
import { SliderMarkerProps } from "../marker.js";
import { SliderProps } from "../slider.js";
import * as vue from "vue";
//#region ../../packages/components/slider/src/composables/use-marks.d.ts
interface Mark extends SliderMarkerProps {
point: number;
position: number;
}
declare const useMarks: (props: SliderProps) => vue.ComputedRef<Mark[]>;
//#endregion
export { Mark, useMarks };
@@ -0,0 +1,33 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_error = require('../../../../utils/error.js');
let vue = require("vue");
//#region ../../packages/components/slider/src/composables/use-marks.ts
const useMarks = (props) => {
const markList = (0, vue.computed)(() => {
if (!props.marks) return [];
return Object.keys(props.marks).map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({
point,
position: (point - props.min) * 100 / (props.max - props.min),
mark: props.marks[point]
}));
});
(0, vue.watchEffect)(() => {
if (props.step === "mark" && !props.marks) require_error.debugWarn("ElSlider", "marks prop must be provided when step is mark");
if (props.marks) {
const keys = Object.keys(props.marks);
const validPoints = markList.value.map((m) => m.point);
const invalidKeys = keys.filter((key) => {
const parsed = Number.parseFloat(key);
return Number.isNaN(parsed) || !validPoints.includes(parsed);
});
if (invalidKeys.length > 0) require_error.debugWarn("ElSlider", `Some marks keys are invalid (not a number or out of [min, max]): [${invalidKeys.map((k) => `'${k}'`).join(", ")}] and will be ignored.`);
}
});
return markList;
};
//#endregion
exports.useMarks = useMarks;
//# sourceMappingURL=use-marks.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-marks.js","names":[],"sources":["../../../../../../../packages/components/slider/src/composables/use-marks.ts"],"sourcesContent":["import { computed, watchEffect } from 'vue'\nimport { debugWarn } from '@element-plus/utils'\n\nimport type { SliderProps } from '../slider'\nimport type { SliderMarkerProps } from '../marker'\n\nexport interface Mark extends SliderMarkerProps {\n point: number\n position: number\n}\n\nexport const useMarks = (props: SliderProps) => {\n const markList = computed(() => {\n if (!props.marks) {\n return []\n }\n const marksKeys = Object.keys(props.marks)\n return marksKeys\n .map(Number.parseFloat)\n .sort((a, b) => a - b)\n .filter((point) => point <= props.max && point >= props.min)\n .map(\n (point): Mark => ({\n point,\n position: ((point - props.min) * 100) / (props.max - props.min),\n mark: props.marks![point],\n })\n )\n })\n\n watchEffect(() => {\n if (props.step === 'mark' && !props.marks) {\n debugWarn('ElSlider', 'marks prop must be provided when step is mark')\n }\n if (props.marks) {\n const keys = Object.keys(props.marks)\n const validPoints = markList.value.map((m) => m.point)\n const invalidKeys = keys.filter((key) => {\n const parsed = Number.parseFloat(key)\n return Number.isNaN(parsed) || !validPoints.includes(parsed)\n })\n if (invalidKeys.length > 0) {\n debugWarn(\n 'ElSlider',\n `Some marks keys are invalid (not a number or out of [min, max]): [${invalidKeys.map((k) => `'${k}'`).join(', ')}] and will be ignored.`\n )\n }\n }\n })\n\n return markList\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,UAAuB;CAC9C,MAAM,mCAA0B;AAC9B,MAAI,CAAC,MAAM,MACT,QAAO,EAAE;AAGX,SADkB,OAAO,KAAK,MAAM,MAAM,CAEvC,IAAI,OAAO,WAAW,CACtB,MAAM,GAAG,MAAM,IAAI,EAAE,CACrB,QAAQ,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI,CAC3D,KACE,WAAiB;GAChB;GACA,WAAY,QAAQ,MAAM,OAAO,OAAQ,MAAM,MAAM,MAAM;GAC3D,MAAM,MAAM,MAAO;GACpB,EACF;GACH;AAEF,4BAAkB;AAChB,MAAI,MAAM,SAAS,UAAU,CAAC,MAAM,MAClC,yBAAU,YAAY,gDAAgD;AAExE,MAAI,MAAM,OAAO;GACf,MAAM,OAAO,OAAO,KAAK,MAAM,MAAM;GACrC,MAAM,cAAc,SAAS,MAAM,KAAK,MAAM,EAAE,MAAM;GACtD,MAAM,cAAc,KAAK,QAAQ,QAAQ;IACvC,MAAM,SAAS,OAAO,WAAW,IAAI;AACrC,WAAO,OAAO,MAAM,OAAO,IAAI,CAAC,YAAY,SAAS,OAAO;KAC5D;AACF,OAAI,YAAY,SAAS,EACvB,yBACE,YACA,qEAAqE,YAAY,KAAK,MAAM,IAAI,EAAE,GAAG,CAAC,KAAK,KAAK,CAAC,wBAClH;;GAGL;AAEF,QAAO"}
@@ -0,0 +1,30 @@
import { FormItemContext } from "../../../form/src/types.js";
import "../../../form/index.js";
import { SliderEmits, SliderInitData, SliderProps } from "../slider.js";
import { SliderButtonInstance } from "../button.js";
import * as vue from "vue";
import { CSSProperties, Ref, SetupContext } from "vue";
//#region ../../packages/components/slider/src/composables/use-slide.d.ts
declare const useSlide: (props: SliderProps, initData: SliderInitData, emit: SetupContext<SliderEmits>["emit"]) => {
elFormItem: FormItemContext | undefined;
slider: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
firstButton: Ref<SliderButtonInstance | undefined, SliderButtonInstance | undefined>;
secondButton: Ref<SliderButtonInstance | undefined, SliderButtonInstance | undefined>;
sliderDisabled: vue.ComputedRef<boolean>;
minValue: vue.ComputedRef<number>;
maxValue: vue.ComputedRef<number>;
runwayStyle: vue.ComputedRef<CSSProperties>;
barStyle: vue.ComputedRef<CSSProperties>;
resetSize: () => void;
setPosition: (percent: number) => Ref<SliderButtonInstance | undefined>;
emitChange: () => Promise<void>;
onSliderWrapperPrevent: (event: TouchEvent) => void;
onSliderClick: (event: MouseEvent | TouchEvent) => void;
onSliderDown: (event: MouseEvent | TouchEvent) => Promise<void>;
onSliderMarkerDown: (position: number) => void;
setFirstValue: (firstValue: number | undefined) => void;
setSecondValue: (secondValue: number) => void;
};
//#endregion
export { useSlide };
@@ -0,0 +1,127 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../../constants/event.js');
const require_use_form_common_props = require('../../../form/src/hooks/use-form-common-props.js');
const require_use_form_item = require('../../../form/src/hooks/use-form-item.js');
let vue = require("vue");
//#region ../../packages/components/slider/src/composables/use-slide.ts
const useSlide = (props, initData, emit) => {
const { formItem: elFormItem } = require_use_form_item.useFormItem();
const slider = (0, vue.shallowRef)();
const firstButton = (0, vue.ref)();
const secondButton = (0, vue.ref)();
const buttonRefs = {
firstButton,
secondButton
};
const sliderDisabled = require_use_form_common_props.useFormDisabled();
const minValue = (0, vue.computed)(() => {
return Math.min(initData.firstValue, initData.secondValue);
});
const maxValue = (0, vue.computed)(() => {
return Math.max(initData.firstValue, initData.secondValue);
});
const barSize = (0, vue.computed)(() => {
return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
});
const barStart = (0, vue.computed)(() => {
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
});
const runwayStyle = (0, vue.computed)(() => {
return props.vertical ? { height: props.height } : {};
});
const barStyle = (0, vue.computed)(() => {
return props.vertical ? {
height: barSize.value,
bottom: barStart.value
} : {
width: barSize.value,
left: barStart.value
};
});
const resetSize = () => {
if (slider.value) initData.sliderSize = slider.value.getBoundingClientRect()[props.vertical ? "height" : "width"];
};
const getButtonRefByPercent = (percent) => {
const targetValue = props.min + percent * (props.max - props.min) / 100;
if (!props.range) return firstButton;
let buttonRefName;
if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
else buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
return buttonRefs[buttonRefName];
};
const setPosition = (percent) => {
const buttonRef = getButtonRefByPercent(percent);
buttonRef.value.setPosition(percent);
return buttonRef;
};
const setFirstValue = (firstValue) => {
initData.firstValue = firstValue ?? props.min;
_emit(props.range ? [minValue.value, maxValue.value] : firstValue ?? props.min);
};
const setSecondValue = (secondValue) => {
initData.secondValue = secondValue;
if (props.range) _emit([minValue.value, maxValue.value]);
};
const _emit = (val) => {
emit(require_event.UPDATE_MODEL_EVENT, val);
emit(require_event.INPUT_EVENT, val);
};
const emitChange = async () => {
await (0, vue.nextTick)();
emit(require_event.CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
};
const handleSliderPointerEvent = (event) => {
if (sliderDisabled.value || initData.dragging) return;
resetSize();
let newPercent = 0;
if (props.vertical) {
const clientY = event.touches?.item(0)?.clientY ?? event.clientY;
newPercent = (slider.value.getBoundingClientRect().bottom - clientY) / initData.sliderSize * 100;
} else newPercent = ((event.touches?.item(0)?.clientX ?? event.clientX) - slider.value.getBoundingClientRect().left) / initData.sliderSize * 100;
if (newPercent < 0 || newPercent > 100) return;
return setPosition(newPercent);
};
const onSliderWrapperPrevent = (event) => {
if (buttonRefs["firstButton"].value?.dragging || buttonRefs["secondButton"].value?.dragging) event.preventDefault();
};
const onSliderDown = async (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
await (0, vue.nextTick)();
buttonRef.value.onButtonDown(event);
}
};
const onSliderClick = (event) => {
if (handleSliderPointerEvent(event)) emitChange();
};
const onSliderMarkerDown = (position) => {
if (sliderDisabled.value || initData.dragging) return;
if (setPosition(position)) emitChange();
};
return {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
setPosition,
emitChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
onSliderMarkerDown,
setFirstValue,
setSecondValue
};
};
//#endregion
exports.useSlide = useSlide;
//# sourceMappingURL=use-slide.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,25 @@
import { EpPropMergeType } from "../../../../utils/vue/props/types.js";
import "../../../../utils/index.js";
import { TooltipInstance } from "../../../tooltip/src/tooltip.js";
import "../../../tooltip/index.js";
import { SliderButtonEmits, SliderButtonInitData, SliderButtonProps } from "../button.js";
import { CSSProperties, ComputedRef, Ref, SetupContext } from "vue";
//#region ../../packages/components/slider/src/composables/use-slider-button.d.ts
declare const useSliderButton: (props: SliderButtonProps, initData: SliderButtonInitData, emit: SetupContext<SliderButtonEmits>["emit"]) => {
disabled: ComputedRef<boolean>;
button: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
tooltip: Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
tooltipVisible: Ref<boolean, boolean>;
showTooltip: Ref<EpPropMergeType<BooleanConstructor, unknown, unknown>, EpPropMergeType<BooleanConstructor, unknown, unknown>>;
persistent: Ref<EpPropMergeType<BooleanConstructor, unknown, unknown>, EpPropMergeType<BooleanConstructor, unknown, unknown>>;
wrapperStyle: ComputedRef<CSSProperties>;
formatValue: ComputedRef<string | number>;
handleMouseEnter: () => void;
handleMouseLeave: () => void;
onButtonDown: (event: MouseEvent | TouchEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
setPosition: (newPosition: number) => Promise<void>;
};
//#endregion
export { useSliderButton };
@@ -0,0 +1,261 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../../constants/aria.js');
const require_event = require('../../../../constants/event.js');
const require_event$1 = require('../../../../utils/dom/event.js');
const require_types = require('../../../../utils/types.js');
const require_constants = require('../constants.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/slider/src/composables/use-slider-button.ts
const useTooltip = (props, formatTooltip, showTooltip) => {
const tooltip = (0, vue.ref)();
const tooltipVisible = (0, vue.ref)(false);
const enableFormat = (0, vue.computed)(() => {
return formatTooltip.value instanceof Function;
});
return {
tooltip,
tooltipVisible,
formatValue: (0, vue.computed)(() => {
return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
}),
displayTooltip: (0, lodash_unified.debounce)(() => {
showTooltip.value && (tooltipVisible.value = true);
}, 50),
hideTooltip: (0, lodash_unified.debounce)(() => {
showTooltip.value && (tooltipVisible.value = false);
}, 50)
};
};
const useSliderButton = (props, initData, emit) => {
const { disabled, min, max, step, showTooltip, persistent, precision, sliderSize, formatTooltip, emitChange, resetSize, updateDragging, markList } = (0, vue.inject)(require_constants.sliderContextKey);
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
const button = (0, vue.ref)();
const currentPosition = (0, vue.computed)(() => {
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
});
const wrapperStyle = (0, vue.computed)(() => {
return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
});
const shouldMoveToMark = (0, vue.computed)(() => {
return step.value === "mark" && markList.value.length > 0;
});
const handleMouseEnter = () => {
initData.hovering = true;
displayTooltip();
};
const handleMouseLeave = () => {
initData.hovering = false;
if (!initData.dragging) hideTooltip();
};
const onButtonDown = (event) => {
if (disabled.value) return;
event.preventDefault();
onDragStart(event);
window.addEventListener("mousemove", onDragging);
window.addEventListener("touchmove", onDragging);
window.addEventListener("mouseup", onDragEnd);
window.addEventListener("touchend", onDragEnd);
window.addEventListener("contextmenu", onDragEnd);
button.value.focus();
};
const incrementPosition = (amount) => {
if (disabled.value) return;
initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
setPosition(initData.newPosition);
emitChange();
};
const moveToMark = (amount) => {
if (disabled.value || !markList.value.length) return;
const current = props.modelValue;
const epsilon = Number.EPSILON;
const stride = Math.abs(amount);
let target;
if (amount > 0) {
const startIndex = markList.value.findIndex((m) => m.point > current + epsilon);
if (startIndex !== -1) {
const targetIndex = Math.min(startIndex + stride - 1, markList.value.length - 1);
target = markList.value[targetIndex].point;
}
} else {
let startIndex = -1;
for (let i = markList.value.length - 1; i >= 0; i--) if (markList.value[i].point < current - epsilon) {
startIndex = i;
break;
}
if (startIndex !== -1) {
const targetIndex = Math.max(startIndex - (stride - 1), 0);
target = markList.value[targetIndex].point;
}
}
if (target !== void 0 && target !== current) {
setPosition((target - min.value) / (max.value - min.value) * 100);
emitChange();
}
};
const onLeftKeyDown = () => {
if (shouldMoveToMark.value) moveToMark(-1);
else if (require_types.isNumber(step.value)) incrementPosition(-step.value);
};
const onRightKeyDown = () => {
if (shouldMoveToMark.value) moveToMark(1);
else if (require_types.isNumber(step.value)) incrementPosition(step.value);
};
const onPageDownKeyDown = () => {
if (shouldMoveToMark.value) moveToMark(-4);
else if (require_types.isNumber(step.value)) incrementPosition(-step.value * 4);
};
const onPageUpKeyDown = () => {
if (shouldMoveToMark.value) moveToMark(4);
else if (require_types.isNumber(step.value)) incrementPosition(step.value * 4);
};
const onHomeKeyDown = () => {
if (disabled.value) return;
setPosition(0);
emitChange();
};
const onEndKeyDown = () => {
if (disabled.value) return;
setPosition(100);
emitChange();
};
const onKeyDown = (event) => {
const code = require_event$1.getEventCode(event);
let isPreventDefault = true;
switch (code) {
case require_aria.EVENT_CODE.left:
case require_aria.EVENT_CODE.down:
onLeftKeyDown();
break;
case require_aria.EVENT_CODE.right:
case require_aria.EVENT_CODE.up:
onRightKeyDown();
break;
case require_aria.EVENT_CODE.home:
onHomeKeyDown();
break;
case require_aria.EVENT_CODE.end:
onEndKeyDown();
break;
case require_aria.EVENT_CODE.pageDown:
onPageDownKeyDown();
break;
case require_aria.EVENT_CODE.pageUp:
onPageUpKeyDown();
break;
default:
isPreventDefault = false;
break;
}
isPreventDefault && event.preventDefault();
};
const getClientXY = (event) => {
let clientX;
let clientY;
if (event.type.startsWith("touch")) {
clientY = event.touches[0].clientY;
clientX = event.touches[0].clientX;
} else {
clientY = event.clientY;
clientX = event.clientX;
}
return {
clientX,
clientY
};
};
const onDragStart = (event) => {
initData.dragging = true;
initData.isClick = true;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) initData.startY = clientY;
else initData.startX = clientX;
initData.startPosition = Number.parseFloat(currentPosition.value);
initData.newPosition = initData.startPosition;
};
const onDragging = (event) => {
if (initData.dragging) {
initData.isClick = false;
displayTooltip();
resetSize();
let diff;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) {
initData.currentY = clientY;
diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
} else {
initData.currentX = clientX;
diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
}
initData.newPosition = initData.startPosition + diff;
setPosition(initData.newPosition);
}
};
const onDragEnd = () => {
if (initData.dragging) {
setTimeout(() => {
initData.dragging = false;
if (!initData.hovering) hideTooltip();
if (!initData.isClick) setPosition(initData.newPosition);
emitChange();
}, 0);
window.removeEventListener("mousemove", onDragging);
window.removeEventListener("touchmove", onDragging);
window.removeEventListener("mouseup", onDragEnd);
window.removeEventListener("touchend", onDragEnd);
window.removeEventListener("contextmenu", onDragEnd);
}
};
const setPosition = async (newPosition) => {
if (newPosition === null || Number.isNaN(+newPosition)) return;
newPosition = (0, lodash_unified.clamp)(newPosition, 0, 100);
let value;
if (step.value === "mark") if (markList.value.length === 0) value = newPosition <= 50 ? min.value : max.value;
else value = markList.value.reduce((prev, curr) => {
return Math.abs(curr.position - newPosition) < Math.abs(prev.position - newPosition) ? curr : prev;
}).point;
else {
const fullSteps = Math.floor((max.value - min.value) / step.value);
const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
if (newPosition < fullRangePercentage) {
const valueBetween = fullRangePercentage / fullSteps;
const steps = Math.round(newPosition / valueBetween);
value = min.value + steps * step.value;
} else if (newPosition < threshold) value = min.value + fullSteps * step.value;
else value = max.value;
value = Number.parseFloat(value.toFixed(precision.value));
}
if (value !== props.modelValue) emit(require_event.UPDATE_MODEL_EVENT, value);
if (!initData.dragging && props.modelValue !== initData.oldValue) initData.oldValue = props.modelValue;
await (0, vue.nextTick)();
initData.dragging && displayTooltip();
tooltip.value.updatePopper();
};
(0, vue.watch)(() => initData.dragging, (val) => {
updateDragging(val);
});
(0, _vueuse_core.useEventListener)(button, "touchstart", onButtonDown, { passive: false });
return {
disabled,
button,
tooltip,
tooltipVisible,
showTooltip,
persistent,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onKeyDown,
setPosition
};
};
//#endregion
exports.useSliderButton = useSliderButton;
//# sourceMappingURL=use-slider-button.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,11 @@
import { SliderInitData, SliderProps } from "../slider.js";
import { CSSProperties, ComputedRef } from "vue";
//#region ../../packages/components/slider/src/composables/use-stops.d.ts
type Stops = {
stops: ComputedRef<number[]>;
getStopStyle: (position: number) => CSSProperties;
};
declare const useStops: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>) => Stops;
//#endregion
export { useStops };
@@ -0,0 +1,33 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_error = require('../../../../utils/error.js');
let vue = require("vue");
//#region ../../packages/components/slider/src/composables/use-stops.ts
const useStops = (props, initData, minValue, maxValue) => {
const stops = (0, vue.computed)(() => {
if (!props.showStops || props.min > props.max) return [];
if (props.step === "mark" || props.step === 0) {
if (props.step === 0) require_error.debugWarn("ElSlider", "step should not be 0.");
return [];
}
const stopCount = Math.ceil((props.max - props.min) / props.step);
const stepWidth = 100 * props.step / (props.max - props.min);
const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth);
if (props.range) return result.filter((step) => {
return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
});
else return result.filter((step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min));
});
const getStopStyle = (position) => {
return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` };
};
return {
stops,
getStopStyle
};
};
//#endregion
exports.useStops = useStops;
//# sourceMappingURL=use-stops.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-stops.js","names":[],"sources":["../../../../../../../packages/components/slider/src/composables/use-stops.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { debugWarn } from '@element-plus/utils'\n\nimport type { CSSProperties, ComputedRef } from 'vue'\nimport type { SliderInitData, SliderProps } from '../slider'\n\ntype Stops = {\n stops: ComputedRef<number[]>\n getStopStyle: (position: number) => CSSProperties\n}\n\nexport const useStops = (\n props: SliderProps,\n initData: SliderInitData,\n minValue: ComputedRef<number>,\n maxValue: ComputedRef<number>\n): Stops => {\n const stops = computed(() => {\n if (!props.showStops || props.min > props.max) return []\n if (props.step === 'mark' || props.step === 0) {\n if (props.step === 0) debugWarn('ElSlider', 'step should not be 0.')\n return []\n }\n\n const stopCount = Math.ceil((props.max - props.min) / props.step)\n const stepWidth = (100 * props.step) / (props.max - props.min)\n const result = Array.from<number>({ length: stopCount - 1 }).map(\n (_, index) => (index + 1) * stepWidth\n )\n\n if (props.range) {\n return result.filter((step) => {\n return (\n step <\n (100 * (minValue.value - props.min)) / (props.max - props.min) ||\n step > (100 * (maxValue.value - props.min)) / (props.max - props.min)\n )\n })\n } else {\n return result.filter(\n (step) =>\n step >\n (100 * (initData.firstValue - props.min)) / (props.max - props.min)\n )\n }\n })\n\n const getStopStyle = (position: number): CSSProperties => {\n return props.vertical\n ? { bottom: `${position}%` }\n : { left: `${position}%` }\n }\n\n return {\n stops,\n getStopStyle,\n }\n}\n"],"mappings":";;;;;;AAWA,MAAa,YACX,OACA,UACA,UACA,aACU;CACV,MAAM,gCAAuB;AAC3B,MAAI,CAAC,MAAM,aAAa,MAAM,MAAM,MAAM,IAAK,QAAO,EAAE;AACxD,MAAI,MAAM,SAAS,UAAU,MAAM,SAAS,GAAG;AAC7C,OAAI,MAAM,SAAS,EAAG,yBAAU,YAAY,wBAAwB;AACpE,UAAO,EAAE;;EAGX,MAAM,YAAY,KAAK,MAAM,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;EACjE,MAAM,YAAa,MAAM,MAAM,QAAS,MAAM,MAAM,MAAM;EAC1D,MAAM,SAAS,MAAM,KAAa,EAAE,QAAQ,YAAY,GAAG,CAAC,CAAC,KAC1D,GAAG,WAAW,QAAQ,KAAK,UAC7B;AAED,MAAI,MAAM,MACR,QAAO,OAAO,QAAQ,SAAS;AAC7B,UACE,OACG,OAAO,SAAS,QAAQ,MAAM,QAAS,MAAM,MAAM,MAAM,QAC5D,OAAQ,OAAO,SAAS,QAAQ,MAAM,QAAS,MAAM,MAAM,MAAM;IAEnE;MAEF,QAAO,OAAO,QACX,SACC,OACC,OAAO,SAAS,aAAa,MAAM,QAAS,MAAM,MAAM,MAAM,KAClE;GAEH;CAEF,MAAM,gBAAgB,aAAoC;AACxD,SAAO,MAAM,WACT,EAAE,QAAQ,GAAG,SAAS,IAAI,GAC1B,EAAE,MAAM,GAAG,SAAS,IAAI;;AAG9B,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,9 @@
import { FormItemContext } from "../../../form/src/types.js";
import "../../../form/index.js";
import { SliderEmits, SliderInitData, SliderProps } from "../slider.js";
import { ComputedRef, SetupContext } from "vue";
//#region ../../packages/components/slider/src/composables/use-watch.d.ts
declare const useWatch: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>, emit: SetupContext<SliderEmits>["emit"], elFormItem: FormItemContext) => void;
//#endregion
export { useWatch };
@@ -0,0 +1,59 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../../constants/event.js');
const require_types = require('../../../../utils/types.js');
const require_error = require('../../../../utils/error.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/slider/src/composables/use-watch.ts
const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
const _emit = (val) => {
emit(require_event.UPDATE_MODEL_EVENT, val);
emit(require_event.INPUT_EVENT, val);
};
const valueChanged = () => {
if (props.range) return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
else return props.modelValue !== initData.oldValue;
};
const setValues = () => {
if (props.min > props.max) require_error.throwError("Slider", "min should not be greater than max.");
const val = props.modelValue;
if (props.range && (0, _vue_shared.isArray)(val)) if (val[1] < props.min) _emit([props.min, props.min]);
else if (val[0] > props.max) _emit([props.max, props.max]);
else if (val[0] < props.min) _emit([props.min, val[1]]);
else if (val[1] > props.max) _emit([val[0], props.max]);
else {
initData.firstValue = val[0];
initData.secondValue = val[1];
if (valueChanged()) {
if (props.validateEvent) elFormItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
initData.oldValue = val.slice();
}
}
else if (!props.range && require_types.isNumber(val) && !Number.isNaN(val)) if (val < props.min) _emit(props.min);
else if (val > props.max) _emit(props.max);
else {
initData.firstValue = val;
if (valueChanged()) {
if (props.validateEvent) elFormItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
initData.oldValue = val;
}
}
};
setValues();
(0, vue.watch)(() => initData.dragging, (val) => {
if (!val) setValues();
});
(0, vue.watch)(() => props.modelValue, (val, oldVal) => {
if (initData.dragging || (0, _vue_shared.isArray)(val) && (0, _vue_shared.isArray)(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) return;
setValues();
}, { deep: true });
(0, vue.watch)(() => [props.min, props.max], () => {
setValues();
});
};
//#endregion
exports.useWatch = useWatch;
//# sourceMappingURL=use-watch.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-watch.js","names":["UPDATE_MODEL_EVENT","INPUT_EVENT","debugWarn","isNumber"],"sources":["../../../../../../../packages/components/slider/src/composables/use-watch.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn, isArray, isNumber, throwError } from '@element-plus/utils'\n\nimport type { ComputedRef, SetupContext } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { FormItemContext } from '@element-plus/components/form'\nimport type { SliderEmits, SliderInitData, SliderProps } from '../slider'\n\nexport const useWatch = (\n props: SliderProps,\n initData: SliderInitData,\n minValue: ComputedRef<number>,\n maxValue: ComputedRef<number>,\n emit: SetupContext<SliderEmits>['emit'],\n elFormItem: FormItemContext\n) => {\n const _emit = (val: Arrayable<number>) => {\n emit(UPDATE_MODEL_EVENT, val)\n emit(INPUT_EVENT, val)\n }\n\n const valueChanged = () => {\n if (props.range) {\n return ![minValue.value, maxValue.value].every(\n (item, index) => item === (initData.oldValue as number[])[index]\n )\n } else {\n return props.modelValue !== initData.oldValue\n }\n }\n\n const setValues = () => {\n if (props.min > props.max) {\n throwError('Slider', 'min should not be greater than max.')\n }\n const val = props.modelValue\n if (props.range && isArray(val)) {\n if (val[1] < props.min) {\n _emit([props.min, props.min])\n } else if (val[0] > props.max) {\n _emit([props.max, props.max])\n } else if (val[0] < props.min) {\n _emit([props.min, val[1]])\n } else if (val[1] > props.max) {\n _emit([val[0], props.max])\n } else {\n initData.firstValue = val[0]\n initData.secondValue = val[1]\n if (valueChanged()) {\n if (props.validateEvent) {\n elFormItem?.validate?.('change').catch((err) => debugWarn(err))\n }\n initData.oldValue = val.slice()\n }\n }\n } else if (!props.range && isNumber(val) && !Number.isNaN(val)) {\n if (val < props.min) {\n _emit(props.min)\n } else if (val > props.max) {\n _emit(props.max)\n } else {\n initData.firstValue = val\n if (valueChanged()) {\n if (props.validateEvent) {\n elFormItem?.validate?.('change').catch((err) => debugWarn(err))\n }\n initData.oldValue = val\n }\n }\n }\n }\n\n setValues()\n\n watch(\n () => initData.dragging,\n (val) => {\n if (!val) {\n setValues()\n }\n }\n )\n\n watch(\n () => props.modelValue,\n (val, oldVal) => {\n if (\n initData.dragging ||\n (isArray(val) &&\n isArray(oldVal) &&\n val.every((item, index) => item === oldVal[index]) &&\n initData.firstValue === val[0] &&\n initData.secondValue === val[1])\n ) {\n return\n }\n setValues()\n },\n {\n deep: true,\n }\n )\n\n watch(\n () => [props.min, props.max],\n () => {\n setValues()\n }\n )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,YACX,OACA,UACA,UACA,UACA,MACA,eACG;CACH,MAAM,SAAS,QAA2B;AACxC,OAAKA,kCAAoB,IAAI;AAC7B,OAAKC,2BAAa,IAAI;;CAGxB,MAAM,qBAAqB;AACzB,MAAI,MAAM,MACR,QAAO,CAAC,CAAC,SAAS,OAAO,SAAS,MAAM,CAAC,OACtC,MAAM,UAAU,SAAU,SAAS,SAAsB,OAC3D;MAED,QAAO,MAAM,eAAe,SAAS;;CAIzC,MAAM,kBAAkB;AACtB,MAAI,MAAM,MAAM,MAAM,IACpB,0BAAW,UAAU,sCAAsC;EAE7D,MAAM,MAAM,MAAM;AAClB,MAAI,MAAM,kCAAiB,IAAI,CAC7B,KAAI,IAAI,KAAK,MAAM,IACjB,OAAM,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC;WACpB,IAAI,KAAK,MAAM,IACxB,OAAM,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC;WACpB,IAAI,KAAK,MAAM,IACxB,OAAM,CAAC,MAAM,KAAK,IAAI,GAAG,CAAC;WACjB,IAAI,KAAK,MAAM,IACxB,OAAM,CAAC,IAAI,IAAI,MAAM,IAAI,CAAC;OACrB;AACL,YAAS,aAAa,IAAI;AAC1B,YAAS,cAAc,IAAI;AAC3B,OAAI,cAAc,EAAE;AAClB,QAAI,MAAM,cACR,aAAY,WAAW,SAAS,CAAC,OAAO,QAAQC,wBAAU,IAAI,CAAC;AAEjE,aAAS,WAAW,IAAI,OAAO;;;WAG1B,CAAC,MAAM,SAASC,uBAAS,IAAI,IAAI,CAAC,OAAO,MAAM,IAAI,CAC5D,KAAI,MAAM,MAAM,IACd,OAAM,MAAM,IAAI;WACP,MAAM,MAAM,IACrB,OAAM,MAAM,IAAI;OACX;AACL,YAAS,aAAa;AACtB,OAAI,cAAc,EAAE;AAClB,QAAI,MAAM,cACR,aAAY,WAAW,SAAS,CAAC,OAAO,QAAQD,wBAAU,IAAI,CAAC;AAEjE,aAAS,WAAW;;;;AAM5B,YAAW;AAEX,sBACQ,SAAS,WACd,QAAQ;AACP,MAAI,CAAC,IACH,YAAW;GAGhB;AAED,sBACQ,MAAM,aACX,KAAK,WAAW;AACf,MACE,SAAS,qCACA,IAAI,6BACH,OAAO,IACf,IAAI,OAAO,MAAM,UAAU,SAAS,OAAO,OAAO,IAClD,SAAS,eAAe,IAAI,MAC5B,SAAS,gBAAgB,IAAI,GAE/B;AAEF,aAAW;IAEb,EACE,MAAM,MACP,CACF;AAED,sBACQ,CAAC,MAAM,KAAK,MAAM,IAAI,QACtB;AACJ,aAAW;GAEd"}
@@ -0,0 +1,17 @@
import { SliderProps } from "./slider.js";
import { Mark } from "./composables/use-marks.js";
import { ComputedRef, InjectionKey, Ref, ToRefs } from "vue";
//#region ../../packages/components/slider/src/constants.d.ts
interface SliderContext extends ToRefs<SliderProps> {
precision: ComputedRef<number>;
sliderSize: Ref<number>;
emitChange: () => void;
resetSize: () => void;
updateDragging: (val: boolean) => void;
disabled: ComputedRef<boolean>;
markList: ComputedRef<Mark[]>;
}
declare const sliderContextKey: InjectionKey<SliderContext>;
//#endregion
export { SliderContext, sliderContextKey };
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/slider/src/constants.ts
const sliderContextKey = Symbol("sliderContextKey");
//#endregion
exports.sliderContextKey = sliderContextKey;
//# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.js","names":[],"sources":["../../../../../../packages/components/slider/src/constants.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref, ToRefs } from 'vue'\nimport type { SliderProps } from './slider'\nimport type { Mark } from './composables/use-marks'\n\nexport interface SliderContext extends ToRefs<SliderProps> {\n precision: ComputedRef<number>\n sliderSize: Ref<number>\n emitChange: () => void\n resetSize: () => void\n updateDragging: (val: boolean) => void\n disabled: ComputedRef<boolean>\n markList: ComputedRef<Mark[]>\n}\n\nexport const sliderContextKey: InjectionKey<SliderContext> =\n Symbol('sliderContextKey')\n"],"mappings":";;;AAcA,MAAa,mBACX,OAAO,mBAAmB"}
@@ -0,0 +1,23 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/slider/src/marker.d.ts
declare const sliderMarkerProps: {
readonly mark: EpPropFinalized<(new (...args: any[]) => string | {
style: CSSProperties;
label: any;
}) | (() => string | {
style: CSSProperties;
label: any;
}) | (((new (...args: any[]) => string | {
style: CSSProperties;
label: any;
}) | (() => string | {
style: CSSProperties;
label: any;
})) | null)[], unknown, unknown, undefined, boolean>;
};
type SliderMarkerProps = ExtractPropTypes<typeof sliderMarkerProps>;
//#endregion
export { SliderMarkerProps };
+32
View File
@@ -0,0 +1,32 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/slider/src/marker.ts
const sliderMarkerProps = require_runtime$1.buildProps({ mark: {
type: require_runtime$1.definePropType([String, Object]),
default: void 0
} });
var marker_default = (0, vue.defineComponent)({
name: "ElSliderMarker",
props: sliderMarkerProps,
setup(props) {
const ns = require_index.useNamespace("slider");
const label = (0, vue.computed)(() => {
return (0, _vue_shared.isString)(props.mark) ? props.mark : props.mark.label;
});
const style = (0, vue.computed)(() => (0, _vue_shared.isString)(props.mark) ? void 0 : props.mark.style);
return () => (0, vue.h)("div", {
class: ns.e("marks-text"),
style: style.value
}, label.value);
}
});
//#endregion
exports.default = marker_default;
exports.sliderMarkerProps = sliderMarkerProps;
//# sourceMappingURL=marker.js.map
@@ -0,0 +1 @@
{"version":3,"file":"marker.js","names":["buildProps","definePropType","useNamespace"],"sources":["../../../../../../packages/components/slider/src/marker.ts"],"sourcesContent":["import { computed, defineComponent, h } from 'vue'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type {\n CSSProperties,\n ExtractPropTypes,\n ExtractPublicPropTypes,\n} from 'vue'\n\nexport const sliderMarkerProps = buildProps({\n mark: {\n type: definePropType<\n | string\n | {\n style: CSSProperties\n label: any\n }\n >([String, Object]),\n default: undefined,\n },\n} as const)\nexport type SliderMarkerProps = ExtractPropTypes<typeof sliderMarkerProps>\nexport type SliderMarkerPropsPublic = ExtractPublicPropTypes<\n typeof sliderMarkerProps\n>\n\nexport default defineComponent({\n name: 'ElSliderMarker',\n props: sliderMarkerProps,\n setup(props) {\n const ns = useNamespace('slider')\n const label = computed(() => {\n return isString(props.mark) ? props.mark : props.mark!.label\n })\n const style = computed(() =>\n isString(props.mark) ? undefined : props.mark!.style\n )\n\n return () =>\n h(\n 'div',\n {\n class: ns.e('marks-text'),\n style: style.value,\n },\n label.value\n )\n },\n})\n"],"mappings":";;;;;;;;AAUA,MAAa,oBAAoBA,6BAAW,EAC1C,MAAM;CACJ,MAAMC,iCAMJ,CAAC,QAAQ,OAAO,CAAC;CACnB,SAAS;CACV,EACF,CAAU;AAMX,8CAA+B;CAC7B,MAAM;CACN,OAAO;CACP,MAAM,OAAO;EACX,MAAM,KAAKC,2BAAa,SAAS;EACjC,MAAM,gCAAuB;AAC3B,oCAAgB,MAAM,KAAK,GAAG,MAAM,OAAO,MAAM,KAAM;IACvD;EACF,MAAM,0DACK,MAAM,KAAK,GAAG,SAAY,MAAM,KAAM,MAChD;AAED,0BAEI,OACA;GACE,OAAO,GAAG,EAAE,aAAa;GACzB,OAAO,MAAM;GACd,EACD,MAAM,MACP;;CAEN,CAAC"}
@@ -0,0 +1,87 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { _default } from "./slider.vue.js";
import { SliderMarkerProps } from "./marker.js";
import * as vue from "vue";
import { ExtractPropTypes, ExtractPublicPropTypes } from "vue";
import * as _popperjs_core0 from "@popperjs/core";
//#region ../../packages/components/slider/src/slider.d.ts
type SliderMarks = Record<number, string | SliderMarkerProps['mark']>;
interface SliderInitData {
firstValue: number;
secondValue: number;
oldValue?: Arrayable<number>;
dragging: boolean;
sliderSize: number;
}
declare const sliderProps: {
readonly ariaLabel: StringConstructor;
readonly modelValue: EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown, 0, boolean>;
readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: EpPropFinalized<(new (...args: any[]) => number | "mark") | (() => number | "mark") | (((new (...args: any[]) => number | "mark") | (() => number | "mark")) | null)[], unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: EpPropFinalized<(new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly rangeStartLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: EpPropFinalized<(new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: EpPropFinalized<StringConstructor, _popperjs_core0.Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: vue.PropType<SliderMarks>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
};
type SliderProps = ExtractPropTypes<typeof sliderProps>;
type SliderPropsPublic = ExtractPublicPropTypes<typeof sliderProps>;
declare const sliderEmits: {
"update:modelValue": (value: Arrayable<number>) => value is number | number[];
input: (value: Arrayable<number>) => value is number | number[];
change: (value: Arrayable<number>) => value is number | number[];
};
type SliderEmits = typeof sliderEmits;
type SliderInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { SliderEmits, SliderInitData, SliderInstance, SliderProps, SliderPropsPublic, sliderEmits, sliderProps };
+98
View File
@@ -0,0 +1,98 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_types = require('../../../utils/types.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_index = require('../../../hooks/use-size/index.js');
const require_index$1 = require('../../../hooks/use-aria/index.js');
let _popperjs_core = require("@popperjs/core");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/slider/src/slider.ts
const sliderProps = require_runtime$1.buildProps({
modelValue: {
type: require_runtime$1.definePropType([Number, Array]),
default: 0
},
id: {
type: String,
default: void 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: require_runtime$1.definePropType([Number, String]),
default: 1
},
showInput: Boolean,
showInputControls: {
type: Boolean,
default: true
},
size: require_index.useSizeProp,
inputSize: require_index.useSizeProp,
showStops: Boolean,
showTooltip: {
type: Boolean,
default: true
},
formatTooltip: {
type: require_runtime$1.definePropType(Function),
default: void 0
},
disabled: {
type: Boolean,
default: void 0
},
range: Boolean,
vertical: Boolean,
height: String,
rangeStartLabel: {
type: String,
default: void 0
},
rangeEndLabel: {
type: String,
default: void 0
},
formatValueText: {
type: require_runtime$1.definePropType(Function),
default: void 0
},
tooltipClass: {
type: String,
default: void 0
},
placement: {
type: String,
values: _popperjs_core.placements,
default: "top"
},
marks: { type: require_runtime$1.definePropType(Object) },
validateEvent: {
type: Boolean,
default: true
},
persistent: {
type: Boolean,
default: true
},
...require_index$1.useAriaProps(["ariaLabel"])
});
const isValidValue = (value) => require_types.isNumber(value) || (0, _vue_shared.isArray)(value) && value.every(require_types.isNumber);
const sliderEmits = {
[require_event.UPDATE_MODEL_EVENT]: isValidValue,
[require_event.INPUT_EVENT]: isValidValue,
[require_event.CHANGE_EVENT]: isValidValue
};
//#endregion
exports.sliderEmits = sliderEmits;
exports.sliderProps = sliderProps;
//# sourceMappingURL=slider.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,185 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import "../../../index.js";
import { Placement } from "../../popper/index.js";
import * as vue from "vue";
//#region ../../packages/components/slider/src/slider.vue.d.ts
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
readonly ariaLabel: StringConstructor;
readonly modelValue: EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown, 0, boolean>;
readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: EpPropFinalized<(new (...args: any[]) => number | "mark") | (() => number | "mark") | (((new (...args: any[]) => number | "mark") | (() => number | "mark")) | null)[], unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: EpPropFinalized<(new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly rangeStartLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: EpPropFinalized<(new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: EpPropFinalized<StringConstructor, Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: vue.PropType<{
[x: number]: EpPropMergeType<(new (...args: any[]) => string | {
style: vue.CSSProperties;
label: any;
}) | (() => string | {
style: vue.CSSProperties;
label: any;
}) | (((new (...args: any[]) => string | {
style: vue.CSSProperties;
label: any;
}) | (() => string | {
style: vue.CSSProperties;
label: any;
})) | null)[], unknown, unknown> | undefined;
}>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>, {
onSliderClick: (event: MouseEvent | TouchEvent) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (value: Arrayable<number>) => void;
"update:modelValue": (value: Arrayable<number>) => void;
input: (value: Arrayable<number>) => void;
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly ariaLabel: StringConstructor;
readonly modelValue: EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown, 0, boolean>;
readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: EpPropFinalized<(new (...args: any[]) => number | "mark") | (() => number | "mark") | (((new (...args: any[]) => number | "mark") | (() => number | "mark")) | null)[], unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: EpPropFinalized<(new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => number | string) | (() => (val: number) => number | string) | {
(): (val: number) => number | string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly rangeStartLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: EpPropFinalized<(new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
} | (((new (...args: any[]) => (val: number) => string) | (() => (val: number) => string) | {
(): (val: number) => string;
new (): any;
readonly prototype: any;
}) | null)[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: EpPropFinalized<StringConstructor, Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: vue.PropType<{
[x: number]: EpPropMergeType<(new (...args: any[]) => string | {
style: vue.CSSProperties;
label: any;
}) | (() => string | {
style: vue.CSSProperties;
label: any;
}) | (((new (...args: any[]) => string | {
style: vue.CSSProperties;
label: any;
}) | (() => string | {
style: vue.CSSProperties;
label: any;
})) | null)[], unknown, unknown> | undefined;
}>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>> & Readonly<{
onChange?: ((value: Arrayable<number>) => any) | undefined;
onInput?: ((value: Arrayable<number>) => any) | undefined;
"onUpdate:modelValue"?: ((value: Arrayable<number>) => any) | undefined;
}>, {
readonly id: string;
readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly modelValue: EpPropMergeType<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown>;
readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly vertical: boolean;
readonly range: boolean;
readonly placement: EpPropMergeType<StringConstructor, Placement, unknown>;
readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly max: number;
readonly min: number;
readonly step: EpPropMergeType<(new (...args: any[]) => number | "mark") | (() => number | "mark") | (((new (...args: any[]) => number | "mark") | (() => number | "mark")) | null)[], unknown, unknown>;
readonly showInputControls: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly showTooltip: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly formatTooltip: (val: number) => number | string;
readonly rangeStartLabel: string;
readonly rangeEndLabel: string;
readonly formatValueText: (val: number) => string;
readonly tooltipClass: string;
readonly showInput: boolean;
readonly showStops: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { _default };
@@ -0,0 +1,261 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_use_form_common_props = require('../../form/src/hooks/use-form-common-props.js');
const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
const require_index$2 = require('../../input-number/index.js');
const require_constants = require('./constants.js');
const require_slider = require('./slider.js');
const require_use_lifecycle = require('./composables/use-lifecycle.js');
const require_use_marks = require('./composables/use-marks.js');
const require_use_slide = require('./composables/use-slide.js');
const require_use_stops = require('./composables/use-stops.js');
const require_use_watch = require('./composables/use-watch.js');
const require_button = require('./button2.js');
const require_marker = require('./marker.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/slider/src/slider.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = [
"id",
"role",
"aria-label",
"aria-labelledby"
];
const _hoisted_2 = { key: 1 };
var slider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElSlider",
__name: "slider",
props: require_slider.sliderProps,
emits: require_slider.sliderEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = require_index$1.useNamespace("slider");
const { t } = require_index.useLocale();
const initData = (0, vue.reactive)({
firstValue: 0,
secondValue: 0,
oldValue: 0,
dragging: false,
sliderSize: 1
});
const { elFormItem, slider, firstButton, secondButton, sliderDisabled, minValue, maxValue, runwayStyle, barStyle, resetSize, emitChange, onSliderWrapperPrevent, onSliderClick, onSliderDown, onSliderMarkerDown, setFirstValue, setSecondValue } = require_use_slide.useSlide(props, initData, emit);
const { stops, getStopStyle } = require_use_stops.useStops(props, initData, minValue, maxValue);
const { inputId, isLabeledByFormItem } = require_use_form_item.useFormItemInputId(props, { formItemContext: elFormItem });
const sliderWrapperSize = require_use_form_common_props.useFormSize();
const sliderInputSize = (0, vue.computed)(() => props.inputSize || sliderWrapperSize.value);
const renderInput = (0, vue.computed)(() => {
return props.showInput && !props.range && props.step !== "mark";
});
const groupLabel = (0, vue.computed)(() => {
return props.ariaLabel || t("el.slider.defaultLabel", {
min: props.min,
max: props.max
});
});
const firstButtonLabel = (0, vue.computed)(() => {
if (props.range) return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
else return groupLabel.value;
});
const firstValueText = (0, vue.computed)(() => {
return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
});
const secondButtonLabel = (0, vue.computed)(() => {
return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
});
const secondValueText = (0, vue.computed)(() => {
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
});
const sliderKls = (0, vue.computed)(() => [
ns.b(),
ns.m(sliderWrapperSize.value),
ns.is("vertical", props.vertical),
{ [ns.m("with-input")]: renderInput.value }
]);
const markList = require_use_marks.useMarks(props);
require_use_watch.useWatch(props, initData, minValue, maxValue, emit, elFormItem);
const sliderInputStep = (0, vue.computed)(() => {
return require_types.isNumber(props.step) ? props.step : 1;
});
const precision = (0, vue.computed)(() => {
const stepValue = require_types.isNumber(props.step) ? props.step : 1;
const precisions = [
props.min,
props.max,
stepValue
].map((item) => {
const decimal = `${item}`.split(".")[1];
return decimal ? decimal.length : 0;
});
return Math.max.apply(null, precisions);
});
const { sliderWrapper } = require_use_lifecycle.useLifecycle(props, initData, resetSize);
const { firstValue, secondValue, sliderSize } = (0, vue.toRefs)(initData);
const updateDragging = (val) => {
initData.dragging = val;
};
(0, _vueuse_core.useEventListener)(sliderWrapper, "touchstart", onSliderWrapperPrevent, { passive: false });
(0, _vueuse_core.useEventListener)(sliderWrapper, "touchmove", onSliderWrapperPrevent, { passive: false });
(0, vue.provide)(require_constants.sliderContextKey, {
...(0, vue.toRefs)(props),
sliderSize,
disabled: sliderDisabled,
precision,
markList,
emitChange,
resetSize,
updateDragging
});
__expose({ onSliderClick });
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
id: _ctx.range ? (0, vue.unref)(inputId) : void 0,
ref_key: "sliderWrapper",
ref: sliderWrapper,
class: (0, vue.normalizeClass)(sliderKls.value),
role: _ctx.range ? "group" : void 0,
"aria-label": _ctx.range && !(0, vue.unref)(isLabeledByFormItem) ? groupLabel.value : void 0,
"aria-labelledby": _ctx.range && (0, vue.unref)(isLabeledByFormItem) ? (0, vue.unref)(elFormItem)?.labelId : void 0
}, [(0, vue.createElementVNode)("div", {
ref_key: "slider",
ref: slider,
class: (0, vue.normalizeClass)([
(0, vue.unref)(ns).e("runway"),
{ "show-input": renderInput.value },
(0, vue.unref)(ns).is("disabled", (0, vue.unref)(sliderDisabled))
]),
style: (0, vue.normalizeStyle)((0, vue.unref)(runwayStyle)),
onMousedown: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(onSliderDown) && (0, vue.unref)(onSliderDown)(...args)),
onTouchstartPassive: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(onSliderDown) && (0, vue.unref)(onSliderDown)(...args))
}, [
(0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("bar")),
style: (0, vue.normalizeStyle)((0, vue.unref)(barStyle))
}, null, 6),
(0, vue.createVNode)(require_button.default, {
id: !_ctx.range ? (0, vue.unref)(inputId) : void 0,
ref_key: "firstButton",
ref: firstButton,
"model-value": (0, vue.unref)(firstValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": _ctx.range || !(0, vue.unref)(isLabeledByFormItem) ? firstButtonLabel.value : void 0,
"aria-labelledby": !_ctx.range && (0, vue.unref)(isLabeledByFormItem) ? (0, vue.unref)(elFormItem)?.labelId : void 0,
"aria-valuemin": _ctx.min,
"aria-valuemax": _ctx.range ? (0, vue.unref)(secondValue) : _ctx.max,
"aria-valuenow": (0, vue.unref)(firstValue),
"aria-valuetext": firstValueText.value,
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": (0, vue.unref)(sliderDisabled),
"onUpdate:modelValue": (0, vue.unref)(setFirstValue)
}, null, 8, [
"id",
"model-value",
"vertical",
"tooltip-class",
"placement",
"aria-label",
"aria-labelledby",
"aria-valuemin",
"aria-valuemax",
"aria-valuenow",
"aria-valuetext",
"aria-orientation",
"aria-disabled",
"onUpdate:modelValue"
]),
_ctx.range ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_button.default, {
key: 0,
ref_key: "secondButton",
ref: secondButton,
"model-value": (0, vue.unref)(secondValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": secondButtonLabel.value,
"aria-valuemin": (0, vue.unref)(firstValue),
"aria-valuemax": _ctx.max,
"aria-valuenow": (0, vue.unref)(secondValue),
"aria-valuetext": secondValueText.value,
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": (0, vue.unref)(sliderDisabled),
"onUpdate:modelValue": (0, vue.unref)(setSecondValue)
}, null, 8, [
"model-value",
"vertical",
"tooltip-class",
"placement",
"aria-label",
"aria-valuemin",
"aria-valuemax",
"aria-valuenow",
"aria-valuetext",
"aria-orientation",
"aria-disabled",
"onUpdate:modelValue"
])) : (0, vue.createCommentVNode)("v-if", true),
_ctx.showStops ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(stops), (item, key) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("stop")),
style: (0, vue.normalizeStyle)((0, vue.unref)(getStopStyle)(item))
}, null, 6);
}), 128))])) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.unref)(markList).length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createElementVNode)("div", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(markList), (item, key) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key,
style: (0, vue.normalizeStyle)((0, vue.unref)(getStopStyle)(item.position)),
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("stop"), (0, vue.unref)(ns).e("marks-stop")])
}, null, 6);
}), 128))]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("marks")) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(markList), (item, key) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_marker.default), {
key,
mark: item.mark,
style: (0, vue.normalizeStyle)((0, vue.unref)(getStopStyle)(item.position)),
onMousedown: (0, vue.withModifiers)(($event) => (0, vue.unref)(onSliderMarkerDown)(item.position), ["stop"])
}, null, 8, [
"mark",
"style",
"onMousedown"
]);
}), 128))], 2)], 64)) : (0, vue.createCommentVNode)("v-if", true)
], 38), renderInput.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElInputNumber), {
key: 0,
ref: "input",
"model-value": (0, vue.unref)(firstValue),
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("input")),
step: sliderInputStep.value,
disabled: (0, vue.unref)(sliderDisabled),
controls: _ctx.showInputControls,
min: _ctx.min,
max: _ctx.max,
precision: precision.value,
size: sliderInputSize.value,
"onUpdate:modelValue": (0, vue.unref)(setFirstValue),
onChange: (0, vue.unref)(emitChange)
}, null, 8, [
"model-value",
"class",
"step",
"disabled",
"controls",
"min",
"max",
"precision",
"size",
"onUpdate:modelValue",
"onChange"
])) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_1);
};
}
});
//#endregion
exports.default = slider_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=slider.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_slider_vue_vue_type_script_setup_true_lang = require('./slider.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/slider/src/slider.vue
var slider_default = require_slider_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = slider_default;
//# sourceMappingURL=slider2.js.map
File diff suppressed because one or more lines are too long