hongluan-ui
Version:
Hongluan Component Library for Vue 3
223 lines (218 loc) • 9.58 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var slider = require('./slider2.js');
var button = require('./button2.js');
var marker = require('./marker.js');
require('./composables/index.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-locale/index.js');
var useSlide = require('./composables/use-slide.js');
var useStops = require('./composables/use-stops.js');
var index$2 = require('../../../hooks/use-form-item/index.js');
var useMarks = require('./composables/use-marks.js');
var useWatch = require('./composables/use-watch.js');
var useLifecycle = require('./composables/use-lifecycle.js');
var slider$1 = require('../../../tokens/slider.js');
const __default__ = vue.defineComponent({
name: "Slider"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: slider.sliderProps,
emits: slider.sliderEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { namespace } = index.useNamespace("slider");
const { t } = index$1.useLocale();
const initData = vue.reactive({
firstValue: 0,
secondValue: 0,
oldValue: 0,
dragging: false,
sliderSize: 1
});
const {
formItem,
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 } = index$2.useFormItemInputId(props, {
formItemContext: formItem
});
const groupLabel = vue.computed(() => {
return props.label || props.ariaLabel || t("hl.slider.defaultLabel", {
min: props.min,
max: props.max
});
});
const firstButtonLabel = vue.computed(() => {
if (props.range) {
return props.rangeStartLabel || t("hl.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("hl.slider.defaultRangeEndLabel");
});
const secondValueText = vue.computed(() => {
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
});
const markList = useMarks.useMarks(props);
useWatch.useWatch(props, initData, minValue, maxValue, emit, formItem);
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(slider$1.sliderContextKey, {
...vue.toRefs(props),
sliderSize,
disabled: sliderDisabled,
precision,
emitChange,
resetSize,
updateDragging
});
expose({
onSliderClick
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.range ? vue.unref(inputId) : void 0,
ref_key: "sliderWrapper",
ref: sliderWrapper,
class: vue.normalizeClass([
vue.unref(namespace),
_ctx.vertical ? "is-vertical" : "",
_ctx.type ? _ctx.type : "",
_ctx.showStops ? "show-stops" : ""
]),
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) ? vue.unref(formItem).labelId : void 0
}, [
vue.createElementVNode("div", {
ref_key: "slider",
ref: slider,
class: vue.normalizeClass({
"slider-wrap": true,
disabled: vue.unref(sliderDisabled)
}),
style: vue.normalizeStyle(vue.unref(runwayStyle)),
onMousedown: vue.unref(onSliderDown),
onTouchstartPassive: vue.unref(onSliderDown)
}, [
vue.createElementVNode("div", {
class: "slider-bar",
style: vue.normalizeStyle(vue.unref(barStyle))
}, null, 4),
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) ? vue.unref(formItem).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: "slider-stop",
style: vue.normalizeStyle(vue.unref(getStopStyle)(item))
}, null, 4);
}), 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: "slider-stop slider-marks-stop"
}, null, 4);
}), 128))
]),
vue.createElementVNode("div", { class: "slider-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))
])
], 64)) : vue.createCommentVNode("v-if", true)
], 46, ["onMousedown", "onTouchstartPassive"])
], 10, ["id", "role", "aria-label", "aria-labelledby"]);
};
}
});
exports["default"] = _sfc_main;
//# sourceMappingURL=slider.js.map