element-plus
Version:
A Component Library for Vue 3
240 lines (237 loc) • 10.9 kB
JavaScript
import { defineComponent, reactive, computed, toRefs, provide, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, normalizeStyle, createVNode, createBlock, createCommentVNode, Fragment, renderList } from 'vue';
import { ElInputNumber } from '../../input-number/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { sliderProps, sliderEmits } from './slider.mjs';
import SliderButton from './button2.mjs';
import SliderMarker from './marker.mjs';
import './composables/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useSlide } from './composables/use-slide.mjs';
import { useStops } from './composables/use-stops.mjs';
import { useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
import { useSize } from '../../../hooks/use-common-props/index.mjs';
import { useMarks } from './composables/use-marks.mjs';
import { useWatch } from './composables/use-watch.mjs';
import { useLifecycle } from './composables/use-lifecycle.mjs';
import { sliderContextKey } from '../../../tokens/slider.mjs';
const _hoisted_1 = ["id", "role", "aria-label", "aria-labelledby"];
const _hoisted_2 = { key: 1 };
const __default__ = defineComponent({
name: "ElSlider"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: sliderProps,
emits: sliderEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("slider");
const { t } = useLocale();
const initData = 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,
setFirstValue,
setSecondValue
} = useSlide(props, initData, emit);
const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: elFormItem
});
const sliderWrapperSize = useSize();
const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
const groupLabel = computed(() => {
return props.label || t("el.slider.defaultLabel", {
min: props.min,
max: props.max
});
});
const firstButtonLabel = computed(() => {
if (props.range) {
return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
} else {
return groupLabel.value;
}
});
const firstValueText = computed(() => {
return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
});
const secondButtonLabel = computed(() => {
return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
});
const secondValueText = computed(() => {
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
});
const sliderKls = computed(() => [
ns.b(),
ns.m(sliderWrapperSize.value),
ns.is("vertical", props.vertical),
{ [ns.m("with-input")]: props.showInput }
]);
const markList = useMarks(props);
useWatch(props, initData, minValue, maxValue, emit, elFormItem);
const precision = 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(props, initData, resetSize);
const { firstValue, secondValue, sliderSize } = toRefs(initData);
const updateDragging = (val) => {
initData.dragging = val;
};
provide(sliderContextKey, {
...toRefs(props),
sliderSize,
disabled: sliderDisabled,
precision,
emitChange,
resetSize,
updateDragging
});
expose({
onSliderClick
});
return (_ctx, _cache) => {
var _a, _b;
return openBlock(), createElementBlock("div", {
id: _ctx.range ? unref(inputId) : void 0,
ref_key: "sliderWrapper",
ref: sliderWrapper,
class: normalizeClass(unref(sliderKls)),
role: _ctx.range ? "group" : void 0,
"aria-label": _ctx.range && !unref(isLabeledByFormItem) ? unref(groupLabel) : void 0,
"aria-labelledby": _ctx.range && unref(isLabeledByFormItem) ? (_a = unref(elFormItem)) == null ? void 0 : _a.labelId : void 0,
onTouchstart: _cache[2] || (_cache[2] = (...args) => unref(onSliderWrapperPrevent) && unref(onSliderWrapperPrevent)(...args)),
onTouchmove: _cache[3] || (_cache[3] = (...args) => unref(onSliderWrapperPrevent) && unref(onSliderWrapperPrevent)(...args))
}, [
createElementVNode("div", {
ref_key: "slider",
ref: slider,
class: normalizeClass([
unref(ns).e("runway"),
{ "show-input": _ctx.showInput && !_ctx.range },
unref(ns).is("disabled", unref(sliderDisabled))
]),
style: normalizeStyle(unref(runwayStyle)),
onMousedown: _cache[0] || (_cache[0] = (...args) => unref(onSliderDown) && unref(onSliderDown)(...args)),
onTouchstart: _cache[1] || (_cache[1] = (...args) => unref(onSliderDown) && unref(onSliderDown)(...args))
}, [
createElementVNode("div", {
class: normalizeClass(unref(ns).e("bar")),
style: normalizeStyle(unref(barStyle))
}, null, 6),
createVNode(SliderButton, {
id: !_ctx.range ? unref(inputId) : void 0,
ref_key: "firstButton",
ref: firstButton,
"model-value": unref(firstValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": _ctx.range || !unref(isLabeledByFormItem) ? unref(firstButtonLabel) : void 0,
"aria-labelledby": !_ctx.range && unref(isLabeledByFormItem) ? (_b = unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
"aria-valuemin": _ctx.min,
"aria-valuemax": _ctx.range ? unref(secondValue) : _ctx.max,
"aria-valuenow": unref(firstValue),
"aria-valuetext": unref(firstValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": unref(sliderDisabled),
"onUpdate:modelValue": 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 ? (openBlock(), createBlock(SliderButton, {
key: 0,
ref_key: "secondButton",
ref: secondButton,
"model-value": unref(secondValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": unref(secondButtonLabel),
"aria-valuemin": unref(firstValue),
"aria-valuemax": _ctx.max,
"aria-valuenow": unref(secondValue),
"aria-valuetext": unref(secondValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": unref(sliderDisabled),
"onUpdate:modelValue": 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"])) : createCommentVNode("v-if", true),
_ctx.showStops ? (openBlock(), createElementBlock("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(stops), (item, key) => {
return openBlock(), createElementBlock("div", {
key,
class: normalizeClass(unref(ns).e("stop")),
style: normalizeStyle(unref(getStopStyle)(item))
}, null, 6);
}), 128))
])) : createCommentVNode("v-if", true),
unref(markList).length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
createElementVNode("div", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
return openBlock(), createElementBlock("div", {
key,
style: normalizeStyle(unref(getStopStyle)(item.position)),
class: normalizeClass([unref(ns).e("stop"), unref(ns).e("marks-stop")])
}, null, 6);
}), 128))
]),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("marks"))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
return openBlock(), createBlock(unref(SliderMarker), {
key,
mark: item.mark,
style: normalizeStyle(unref(getStopStyle)(item.position))
}, null, 8, ["mark", "style"]);
}), 128))
], 2)
], 64)) : createCommentVNode("v-if", true)
], 38),
_ctx.showInput && !_ctx.range ? (openBlock(), createBlock(unref(ElInputNumber), {
key: 0,
ref: "input",
"model-value": unref(firstValue),
class: normalizeClass(unref(ns).e("input")),
step: _ctx.step,
disabled: unref(sliderDisabled),
controls: _ctx.showInputControls,
min: _ctx.min,
max: _ctx.max,
debounce: _ctx.debounce,
size: unref(sliderInputSize),
"onUpdate:modelValue": unref(setFirstValue),
onChange: unref(emitChange)
}, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true)
], 42, _hoisted_1);
};
}
});
var Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/slider/src/slider.vue"]]);
export { Slider as default };
//# sourceMappingURL=slider2.mjs.map