/**
 * GnRange - Accessible range/slider input.
 *
 * @typedef {Object} GnRangeProps
 * @property {number|string} [modelValue=0] - Current value
 * @property {string} [label=''] - Field label
 * @property {number|string} [min=0] - Minimum value
 * @property {number|string} [max=100] - Maximum value
 * @property {number|string} [step=1] - Step increment
 *
 * @emits update:modelValue
 */

import { defineComponent, h } from "vue";
import { cx, eventValue } from "../utils.js";

export default defineComponent({
	name: "GnRange",
	inheritAttrs: false,
	props: {
		modelValue: { type: [Number, String], default: 0 },
		label: { type: String, default: "" },
		min: { type: [Number, String], default: 0 },
		max: { type: [Number, String], default: 100 },
		step: { type: [Number, String], default: 1 }
	},
	emits: ["update:modelValue"],
	setup(props, { attrs, emit }) {
		return () => h("div", { class: "range" }, [
			props.label && h("label", { class: "label" }, [
				props.label,
				h("input", {
					...attrs,
					type: "range",
					value: props.modelValue,
					min: props.min,
					max: props.max,
					step: props.step,
					class: cx("range-input", attrs.class),
					onInput: event => emit("update:modelValue", eventValue(event))
				})
			]),
			!props.label && h("input", {
				...attrs,
				type: "range",
				value: props.modelValue,
				min: props.min,
				max: props.max,
				step: props.step,
				class: cx("range-input", attrs.class),
				onInput: event => emit("update:modelValue", eventValue(event))
			})
		]);
	}
});