This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,6 @@
import Slider from './src/slider.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElSlider: SFCWithInstall<typeof Slider>;
export default ElSlider;
export * from './src/slider';
export * from './src/constants';

View File

@@ -0,0 +1,17 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var slider$1 = require('./src/slider2.js');
var slider = require('./src/slider.js');
var constants = require('./src/constants.js');
var install = require('../../utils/vue/install.js');
const ElSlider = install.withInstall(slider$1["default"]);
exports.sliderEmits = slider.sliderEmits;
exports.sliderProps = slider.sliderProps;
exports.sliderContextKey = constants.sliderContextKey;
exports.ElSlider = ElSlider;
exports["default"] = ElSlider;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../../../../../packages/components/slider/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Slider from './src/slider.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElSlider: SFCWithInstall<typeof Slider> = withInstall(Slider)\nexport default ElSlider\n\nexport * from './src/slider'\nexport * from './src/constants'\n"],"names":["withInstall","Slider"],"mappings":";;;;;;;;;AAEY,MAAC,QAAQ,GAAGA,mBAAW,CAACC,mBAAM;;;;;;;;"}

View File

@@ -0,0 +1,28 @@
import type { ComponentPublicInstance, ExtractPropTypes, Ref, __ExtractPublicPropTypes } from 'vue';
import type Button from './button.vue';
export declare const sliderButtonProps: {
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "top", boolean>;
};
export type SliderButtonProps = ExtractPropTypes<typeof sliderButtonProps>;
export type SliderButtonPropsPublic = __ExtractPublicPropTypes<typeof sliderButtonProps>;
export declare const sliderButtonEmits: {
"update:modelValue": (value: number) => boolean;
};
export type SliderButtonEmits = typeof sliderButtonEmits;
export type SliderButtonInstance = ComponentPublicInstance<typeof Button>;
export type ButtonRefs = Record<'firstButton' | 'secondButton', Ref<SliderButtonInstance | undefined>>;
export interface SliderButtonInitData {
hovering: boolean;
dragging: boolean;
isClick: boolean;
startX: number;
currentX: number;
startY: number;
currentY: number;
startPosition: number;
newPosition: number;
oldValue: number;
}

View File

@@ -0,0 +1,29 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var core = require('@popperjs/core');
var runtime = require('../../../utils/vue/props/runtime.js');
var event = require('../../../constants/event.js');
var types = require('../../../utils/types.js');
const sliderButtonProps = runtime.buildProps({
modelValue: {
type: Number,
default: 0
},
vertical: Boolean,
tooltipClass: String,
placement: {
type: String,
values: core.placements,
default: "top"
}
});
const sliderButtonEmits = {
[event.UPDATE_MODEL_EVENT]: (value) => types.isNumber(value)
};
exports.sliderButtonEmits = sliderButtonEmits;
exports.sliderButtonProps = sliderButtonProps;
//# sourceMappingURL=button.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"button.js","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 Ref,\n __ExtractPublicPropTypes,\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"],"names":["buildProps","placements","UPDATE_MODEL_EVENT","isNumber"],"mappings":";;;;;;;;;AAGY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,YAAY,EAAE,MAAM;AACtB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAEC,eAAU;AACtB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,iBAAiB,GAAG;AACjC,EAAE,CAACC,wBAAkB,GAAG,CAAC,KAAK,KAAKC,cAAQ,CAAC,KAAK,CAAC;AAClD;;;;;"}

View File

@@ -0,0 +1,26 @@
declare const _default: import("vue").DefineComponent<{
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("element-plus").Placement, unknown, "top", boolean>;
}, {
onButtonDown: (event: MouseEvent | TouchEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
setPosition: (newPosition: number) => Promise<void>;
hovering: import("vue").Ref<boolean>;
dragging: import("vue").Ref<boolean>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:modelValue": (value: number) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly vertical: BooleanConstructor;
readonly tooltipClass: StringConstructor;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("element-plus").Placement, unknown, "top", boolean>;
}>> & {
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
}, {
readonly vertical: boolean;
readonly modelValue: number;
readonly placement: import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>;
}>;
export default _default;

View File

@@ -0,0 +1,100 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$1 = require('../../tooltip/index.js');
var button = require('./button.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var useSliderButton = require('./composables/use-slider-button.js');
var index = require('../../../hooks/use-namespace/index.js');
const __default__ = vue.defineComponent({
name: "ElSliderButton"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: button.sliderButtonProps,
emits: button.sliderButtonEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = index.useNamespace("slider");
const initData = 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 = vue.computed(() => !showTooltip.value ? false : persistent.value);
const {
disabled,
button,
tooltip,
showTooltip,
persistent,
tooltipVisible,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onKeyDown,
setPosition
} = useSliderButton.useSliderButton(props, initData, emit);
const { hovering, dragging } = vue.toRefs(initData);
expose({
onButtonDown,
onKeyDown,
setPosition,
hovering,
dragging
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "button",
ref: button,
class: vue.normalizeClass([vue.unref(ns).e("button-wrapper"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }]),
style: vue.normalizeStyle(vue.unref(wrapperStyle)),
tabindex: vue.unref(disabled) ? -1 : 0,
onMouseenter: vue.unref(handleMouseEnter),
onMouseleave: vue.unref(handleMouseLeave),
onMousedown: vue.unref(onButtonDown),
onFocus: vue.unref(handleMouseEnter),
onBlur: vue.unref(handleMouseLeave),
onKeydown: vue.unref(onKeyDown)
}, [
vue.createVNode(vue.unref(index$1.ElTooltip), {
ref_key: "tooltip",
ref: tooltip,
visible: vue.unref(tooltipVisible),
placement: _ctx.placement,
"fallback-placements": ["top", "bottom", "right", "left"],
"stop-popper-mouse-event": false,
"popper-class": _ctx.tooltipClass,
disabled: !vue.unref(showTooltip),
persistent: vue.unref(tooltipPersistent)
}, {
content: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)), 1)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("button"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }])
}, null, 2)
]),
_: 1
}, 8, ["visible", "placement", "popper-class", "disabled", "persistent"])
], 46, ["tabindex", "onMouseenter", "onMouseleave", "onMousedown", "onFocus", "onBlur", "onKeydown"]);
};
}
});
var SliderButton = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "button.vue"]]);
exports["default"] = SliderButton;
//# sourceMappingURL=button2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"button2.js","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 ? -1 : 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"],"names":["useNamespace","reactive","computed","useSliderButton","toRefs","_openBlock","_createElementBlock"],"mappings":";;;;;;;;;;;uCAwCc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,QAAQ,CAAA,CAAA;AAEhC,IAAA,MAAM,WAAWC,YAA+B,CAAA;AAAA,MAC9C,QAAU,EAAA,KAAA;AAAA,MACV,QAAU,EAAA,KAAA;AAAA,MACV,OAAS,EAAA,KAAA;AAAA,MACT,MAAQ,EAAA,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,MAAQ,EAAA,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,aAAe,EAAA,CAAA;AAAA,MACf,WAAa,EAAA,CAAA;AAAA,MACb,UAAU,KAAM,CAAA,UAAA;AAAA,KACjB,CAAA,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAA,MAAA,CAAA,WAAA,CAAA,KAAA,GAAA,KAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAAA,IAAA,MACxB;AAAwC,MAC1C,QAAA;AAEA,MAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,KACA,GAAAC,+BAAA,CAAA,KAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAAA,IACA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,GAAAC,UAAA,CAAA,QAAA,CAAA,CAAA;AAAA,IACF,MAAI,CAAA;AAEJ,MAAA,YAAQ;AAER,MAAa,SAAA;AAAA,MACX,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACD,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,6 @@
export * from './use-lifecycle';
export * from './use-marks';
export * from './use-slide';
export * from './use-slider-button';
export * from './use-stops';
export * from './use-watch';

View File

@@ -0,0 +1,20 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var useLifecycle = require('./use-lifecycle.js');
var useMarks = require('./use-marks.js');
var useSlide = require('./use-slide.js');
var useSliderButton = require('./use-slider-button.js');
var useStops = require('./use-stops.js');
var useWatch = require('./use-watch.js');
exports.useLifecycle = useLifecycle.useLifecycle;
exports.useMarks = useMarks.useMarks;
exports.useSlide = useSlide.useSlide;
exports.useSliderButton = useSliderButton.useSliderButton;
exports.useStops = useStops.useStops;
exports.useWatch = useWatch.useWatch;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,4 @@
import type { SliderInitData, SliderProps } from '../slider';
export declare const useLifecycle: (props: SliderProps, initData: SliderInitData, resetSize: () => void) => {
sliderWrapper: import("vue").Ref<HTMLElement | undefined>;
};

View File

@@ -0,0 +1,40 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var shared = require('@vue/shared');
var types = require('../../../../utils/types.js');
const useLifecycle = (props, initData, resetSize) => {
const sliderWrapper = vue.ref();
vue.onMounted(async () => {
if (props.range) {
if (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 (!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;
}
core.useEventListener(window, "resize", resetSize);
await vue.nextTick();
resetSize();
});
return {
sliderWrapper
};
};
exports.useLifecycle = useLifecycle;
//# sourceMappingURL=use-lifecycle.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-lifecycle.js","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"],"names":["ref","onMounted","isArray","isNumber","useEventListener","nextTick"],"mappings":";;;;;;;;;AAGY,MAAC,YAAY,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,KAAK;AAC5D,EAAE,MAAM,aAAa,GAAGA,OAAG,EAAE,CAAC;AAC9B,EAAEC,aAAS,CAAC,YAAY;AACxB,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,MAAM,IAAIC,cAAO,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;AACrC,QAAQ,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,QAAQ,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC;AACxC,QAAQ,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC;AACzC,OAAO;AACP,MAAM,QAAQ,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;AACtE,KAAK,MAAM;AACX,MAAM,IAAI,CAACC,cAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;AACzE,QAAQ,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC;AACxC,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AACzF,OAAO;AACP,MAAM,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC;AAC9C,KAAK;AACL,IAAIC,qBAAgB,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAClD,IAAI,MAAMC,YAAQ,EAAE,CAAC;AACrB,IAAI,SAAS,EAAE,CAAC;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,aAAa;AACjB,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,7 @@
import type { SliderProps } from '../slider';
import type { SliderMarkerProps } from '../marker';
export interface Mark extends SliderMarkerProps {
point: number;
position: number;
}
export declare const useMarks: (props: SliderProps) => import("vue").ComputedRef<Mark[]>;

View File

@@ -0,0 +1,22 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
const useMarks = (props) => {
return vue.computed(() => {
if (!props.marks) {
return [];
}
const marksKeys = Object.keys(props.marks);
return marksKeys.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]
}));
});
};
exports.useMarks = useMarks;
//# sourceMappingURL=use-marks.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-marks.js","sources":["../../../../../../../packages/components/slider/src/composables/use-marks.ts"],"sourcesContent":["import { computed } from 'vue'\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 return computed(() => {\n if (!props.marks) {\n return []\n }\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"],"names":["computed"],"mappings":";;;;;;AACY,MAAC,QAAQ,GAAG,CAAC,KAAK,KAAK;AACnC,EAAE,OAAOA,YAAQ,CAAC,MAAM;AACxB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AACtB,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC/C,IAAI,OAAO,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM;AAC9I,MAAM,KAAK;AACX,MAAM,QAAQ,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;AACnE,MAAM,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,KAAK,CAAC,CAAC,CAAC;AACR,GAAG,CAAC,CAAC;AACL;;;;"}

View File

@@ -0,0 +1,23 @@
import type { CSSProperties, Ref, SetupContext } from 'vue';
import type { SliderEmits, SliderInitData, SliderProps } from '../slider';
import type { SliderButtonInstance } from '../button';
export declare const useSlide: (props: SliderProps, initData: SliderInitData, emit: SetupContext<SliderEmits>["emit"]) => {
elFormItem: import("element-plus/es/components/form").FormItemContext | undefined;
slider: import("vue").ShallowRef<HTMLElement | undefined>;
firstButton: Ref<SliderButtonInstance | undefined>;
secondButton: Ref<SliderButtonInstance | undefined>;
sliderDisabled: import("vue").ComputedRef<boolean>;
minValue: import("vue").ComputedRef<number>;
maxValue: import("vue").ComputedRef<number>;
runwayStyle: import("vue").ComputedRef<CSSProperties>;
barStyle: import("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;
};

View File

@@ -0,0 +1,156 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var useFormItem = require('../../../form/src/hooks/use-form-item.js');
var event = require('../../../../constants/event.js');
const useSlide = (props, initData, emit) => {
const { form: elForm, formItem: elFormItem } = useFormItem.useFormItem();
const slider = vue.shallowRef();
const firstButton = vue.ref();
const secondButton = vue.ref();
const buttonRefs = {
firstButton,
secondButton
};
const sliderDisabled = vue.computed(() => {
return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
});
const minValue = vue.computed(() => {
return Math.min(initData.firstValue, initData.secondValue);
});
const maxValue = vue.computed(() => {
return Math.max(initData.firstValue, initData.secondValue);
});
const barSize = 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 = vue.computed(() => {
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
});
const runwayStyle = vue.computed(() => {
return props.vertical ? { height: props.height } : {};
});
const barStyle = vue.computed(() => {
return props.vertical ? {
height: barSize.value,
bottom: barStart.value
} : {
width: barSize.value,
left: barStart.value
};
});
const resetSize = () => {
if (slider.value) {
const rect = slider.value.getBoundingClientRect();
initData.sliderSize = rect[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 != null ? firstValue : props.min;
_emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
};
const setSecondValue = (secondValue) => {
initData.secondValue = secondValue;
if (props.range) {
_emit([minValue.value, maxValue.value]);
}
};
const _emit = (val) => {
emit(event.UPDATE_MODEL_EVENT, val);
emit(event.INPUT_EVENT, val);
};
const emitChange = async () => {
await vue.nextTick();
emit(event.CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
};
const handleSliderPointerEvent = (event) => {
var _a, _b, _c, _d, _e, _f;
if (sliderDisabled.value || initData.dragging)
return;
resetSize();
let newPercent = 0;
if (props.vertical) {
const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
} else {
const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
}
if (newPercent < 0 || newPercent > 100)
return;
return setPosition(newPercent);
};
const onSliderWrapperPrevent = (event) => {
var _a, _b;
if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
event.preventDefault();
}
};
const onSliderDown = async (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
await vue.nextTick();
buttonRef.value.onButtonDown(event);
}
};
const onSliderClick = (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
emitChange();
}
};
const onSliderMarkerDown = (position) => {
if (sliderDisabled.value || initData.dragging)
return;
const buttonRef = setPosition(position);
if (buttonRef) {
emitChange();
}
};
return {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
setPosition,
emitChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
onSliderMarkerDown,
setFirstValue,
setSecondValue
};
};
exports.useSlide = useSlide;
//# sourceMappingURL=use-slide.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,18 @@
import type { CSSProperties, ComputedRef, Ref, SetupContext } from 'vue';
import type { SliderButtonEmits, SliderButtonInitData, SliderButtonProps } from '../button';
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
export declare const useSliderButton: (props: SliderButtonProps, initData: SliderButtonInitData, emit: SetupContext<SliderButtonEmits>["emit"]) => {
disabled: Ref<boolean>;
button: Ref<HTMLDivElement | undefined>;
tooltip: Ref<TooltipInstance | undefined>;
tooltipVisible: Ref<boolean>;
showTooltip: Ref<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
persistent: Ref<import("element-plus/es/utils").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>;
};

View File

@@ -0,0 +1,248 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var core = require('@vueuse/core');
var constants = require('../constants.js');
var aria = require('../../../../constants/aria.js');
var event = require('../../../../constants/event.js');
const useTooltip = (props, formatTooltip, showTooltip) => {
const tooltip = vue.ref();
const tooltipVisible = vue.ref(false);
const enableFormat = vue.computed(() => {
return formatTooltip.value instanceof Function;
});
const formatValue = vue.computed(() => {
return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
});
const displayTooltip = lodashUnified.debounce(() => {
showTooltip.value && (tooltipVisible.value = true);
}, 50);
const hideTooltip = lodashUnified.debounce(() => {
showTooltip.value && (tooltipVisible.value = false);
}, 50);
return {
tooltip,
tooltipVisible,
formatValue,
displayTooltip,
hideTooltip
};
};
const useSliderButton = (props, initData, emit) => {
const {
disabled,
min,
max,
step,
showTooltip,
persistent,
precision,
sliderSize,
formatTooltip,
emitChange,
resetSize,
updateDragging
} = vue.inject(constants.sliderContextKey);
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
const button = vue.ref();
const currentPosition = vue.computed(() => {
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
});
const wrapperStyle = vue.computed(() => {
return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
});
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 onLeftKeyDown = () => {
incrementPosition(-step.value);
};
const onRightKeyDown = () => {
incrementPosition(step.value);
};
const onPageDownKeyDown = () => {
incrementPosition(-step.value * 4);
};
const onPageUpKeyDown = () => {
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) => {
let isPreventDefault = true;
switch (event.code) {
case aria.EVENT_CODE.left:
case aria.EVENT_CODE.down:
onLeftKeyDown();
break;
case aria.EVENT_CODE.right:
case aria.EVENT_CODE.up:
onRightKeyDown();
break;
case aria.EVENT_CODE.home:
onHomeKeyDown();
break;
case aria.EVENT_CODE.end:
onEndKeyDown();
break;
case aria.EVENT_CODE.pageDown:
onPageDownKeyDown();
break;
case 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;
if (newPosition < 0) {
newPosition = 0;
} else if (newPosition > 100) {
newPosition = 100;
}
const lengthPerStep = 100 / ((max.value - min.value) / step.value);
const steps = Math.round(newPosition / lengthPerStep);
let value = steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value;
value = Number.parseFloat(value.toFixed(precision.value));
if (value !== props.modelValue) {
emit(event.UPDATE_MODEL_EVENT, value);
}
if (!initData.dragging && props.modelValue !== initData.oldValue) {
initData.oldValue = props.modelValue;
}
await vue.nextTick();
initData.dragging && displayTooltip();
tooltip.value.updatePopper();
};
vue.watch(() => initData.dragging, (val) => {
updateDragging(val);
});
core.useEventListener(button, "touchstart", onButtonDown, { passive: false });
return {
disabled,
button,
tooltip,
tooltipVisible,
showTooltip,
persistent,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onKeyDown,
setPosition
};
};
exports.useSliderButton = useSliderButton;
//# sourceMappingURL=use-slider-button.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
import type { CSSProperties, ComputedRef } from 'vue';
import type { SliderInitData, SliderProps } from '../slider';
type Stops = {
stops: ComputedRef<number[]>;
getStopStyle: (position: number) => CSSProperties;
};
export declare const useStops: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>) => Stops;
export {};

View File

@@ -0,0 +1,35 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
const useStops = (props, initData, minValue, maxValue) => {
const stops = vue.computed(() => {
if (!props.showStops || props.min > props.max)
return [];
if (props.step === 0) {
return [];
}
const stopCount = (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
};
};
exports.useStops = useStops;
//# sourceMappingURL=use-stops.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-stops.js","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 === 0) {\n debugWarn('ElSlider', 'step should not be 0.')\n return []\n }\n\n const stopCount = (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"],"names":["computed"],"mappings":";;;;;;AAEY,MAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAK;AACjE,EAAE,MAAM,KAAK,GAAGA,YAAQ,CAAC,MAAM;AAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;AACjD,MAAM,OAAO,EAAE,CAAC;AAChB,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;AAE1B,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC;AAC3D,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AACjE,IAAI,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,SAAS,CAAC,CAAC;AACpG,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrC,QAAQ,OAAO,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AAC1J,OAAO,CAAC,CAAC;AACT,KAAK,MAAM;AACX,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/G,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,CAAC,QAAQ,KAAK;AACrC,IAAI,OAAO,KAAK,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AAClF,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,4 @@
import type { ComputedRef, SetupContext } from 'vue';
import type { FormItemContext } from 'element-plus/es/components/form';
import type { SliderEmits, SliderInitData, SliderProps } from '../slider';
export declare const useWatch: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>, emit: SetupContext<SliderEmits>["emit"], elFormItem: FormItemContext) => void;

View File

@@ -0,0 +1,84 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var shared = require('@vue/shared');
var error = require('../../../../utils/error.js');
var types = require('../../../../utils/types.js');
var event = require('../../../../constants/event.js');
const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
const _emit = (val) => {
emit(event.UPDATE_MODEL_EVENT, val);
emit(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 = () => {
var _a, _b;
if (props.min > props.max) {
error.throwError("Slider", "min should not be greater than max.");
}
const val = props.modelValue;
if (props.range && 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) {
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => error.debugWarn());
}
initData.oldValue = val.slice();
}
}
} else if (!props.range && 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) {
(_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => error.debugWarn());
}
initData.oldValue = val;
}
}
}
};
setValues();
vue.watch(() => initData.dragging, (val) => {
if (!val) {
setValues();
}
});
vue.watch(() => props.modelValue, (val, oldVal) => {
if (initData.dragging || shared.isArray(val) && shared.isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) {
return;
}
setValues();
}, {
deep: true
});
vue.watch(() => [props.min, props.max], () => {
setValues();
});
};
exports.useWatch = useWatch;
//# sourceMappingURL=use-watch.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
import type { ComputedRef, InjectionKey, Ref, ToRefs } from 'vue';
import type { SliderProps } from './slider';
export interface SliderContext extends ToRefs<SliderProps> {
precision: ComputedRef<number>;
sliderSize: Ref<number>;
emitChange: () => void;
resetSize: () => void;
updateDragging: (val: boolean) => void;
}
export declare const sliderContextKey: InjectionKey<SliderContext>;

View File

@@ -0,0 +1,8 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const sliderContextKey = Symbol("sliderContextKey");
exports.sliderContextKey = sliderContextKey;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.js","sources":["../../../../../../packages/components/slider/src/constants.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref, ToRefs } from 'vue'\nimport type { SliderProps } from './slider'\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}\n\nexport const sliderContextKey: InjectionKey<SliderContext> =\n Symbol('sliderContextKey')\n"],"names":[],"mappings":";;;;AAAY,MAAC,gBAAgB,GAAG,MAAM,CAAC,kBAAkB;;;;"}

View File

@@ -0,0 +1,64 @@
import type { CSSProperties, ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
export declare const sliderMarkerProps: {
readonly mark: import("element-plus/es/utils").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;
}))[], unknown, unknown, undefined, boolean>;
};
export type SliderMarkerProps = ExtractPropTypes<typeof sliderMarkerProps>;
export type SliderMarkerPropsPublic = __ExtractPublicPropTypes<typeof sliderMarkerProps>;
declare const _default: import("vue").DefineComponent<{
readonly mark: import("element-plus/es/utils").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;
}))[], unknown, unknown, undefined, boolean>;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
readonly mark: import("element-plus/es/utils").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;
}))[], unknown, unknown, undefined, boolean>;
}>>, {
readonly mark: import("element-plus/es/utils").EpPropMergeType<(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;
}))[], unknown, unknown>;
}>;
export default _default;

View File

@@ -0,0 +1,34 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var runtime = require('../../../utils/vue/props/runtime.js');
var index = require('../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
const sliderMarkerProps = runtime.buildProps({
mark: {
type: runtime.definePropType([String, Object]),
default: void 0
}
});
var SliderMarker = vue.defineComponent({
name: "ElSliderMarker",
props: sliderMarkerProps,
setup(props) {
const ns = index.useNamespace("slider");
const label = vue.computed(() => {
return shared.isString(props.mark) ? props.mark : props.mark.label;
});
const style = vue.computed(() => shared.isString(props.mark) ? void 0 : props.mark.style);
return () => vue.h("div", {
class: ns.e("marks-text"),
style: style.value
}, label.value);
}
});
exports["default"] = SliderMarker;
exports.sliderMarkerProps = sliderMarkerProps;
//# sourceMappingURL=marker.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"marker.js","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"],"names":["buildProps","definePropType","defineComponent","useNamespace","computed","isString","h"],"mappings":";;;;;;;;;AAGY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,CAAC,EAAE;AACH,mBAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,gBAAgB;AACxB,EAAE,KAAK,EAAE,iBAAiB;AAC1B,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,EAAE,GAAGC,kBAAY,CAAC,QAAQ,CAAC,CAAC;AACtC,IAAI,MAAM,KAAK,GAAGC,YAAQ,CAAC,MAAM;AACjC,MAAM,OAAOC,eAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAClE,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,KAAK,GAAGD,YAAQ,CAAC,MAAMC,eAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACnF,IAAI,OAAO,MAAMC,KAAC,CAAC,KAAK,EAAE;AAC1B,MAAM,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;AAC/B,MAAM,KAAK,EAAE,KAAK,CAAC,KAAK;AACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACpB,GAAG;AACH,CAAC,CAAC;;;;;"}

View File

@@ -0,0 +1,81 @@
import type { Arrayable } from 'element-plus/es/utils';
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type { SliderMarkerProps } from './marker';
import type Slider from './slider.vue';
type SliderMarks = Record<number, string | SliderMarkerProps['mark']>;
export interface SliderInitData {
firstValue: number;
secondValue: number;
oldValue?: Arrayable<number>;
dragging: boolean;
sliderSize: number;
}
export declare const sliderProps: {
readonly ariaLabel: StringConstructor;
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | ((new (...args: any[]) => number | number[]) | (() => Arrayable<number>))[], unknown, unknown, 0, boolean>;
readonly id: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly disabled: BooleanConstructor;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly rangeStartLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: import("vue").PropType<SliderMarks>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
};
export type SliderProps = ExtractPropTypes<typeof sliderProps>;
export type SliderPropsPublic = __ExtractPublicPropTypes<typeof sliderProps>;
export 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[];
};
export type SliderEmits = typeof sliderEmits;
export type SliderInstance = InstanceType<typeof Slider> & unknown;
export {};

View File

@@ -0,0 +1,101 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var core = require('@popperjs/core');
var runtime = require('../../../utils/vue/props/runtime.js');
var index = require('../../../hooks/use-size/index.js');
var index$1 = require('../../../hooks/use-aria/index.js');
var event = require('../../../constants/event.js');
var types = require('../../../utils/types.js');
var shared = require('@vue/shared');
const sliderProps = runtime.buildProps({
modelValue: {
type: runtime.definePropType([Number, Array]),
default: 0
},
id: {
type: String,
default: void 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
showInput: Boolean,
showInputControls: {
type: Boolean,
default: true
},
size: index.useSizeProp,
inputSize: index.useSizeProp,
showStops: Boolean,
showTooltip: {
type: Boolean,
default: true
},
formatTooltip: {
type: runtime.definePropType(Function),
default: void 0
},
disabled: Boolean,
range: Boolean,
vertical: Boolean,
height: String,
debounce: {
type: Number,
default: 300
},
rangeStartLabel: {
type: String,
default: void 0
},
rangeEndLabel: {
type: String,
default: void 0
},
formatValueText: {
type: runtime.definePropType(Function),
default: void 0
},
tooltipClass: {
type: String,
default: void 0
},
placement: {
type: String,
values: core.placements,
default: "top"
},
marks: {
type: runtime.definePropType(Object)
},
validateEvent: {
type: Boolean,
default: true
},
persistent: {
type: Boolean,
default: true
},
...index$1.useAriaProps(["ariaLabel"])
});
const isValidValue = (value) => types.isNumber(value) || shared.isArray(value) && value.every(types.isNumber);
const sliderEmits = {
[event.UPDATE_MODEL_EVENT]: isValidValue,
[event.INPUT_EVENT]: isValidValue,
[event.CHANGE_EVENT]: isValidValue
};
exports.sliderEmits = sliderEmits;
exports.sliderProps = sliderProps;
//# sourceMappingURL=slider.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,178 @@
declare const _default: import("vue").DefineComponent<{
readonly ariaLabel: StringConstructor;
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>) | ((new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>))[], unknown, unknown, 0, boolean>;
readonly id: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly disabled: BooleanConstructor;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly rangeStartLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("element-plus").Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: import("vue").PropType<{
[x: number]: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
style: import("vue").CSSProperties;
label: any;
}) | (() => string | {
style: import("vue").CSSProperties;
label: any;
}) | ((new (...args: any[]) => string | {
style: import("vue").CSSProperties;
label: any;
}) | (() => string | {
style: import("vue").CSSProperties;
label: any;
}))[], unknown, unknown> | undefined;
}>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}, {
onSliderClick: (event: MouseEvent | TouchEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:modelValue": (value: import("element-plus/es/utils").Arrayable<number>) => void;
change: (value: import("element-plus/es/utils").Arrayable<number>) => void;
input: (value: import("element-plus/es/utils").Arrayable<number>) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly ariaLabel: StringConstructor;
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>) | ((new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>))[], unknown, unknown, 0, boolean>;
readonly id: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly min: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 100, boolean>;
readonly step: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
readonly showInput: BooleanConstructor;
readonly showInputControls: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly inputSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showStops: BooleanConstructor;
readonly showTooltip: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly formatTooltip: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly disabled: BooleanConstructor;
readonly range: BooleanConstructor;
readonly vertical: BooleanConstructor;
readonly height: StringConstructor;
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly rangeStartLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly rangeEndLabel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly formatValueText: import("element-plus/es/utils").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;
})[], unknown, unknown, undefined, boolean>;
readonly tooltipClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
readonly placement: import("element-plus/es/utils").EpPropFinalized<StringConstructor, import("element-plus").Placement, unknown, "top", boolean>;
readonly marks: {
readonly type: import("vue").PropType<{
[x: number]: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
style: import("vue").CSSProperties;
label: any;
}) | (() => string | {
style: import("vue").CSSProperties;
label: any;
}) | ((new (...args: any[]) => string | {
style: import("vue").CSSProperties;
label: any;
}) | (() => string | {
style: import("vue").CSSProperties;
label: any;
}))[], unknown, unknown> | undefined;
}>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>> & {
"onUpdate:modelValue"?: ((value: import("element-plus/es/utils").Arrayable<number>) => any) | undefined;
onChange?: ((value: import("element-plus/es/utils").Arrayable<number>) => any) | undefined;
onInput?: ((value: import("element-plus/es/utils").Arrayable<number>) => any) | undefined;
}, {
readonly disabled: boolean;
readonly vertical: boolean;
readonly range: boolean;
readonly id: string;
readonly modelValue: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>) | ((new (...args: any[]) => number | number[]) | (() => import("element-plus/es/utils").Arrayable<number>))[], unknown, unknown>;
readonly placement: import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>;
readonly min: number;
readonly max: number;
readonly validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly persistent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly debounce: number;
readonly step: number;
readonly showInputControls: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly showTooltip: import("element-plus/es/utils").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;
}>;
export default _default;

View File

@@ -0,0 +1,246 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var index$2 = require('../../input-number/index.js');
var constants = require('./constants.js');
var slider = require('./slider.js');
var button = require('./button2.js');
var marker = require('./marker.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var useSlide = require('./composables/use-slide.js');
var useStops = require('./composables/use-stops.js');
var useMarks = require('./composables/use-marks.js');
var useWatch = require('./composables/use-watch.js');
var useLifecycle = require('./composables/use-lifecycle.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-locale/index.js');
var useFormItem = require('../../form/src/hooks/use-form-item.js');
var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
const __default__ = vue.defineComponent({
name: "ElSlider"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: slider.sliderProps,
emits: slider.sliderEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = index.useNamespace("slider");
const { t } = index$1.useLocale();
const initData = 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
} = useSlide.useSlide(props, initData, emit);
const { stops, getStopStyle } = useStops.useStops(props, initData, minValue, maxValue);
const { inputId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
formItemContext: elFormItem
});
const sliderWrapperSize = useFormCommonProps.useFormSize();
const sliderInputSize = vue.computed(() => props.inputSize || sliderWrapperSize.value);
const groupLabel = vue.computed(() => {
return props.ariaLabel || t("el.slider.defaultLabel", {
min: props.min,
max: props.max
});
});
const firstButtonLabel = vue.computed(() => {
if (props.range) {
return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
} else {
return groupLabel.value;
}
});
const firstValueText = vue.computed(() => {
return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
});
const secondButtonLabel = vue.computed(() => {
return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
});
const secondValueText = vue.computed(() => {
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
});
const sliderKls = vue.computed(() => [
ns.b(),
ns.m(sliderWrapperSize.value),
ns.is("vertical", props.vertical),
{ [ns.m("with-input")]: props.showInput }
]);
const markList = useMarks.useMarks(props);
useWatch.useWatch(props, initData, minValue, maxValue, emit, elFormItem);
const precision = vue.computed(() => {
const precisions = [props.min, props.max, props.step].map((item) => {
const decimal = `${item}`.split(".")[1];
return decimal ? decimal.length : 0;
});
return Math.max.apply(null, precisions);
});
const { sliderWrapper } = useLifecycle.useLifecycle(props, initData, resetSize);
const { firstValue, secondValue, sliderSize } = vue.toRefs(initData);
const updateDragging = (val) => {
initData.dragging = val;
};
core.useEventListener(sliderWrapper, "touchstart", onSliderWrapperPrevent, {
passive: false
});
core.useEventListener(sliderWrapper, "touchmove", onSliderWrapperPrevent, {
passive: false
});
vue.provide(constants.sliderContextKey, {
...vue.toRefs(props),
sliderSize,
disabled: sliderDisabled,
precision,
emitChange,
resetSize,
updateDragging
});
expose({
onSliderClick
});
return (_ctx, _cache) => {
var _a, _b;
return vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.range ? vue.unref(inputId) : void 0,
ref_key: "sliderWrapper",
ref: sliderWrapper,
class: vue.normalizeClass(vue.unref(sliderKls)),
role: _ctx.range ? "group" : void 0,
"aria-label": _ctx.range && !vue.unref(isLabeledByFormItem) ? vue.unref(groupLabel) : void 0,
"aria-labelledby": _ctx.range && vue.unref(isLabeledByFormItem) ? (_a = vue.unref(elFormItem)) == null ? void 0 : _a.labelId : void 0
}, [
vue.createElementVNode("div", {
ref_key: "slider",
ref: slider,
class: vue.normalizeClass([
vue.unref(ns).e("runway"),
{ "show-input": _ctx.showInput && !_ctx.range },
vue.unref(ns).is("disabled", vue.unref(sliderDisabled))
]),
style: vue.normalizeStyle(vue.unref(runwayStyle)),
onMousedown: vue.unref(onSliderDown),
onTouchstartPassive: vue.unref(onSliderDown)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("bar")),
style: vue.normalizeStyle(vue.unref(barStyle))
}, null, 6),
vue.createVNode(button["default"], {
id: !_ctx.range ? vue.unref(inputId) : void 0,
ref_key: "firstButton",
ref: firstButton,
"model-value": vue.unref(firstValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": _ctx.range || !vue.unref(isLabeledByFormItem) ? vue.unref(firstButtonLabel) : void 0,
"aria-labelledby": !_ctx.range && vue.unref(isLabeledByFormItem) ? (_b = vue.unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
"aria-valuemin": _ctx.min,
"aria-valuemax": _ctx.range ? vue.unref(secondValue) : _ctx.max,
"aria-valuenow": vue.unref(firstValue),
"aria-valuetext": vue.unref(firstValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": vue.unref(sliderDisabled),
"onUpdate:modelValue": 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 ? (vue.openBlock(), vue.createBlock(button["default"], {
key: 0,
ref_key: "secondButton",
ref: secondButton,
"model-value": vue.unref(secondValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": vue.unref(secondButtonLabel),
"aria-valuemin": vue.unref(firstValue),
"aria-valuemax": _ctx.max,
"aria-valuenow": vue.unref(secondValue),
"aria-valuetext": vue.unref(secondValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": vue.unref(sliderDisabled),
"onUpdate:modelValue": 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"])) : vue.createCommentVNode("v-if", true),
_ctx.showStops ? (vue.openBlock(), vue.createElementBlock("div", { key: 1 }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(stops), (item, key) => {
return vue.openBlock(), vue.createElementBlock("div", {
key,
class: vue.normalizeClass(vue.unref(ns).e("stop")),
style: vue.normalizeStyle(vue.unref(getStopStyle)(item))
}, null, 6);
}), 128))
])) : vue.createCommentVNode("v-if", true),
vue.unref(markList).length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
vue.createElementVNode("div", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => {
return vue.openBlock(), vue.createElementBlock("div", {
key,
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)),
class: vue.normalizeClass([vue.unref(ns).e("stop"), vue.unref(ns).e("marks-stop")])
}, null, 6);
}), 128))
]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("marks"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => {
return vue.openBlock(), vue.createBlock(vue.unref(marker["default"]), {
key,
mark: item.mark,
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)),
onMousedown: vue.withModifiers(($event) => vue.unref(onSliderMarkerDown)(item.position), ["stop"])
}, null, 8, ["mark", "style", "onMousedown"]);
}), 128))
], 2)
], 64)) : vue.createCommentVNode("v-if", true)
], 46, ["onMousedown", "onTouchstartPassive"]),
_ctx.showInput && !_ctx.range ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElInputNumber), {
key: 0,
ref: "input",
"model-value": vue.unref(firstValue),
class: vue.normalizeClass(vue.unref(ns).e("input")),
step: _ctx.step,
disabled: vue.unref(sliderDisabled),
controls: _ctx.showInputControls,
min: _ctx.min,
max: _ctx.max,
precision: vue.unref(precision),
debounce: _ctx.debounce,
size: vue.unref(sliderInputSize),
"onUpdate:modelValue": vue.unref(setFirstValue),
onChange: vue.unref(emitChange)
}, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "precision", "debounce", "size", "onUpdate:modelValue", "onChange"])) : vue.createCommentVNode("v-if", true)
], 10, ["id", "role", "aria-label", "aria-labelledby"]);
};
}
});
var Slider = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "slider.vue"]]);
exports["default"] = Slider;
//# sourceMappingURL=slider2.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,4 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-slider.css';
import 'element-plus/es/components/input-number/style/css';
import 'element-plus/es/components/tooltip/style/css';

View File

@@ -0,0 +1,8 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-slider.css');
require('../../input-number/style/css.js');
require('../../tooltip/style/css.js');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

View File

@@ -0,0 +1,4 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/slider.scss';
import 'element-plus/es/components/input-number/style';
import 'element-plus/es/components/tooltip/style';

View File

@@ -0,0 +1,8 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/slider.scss');
require('../../input-number/style/index.js');
require('../../tooltip/style/index.js');
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}