import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, openBlock as a, reactive as o, ref as s, toDisplayString as c, vModelText as l, watch as u, withDirectives as d } from "vue";
var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
	__name: "InputRange",
	props: {
		modelValue: {},
		separator: { default: "-" }
	},
	emits: ["update:modelValue", "change"],
	setup(r, { emit: p }) {
		let m = r, h = p, g = o({
			left: m.modelValue[0],
			right: m.modelValue[1]
		}), _ = s(!1), v = e(() => (_.value, "ui-input-range-focused")), y = e({
			get() {
				return {
					left: Math.min(...m.modelValue),
					right: Math.max(...m.modelValue)
				};
			},
			set() {}
		});
		u(() => y.value, (e) => (g.left = e.left) && (g.right = e.right));
		function b() {
			h("update:modelValue", [+g.left, +g.right]), h("change", [+g.left, +g.right]);
		}
		function x(e, t) {
			let n = t.target.value;
			/^[0-9]{0,2}$/.test(n) ? e ? g.left = +n : g.right = +n : e ? g.left = +n.slice(0, n.length - 1) : g.right = +n.slice(0, n.length - 1);
		}
		return (e, r) => (a(), t("div", i({ class: [v.value, "ui-input-range"] }, e.$attrs), [
			d(n("input", {
				"onUpdate:modelValue": r[0] ||= (e) => y.value.left = e,
				class: "text-s",
				type: "text",
				onChange: b,
				onFocus: r[1] ||= (e) => _.value = !0,
				onFocusout: r[2] ||= (e) => _.value = !1,
				onInput: r[3] ||= (e) => x(!0, e)
			}, null, 544), [[l, y.value.left]]),
			n("div", f, c(m.separator), 1),
			d(n("input", {
				"onUpdate:modelValue": r[4] ||= (e) => y.value.right = e,
				class: "text-s",
				type: "text",
				onChange: b,
				onFocus: r[5] ||= (e) => _.value = !0,
				onFocusout: r[6] ||= (e) => _.value = !1,
				onInput: r[7] ||= (e) => x(!1, e)
			}, null, 544), [[l, y.value.right]])
		], 16));
	}
});
export { p as default };

//# sourceMappingURL=InputRange.vue2.js.map