comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
179 lines (178 loc) • 7.12 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/slider.css");
const sliderButton_vue_vue_type_script_setup_true_lang = require("./components/slider-button.vue.js");
const sliderBar = require("./components/slider-bar.js");
const sliderSteps = require("./components/slider-steps.js");
const sliderMarks = require("./components/slider-marks.js");
const index = require("../../input-number/index.js");
const main_props = require("./main.props.js");
const type$1 = require("./type.js");
const type = require("../../form/src/type.js");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const _hoisted_1 = {
key: 0,
class: "cu-slider__input"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuSlider"
},
__name: "main",
props: main_props.sliderProps,
emits: main_props.sliderEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const form = vue.inject(type.FORM_PROVIDE, void 0);
const { globalSize } = config.useGlobal();
const sliderMinButtonRef = vue.ref();
const sliderMaxButtonRef = vue.ref();
const containerRef = vue.ref();
const recordValue = vue.ref(0);
const recordValue2 = vue.ref(0);
const currentSize = vue.computed(() => {
return props.size ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
});
const sliderValue = vue.computed(() => {
let val = typescript.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
return (val - props.min) / offset.value * 100;
});
const sliderValue2 = vue.computed(() => {
let val = typescript.isArray(props.modelValue) ? props.modelValue[1] : props.modelValue;
return (val - props.min) / offset.value * 100;
});
const offset = vue.computed(() => {
return props.max - props.min;
});
const steps = vue.computed(() => {
if (props.step) {
let val = (offset.value ?? 100) / props.step - 1;
return Math.max(0, val);
}
return 0;
});
function getSliderValue(sort) {
let value = recordValue.value / containerRef.value.getBoundingClientRect().width * offset.value;
if (props.step) {
value = Math.round(value / props.step) * props.step;
}
value += props.min;
value = Math.max(props.min, value);
if (props.range) {
let value2 = recordValue2.value / containerRef.value.getBoundingClientRect().width * offset.value;
if (props.step) {
value2 = Math.round(value2 / props.step) * props.step;
}
value2 += props.min;
value2 = Math.max(props.min, value2);
let rangeValue = [value, value2];
sort && rangeValue.sort((a, b) => a - b);
return rangeValue;
} else {
return value;
}
}
function updateValue() {
const value = getSliderValue(true);
_emit(value);
}
function containerMouseDown(e) {
if (props.disabled) return;
if (props.range) {
let currentValue = e.clientX - containerRef.value.getBoundingClientRect().left;
let val = Math.abs(recordValue.value - currentValue);
let val2 = Math.abs(recordValue2.value - currentValue);
if (val2 < val) {
sliderMaxButtonRef.value.onmousedown(e);
} else {
sliderMinButtonRef.value.onmousedown(e);
}
} else {
sliderMinButtonRef.value.onmousedown(e);
}
}
function init() {
let w = containerRef.value.getBoundingClientRect().width;
if (props.range) {
recordValue.value = (props.modelValue[0] - props.min) / offset.value * w;
recordValue2.value = (props.modelValue[1] - props.min) / offset.value * w;
} else {
recordValue.value = (props.modelValue - props.min) / offset.value * w;
}
}
function _emit(value) {
emit("update:modelValue", value);
emit("change", value);
}
vue.watch([recordValue, recordValue2], (val) => {
const value = getSliderValue();
_emit(value);
});
vue.provide(type$1.SLIDER_PROVIDE, {
props,
containerRef,
sliderValue,
sliderValue2,
updateValue
});
vue.onMounted(() => {
init();
});
vue.onUpdated(() => {
init();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["cu-slider", [_ctx.type ? "cu-slider--" + _ctx.type : void 0, { "is-disabled": _ctx.disabled }, currentSize.value]]),
style: vue.normalizeStyle({ "--cu-slider-color": props.color })
}, [
vue.createElementVNode("div", {
class: "cu-slider__container",
ref_key: "containerRef",
ref: containerRef,
onMousedown: containerMouseDown
}, [
steps.value > 0 && props.showStep ? (vue.openBlock(), vue.createBlock(vue.unref(sliderSteps.default), {
key: 0,
steps: steps.value
}, null, 8, ["steps"])) : vue.createCommentVNode("", true),
vue.createVNode(vue.unref(sliderBar.default)),
_ctx.marks ? (vue.openBlock(), vue.createBlock(vue.unref(sliderMarks.default), {
key: 1,
marks: _ctx.marks
}, null, 8, ["marks"])) : vue.createCommentVNode("", true),
vue.createVNode(sliderButton_vue_vue_type_script_setup_true_lang.default, {
ref_key: "sliderMinButtonRef",
ref: sliderMinButtonRef,
"tooltip-value": _ctx.range ? props.modelValue[0] : props.modelValue,
"model-value": sliderValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => recordValue.value = $event)
}, null, 8, ["tooltip-value", "model-value"]),
_ctx.range ? (vue.openBlock(), vue.createBlock(sliderButton_vue_vue_type_script_setup_true_lang.default, {
key: 2,
"tooltip-value": props.modelValue[1],
ref_key: "sliderMaxButtonRef",
ref: sliderMaxButtonRef,
"model-value": sliderValue2.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => recordValue2.value = $event)
}, null, 8, ["tooltip-value", "model-value"])) : vue.createCommentVNode("", true)
], 544),
_ctx.showInput && !props.range ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(vue.unref(index.CuInputNumber), {
"model-value": props.modelValue,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _emit($event)),
max: props.max,
min: props.min,
step: _ctx.step,
size: currentSize.value
}, null, 8, ["model-value", "max", "min", "step", "size"])
])) : vue.createCommentVNode("", true)
], 6);
};
}
});
exports.default = _sfc_main;