tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
145 lines (144 loc) • 4.81 kB
JavaScript
import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
import "../../../theme-chalk/src/slider.scss.mjs";
const _hoisted_1 = { class: "tas-slider" };
const _hoisted_2 = {
class: "tas-slider__content",
draggable: false
};
const _hoisted_3 = { class: "tas-slider__other" };
const _hoisted_4 = { class: "tas-slider__value" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "slider",
props: {
min: {
require: false,
default: 0,
type: Number
},
max: {
require: false,
default: 100,
type: Number
},
step: {
require: false,
default: 1,
type: Number
},
value: {
require: false,
default: 0,
type: Number
},
disabled: {
require: false,
default: false,
type: Boolean
}
},
emits: ["sliderChange"],
setup(__props, { emit }) {
const props = __props;
let maxX = 0;
let thumbWidth = 6;
const sliderTrack = ref();
const sliderThumb = ref();
const sliderThumbStatusClass = ref("");
const sliderValue = ref(props.value);
const sliderFillPercent = ref(0);
const distance = Number(props.max) - Number(props.min);
if (sliderValue.value < Number(props.min)) {
sliderValue.value = Number(props.min) || 0;
} else if (sliderValue.value > Number(props.max)) {
sliderValue.value = Number(props.max) || 100;
}
const thumbX = ref("0px");
const thumbTop = ref("-7px");
onMounted(() => {
var _a, _b, _c;
thumbWidth = (((_a = sliderThumb.value) == null ? void 0 : _a.offsetWidth) || 0) / 2;
thumbTop.value = -((((_b = sliderThumb.value) == null ? void 0 : _b.offsetHeight) || 0) / 2) + "px";
maxX = (((_c = sliderTrack.value) == null ? void 0 : _c.offsetWidth) || 0) - thumbWidth;
sliderFillPercent.value = (sliderValue.value - Number(props.min)) / distance * 100;
thumbX.value = (sliderValue.value - Number(props.min)) / distance * (maxX + thumbWidth) - thumbWidth + "px";
if (props.disabled) {
sliderThumbStatusClass.value = "tas-slider__thumb-disabled";
}
});
const handleClickTrack = (e) => {
const targetX = e == null ? void 0 : e.offsetX;
if (props.disabled) {
return;
}
thumbX.value = targetX - thumbWidth + "px";
};
const thumbDown = (e) => {
if (props.disabled) {
return;
}
sliderThumbStatusClass.value = "tas-slider__thumb-active";
const startX = e == null ? void 0 : e.clientX;
const initX = parseFloat(thumbX.value);
const handler = (event) => {
const nowX = event.clientX;
const disX = nowX - startX;
thumbX.value = initX + disX + "px";
if (initX + disX <= -thumbWidth) {
thumbX.value = `-${thumbWidth}px`;
}
if (initX + disX > maxX) {
thumbX.value = `${maxX}px`;
}
};
document.addEventListener("mousemove", handler, false);
document.addEventListener(
"mouseup",
() => {
sliderThumbStatusClass.value = "";
document.removeEventListener("mousemove", handler);
},
false
);
};
watch(thumbX, () => {
sliderFillPercent.value = (parseFloat(thumbX.value) + thumbWidth) / (maxX + thumbWidth) * 100;
const b = (parseFloat(thumbX.value) + thumbWidth) / (maxX + thumbWidth) * distance + Number(props.min);
const a = b % Number(props.step);
sliderValue.value = b - a;
emit("sliderChange", sliderValue.value);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: "tas-slider__track",
ref_key: "sliderTrack",
ref: sliderTrack,
draggable: false,
onClick: handleClickTrack
}, [
createElementVNode("div", {
class: "tas-slider__fill",
style: normalizeStyle({ width: sliderFillPercent.value + "%" })
}, null, 4)
], 512),
createElementVNode("div", {
class: normalizeClass(["tas-slider__thumb", sliderThumbStatusClass.value]),
ref_key: "sliderThumb",
ref: sliderThumb,
style: normalizeStyle({ left: thumbX.value }),
onMousedown: thumbDown,
draggable: false
}, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, toDisplayString(sliderValue.value), 1)
])
], 38)
])
]);
};
}
});
export {
_sfc_main as default
};