@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/Slider-w9sbxzBw.js

@@ -0,0 +1,707 @@
+import "./src-DNBBthjO.js";
+import { t as e } from "./foundation-Cawx37mp.js";
+import { t } from "./warning-naSiE8G7.js";
+import { o as n, t as r } from "./Tooltip-Bq7HZwnS.js";
+import { t as i } from "./config-context-CyynTtDb.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, getCurrentInstance as f, inject as p, markRaw as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, reactive as x, renderList as S, resolveDynamicComponent as C, shallowRef as w, toDisplayString as T, unref as E, useAttrs as D, useTemplateRef as O, watch as k, withCtx as A } from "vue";
+//#region bundled-foundation
+var j = (e, n) => (!globalThis.Touch || !(e instanceof Touch) || ["stopPropagation", "preventDefault"].forEach((r) => {
+	let i = n[r];
+	i && (typeof i == "function" && (i = (...e) => n[r](...e)), e[r] ? t(!0, `"The key ${r}" exist in Touch.`) : e[r] = i);
+}), e), M = class r extends e {
+	constructor(e) {
+		super({
+			...r.defaultAdapter,
+			...e
+		}), this.getMinAndMaxPercent = (e) => {
+			let { range: t, min: n, max: r } = this._adapter.getProps(), i = t ? (e[0] - n) / (r - n) : (e - n) / (r - n), a = t ? (e[1] - n) / (r - n) : 1;
+			return {
+				min: this._checkValidity(i),
+				max: this._checkValidity(a)
+			};
+		}, this._checkValidity = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, this.computeHandleVisibleVal = (e, t, n) => {
+			let { focusPos: r, currentValue: i } = this._adapter.getStates(), a = {
+				min: !1,
+				max: !1
+			}, o;
+			return o = t ? {
+				min: t(n ? this.outPutValue(i[0]) : this.outPutValue(i)),
+				max: n ? t(this.outPutValue(i[1])) : null
+			} : {
+				min: n ? this.outPutValue(i[0]) : this.outPutValue(i),
+				max: n ? this.outPutValue(i[1]) : null
+			}, e ? (a.min = !0, a.max = !0) : e === void 0 && t && (r === "min" ? a.min = !0 : r === "max" && (a.max = !0)), {
+				tipVisible: a,
+				tipChildren: o
+			};
+		}, this.valueFormatIsCorrect = (e) => Array.isArray(e) ? typeof e[0] == "number" && typeof e[0] == "number" : typeof e == "number", this.handleMousePos = (e, t) => {
+			let n = this._adapter.getParentRect(), r = n ? n.left : 0, i = n ? n.top : 0;
+			return {
+				x: e - r,
+				y: t - i
+			};
+		}, this.getScrollParent = (e) => {
+			let t = e, n = /(auto|scroll)/, r = (e, t) => window.getComputedStyle(e, null).getPropertyValue(t), i = (e) => n.test(r(e, "overflow") + r(e, "overflow-y") + r(e, "overflow-x")), a = (e) => !e || e === document.body || !(e instanceof Element) ? document.body : i(e) ? e : a(e.parentNode);
+			return a(t);
+		}, this.checkMeetMinMax = (e) => {
+			let { vertical: t, verticalReverse: n, range: r } = this._adapter.getProps(), i = this._adapter.getContext("direction") === "rtl" && !t, a = this._adapter.getState("currentValue");
+			this.transValueToPos(a);
+			let { sliderX: o, sliderY: s, sliderWidth: c, sliderHeight: l } = this._adapter.getSliderLengths(), { chooseMovePos: u, isDrag: d } = this._adapter.getStates(), f = t ? l : c, p;
+			p = t && n ? s + f : i ? o + f : t ? s : o;
+			let m;
+			return m = t && n ? s : i ? o : t ? s + l : o + c, t && n || i ? e >= p ? e = p : e <= m && (e = m) : e <= p ? e = p : e >= m && (e = m), e;
+		}, this.transPosToValue = (e, t) => {
+			let n = this.checkMeetMinMax(e), { min: r, max: i, currentValue: a } = this._adapter.getStates(), { range: o, vertical: s, step: c, verticalReverse: l } = this._adapter.getProps(), u = this._adapter.getContext("direction") === "rtl" && !s, { sliderX: d, sliderY: f, sliderWidth: p, sliderHeight: m } = this._adapter.getSliderLengths(), h = s ? f : d, g = s ? m : p, _;
+			_ = s && l || u ? (h + g - n) / g * (i - r) + r : (n - h) / g * (i - r) + r;
+			let v;
+			return v = o ? t ? a[0] : a[1] : a, c !== 1 && (_ = Math.round(_ / c) * c), o && _ !== v ? t ? [_, a[1]] : [a[0], _] : !o && _ !== v && _;
+		}, this.transValueToPos = (e) => {
+			let { min: t, max: n } = this._adapter.getStates(), { vertical: r, range: i, verticalReverse: a } = this._adapter.getProps(), o = this._adapter.getContext("direction") === "rtl" && !r, { sliderX: s, sliderY: c, sliderWidth: l, sliderHeight: u } = this._adapter.getSliderLengths(), d = r ? c : s, f = r ? u : l, p = (e) => {
+				let i = (e - t) / (n - t);
+				return r && a || o ? d + f - i * f : d + i * f;
+			};
+			return i ? [p(e[0]), p(e[1])] : p(e);
+		}, this.isMarkActive = (e) => {
+			let { min: t, max: n, range: r, included: i } = this._adapter.getProps(), a = this._adapter.getState("currentValue");
+			return typeof (e / 1) == "number" && e >= t && e <= n ? r ? (e > a[1] || e < a[0]) && i ? "unActive" : "active" : e <= a && i ? "active" : "unActive" : !1;
+		}, this.outPutValue = (e) => {
+			let t = (e) => /^\d+(\.\d+)?$/.test(String(e)) ? e.toString().split(".")[1]?.length ?? 0 : 0, n = this._adapter.getProp("step"), r = (() => {
+				let e = 10 ** t(n);
+				return (t) => Math.round(t * e) / e;
+			})();
+			if (Array.isArray(e)) {
+				let t = r(e[0]), n = r(e[1]);
+				return t > n ? this.getState("focusPos") === "min" ? [n, n] : [t, t] : [t, n];
+			}
+			return r(e);
+		}, this.handleDisabledChange = (e) => {
+			this._adapter.updateDisabled(e);
+		}, this.checkAndUpdateIsInRenderTreeState = () => this._adapter.checkAndUpdateIsInRenderTreeState(), this.calculateOutputValue = (e, t) => {
+			let n = this.transPosToValue(e, t);
+			if (n !== !1) return this.outPutValue(n);
+		}, this.handleValueChange = (e, t) => {
+			let { min: n, max: r } = this._adapter.getStates(), i = null, a = {};
+			this.valueFormatIsCorrect(t) ? (Array.isArray(e) && Array.isArray(t) && (t = [t[0] < n ? n : t[0], t[1] > r ? r : t[1]], i = Object.assign(a, { currentValue: t })), typeof e == "number" && typeof t == "number" && (t = t > r ? r : t < n ? n : t, i = Object.assign(a, { currentValue: t }))) : i = a, i && this._adapter.transNewPropsToState(i);
+		}, this.onHandleDown = (e, t) => {
+			this._adapter.onHandleDown(e);
+			let n = this._adapter.getState("disabled"), { vertical: r } = this._adapter.getProps(), { dragging: i } = this._adapter.getOverallVars();
+			if (n) return !1;
+			this._adapter.setStateVal("isDrag", !0), this._adapter.setStateVal("chooseMovePos", t), t === "min" ? this._adapter.setDragging([!0, i[1]]) : this._adapter.setDragging([i[0], !0]);
+			let a = this.handleMousePos(e.clientX, e.clientY), o = r ? a.y : a.x;
+			if (!this._adapter.isEventFromHandle(e)) this._dragOffset = 0;
+			else {
+				let t = this._getHandleCenterPosition(r, e.target);
+				this._dragOffset = o - t, o = t;
+			}
+			return !0;
+		}, this.onHandleMove = (e) => {
+			this._adapter.setEventDefault(e);
+			let { disabled: t, chooseMovePos: n } = this._adapter.getStates(), { vertical: r } = this._adapter.getProps(), { dragging: i } = this._adapter.getOverallVars();
+			if (t) return !1;
+			this.onHandleEnter(n);
+			let a = this.handleMousePos(e.clientX, e.clientY), o = r ? a.y : a.x;
+			if (o -= this._dragOffset, n === "min" && i[0] || n === "max" && i[1]) {
+				let e = this.calculateOutputValue(o, n === "min");
+				if (e === void 0) return !1;
+				this._adapter.notifyChange(e), this._adapter.onHandleMove(o, n === "min", void 0, !1, e);
+			}
+			return !0;
+		}, this.onHandleTouchStart = (e, t) => {
+			let r = this._adapter.getMinHandleEl(), i = this._adapter.getMaxHandleEl();
+			if (e.target === r || e.target === i) {
+				n(e);
+				let r = j(e.touches[0], e);
+				this.onHandleDown(r, t);
+			}
+		}, this.onHandleTouchMove = (e) => {
+			let t = this._adapter.getMinHandleEl(), n = this._adapter.getMaxHandleEl();
+			if (e.target === t || e.target === n) {
+				let t = j(e.touches[0], e);
+				this.onHandleMove(t);
+			}
+		}, this.onHandleEnter = (e) => {
+			let { disabled: t, focusPos: n } = this._adapter.getStates();
+			t || !n && e !== n && this._adapter.onHandleEnter(e);
+		}, this.onHandleLeave = () => {
+			let e = this._adapter.getState("disabled"), t = this._adapter.getState("isDrag");
+			!e && !t && this._adapter.onHandleLeave();
+		}, this.onHandleUp = (e) => {
+			this._adapter.onHandleUpBefore(e);
+			let { disabled: t, chooseMovePos: n } = this._adapter.getStates(), { dragging: r } = this._adapter.getOverallVars();
+			return !t && (n === "min" ? this._adapter.setDragging([!1, r[1]]) : this._adapter.setDragging([r[0], !1]), this._adapter.setStateVal("isDrag", !1), this._adapter.onHandleLeave(), this._adapter.onHandleUpAfter(), !0);
+		}, this._handleValueDecreaseWithKeyBoard = (e, t) => {
+			let { min: n, currentValue: r } = this.getStates(), { range: i } = this.getProps();
+			if (t === "min") {
+				if (i) {
+					let t = r[0] - e;
+					return t = t < n ? n : t, [t, r[1]];
+				}
+				{
+					let t = r - e;
+					return t = t < n ? n : t, t;
+				}
+			}
+			{
+				let t = r[1] - e;
+				return t = t < r[0] ? r[0] : t, [r[0], t];
+			}
+		}, this._handleValueIncreaseWithKeyBoard = (e, t) => {
+			let { max: n, currentValue: r } = this.getStates(), { range: i } = this.getProps();
+			if (t === "min") {
+				if (i) {
+					let t = r[0] + e;
+					return t = t > r[1] ? r[1] : t, [t, r[1]];
+				}
+				{
+					let t = r + e;
+					return t = t > n ? n : t, t;
+				}
+			}
+			{
+				let t = r[1] + e;
+				return t = t > n ? n : t, [r[0], t];
+			}
+		}, this._handleHomeKey = (e) => {
+			let { min: t, currentValue: n } = this.getStates(), { range: r } = this.getProps();
+			return e === "min" ? r ? [t, n[1]] : t : [n[0], n[0]];
+		}, this._handleEndKey = (e) => {
+			let { max: t, currentValue: n } = this.getStates(), { range: r } = this.getProps();
+			return e === "min" ? r ? [n[1], n[1]] : t : [n[0], t];
+		}, this.handleKeyDown = (e, t) => {
+			let { min: r, max: i, currentValue: a } = this.getStates(), { step: o, range: s, vertical: c } = this.getProps(), l = this._adapter.getContext("direction") === "rtl" && !c, u;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowDown":
+					u = l ? this._handleValueIncreaseWithKeyBoard(o, t) : this._handleValueDecreaseWithKeyBoard(o, t);
+					break;
+				case "ArrowRight":
+				case "ArrowUp":
+					u = l ? this._handleValueDecreaseWithKeyBoard(o, t) : this._handleValueIncreaseWithKeyBoard(o, t);
+					break;
+				case "PageUp":
+					u = l ? this._handleValueDecreaseWithKeyBoard(10 * o, t) : this._handleValueIncreaseWithKeyBoard(10 * o, t);
+					break;
+				case "PageDown":
+					u = l ? this._handleValueIncreaseWithKeyBoard(10 * o, t) : this._handleValueDecreaseWithKeyBoard(10 * o, t);
+					break;
+				case "Home":
+					u = this._handleHomeKey(t);
+					break;
+				case "End": u = this._handleEndKey(t);
+			}
+			if ([
+				"ArrowLeft",
+				"ArrowDown",
+				"ArrowRight",
+				"ArrowUp",
+				"PageUp",
+				"PageDown",
+				"Home",
+				"End"
+			].includes(e.key)) {
+				let t = !0;
+				t = Array.isArray(a) ? a[0] !== u[0] || a[1] !== u[1] : a !== u, t && (this._adapter.updateCurrentValue(u), this._adapter.notifyChange(u)), n(e);
+			}
+		}, this._noTooltip = () => {
+			let { tipFormatter: e, tooltipVisible: t } = this.getProps();
+			return e === null || t === !1;
+		}, this.onFocus = (e, r) => {
+			if (this._noTooltip()) return;
+			n(e);
+			let { target: i } = e;
+			try {
+				i.matches(":focus-visible") && (r === "min" ? this._adapter.setStateVal("firstDotFocusVisible", !0) : this._adapter.setStateVal("secondDotFocusVisible", !0));
+			} catch {
+				t(!0, "Warning: [Semi Slider] The current browser does not support the focus-visible");
+			}
+		}, this.onBlur = (e, t) => {
+			if (this._noTooltip()) return;
+			let { firstDotFocusVisible: n, secondDotFocusVisible: r } = this.getStates();
+			t === "min" ? n && this._adapter.setStateVal("firstDotFocusVisible", !1) : r && this._adapter.setStateVal("secondDotFocusVisible", !1);
+		}, this.handleWrapClick = (e) => {
+			let { disabled: t, isDrag: n } = this._adapter.getStates();
+			if (n || t || this._adapter.isEventFromHandle(e)) return;
+			let { vertical: r } = this.getProps(), i = this.handleMousePos(e.clientX, e.clientY), a = r ? i.y : i.x, o = this.checkWhichHandle(a), s = this.calculateOutputValue(a, o);
+			s !== void 0 && (this._adapter.notifyChange(s), !this._isControlledComponent() && this.setHandlePos(a, o, !0, s));
+		}, this.setHandlePos = (e, t, n = !1, r) => {
+			this._adapter.onHandleMove(e, t, () => this._adapter.onHandleUpAfter(), n, r);
+		}, this.checkWhichHandle = (e) => {
+			let { vertical: t, verticalReverse: n } = this.getProps(), { currentValue: r } = this._adapter.getStates(), i = this.transValueToPos(r), a = !0;
+			return Array.isArray(i) && (a = Math.abs(e - i[0]) <= Math.abs(e - i[1])), t && n && (a = !a), a;
+		}, this.handleWrapperEnter = () => {
+			this._adapter.setStateVal("showBoundary", !0);
+		}, this.handleWrapperLeave = () => {
+			this._adapter.setStateVal("showBoundary", !1);
+		};
+	}
+	init() {
+		this._checkCurrentValue(), this._dragOffset = 0;
+	}
+	_checkCurrentValue() {
+		let { currentValue: e, min: t, max: n } = this.getStates(), r;
+		Array.isArray(e) ? (r = [], r[0] = this._checkValidity(e[0], t, n), r[1] = this._checkValidity(e[1], t, n)) : r = this._checkValidity(e, t, n), this._adapter.updateCurrentValue(r);
+	}
+	destroy() {
+		this._adapter.unSubscribeEventListener();
+	}
+	_getHandleCenterPosition(e, t) {
+		let n = t.getBoundingClientRect(), { x: r, y: i } = this.handleMousePos(n.left + n.width * .5, n.top + n.height * .5);
+		return e ? i : r;
+	}
+}, ee = d({
+	name: "SliderFragment",
+	inheritAttrs: !1,
+	setup(e, { slots: t }) {
+		return () => t.default?.();
+	}
+});
+//#endregion
+//#region src/slider/use-slider-foundation.ts
+function N(e) {
+	return e ? !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length) : !1;
+}
+function P(e) {
+	return Array.isArray(e) ? [...e].sort((e, t) => e - t) : e;
+}
+function F(e) {
+	let { config: t, emit: n, maxHandle: r, minHandle: i, props: a, slider: s } = e, c = f();
+	function l(e) {
+		let t = c?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+		return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+	}
+	let u = o(() => l("modelValue")), d = o(() => l("value")), p = o(() => u.value || d.value), h = o(() => u.value ? a.modelValue : d.value ? a.value : void 0), g = h.value ?? a.defaultValue ?? (a.range ? [0, 0] : 0), _ = x({
+		currentValue: g,
+		min: a.min ?? 0,
+		max: a.max ?? 100,
+		focusPos: "",
+		onChange: void 0,
+		disabled: a.disabled ?? !1,
+		chooseMovePos: "",
+		isDrag: !1,
+		clickValue: 0,
+		showBoundary: !1,
+		isInRenderTree: !0,
+		firstDotFocusVisible: !1,
+		secondDotFocusVisible: !1
+	}), b = w([!1, !1]), S = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Set(), T = /* @__PURE__ */ new Set(), E = o(() => {
+		let e = { ...a };
+		return p.value ? e.value = h.value : delete e.value, e;
+	});
+	function D(e, t, n) {
+		e.addEventListener(t, n);
+		let r = () => {
+			e.removeEventListener(t, n), C.delete(r), T.delete(r);
+		};
+		return C.add(r), r;
+	}
+	function O() {
+		for (let e of [...T]) e();
+		T.clear();
+	}
+	let A = m(new M({
+		getContext: (e) => e === "direction" ? t.value.direction : void 0,
+		getContexts: () => ({ direction: t.value.direction }),
+		getProp: (e) => E.value[e],
+		getProps: () => E.value,
+		getState: (e) => _[e],
+		getStates: () => _,
+		setState: (e, t) => {
+			Object.assign(_, e), t?.();
+		},
+		getCache: (e) => S.get(e),
+		getCaches: () => S,
+		setCache: (e, t) => S.set(String(e), t),
+		stopPropagation: (e) => e.stopPropagation?.(),
+		persistEvent: () => void 0,
+		getSliderLengths: () => {
+			let e = s.value;
+			if (!e) return {
+				sliderX: 0,
+				sliderY: 0,
+				sliderWidth: 0,
+				sliderHeight: 0
+			};
+			let t = e.getBoundingClientRect(), n = e.offsetParent?.getBoundingClientRect();
+			return {
+				sliderX: n ? t.left - n.left : e.offsetLeft,
+				sliderY: n ? t.top - n.top : e.offsetTop,
+				sliderWidth: t.width,
+				sliderHeight: t.height
+			};
+		},
+		getParentRect: () => s.value?.offsetParent?.getBoundingClientRect(),
+		getScrollParentVal: () => {
+			let e = A.getScrollParent(s.value);
+			return {
+				scrollTop: e.scrollTop,
+				scrollLeft: e.scrollLeft
+			};
+		},
+		isEventFromHandle: (e) => [i.value, r.value].some((t) => t && e.target instanceof Node && t.contains(e.target)),
+		getOverallVars: () => ({ dragging: b.value }),
+		updateDisabled: (e) => {
+			_.disabled = e;
+		},
+		transNewPropsToState: (e, t) => {
+			Object.assign(_, e), t?.();
+		},
+		notifyChange: (e) => {
+			let t = P(e);
+			n("change", t), n("update:modelValue", t), n("update:value", t);
+		},
+		setDragging: (e) => {
+			b.value = e;
+		},
+		updateCurrentValue: (e) => {
+			_.currentValue = e;
+		},
+		setOverallVars: (e, t) => {
+			e === "dragging" && Array.isArray(t) && (b.value = t);
+		},
+		getMinHandleEl: () => i.value,
+		getMaxHandleEl: () => r.value,
+		onHandleDown: () => {
+			typeof document > "u" || typeof window > "u" || (O(), T.add(D(document.body, "mousemove", A.onHandleMove)), T.add(D(window, "mouseup", A.onHandleUp)), T.add(D(document.body, "touchmove", A.onHandleTouchMove)));
+		},
+		onHandleMove: (e, t, n, r = !1, i) => {
+			if (!A.checkAndUpdateIsInRenderTreeState()) return;
+			let a = i ?? A.outPutValue(_.currentValue), o = A.outPutValue(_.currentValue);
+			if (JSON.stringify(o) !== JSON.stringify(a)) {
+				if (!r && A.valueFormatIsCorrect(E.value.value)) return !1;
+				_.currentValue = a, n?.();
+			}
+		},
+		setEventDefault: (e) => {
+			e.stopPropagation(), e.preventDefault();
+		},
+		setStateVal: (e, t) => {
+			_[e] = t;
+		},
+		checkAndUpdateIsInRenderTreeState: () => {
+			let e = N(s.value);
+			return _.isInRenderTree = e, e;
+		},
+		onHandleEnter: (e) => {
+			_.focusPos = e;
+		},
+		onHandleLeave: () => {
+			_.focusPos = "";
+		},
+		onHandleUpBefore: (e) => {
+			e instanceof MouseEvent && n("mouseUp", e), e.stopPropagation(), e.preventDefault(), O();
+		},
+		onHandleUpAfter: () => {
+			n("afterChange", A.outPutValue(_.currentValue));
+		},
+		unSubscribeEventListener: () => {
+			for (let e of [...C]) e();
+			C.clear(), T.clear();
+		}
+	}));
+	return k(() => a.disabled, (e) => A.handleDisabledChange(!!e)), k(h, (e, t) => {
+		e !== void 0 && JSON.stringify(e) !== JSON.stringify(t) && (A.handleValueChange(_.currentValue, e), n("afterChange", e));
+	}), y(() => A.init()), v(() => A.destroy()), {
+		controlled: p,
+		foundation: A,
+		state: _
+	};
+}
+//#endregion
+//#region src/slider/Slider.vue?vue&type=script&setup=true&lang.ts
+var I = ["aria-label"], L = {
+	key: 0,
+	class: "semi-slider-dots"
+}, R = [
+	"aria-disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-orientation",
+	"aria-valuemax",
+	"aria-valuemin",
+	"aria-valuenow",
+	"aria-valuetext",
+	"tabindex",
+	"onBlur",
+	"onFocus",
+	"onKeydown",
+	"onMousedown",
+	"onMouseenter",
+	"onTouchstart"
+], te = { class: "semi-slider-boundary-min" }, ne = { class: "semi-slider-boundary-max" }, z = /* @__PURE__ */ d({
+	name: "Slider",
+	inheritAttrs: !1,
+	__name: "Slider",
+	props: {
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaValueText: {},
+		className: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		defaultValue: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		getAriaValueText: {},
+		handleDot: {},
+		included: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {},
+		max: { default: 100 },
+		min: { default: 0 },
+		modelValue: {},
+		railStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		range: {
+			type: Boolean,
+			default: !1
+		},
+		showArrow: {
+			type: Boolean,
+			default: !0
+		},
+		showBoundary: {
+			type: Boolean,
+			default: !1
+		},
+		showMarkLabel: {
+			type: Boolean,
+			default: !0
+		},
+		step: { default: 1 },
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tipFormatter: {
+			type: [Function, null],
+			default: () => (e) => e
+		},
+		tooltipOnMark: {
+			type: Boolean,
+			default: !1
+		},
+		tooltipVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		value: {},
+		vertical: {
+			type: Boolean,
+			default: !1
+		},
+		verticalReverse: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"afterChange",
+		"change",
+		"mouseUp",
+		"update:modelValue",
+		"update:value"
+	],
+	setup(e, { emit: t }) {
+		let n = e, d = t, f = D(), m = O("slider"), v = w(null), y = w(null), x = p(i, void 0), k = o(() => x ? x.value : {
+			direction: "ltr",
+			getPopupContainer: void 0
+		}), { foundation: j, state: M } = F({
+			config: k,
+			emit: d,
+			maxHandle: y,
+			minHandle: v,
+			props: n,
+			slider: m
+		}), N = o(() => k.value.direction === "rtl" && !n.vertical), P = o(() => n.vertical ? ee : "div"), z = o(() => n.vertical ? "top" : N.value ? "right" : "left"), B = o(() => j.getMinAndMaxPercent(M.currentValue)), V = o(() => j.computeHandleVisibleVal(n.tooltipVisible && M.isInRenderTree, n.tipFormatter, n.range)), H = o(() => Array.isArray(M.currentValue) ? [...M.currentValue].sort((e, t) => e - t) : M.currentValue), U = o(() => {
+			if (!(!n.range || !Array.isArray(H.value))) return `Range: ${Z(H.value[0], 0)} to ${Z(H.value[1], 1)}`;
+		}), W = o(() => n.vertical ? void 0 : "semi-slider"), G = o(() => [
+			"semi-slider-wrapper",
+			n.disabled ? "semi-slider-disabled" : void 0,
+			n.vertical ? "semi-slider-vertical-wrapper" : void 0,
+			n.vertical && n.verticalReverse ? "semi-slider-reverse" : void 0,
+			f.class,
+			n.className
+		]), K = o(() => ["semi-slider-boundary", n.showBoundary && M.showBoundary ? "semi-slider-boundary-show" : void 0]), q = o(() => Object.fromEntries(Object.entries(f).filter(([e]) => e.startsWith("data-")))), J = o(() => Object.entries(n.marks ?? {}).map(([e, t]) => ({
+			value: Number(e),
+			label: t
+		})).filter(({ value: e }) => j.isMarkActive(e) !== !1)), Y = o(() => {
+			if (!n.included) return {};
+			let e = B.value.min, t = B.value.max;
+			return n.vertical ? {
+				height: `${(n.range ? Math.abs(t - e) : e) * 100}%`,
+				top: n.range ? `${Math.min(e, t) * 100}%` : "0"
+			} : {
+				width: `${(n.range ? Math.abs(t - e) : e) * 100}%`,
+				[N.value ? "right" : "left"]: n.range ? `${Math.min(e, t) * 100}%` : "0"
+			};
+		}), X = o(() => (Array.isArray(M.currentValue) ? M.currentValue : [M.currentValue]).map((e, t) => {
+			let r = t === 0 ? "min" : "max", i = t === 0 ? B.value.min : B.value.max;
+			return {
+				dot: Array.isArray(n.handleDot) ? n.handleDot[t] : t === 0 ? n.handleDot : void 0,
+				index: t,
+				percent: i,
+				position: r,
+				tooltipContent: r === "min" ? V.value.tipChildren.min : V.value.tipChildren.max,
+				tooltipVisible: M.isInRenderTree && ((r === "min" ? V.value.tipVisible.min : V.value.tipVisible.max) || (r === "min" ? M.firstDotFocusVisible : M.secondDotFocusVisible)),
+				value: e
+			};
+		}));
+		function Z(e, t) {
+			return n.getAriaValueText ? n.getAriaValueText(e, t) : e;
+		}
+		function re() {
+			return n.ariaLabel ?? f["aria-label"] ?? (n.disabled ? "Disabled Slider" : void 0);
+		}
+		function ie() {
+			return n.ariaLabelledby ?? f["aria-labelledby"];
+		}
+		function ae(e, t) {
+			return n.getAriaValueText ? n.getAriaValueText(e, t) : n.ariaValueText ?? f["aria-valuetext"];
+		}
+		function oe(e) {
+			return {
+				[z.value]: `${e.percent * 100}%`,
+				zIndex: M.chooseMovePos === e.position && (!n.range || M.isDrag) ? 2 : 1
+			};
+		}
+		function se(e) {
+			if (e) return {
+				...e.size ? {
+					width: e.size,
+					height: e.size
+				} : {},
+				...e.color ? { backgroundColor: e.color } : {}
+			};
+		}
+		function Q(e, t = !1) {
+			let r = (e - n.min) / (n.max - n.min) * 100;
+			return { [z.value]: t ? `calc(${r}% - 2px)` : `${r}%` };
+		}
+		function ce(e, t) {
+			j.onHandleDown(e, t);
+		}
+		function le(e, t) {
+			j.onHandleTouchStart(e, t);
+		}
+		function $(e) {
+			return (t) => {
+				let n = t instanceof HTMLSpanElement ? t : null;
+				e === "min" ? v.value = n : y.value = n;
+			};
+		}
+		return (e, t) => (b(), s(C(P.value), { class: g(W.value) }, {
+			default: A(() => [u("div", h(q.value, {
+				ref_key: "slider",
+				ref: m,
+				"aria-label": U.value,
+				class: G.value,
+				style: [E(f).style, n.style],
+				onMouseenter: t[9] ||= (e) => E(j).handleWrapperEnter(),
+				onMouseleave: t[10] ||= (e) => E(j).handleWrapperLeave()
+			}), [
+				u("div", {
+					class: "semi-slider-rail",
+					style: _(n.railStyle),
+					onClick: t[0] ||= (...e) => E(j).handleWrapClick && E(j).handleWrapClick(...e)
+				}, null, 4),
+				u("div", {
+					class: "semi-slider-track",
+					style: _(Y.value),
+					onClick: t[1] ||= (...e) => E(j).handleWrapClick && E(j).handleWrapClick(...e)
+				}, null, 4),
+				J.value.length ? (b(), l("div", L, [(b(!0), l(a, null, S(J.value, (e) => (b(), l(a, { key: `dot-${e.value}` }, [n.tooltipOnMark ? (b(), s(r, {
+					key: 0,
+					content: e.label
+				}, {
+					default: A(() => [u("span", {
+						class: g(["semi-slider-dot", E(j).isMarkActive(e.value) === "active" ? "semi-slider-dot-active" : void 0]),
+						style: _(Q(e.value, !0)),
+						onClick: t[2] ||= (...e) => E(j).handleWrapClick && E(j).handleWrapClick(...e)
+					}, null, 6)]),
+					_: 2
+				}, 1032, ["content"])) : (b(), l("span", {
+					key: 1,
+					class: g(["semi-slider-dot", E(j).isMarkActive(e.value) === "active" ? "semi-slider-dot-active" : void 0]),
+					style: _(Q(e.value, !0)),
+					onClick: t[3] ||= (...e) => E(j).handleWrapClick && E(j).handleWrapClick(...e)
+				}, null, 6))], 64))), 128))])) : c("", !0),
+				u("div", null, [(b(!0), l(a, null, S(X.value, (e) => (b(), s(r, {
+					key: e.position,
+					content: e.tooltipContent,
+					class: "semi-slider-handle-tooltip",
+					position: "top",
+					"re-pos-key": e.percent,
+					"show-arrow": n.range ? void 0 : n.showArrow,
+					trigger: "custom",
+					visible: e.tooltipVisible
+				}, {
+					default: A(() => [u("span", {
+						ref_for: !0,
+						ref: $(e.position),
+						"aria-disabled": n.disabled,
+						"aria-label": re(),
+						"aria-labelledby": ie(),
+						"aria-orientation": n.vertical ? "vertical" : void 0,
+						"aria-valuemax": n.range && e.position === "min" && Array.isArray(E(M).currentValue) ? E(M).currentValue[1] : E(M).max,
+						"aria-valuemin": n.range && e.position === "max" && Array.isArray(E(M).currentValue) ? E(M).currentValue[0] : E(M).min,
+						"aria-valuenow": e.value,
+						"aria-valuetext": ae(e.value, e.index),
+						class: g(["semi-slider-handle", E(M).chooseMovePos === e.position && E(M).isDrag ? "semi-slider-handle-clicked" : void 0]),
+						role: "slider",
+						style: _(oe(e)),
+						tabindex: n.disabled ? -1 : 0,
+						onBlur: (t) => E(j).onBlur(t, e.position),
+						onFocus: (t) => E(j).onFocus(t, e.position),
+						onKeydown: (t) => !n.disabled && E(j).handleKeyDown(t, e.position),
+						onKeyup: t[4] ||= (e) => !n.disabled && E(j).onHandleUp(e),
+						onMousedown: (t) => ce(t, e.position),
+						onMouseenter: (t) => E(j).onHandleEnter(e.position),
+						onMouseleave: t[5] ||= (e) => E(j).onHandleLeave(),
+						onMouseover: t[6] ||= (e) => E(j).checkAndUpdateIsInRenderTreeState(),
+						onTouchend: t[7] ||= (e) => E(j).onHandleUp(e),
+						onTouchstart: (t) => le(t, e.position)
+					}, [e.dot ? (b(), l("div", {
+						key: 0,
+						class: "semi-slider-handle-dot",
+						style: _(se(e.dot))
+					}, null, 4)) : c("", !0)], 46, R)]),
+					_: 2
+				}, 1032, [
+					"content",
+					"re-pos-key",
+					"show-arrow",
+					"visible"
+				]))), 128))]),
+				n.showMarkLabel && J.value.length ? (b(), l("div", {
+					key: 1,
+					class: g(n.vertical && n.verticalReverse ? "semi-slider-marks-reverse" : "semi-slider-marks")
+				}, [(b(!0), l(a, null, S(J.value, (e) => (b(), l("span", {
+					key: `mark-${e.value}`,
+					class: g(n.vertical && n.verticalReverse ? "semi-slider-mark-reverse" : "semi-slider-mark"),
+					style: _(Q(e.value)),
+					onClick: t[8] ||= (...e) => E(j).handleWrapClick && E(j).handleWrapClick(...e)
+				}, T(e.label), 7))), 128))], 2)) : c("", !0),
+				u("div", { class: g(K.value) }, [u("span", te, T(E(M).min), 1), u("span", ne, T(E(M).max), 1)], 2)
+			], 16, I)]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { z as t };