693 lines
28 KiB
JavaScript
693 lines
28 KiB
JavaScript
|
import { w as withInstall } from "../badge/index2.js";
|
||
|
|
import { defineComponent, ref, openBlock, createElementBlock, withModifiers, normalizeClass, createVNode, withCtx, createElementVNode, normalizeStyle, Fragment, renderList, unref, withDirectives, vShow, toRef } from "vue";
|
||
|
|
import { _ as _sfc_main$5 } from "../tooltip/index2.js";
|
||
|
|
import { o as on, a as off } from "../_chunks/evtd/index.js";
|
||
|
|
import "../_chunks/@vueuse/index.js";
|
||
|
|
var index = /* @__PURE__ */ (() => '.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}.layui-slider-v{width:100%;height:18px;margin-bottom:8px}.layui-slider-track-v{width:100%;height:16px;position:relative;cursor:pointer;z-index:30}.layui-slider-btn-v{width:12px;height:12px;background-color:#fff;position:absolute;border:2px solid var(--global-primary-color);border-radius:50%;cursor:pointer;left:0%;z-index:2}.layui-slider-rate-v{width:0%;height:4px;position:absolute;top:6px;left:0;bac
|
||
|
|
function throttle(func) {
|
||
|
|
let timer = null;
|
||
|
|
return function(args) {
|
||
|
|
if (!timer) {
|
||
|
|
timer = setTimeout(() => {
|
||
|
|
timer = null;
|
||
|
|
func(args);
|
||
|
|
}, 30);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function handle_select(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
function makeDots(props) {
|
||
|
|
if (props.step === 0)
|
||
|
|
return [];
|
||
|
|
let val = 0;
|
||
|
|
let dots = [0];
|
||
|
|
let count = Math.floor(100 / props.step) - 1;
|
||
|
|
for (let i = 0; i < count; i++) {
|
||
|
|
val += props.step;
|
||
|
|
dots.push(val);
|
||
|
|
}
|
||
|
|
dots.push(100);
|
||
|
|
return dots;
|
||
|
|
}
|
||
|
|
const _hoisted_1$4 = ["onMousedown"];
|
||
|
|
const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "layui-slider-line-v" }, null, -1);
|
||
|
|
const _hoisted_3$4 = ["onClick"];
|
||
|
|
const __default__$4 = {
|
||
|
|
name: "StandardVue"
|
||
|
|
};
|
||
|
|
const _sfc_main$4 = defineComponent({
|
||
|
|
...__default__$4,
|
||
|
|
props: {
|
||
|
|
val: { default: 0 },
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
step: { default: 0 },
|
||
|
|
min: { default: 0 },
|
||
|
|
max: { default: 100 },
|
||
|
|
showDots: { type: Boolean, default: false }
|
||
|
|
},
|
||
|
|
emits: ["link-val-hook"],
|
||
|
|
setup(__props, { emit }) {
|
||
|
|
const props = __props;
|
||
|
|
const moveAction = throttle(standardMove);
|
||
|
|
function handle_mouseup() {
|
||
|
|
off("selectstart", document, handle_select);
|
||
|
|
off("mouseup", window, handle_mouseup);
|
||
|
|
off("mousemove", window, moveAction);
|
||
|
|
tooptipHide.value = true;
|
||
|
|
}
|
||
|
|
function handle_mousedown() {
|
||
|
|
on("selectstart", window, handle_select, { once: true });
|
||
|
|
on("mouseup", window, handle_mouseup);
|
||
|
|
on("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
const tracker = ref(null);
|
||
|
|
let standard_style = ref(props.val);
|
||
|
|
const tooptipHide = ref(true);
|
||
|
|
function standardMove(e) {
|
||
|
|
tooptipHide.value = false;
|
||
|
|
if (!tracker.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let tracker_rect = tracker.value.getBoundingClientRect();
|
||
|
|
let origin_left = tracker_rect.left;
|
||
|
|
let point_left = e.clientX;
|
||
|
|
let distance = point_left - origin_left;
|
||
|
|
if (distance < props.min) {
|
||
|
|
standard_style.value = props.min;
|
||
|
|
} else {
|
||
|
|
let rate = distance / tracker_rect.width * 100;
|
||
|
|
calcWithStep(rate, standard_style);
|
||
|
|
if (standard_style.value > props.max) {
|
||
|
|
standard_style.value = props.max;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
emit("link-val-hook", standard_style.value);
|
||
|
|
}
|
||
|
|
function calcWithStep(rate, val) {
|
||
|
|
if (typeof rate === "undefined")
|
||
|
|
return false;
|
||
|
|
if (typeof val.value === "number") {
|
||
|
|
let r = rate - val.value;
|
||
|
|
if (Math.abs(r) < props.step) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.step === 0)
|
||
|
|
val.value = Math.floor(rate);
|
||
|
|
if (r < 0 && props.step !== 0) {
|
||
|
|
val.value -= props.step;
|
||
|
|
} else {
|
||
|
|
val.value += props.step;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const dots = makeDots(props);
|
||
|
|
const focusDot = (val) => {
|
||
|
|
emit("link-val-hook", val);
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", {
|
||
|
|
ref_key: "tracker",
|
||
|
|
ref: tracker,
|
||
|
|
onMousedown: withModifiers(handle_mousedown, ["stop"]),
|
||
|
|
class: normalizeClass(["layui-slider-track-v", [__props.disabled ? "layui-slider-disabled" : ""]])
|
||
|
|
}, [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + __props.val,
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ left: __props.val + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-btn-v", [__props.disabled ? "layui-slider-disabled disable-btn" : ""]])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ width: __props.val + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-rate-v", [__props.disabled ? "layui-slider-disabled disable-line" : ""]])
|
||
|
|
}, null, 6),
|
||
|
|
_hoisted_2$4,
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(dots), (item, index2) => {
|
||
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
||
|
|
onClick: ($event) => focusDot(item),
|
||
|
|
class: "layui-slider-dots",
|
||
|
|
key: index2,
|
||
|
|
style: normalizeStyle({ left: item + "%" })
|
||
|
|
}, null, 12, _hoisted_3$4)), [
|
||
|
|
[vShow, __props.showDots]
|
||
|
|
]);
|
||
|
|
}), 128))
|
||
|
|
], 42, _hoisted_1$4);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$3 = ["onMousedown"];
|
||
|
|
const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("div", { class: "layui-slider-line-v" }, null, -1);
|
||
|
|
const _hoisted_3$3 = ["onClick"];
|
||
|
|
const __default__$3 = {
|
||
|
|
name: "StandardRange"
|
||
|
|
};
|
||
|
|
const _sfc_main$3 = defineComponent({
|
||
|
|
...__default__$3,
|
||
|
|
props: {
|
||
|
|
rangeValue: null,
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
step: { default: 0 },
|
||
|
|
min: { default: 0 },
|
||
|
|
max: { default: 100 },
|
||
|
|
showDots: { type: Boolean, default: true }
|
||
|
|
},
|
||
|
|
emits: ["link-val-hook"],
|
||
|
|
setup(__props, { emit }) {
|
||
|
|
const props = __props;
|
||
|
|
let rv = toRef(props, "rangeValue");
|
||
|
|
const moveAction = throttle(rangeMove);
|
||
|
|
let currbtn = -1;
|
||
|
|
function handle_mousedown() {
|
||
|
|
currbtn = -1;
|
||
|
|
tooptipHide.value = false;
|
||
|
|
on("selectstart", window, handle_select2, { once: true });
|
||
|
|
on("mouseup", window, handle_mouseup);
|
||
|
|
on("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
function handle_mouseup() {
|
||
|
|
tooptipHide.value = true;
|
||
|
|
off("selectstart", document, handle_select2);
|
||
|
|
off("mouseup", window, handle_mouseup);
|
||
|
|
off("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
function handle_select2(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
const tracker = ref(null);
|
||
|
|
const tooptipHide = ref(true);
|
||
|
|
function rangeMove(e) {
|
||
|
|
if (!tracker.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let tracker_rect = tracker.value.getBoundingClientRect();
|
||
|
|
let origin_left = tracker_rect.left;
|
||
|
|
let point_left = e.clientX;
|
||
|
|
let distance = point_left - origin_left;
|
||
|
|
if (distance < props.min) {
|
||
|
|
rv.value[0] = props.min;
|
||
|
|
} else {
|
||
|
|
let rate = distance / tracker_rect.width * 100;
|
||
|
|
let idx = -1;
|
||
|
|
if (currbtn === -1) {
|
||
|
|
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||
|
|
idx = currbtn;
|
||
|
|
} else {
|
||
|
|
idx = currbtn;
|
||
|
|
}
|
||
|
|
calcWithStep(rate, rv, idx);
|
||
|
|
if (rv.value[1] > props.max) {
|
||
|
|
rv.value[1] = props.max;
|
||
|
|
}
|
||
|
|
if (rv.value[0] < props.min) {
|
||
|
|
rv.value[0] = props.min;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
emit("link-val-hook", rv.value);
|
||
|
|
}
|
||
|
|
function moveNeighbors(rate, rangeValues) {
|
||
|
|
let d1 = Math.abs(rate - rangeValues.value[0]);
|
||
|
|
let d2 = Math.abs(rate - rangeValues.value[1]);
|
||
|
|
if (d1 > d2) {
|
||
|
|
return 1;
|
||
|
|
} else {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function calcWithStep(rate, val, idx = -1) {
|
||
|
|
if (typeof rate === "undefined")
|
||
|
|
return false;
|
||
|
|
if (typeof val.value === "object") {
|
||
|
|
let r = rate - val.value[idx];
|
||
|
|
if (Math.abs(r) < props.step) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.step === 0)
|
||
|
|
val.value[idx] = Math.floor(rate);
|
||
|
|
if (Array.isArray(val.value)) {
|
||
|
|
if (r < 0 && props.step !== 0) {
|
||
|
|
val.value[idx] -= props.step;
|
||
|
|
} else {
|
||
|
|
val.value[idx] += props.step;
|
||
|
|
}
|
||
|
|
cross(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function cross(val) {
|
||
|
|
if (val.value[0] > val.value[1]) {
|
||
|
|
let tmp = val.value[0];
|
||
|
|
val.value[0] = val.value[1];
|
||
|
|
val.value[1] = tmp;
|
||
|
|
currbtn = currbtn === 0 ? 1 : 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const dots = makeDots(props);
|
||
|
|
const focusDot = (item) => {
|
||
|
|
let currbtn2 = moveNeighbors(item, rv);
|
||
|
|
rv.value[currbtn2] = item;
|
||
|
|
emit("link-val-hook", rv.value);
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", {
|
||
|
|
ref_key: "tracker",
|
||
|
|
ref: tracker,
|
||
|
|
onMousedown: withModifiers(handle_mousedown, ["stop"]),
|
||
|
|
class: normalizeClass(["layui-slider-srange", [__props.disabled ? "layui-slider-disabled" : ""]])
|
||
|
|
}, [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + unref(rv)[0],
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ left: unref(rv)[0] + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-btn-v", [props.disabled ? "layui-slider-disabled disable-btn" : ""]])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + unref(rv)[1],
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ left: unref(rv)[1] + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-btn-v", [props.disabled ? "layui-slider-disabled disable-btn" : ""]])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
_hoisted_2$3,
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({
|
||
|
|
width: unref(rv)[1] - unref(rv)[0] + "%",
|
||
|
|
left: unref(rv)[0] + "%"
|
||
|
|
}),
|
||
|
|
class: normalizeClass(["layui-slider-rate-v", [props.disabled ? "layui-slider-disabled disable-line" : ""]])
|
||
|
|
}, null, 6),
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(dots), (item, index2) => {
|
||
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
||
|
|
onClick: ($event) => focusDot(item),
|
||
|
|
class: "layui-slider-dots",
|
||
|
|
key: index2,
|
||
|
|
style: normalizeStyle({ left: item + "%" })
|
||
|
|
}, null, 12, _hoisted_3$3)), [
|
||
|
|
[vShow, __props.showDots]
|
||
|
|
]);
|
||
|
|
}), 128))
|
||
|
|
], 42, _hoisted_1$3);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$2 = { class: "layui-slider-vertical" };
|
||
|
|
const _hoisted_2$2 = ["onMousedown"];
|
||
|
|
const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "layui-slider-vertical-line" }, null, -1);
|
||
|
|
const _hoisted_4$2 = ["onClick"];
|
||
|
|
const __default__$2 = {
|
||
|
|
name: "Vertical"
|
||
|
|
};
|
||
|
|
const _sfc_main$2 = defineComponent({
|
||
|
|
...__default__$2,
|
||
|
|
props: {
|
||
|
|
val: { default: 0 },
|
||
|
|
disabled: { type: Boolean, default: true },
|
||
|
|
step: { default: 0 },
|
||
|
|
min: { default: 0 },
|
||
|
|
max: { default: 100 },
|
||
|
|
showDots: { type: Boolean, default: false }
|
||
|
|
},
|
||
|
|
emits: ["link-val-hook"],
|
||
|
|
setup(__props, { emit }) {
|
||
|
|
const props = __props;
|
||
|
|
const moveAction = throttle(verticalMove);
|
||
|
|
function handle_mouseup() {
|
||
|
|
off("selectstart", document, handle_select2);
|
||
|
|
off("mouseup", window, handle_mouseup);
|
||
|
|
off("mousemove", window, moveAction);
|
||
|
|
tooptipHide.value = true;
|
||
|
|
}
|
||
|
|
function handle_select2(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
function handle_mousedown() {
|
||
|
|
on("selectstart", window, handle_select2, { once: true });
|
||
|
|
on("mouseup", window, handle_mouseup);
|
||
|
|
on("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
const tracker = ref(null);
|
||
|
|
let vertical_style = ref(props.val);
|
||
|
|
const tooptipHide = ref(true);
|
||
|
|
function verticalMove(e) {
|
||
|
|
tooptipHide.value = false;
|
||
|
|
if (!tracker.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let tracker_rect = tracker.value.getBoundingClientRect();
|
||
|
|
let origin_bottom = tracker_rect.bottom;
|
||
|
|
let point_bottom = e.clientY;
|
||
|
|
let distance = (point_bottom - origin_bottom) * -1;
|
||
|
|
if (distance < props.min) {
|
||
|
|
vertical_style.value = props.min;
|
||
|
|
} else {
|
||
|
|
let rate = distance / tracker_rect.height * 100;
|
||
|
|
calcWithStep(rate, vertical_style);
|
||
|
|
if (vertical_style.value > props.max) {
|
||
|
|
vertical_style.value = props.max;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
emit("link-val-hook", vertical_style.value);
|
||
|
|
}
|
||
|
|
function calcWithStep(rate, val) {
|
||
|
|
if (typeof rate === "undefined")
|
||
|
|
return false;
|
||
|
|
if (typeof val.value === "number") {
|
||
|
|
let r = rate - val.value;
|
||
|
|
if (Math.abs(r) < props.step) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.step === 0)
|
||
|
|
val.value = Math.floor(rate);
|
||
|
|
if (r < 0 && props.step !== 0) {
|
||
|
|
val.value -= props.step;
|
||
|
|
} else {
|
||
|
|
val.value += props.step;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const makeDots2 = () => {
|
||
|
|
if (props.step === 0)
|
||
|
|
return [];
|
||
|
|
let val = 0;
|
||
|
|
let dots2 = [];
|
||
|
|
let count = Math.floor(100 / props.step) - 1;
|
||
|
|
for (let i = 0; i < count; i++) {
|
||
|
|
val += props.step;
|
||
|
|
dots2.push(val);
|
||
|
|
}
|
||
|
|
return dots2;
|
||
|
|
};
|
||
|
|
const dots = makeDots2();
|
||
|
|
const focusDot = (val) => {
|
||
|
|
emit("link-val-hook", val);
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$2, [
|
||
|
|
createElementVNode("div", {
|
||
|
|
onMousedown: withModifiers(handle_mousedown, ["stop"]),
|
||
|
|
ref_key: "tracker",
|
||
|
|
ref: tracker,
|
||
|
|
class: normalizeClass([[__props.disabled ? "layui-slider-disabled" : ""], "layui-slider-vertical-track"])
|
||
|
|
}, [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + __props.val,
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ bottom: __props.val + "%" }),
|
||
|
|
class: normalizeClass([[props.disabled ? "layui-slider-disabled disable-btn" : ""], "layui-slider-vertical-btn"])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ height: __props.val + "%" }),
|
||
|
|
class: normalizeClass([[props.disabled ? "layui-slider-disabled disable-line" : ""], "layui-slider-vertical-rate"])
|
||
|
|
}, null, 6),
|
||
|
|
_hoisted_3$2,
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(dots), (item, index2) => {
|
||
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
||
|
|
onClick: ($event) => focusDot(item),
|
||
|
|
class: "layui-slider-vertical-dots",
|
||
|
|
key: index2,
|
||
|
|
style: normalizeStyle({ bottom: item + "%" })
|
||
|
|
}, null, 12, _hoisted_4$2)), [
|
||
|
|
[vShow, __props.showDots]
|
||
|
|
]);
|
||
|
|
}), 128))
|
||
|
|
], 42, _hoisted_2$2)
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$1 = { class: "layui-slider-vertical" };
|
||
|
|
const _hoisted_2$1 = ["onMousedown"];
|
||
|
|
const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("div", { class: "layui-slider-vertical-line" }, null, -1);
|
||
|
|
const _hoisted_4$1 = ["onClick"];
|
||
|
|
const __default__$1 = {
|
||
|
|
name: "VerticalRange"
|
||
|
|
};
|
||
|
|
const _sfc_main$1 = defineComponent({
|
||
|
|
...__default__$1,
|
||
|
|
props: {
|
||
|
|
rangeValue: null,
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
step: { default: 0 },
|
||
|
|
min: { default: 0 },
|
||
|
|
max: { default: 100 },
|
||
|
|
showDots: { type: Boolean, default: false }
|
||
|
|
},
|
||
|
|
emits: ["link-val-hook"],
|
||
|
|
setup(__props, { emit }) {
|
||
|
|
const props = __props;
|
||
|
|
let rv = toRef(props, "rangeValue");
|
||
|
|
const moveAction = throttle(rangeMove);
|
||
|
|
let currbtn = -1;
|
||
|
|
function handle_mousedown() {
|
||
|
|
currbtn = -1;
|
||
|
|
tooptipHide.value = false;
|
||
|
|
on("selectstart", window, handle_select2, { once: true });
|
||
|
|
on("mouseup", window, handle_mouseup);
|
||
|
|
on("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
function handle_mouseup() {
|
||
|
|
tooptipHide.value = true;
|
||
|
|
off("selectstart", document, handle_select2);
|
||
|
|
off("mouseup", window, handle_mouseup);
|
||
|
|
off("mousemove", window, moveAction);
|
||
|
|
}
|
||
|
|
function handle_select2(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
const tracker = ref(null);
|
||
|
|
const tooptipHide = ref(true);
|
||
|
|
function rangeMove(e) {
|
||
|
|
if (!tracker.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let tracker_rect = tracker.value.getBoundingClientRect();
|
||
|
|
let origin_bottom = tracker_rect.bottom;
|
||
|
|
let point_bottom = e.clientY;
|
||
|
|
let distance = (point_bottom - origin_bottom) * -1;
|
||
|
|
if (distance < props.min) {
|
||
|
|
rv.value[0] = props.min;
|
||
|
|
} else {
|
||
|
|
let rate = distance / tracker_rect.height * 100;
|
||
|
|
let idx = -1;
|
||
|
|
if (currbtn === -1) {
|
||
|
|
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||
|
|
idx = currbtn;
|
||
|
|
} else {
|
||
|
|
idx = currbtn;
|
||
|
|
}
|
||
|
|
calcWithStep(rate, rv, idx);
|
||
|
|
if (rv.value[1] > props.max) {
|
||
|
|
rv.value[1] = props.max;
|
||
|
|
}
|
||
|
|
if (rv.value[0] < props.min) {
|
||
|
|
rv.value[0] = props.min;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
emit("link-val-hook", rv.value);
|
||
|
|
}
|
||
|
|
function moveNeighbors(rate, rangeValues) {
|
||
|
|
let d1 = Math.abs(rate - rangeValues.value[0]);
|
||
|
|
let d2 = Math.abs(rate - rangeValues.value[1]);
|
||
|
|
if (d1 > d2) {
|
||
|
|
return 1;
|
||
|
|
} else {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function calcWithStep(rate, val, idx = -1) {
|
||
|
|
if (typeof rate === "undefined")
|
||
|
|
return false;
|
||
|
|
if (typeof val.value === "object") {
|
||
|
|
let r = rate - val.value[idx];
|
||
|
|
if (Math.abs(r) < props.step) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.step === 0)
|
||
|
|
val.value[idx] = Math.floor(rate);
|
||
|
|
if (Array.isArray(val.value)) {
|
||
|
|
if (r < 0 && props.step !== 0) {
|
||
|
|
val.value[idx] -= props.step;
|
||
|
|
} else {
|
||
|
|
val.value[idx] += props.step;
|
||
|
|
}
|
||
|
|
cross(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function cross(val) {
|
||
|
|
if (val.value[0] > val.value[1]) {
|
||
|
|
let tmp = val.value[0];
|
||
|
|
val.value[0] = val.value[1];
|
||
|
|
val.value[1] = tmp;
|
||
|
|
currbtn = currbtn === 0 ? 1 : 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const dots = makeDots(props);
|
||
|
|
const focusDot = (item) => {
|
||
|
|
let currbtn2 = moveNeighbors(item, rv);
|
||
|
|
rv.value[currbtn2] = item;
|
||
|
|
emit("link-val-hook", rv.value);
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||
|
|
createElementVNode("div", {
|
||
|
|
ref_key: "tracker",
|
||
|
|
ref: tracker,
|
||
|
|
onMousedown: withModifiers(handle_mousedown, ["stop"]),
|
||
|
|
class: normalizeClass(["layui-slider-vrange", [__props.disabled ? "layui-slider-disabled" : ""]])
|
||
|
|
}, [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + unref(rv)[1],
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ bottom: unref(rv)[1] + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-vertical-btn", [props.disabled ? "layui-slider-disabled disable-btn" : ""]])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
content: "" + unref(rv)[0],
|
||
|
|
"is-can-hide": tooptipHide.value
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({ bottom: unref(rv)[0] + "%" }),
|
||
|
|
class: normalizeClass(["layui-slider-vertical-btn", [props.disabled ? "layui-slider-disabled disable-btn" : ""]])
|
||
|
|
}, null, 6)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["content", "is-can-hide"]),
|
||
|
|
_hoisted_3$1,
|
||
|
|
createElementVNode("div", {
|
||
|
|
style: normalizeStyle({
|
||
|
|
height: unref(rv)[1] - unref(rv)[0] + "%",
|
||
|
|
bottom: unref(rv)[0] + "%"
|
||
|
|
}),
|
||
|
|
class: normalizeClass(["layui-slider-vertical-rate", [props.disabled ? "layui-slider-disabled disable-line" : ""]])
|
||
|
|
}, null, 6),
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(dots), (item, index2) => {
|
||
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
||
|
|
onClick: ($event) => focusDot(item),
|
||
|
|
class: "layui-slider-vertical-dots",
|
||
|
|
key: index2,
|
||
|
|
style: normalizeStyle({ bottom: item + "%" })
|
||
|
|
}, null, 12, _hoisted_4$1)), [
|
||
|
|
[vShow, __props.showDots]
|
||
|
|
]);
|
||
|
|
}), 128))
|
||
|
|
], 42, _hoisted_2$1)
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1 = { key: 0 };
|
||
|
|
const _hoisted_2 = { key: 0 };
|
||
|
|
const _hoisted_3 = { key: 1 };
|
||
|
|
const _hoisted_4 = { key: 1 };
|
||
|
|
const _hoisted_5 = { key: 0 };
|
||
|
|
const _hoisted_6 = { key: 1 };
|
||
|
|
const __default__ = {
|
||
|
|
name: "LaySlider"
|
||
|
|
};
|
||
|
|
const _sfc_main = defineComponent({
|
||
|
|
...__default__,
|
||
|
|
props: {
|
||
|
|
vertical: { type: Boolean, default: false },
|
||
|
|
modelValue: { default: 0 },
|
||
|
|
min: { default: 0 },
|
||
|
|
max: { default: 100 },
|
||
|
|
step: { default: 0 },
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
range: { type: Boolean },
|
||
|
|
rangeValue: null,
|
||
|
|
showDots: { type: Boolean, default: false }
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue"],
|
||
|
|
setup(__props, { emit }) {
|
||
|
|
const props = __props;
|
||
|
|
let rangeValues = toRef(props, "rangeValue");
|
||
|
|
function valHook(val) {
|
||
|
|
emit("update:modelValue", val);
|
||
|
|
}
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", null, [
|
||
|
|
__props.vertical ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
||
|
|
__props.range ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
||
|
|
createVNode(_sfc_main$1, {
|
||
|
|
step: __props.step,
|
||
|
|
onLinkValHook: valHook,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
rangeValue: unref(rangeValues),
|
||
|
|
min: __props.min,
|
||
|
|
max: __props.max,
|
||
|
|
showDots: __props.showDots
|
||
|
|
}, null, 8, ["step", "disabled", "rangeValue", "min", "max", "showDots"])
|
||
|
|
])) : (openBlock(), createElementBlock("div", _hoisted_3, [
|
||
|
|
createVNode(_sfc_main$2, {
|
||
|
|
step: __props.step,
|
||
|
|
onLinkValHook: valHook,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
val: __props.modelValue,
|
||
|
|
min: __props.min,
|
||
|
|
max: __props.max,
|
||
|
|
showDots: __props.showDots
|
||
|
|
}, null, 8, ["step", "disabled", "val", "min", "max", "showDots"])
|
||
|
|
]))
|
||
|
|
])) : (openBlock(), createElementBlock("div", _hoisted_4, [
|
||
|
|
__props.range ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
||
|
|
createVNode(_sfc_main$3, {
|
||
|
|
step: __props.step,
|
||
|
|
onLinkValHook: valHook,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
rangeValue: unref(rangeValues),
|
||
|
|
min: __props.min,
|
||
|
|
max: __props.max,
|
||
|
|
showDots: __props.showDots
|
||
|
|
}, null, 8, ["step", "disabled", "rangeValue", "min", "max", "showDots"])
|
||
|
|
])) : (openBlock(), createElementBlock("div", _hoisted_6, [
|
||
|
|
createVNode(_sfc_main$4, {
|
||
|
|
val: __props.modelValue,
|
||
|
|
onLinkValHook: valHook,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
step: __props.step,
|
||
|
|
min: __props.min,
|
||
|
|
max: __props.max,
|
||
|
|
showDots: __props.showDots
|
||
|
|
}, null, 8, ["val", "disabled", "step", "min", "max", "showDots"])
|
||
|
|
]))
|
||
|
|
]))
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const component = withInstall(_sfc_main);
|
||
|
|
export { component as default };
|