comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
179 lines (178 loc) • 6.84 kB
JavaScript
import { defineComponent, inject, ref, computed, watch, provide, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, unref, createCommentVNode, createVNode } from "vue";
import "../style/slider.css";
import _sfc_main$1 from "./components/slider-button.vue.mjs";
import sliderBar from "./components/slider-bar.mjs";
import sliderSteps from "./components/slider-steps.mjs";
import sliderMarks from "./components/slider-marks.mjs";
import { CuInputNumber } from "../../input-number/index.mjs";
import { sliderProps, sliderEmits } from "./main.props.mjs";
import { SLIDER_PROVIDE } from "./type.mjs";
import { FORM_PROVIDE } from "../../form/src/type.mjs";
import { useGlobal } from "../../../utils/config.mjs";
import { isArray } from "../../../utils/typescript.mjs";
import "@vueuse/core";
const _hoisted_1 = {
key: 0,
class: "cu-slider__input"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuSlider"
},
__name: "main",
props: sliderProps,
emits: sliderEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const form = inject(FORM_PROVIDE, void 0);
const { globalSize } = useGlobal();
const sliderMinButtonRef = ref();
const sliderMaxButtonRef = ref();
const containerRef = ref();
const recordValue = ref(0);
const recordValue2 = ref(0);
const currentSize = computed(() => {
return props.size ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
});
const sliderValue = computed(() => {
let val = isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
return (val - props.min) / offset.value * 100;
});
const sliderValue2 = computed(() => {
let val = isArray(props.modelValue) ? props.modelValue[1] : props.modelValue;
return (val - props.min) / offset.value * 100;
});
const offset = computed(() => {
return props.max - props.min;
});
const steps = 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);
}
watch([recordValue, recordValue2], (val) => {
const value = getSliderValue();
_emit(value);
});
provide(SLIDER_PROVIDE, {
props,
containerRef,
sliderValue,
sliderValue2,
updateValue
});
onMounted(() => {
init();
});
onUpdated(() => {
init();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cu-slider", [_ctx.type ? "cu-slider--" + _ctx.type : void 0, { "is-disabled": _ctx.disabled }, currentSize.value]]),
style: normalizeStyle({ "--cu-slider-color": props.color })
}, [
createElementVNode("div", {
class: "cu-slider__container",
ref_key: "containerRef",
ref: containerRef,
onMousedown: containerMouseDown
}, [
steps.value > 0 && props.showStep ? (openBlock(), createBlock(unref(sliderSteps), {
key: 0,
steps: steps.value
}, null, 8, ["steps"])) : createCommentVNode("", true),
createVNode(unref(sliderBar)),
_ctx.marks ? (openBlock(), createBlock(unref(sliderMarks), {
key: 1,
marks: _ctx.marks
}, null, 8, ["marks"])) : createCommentVNode("", true),
createVNode(_sfc_main$1, {
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 ? (openBlock(), createBlock(_sfc_main$1, {
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"])) : createCommentVNode("", true)
], 544),
_ctx.showInput && !props.range ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(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"])
])) : createCommentVNode("", true)
], 6);
};
}
});
export {
_sfc_main as default
};