@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/slider/index.js

@@ -0,0 +1,503 @@
+import './css.js'
+import { D as S, E as Rn, L as qe, g as A, j as en } from "../vendor.js";
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { n as fillArr } from "../share/util/common.js";
+import { i as canvasPreprocess, n as calcPixelSize, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { n as getGlobalThemeColor } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { i as FORM_ITEM_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as tooltip_default } from "../tooltip/index.js";
+import { a as getDotStyle, i as drawThumb, n as drawMark, o as getMarkStyle, r as drawRange, t as drawBorder } from "./draw.js";
+import { a as getSingleValue, c as updateMarkPoints, i as getRangeValue, n as calcValueFromEvent, o as getTargetThumbEl, r as clampValue, s as transformModelValue, t as calcThumbLeft } from "./util.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+var _hoisted_1 = ["tabindex"];
+var _hoisted_2 = ["tabindex", "onClick"];
+var _hoisted_3 = ["tabindex", "onClick"];
+var _hoisted_4 = ["tabindex"];
+var _hoisted_5 = { class: "px-slider-tooltip-content" };
+var _hoisted_6 = ["tabindex"];
+var _hoisted_7 = ["tabindex"];
+var _hoisted_8 = { class: "px-slider-tooltip-content" };
+var _hoisted_9 = ["tabindex"];
+var _hoisted_10 = ["tabindex"];
+var _hoisted_11 = { class: "px-slider-tooltip-content" };
+var _hoisted_12 = ["tabindex"];
+var slider_default = /* @__PURE__ */ defineComponent({
+	name: "Slider",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		min: { default: 0 },
+		max: { default: 100 },
+		range: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: { type: Boolean },
+		step: { default: 1 },
+		marks: null,
+		direction: { default: "horizontal" },
+		reverse: {
+			type: Boolean,
+			default: false
+		},
+		precision: { default: 8 },
+		tooltip: {
+			type: Boolean,
+			default: true
+		},
+		tooltipProps: null,
+		tooltipStartProps: null,
+		tooltipEndProps: null
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"dragStart",
+		"dragEnd",
+		"markSelect",
+		"focus",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (value) => {
+				return transformModelValue(value, props, emits);
+			}
+		});
+		const thumbRef = shallowRef(null);
+		const thumbStartRef = shallowRef(null);
+		const thumbEndRef = shallowRef(null);
+		const markWrapperRef = shallowRef(null);
+		const thumbCanvasRef = shallowRef(null);
+		const thumbStartCanvasRef = shallowRef(null);
+		const thumbEndCanvasRef = shallowRef(null);
+		const dotCanvasRef = shallowRef(null);
+		const valueRange = computed(() => Math.max(props.max - props.min, 0));
+		const sliderRect = ref({
+			width: 0,
+			height: 0
+		});
+		const thumbRect = ref({
+			width: 0,
+			height: 0
+		});
+		const updateSliderRect = () => {
+			const sliderEl = sliderRef.value;
+			if (!sliderEl) return;
+			const rect = sliderEl.getBoundingClientRect();
+			sliderRect.value = {
+				width: rect.width,
+				height: rect.height
+			};
+		};
+		const updateThumbRect = () => {
+			const thumbEl = thumbRef.value || thumbStartRef.value;
+			if (!thumbEl) return;
+			const rect = thumbEl.getBoundingClientRect();
+			thumbRect.value = {
+				width: rect.width,
+				height: rect.height
+			};
+		};
+		const fillStart = computed(() => {
+			if (props.range) if (A(modelValue.value)) return 0;
+			else return valueRange.value > 0 ? (modelValue.value[0] - props.min) / valueRange.value : 0;
+			else return 0;
+		});
+		const fillEnd = computed(() => {
+			if (valueRange.value === 0) return 0;
+			if (A(modelValue.value)) return (modelValue.value - props.min) / valueRange.value;
+			else return (modelValue.value[1] - props.min) / valueRange.value;
+		});
+		const thumbLeft = ref(0);
+		const thumbLeftStart = ref(0);
+		const thumbLeftEnd = ref(0);
+		const updateThumbLeft = async () => {
+			await nextTick();
+			if (!props.range) thumbLeft.value = calcThumbLeft(modelValue.value, sliderRect.value, thumbRect.value, valueRange.value, props);
+			else {
+				const value = modelValue.value;
+				thumbLeftStart.value = calcThumbLeft(value[0], sliderRect.value, thumbRect.value, valueRange.value, props);
+				thumbLeftEnd.value = calcThumbLeft(value[1], sliderRect.value, thumbRect.value, valueRange.value, props);
+			}
+		};
+		watch([
+			modelValue,
+			() => props.direction,
+			() => props.min,
+			() => props.max,
+			() => props.reverse,
+			sliderRect,
+			thumbRect
+		], () => {
+			updateThumbLeft();
+		}, { deep: true });
+		watch(() => props.range, (val, old) => {
+			if (val && !old) updateModelValue([clampValue$1(props.min), clampValue$1(modelValue.value)]);
+			else updateModelValue(clampValue$1(modelValue.value[1]));
+		});
+		const trackLeft = computed(() => {
+			if (props.range && S(modelValue.value)) return Math.min(fillStart.value, fillEnd.value);
+			return 0;
+		});
+		const trackWidth = computed(() => {
+			return Math.abs(fillEnd.value - fillStart.value);
+		});
+		function clampValue$1(value) {
+			return clampValue(value, props);
+		}
+		const isDragging = ref(false);
+		const draggingTarget = ref(null);
+		function startDrag(e, target) {
+			if (disabledComputed.value || readonlyComputed.value) return;
+			e.preventDefault();
+			isDragging.value = true;
+			if (props.range && target) draggingTarget.value = target;
+			document.addEventListener("mousemove", handleDrag);
+			document.addEventListener("mouseup", stopDrag);
+			document.addEventListener("touchmove", handleDrag);
+			document.addEventListener("touchend", stopDrag);
+			doUpdate(e);
+			emits("dragStart", e);
+		}
+		const handleDrag = (e) => {
+			doUpdateThrottle(e);
+		};
+		const preprocessBeforeUpdate = (e, clickFlag) => {
+			let targetType = draggingTarget.value;
+			const sliderEl = sliderRef.value;
+			let thumbEl;
+			if (!clickFlag) thumbEl = !props.range ? thumbRef.value : draggingTarget.value === "start" ? thumbStartRef.value : draggingTarget.value === "end" ? thumbEndRef.value : null;
+			else if (!props.range) thumbEl = thumbRef.value;
+			else {
+				const { thumbEl: el, targetType: type } = getTargetThumbEl(e, props.direction, thumbStartRef, thumbEndRef);
+				thumbEl = el;
+				targetType = type;
+			}
+			return {
+				sliderEl,
+				thumbEl,
+				targetType
+			};
+		};
+		const doUpdate = async (e, clickFlag = false, preSetValue = void 0) => {
+			if (!isDragging.value && !clickFlag) return;
+			const { sliderEl, thumbEl, targetType } = preprocessBeforeUpdate(e, clickFlag);
+			if (!sliderEl || !thumbEl) return;
+			let value = preSetValue;
+			if (en(value)) value = calcValueFromEvent(e, sliderEl, thumbEl, valueRange.value, props);
+			if (props.range) {
+				let nextValue;
+				if (S(modelValue.value)) {
+					if (targetType === "start") nextValue = [value, modelValue.value[1]];
+					else if (targetType === "end") nextValue = [modelValue.value[0], value];
+				} else if (targetType === "start") nextValue = [value, clampValue$1(props.min)];
+				else if (targetType === "end") nextValue = [clampValue$1(props.min), value];
+				if (!nextValue) return;
+				await updateModelValue(nextValue);
+			} else await updateModelValue(value);
+			const left = calcThumbLeft(value, sliderRect.value, thumbRect.value, valueRange.value, props);
+			if (!props.range) thumbLeft.value = left;
+			else if (targetType === "start") thumbLeftStart.value = left;
+			else if (targetType === "end") thumbLeftEnd.value = left;
+		};
+		const doUpdateThrottle = qe(doUpdate, 20);
+		function stopDrag(e) {
+			if (isDragging.value) {
+				isDragging.value = false;
+				draggingTarget.value = null;
+				emits("change", Rn(modelValue.value));
+				formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+			}
+			document.removeEventListener("mousemove", handleDrag);
+			document.removeEventListener("mouseup", stopDrag);
+			document.removeEventListener("touchmove", handleDrag);
+			document.removeEventListener("touchend", stopDrag);
+			emits("dragEnd", e);
+		}
+		onUnmounted(() => {
+			document.removeEventListener("mousemove", handleDrag);
+			document.removeEventListener("mouseup", stopDrag);
+			document.removeEventListener("touchmove", handleDrag);
+			document.removeEventListener("touchend", stopDrag);
+		});
+		const markPoints = ref([]);
+		watch([
+			() => props.marks,
+			() => props.max,
+			() => props.min,
+			() => props.direction,
+			() => props.reverse,
+			valueRange,
+			sliderRect
+		], () => {
+			nextTick(() => {
+				markPoints.value = updateMarkPoints(sliderRect.value, valueRange.value, props);
+			});
+		}, { deep: true });
+		const selectSliderHandler = async (e, preSetValue) => {
+			if (disabledComputed.value || readonlyComputed.value) return;
+			await doUpdate(e, true, preSetValue);
+			if (A(preSetValue)) emits("markSelect", preSetValue, e);
+			emits("change", Rn(modelValue.value));
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusSliderHandler = (e) => {
+			if (disabledComputed.value || readonlyComputed.value) return;
+			const target = e.target;
+			if (markWrapperRef.value && markWrapperRef.value.contains(target) || thumbRef.value && thumbRef.value.contains(target) || thumbStartRef.value && thumbStartRef.value.contains(target) || thumbEndRef.value && thumbEndRef.value.contains(target)) return;
+			if (target === sliderRef.value) return;
+			if (sliderRef.value) sliderRef.value.focus();
+		};
+		const focusinHandler = (e) => {
+			if (e.target === sliderRef.value) return;
+			emits("focus", e);
+		};
+		const focusoutHandler = (e) => {
+			if (e.target === sliderRef.value) return;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const sliderRef = shallowRef(null);
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+				updateSliderRect();
+				updateThumbRect();
+				updateThumbLeft();
+				markPoints.value = updateMarkPoints(sliderRect.value, valueRange.value, props);
+			});
+		});
+		watch([
+			disabledComputed,
+			darkMode,
+			trackLeft,
+			trackWidth,
+			() => props.range,
+			thumbLeft,
+			thumbLeftStart,
+			thumbLeftEnd,
+			markPoints,
+			modelValue,
+			() => props.direction,
+			() => props.reverse
+		], () => {
+			nextTick(() => {
+				drawPixel();
+			});
+		}, { deep: true });
+		const drawPixel = () => {
+			const pixelSize = calcPixelSize();
+			const preprocessData = canvasPreprocess(sliderRef, canvasRef, props.direction === "vertical" ? pixelSize : 0, props.direction === "vertical" ? 0 : pixelSize);
+			if (!preprocessData) return;
+			const { ctx, width, height } = preprocessData;
+			const borderColor = getGlobalThemeColor("neutral", 10);
+			const center = calcBorderCornerCenter(fillArr(pixelSize, 4), width, height, pixelSize);
+			if (borderColor) drawBorder(ctx, width, height, center, borderColor, pixelSize);
+			const fillColor = disabledComputed.value ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6);
+			const emptyColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			if (fillColor && emptyColor) drawRange(ctx, width, height, trackLeft.value, trackWidth.value, fillColor, emptyColor, pixelSize, props.direction, props.reverse);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			const thumbColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			if (thumbColor && borderColor) drawThumb(thumbRef, thumbCanvasRef, thumbStartRef, thumbStartCanvasRef, thumbEndRef, thumbEndCanvasRef, props.range, rad, pixelSize, thumbColor, borderColor);
+			if (markPoints.value.length) drawMark(sliderRef, dotCanvasRef, rad, modelValue.value, props.direction, props.reverse, props.disabled, markPoints.value, pixelSize);
+		};
+		const refresh = () => {
+			drawPixel();
+			updateSliderRect();
+			updateThumbRect();
+		};
+		useResizeObserver(sliderRef, refresh);
+		useWatchGlobalCssVal(refresh);
+		useTransitionEnd(sliderRef, refresh);
+		return (_ctx, _cache) => {
+			var _props$marks;
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-slider", {
+					"px-slider__disabled": unref(disabledComputed),
+					"px-slider__readonly": unref(readonlyComputed),
+					"px-slider__marks": !!((_props$marks = props.marks) === null || _props$marks === void 0 ? void 0 : _props$marks.length),
+					[`px-slider__${props.direction}`]: props.direction,
+					"px-slider__reverse": !!props.reverse
+				}]),
+				ref_key: "sliderRef",
+				ref: sliderRef,
+				onClick: [withModifiers(selectSliderHandler, ["self"]), focusSliderHandler],
+				tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+				onFocusin: focusinHandler,
+				onFocusout: focusoutHandler
+			}, [
+				createElementVNode("div", {
+					class: "px-slider-mark-wrapper",
+					ref_key: "markWrapperRef",
+					ref: markWrapperRef
+				}, [markPoints.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(markPoints.value, (mark) => {
+					return openBlock(), createElementBlock(Fragment, { key: mark.value }, [createElementVNode("div", {
+						tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+						onClick: (e) => selectSliderHandler(e, mark.value),
+						class: "px-slider-mark",
+						style: normalizeStyle(unref(getMarkStyle)(mark.markLeft, props.direction, props.reverse))
+					}, [renderSlot(_ctx.$slots, "mark", {
+						value: mark.value,
+						label: mark.label
+					}, () => [createTextVNode(toDisplayString(mark.label), 1)])], 12, _hoisted_2), createElementVNode("div", {
+						tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+						onClick: (e) => selectSliderHandler(e, mark.value),
+						class: "px-slider-dot",
+						style: normalizeStyle(unref(getDotStyle)(mark.left, props.direction, props.reverse))
+					}, null, 12, _hoisted_3)], 64);
+				}), 128)) : createCommentVNode("v-if", true)], 512),
+				props.tooltip && !props.range ? (openBlock(), createBlock(tooltip_default, mergeProps({
+					key: 0,
+					arrow: false,
+					placement: props.direction === "horizontal" ? "top" : "right"
+				}, props.tooltipProps), {
+					content: withCtx(() => [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "tooltip-content", { value: unref(getSingleValue)(unref(modelValue)) }, () => [createTextVNode(toDisplayString(unref(getSingleValue)(unref(modelValue))), 1)])])]),
+					default: withCtx(() => [createElementVNode("div", {
+						class: "px-slider-thumb",
+						style: normalizeStyle({
+							left: props.direction === "horizontal" ? thumbLeft.value + "px" : void 0,
+							bottom: props.direction === "horizontal" ? void 0 : thumbLeft.value + "px"
+						}),
+						onMousedown: startDrag,
+						onTouchstartPassive: startDrag,
+						tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+						ref_key: "thumbRef",
+						ref: thumbRef
+					}, [renderSlot(_ctx.$slots, "thumb"), createElementVNode("canvas", {
+						ref_key: "thumbCanvasRef",
+						ref: thumbCanvasRef,
+						class: "px-slider-canvas"
+					}, null, 512)], 44, _hoisted_4)]),
+					_: 3
+				}, 16, ["placement"])) : createCommentVNode("v-if", true),
+				!props.range && !props.tooltip ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "px-slider-thumb",
+					style: normalizeStyle({
+						left: props.direction === "horizontal" ? thumbLeft.value + "px" : void 0,
+						bottom: props.direction === "horizontal" ? void 0 : thumbLeft.value + "px"
+					}),
+					onMousedown: startDrag,
+					onTouchstartPassive: startDrag,
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+					ref_key: "thumbRef",
+					ref: thumbRef
+				}, [renderSlot(_ctx.$slots, "thumb"), createElementVNode("canvas", {
+					ref_key: "thumbCanvasRef",
+					ref: thumbCanvasRef,
+					class: "px-slider-canvas"
+				}, null, 512)], 44, _hoisted_6)) : createCommentVNode("v-if", true),
+				props.range ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [props.tooltip ? (openBlock(), createBlock(tooltip_default, mergeProps({
+					key: 0,
+					arrow: false,
+					placement: props.direction === "horizontal" ? "top" : "right"
+				}, props.tooltipStartProps), {
+					content: withCtx(() => [createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "tooltip-content", { value: unref(getRangeValue)(unref(modelValue), 0, props) }, () => [createTextVNode(toDisplayString(unref(getRangeValue)(unref(modelValue), 0, props)), 1)])])]),
+					default: withCtx(() => [createElementVNode("div", {
+						class: "px-slider-thumb px-slider-thumb-start",
+						style: normalizeStyle({
+							left: props.direction === "horizontal" ? thumbLeftStart.value + "px" : void 0,
+							bottom: props.direction === "horizontal" ? void 0 : thumbLeftStart.value + "px"
+						}),
+						onMousedown: _cache[0] || (_cache[0] = (e) => startDrag(e, "start")),
+						onTouchstartPassive: _cache[1] || (_cache[1] = (e) => startDrag(e, "start")),
+						tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+						ref_key: "thumbStartRef",
+						ref: thumbStartRef
+					}, [renderSlot(_ctx.$slots, "thumb-start"), createElementVNode("canvas", {
+						ref_key: "thumbStartCanvasRef",
+						ref: thumbStartCanvasRef,
+						class: "px-slider-canvas"
+					}, null, 512)], 44, _hoisted_7)]),
+					_: 3
+				}, 16, ["placement"])) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "px-slider-thumb px-slider-thumb-start",
+					style: normalizeStyle({
+						left: props.direction === "horizontal" ? thumbLeftStart.value + "px" : void 0,
+						bottom: props.direction === "horizontal" ? void 0 : thumbLeftStart.value + "px"
+					}),
+					onMousedown: _cache[2] || (_cache[2] = (e) => startDrag(e, "start")),
+					onTouchstartPassive: _cache[3] || (_cache[3] = (e) => startDrag(e, "start")),
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+					ref_key: "thumbStartRef",
+					ref: thumbStartRef
+				}, [renderSlot(_ctx.$slots, "thumb-start"), createElementVNode("canvas", {
+					ref_key: "thumbStartCanvasRef",
+					ref: thumbStartCanvasRef,
+					class: "px-slider-canvas"
+				}, null, 512)], 44, _hoisted_9)), props.tooltip ? (openBlock(), createBlock(tooltip_default, mergeProps({
+					key: 2,
+					arrow: false,
+					placement: props.direction === "horizontal" ? "top" : "right"
+				}, props.tooltipEndProps), {
+					content: withCtx(() => [createElementVNode("div", _hoisted_11, [renderSlot(_ctx.$slots, "tooltip-content", { value: unref(getRangeValue)(unref(modelValue), 1, props) }, () => [createTextVNode(toDisplayString(unref(getRangeValue)(unref(modelValue), 1, props)), 1)])])]),
+					default: withCtx(() => [createElementVNode("div", {
+						class: "px-slider-thumb px-slider-thumb-end",
+						style: normalizeStyle({
+							left: props.direction === "horizontal" ? thumbLeftEnd.value + "px" : void 0,
+							bottom: props.direction === "horizontal" ? void 0 : thumbLeftEnd.value + "px"
+						}),
+						onMousedown: _cache[4] || (_cache[4] = (e) => startDrag(e, "end")),
+						onTouchstartPassive: _cache[5] || (_cache[5] = (e) => startDrag(e, "end")),
+						tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+						ref_key: "thumbEndRef",
+						ref: thumbEndRef
+					}, [renderSlot(_ctx.$slots, "thumb-end"), createElementVNode("canvas", {
+						ref_key: "thumbEndCanvasRef",
+						ref: thumbEndCanvasRef,
+						class: "px-slider-canvas"
+					}, null, 512)], 44, _hoisted_10)]),
+					_: 3
+				}, 16, ["placement"])) : (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: "px-slider-thumb px-slider-thumb-end",
+					style: normalizeStyle({
+						left: props.direction === "horizontal" ? thumbLeftEnd.value + "px" : void 0,
+						bottom: props.direction === "horizontal" ? void 0 : thumbLeftEnd.value + "px"
+					}),
+					onMousedown: _cache[6] || (_cache[6] = (e) => startDrag(e, "end")),
+					onTouchstartPassive: _cache[7] || (_cache[7] = (e) => startDrag(e, "end")),
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) ? -1 : 0,
+					ref_key: "thumbEndRef",
+					ref: thumbEndRef
+				}, [renderSlot(_ctx.$slots, "thumb-end"), createElementVNode("canvas", {
+					ref_key: "thumbEndCanvasRef",
+					ref: thumbEndCanvasRef,
+					class: "px-slider-canvas"
+				}, null, 512)], 44, _hoisted_12))], 64)) : createCommentVNode("v-if", true),
+				createElementVNode("canvas", {
+					ref_key: "canvasRef",
+					ref: canvasRef,
+					class: "px-slider-canvas"
+				}, null, 512),
+				createElementVNode("canvas", {
+					ref_key: "dotCanvasRef",
+					ref: dotCanvasRef,
+					class: "px-slider-canvas"
+				}, null, 512)
+			], 42, _hoisted_1);
+		};
+	}
+});
+export { slider_default as t };

package/es/slider/type.d.ts

@@ -0,0 +1,162 @@
+import type { EmitEvent } from '../share/type';
+import type { TooltipEvents, TooltipProps } from '../tooltip/type';
+export type SliderProps = {
+    /**
+     * @property {number | [number, number] | null} [modelValue]
+     * @version 0.0.3
+     */
+    modelValue?: number | [number, number] | null;
+    /**
+     * @property {number | [number, number] | null} [defaultValue]
+     * @version 0.0.3
+     */
+    defaultValue?: number | [number, number] | null;
+    /**
+     * @property {number} [min=0]
+     * @version 0.0.3
+     */
+    min?: number;
+    /**
+     * @property {number} [max=100]
+     * @version 0.0.3
+     */
+    max?: number;
+    /**
+     * @property {boolean} [range=false]
+     * @version 0.0.3
+     */
+    range?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {number | 'mark'} [step=1]
+     * @version 0.0.3
+     */
+    step?: number | 'mark';
+    /**
+     * @property {(number | { value: number; label?: string })[]} [marks]
+     * @version 0.0.3
+     */
+    marks?: (number | {
+        value: number;
+        label?: string;
+    })[];
+    /**
+     * @property {'horizontal' | 'vertical'} [direction='horizontal']
+     * @version 0.0.3
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @property {boolean} [reverse=false]
+     * @version 0.0.3
+     */
+    reverse?: boolean;
+    /**
+     * @property {number | null} [precision=8]
+     * @version 0.0.3
+     */
+    precision?: number | null;
+    /**
+     * @property {boolean} [tooltip=true]
+     * @version 0.0.3
+     */
+    tooltip?: boolean;
+    /**
+     * @property {Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>} [tooltipProps]
+     * @version 0.0.3
+     */
+    tooltipProps?: Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>;
+    /**
+     * @property {Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>} [tooltipStartProps]
+     * @version 0.0.3
+     */
+    tooltipStartProps?: Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>;
+    /**
+     * @property {Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>} [tooltipEndProps]
+     * @version 0.0.3
+     */
+    tooltipEndProps?: Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>;
+};
+export type SliderEvent = {
+    /**
+     * @event update:modelValue
+     * @version 0.0.3
+     * @param {number | [number, number]} value
+     */
+    'update:modelValue': [value: number | [number, number]];
+    /**
+     * @event change
+     * @version 0.0.3
+     * @param {number | [number, number]} value
+     */
+    change: [value: number | [number, number]];
+    /**
+     * @event dragStart
+     * @version 0.0.3
+     * @param {MouseEvent | TouchEvent} event
+     */
+    dragStart: [event: MouseEvent | TouchEvent];
+    /**
+     * @event dragEnd
+     * @version 0.0.3
+     * @param {MouseEvent | TouchEvent} event
+     */
+    dragEnd: [event: MouseEvent | TouchEvent];
+    /**
+     * @event markSelect
+     * @version 0.0.3
+     * @param {number} value
+     * @param {MouseEvent} event
+     */
+    markSelect: [value: number, event: MouseEvent];
+    /**
+     * @event focus
+     * @version 0.0.3
+     * @param {FocusEvent} event
+     */
+    focus: [event: FocusEvent];
+    /**
+     * @event focus
+     * @version 0.0.3
+     * @param {FocusEvent} event
+     */
+    blur: [event: FocusEvent];
+};
+export type SliderSlots = {
+    /**
+     * @slot mark
+     * @param {number} value
+     * @param {string | undefined} label
+     * @version 0.0.3
+     */
+    mark: {};
+    /**
+     * @slot thumb
+     * @version 0.0.3
+     */
+    thumb: {};
+    /**
+     * @slot thumb-start
+     * @version 0.0.3
+     */
+    'thumb-start': {};
+    /**
+     * @slot thumb-end
+     * @version 0.0.3
+     */
+    'thumb-end': {};
+    /**
+     * @slot tooltip-content
+     * @param {number} value
+     * @version 0.0.3
+     */
+    'tooltip-content': {};
+};