@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/labeled-field.js

@@ -1,171 +1,204 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-CDtwaWkZ.js";
-import { t as s } from "./SelectGroup-BuEptUsa.js";
-import { n as c } from "./slider-Cxuj_W_H.js";
-import { t as l } from "./Switch-BPBfhMU3.js";
-import { t as u } from "./Input-DKf-XwUM.js";
-import { t as d } from "./IconTooltip-D9sbK-Mk.js";
-import { Fragment as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as _, createTextVNode as v, createVNode as y, defineComponent as b, normalizeClass as x, openBlock as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D, withCtx as O } from "vue";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t } from "./label-DnMqH7jr.js";
+import { a as n, c as r, i, o as a, r as o, s } from "./select-BcBAyLXA.js";
+import { t as c } from "./slider-DzqeQmMu.js";
+import { t as l } from "./switch-DZjQuFLa.js";
+import { t as u } from "./Input-9BlLluik.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeProps as x, openBlock as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D, useSlots as O, withCtx as k } from "vue";
 //#region src/components/labeled-field/LabeledField.vue?vue&type=script&setup=true&lang.ts
-var k = ["id", "for"], A = {
-	key: 0,
-	class: "text-destructive",
-	"aria-hidden": "true"
-}, j = ["id", "for"], M = {
-	key: 0,
-	class: "text-destructive",
-	"aria-hidden": "true"
-}, N = {
-	key: 2,
-	class: "labeled-field-row"
-}, P = { class: "labeled-field-action" }, F = ["id"], I = /* @__PURE__ */ t(/* @__PURE__ */ b({
+var A = [
+	"data-layout",
+	"data-invalid",
+	"data-disabled"
+], j = { class: "labeled-field-copy" }, M = { class: "labeled-field-control" }, N = ["aria-live"], P = /*#__PURE__*/ e(/* @__PURE__ */ b({
+	name: "LabeledField",
 	__name: "LabeledField",
 	props: {
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		controlLabelable: {
+			type: Boolean,
+			default: !0
+		},
 		label: {},
-		tooltip: {},
-		labelClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		required: { type: Boolean },
-		hideLabel: { type: Boolean },
-		horizontal: { type: Boolean }
+		description: {},
+		requirement: {},
+		layout: { default: "default" },
+		errorLive: { default: "polite" }
 	},
-	setup(t) {
-		let n = D(), r = D(), i = D();
-		return (a, o) => (S(), h("div", { class: x(E(e)("labeled-field", t.horizontal && "labeled-field--horizontal")) }, [
-			t.tooltip && !t.hideLabel ? (S(), p(E(d), {
-				key: 0,
-				text: t.tooltip
-			}, {
-				default: O(() => [g("label", {
-					id: E(i),
-					for: E(r),
-					class: x(E(e)("labeled-field-label", t.labelClass))
-				}, [v(T(t.label), 1), t.required ? (S(), h("span", A, " *")) : m("", !0)], 10, k)]),
-				_: 1
-			}, 8, ["text"])) : (S(), h("label", {
-				key: 1,
-				id: E(i),
-				for: E(r),
-				class: x(E(e)(t.hideLabel ? "sr-only" : "labeled-field-label", t.labelClass))
-			}, [v(T(t.label), 1), t.required ? (S(), h("span", M, " *")) : m("", !0)], 10, j)),
-			a.$slots.action ? (S(), h("div", N, [w(a.$slots, "default", {
-				errorId: E(n),
-				controlId: E(r),
-				labelledBy: E(i)
-			}, void 0, !0), g("div", P, [w(a.$slots, "action", { controlId: E(r) }, void 0, !0)])])) : w(a.$slots, "default", {
-				key: 3,
-				errorId: E(n),
-				controlId: E(r),
-				labelledBy: E(i)
-			}, void 0, !0),
-			a.$slots.error ? (S(), h("div", {
-				key: 4,
-				id: E(n),
-				class: "labeled-field-error",
-				"aria-live": "polite"
-			}, [w(a.$slots, "error", {}, void 0, !0)], 8, F)) : m("", !0)
-		], 2));
+	setup(e) {
+		let n = e, r = O(), i = D(), a = `${i}-control`, o = `${i}-label`, s = `${i}-description`, c = `${i}-error`, l = f(() => n.invalid && r.error ? c : void 0), u = f(() => [n.description ? s : void 0, l.value].filter(Boolean).join(" ") || void 0), d = f(() => n.requirement === "required");
+		return (n, r) => (S(), h("div", {
+			class: "labeled-field",
+			"data-slot": "labeled-field",
+			"data-layout": e.layout,
+			"data-invalid": e.invalid || void 0,
+			"data-disabled": e.disabled || void 0
+		}, [g("div", j, [y(E(t), {
+			id: o,
+			for: e.controlLabelable ? a : void 0,
+			requirement: e.requirement,
+			disabled: e.disabled
+		}, {
+			default: k(() => [v(T(e.label), 1)]),
+			_: 1
+		}, 8, [
+			"for",
+			"requirement",
+			"disabled"
+		]), e.description ? (S(), h("p", {
+			key: 0,
+			id: s,
+			class: "labeled-field-description"
+		}, T(e.description), 1)) : m("", !0)]), g("div", M, [w(n.$slots, "default", {
+			controlId: a,
+			labelledBy: o,
+			describedBy: u.value,
+			errorId: l.value,
+			invalid: e.invalid,
+			disabled: e.disabled,
+			required: d.value
+		}, void 0, !0), l.value ? (S(), h("p", {
+			key: 0,
+			id: c,
+			class: "labeled-field-error",
+			"aria-live": e.errorLive === "off" ? void 0 : e.errorLive
+		}, [w(n.$slots, "error", {}, void 0, !0)], 8, N)) : m("", !0)])], 8, A));
 	}
-}), [["__scopeId", "data-v-bf591cf0"]]), L = /* @__PURE__ */ b({
+}), [["__scopeId", "data-v-2095a7b2"]]), F = /* @__PURE__ */ b({
+	name: "LabeledInput",
 	__name: "LabeledInput",
 	props: {
+		autocomplete: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		enterkeyhint: {},
+		form: {},
+		inputmode: {},
+		invalid: { type: Boolean },
+		maxlength: {},
+		minlength: {},
 		modelValue: {},
-		label: {},
-		tooltip: {},
-		labelClass: {},
-		inputClass: {},
+		name: {},
+		pattern: {},
+		placeholder: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		size: {},
 		type: {},
-		required: { type: Boolean }
+		label: {},
+		description: {},
+		requirement: {},
+		layout: {},
+		errorLive: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = t;
-		return (t, r) => (S(), p(I, {
+		let n = e, r = t, i = f(() => {
+			let { label: e, description: t, requirement: r, layout: i, errorLive: a, ...o } = n;
+			return o;
+		});
+		return (t, n) => (S(), p(P, {
 			label: e.label,
-			tooltip: e.tooltip,
-			"label-class": e.labelClass,
-			required: e.required
+			description: e.description,
+			requirement: e.required ? "required" : e.requirement,
+			layout: e.layout,
+			"error-live": e.errorLive,
+			invalid: e.invalid,
+			disabled: e.disabled
 		}, _({
-			default: O(({ errorId: i, controlId: a }) => [y(E(u), {
-				id: a,
-				type: e.type ?? "string",
-				class: x(e.inputClass ?? "fira-code"),
-				"model-value": e.modelValue,
-				required: e.required,
-				"aria-errormessage": t.$slots.error ? i : void 0,
-				onChange: r[0] ||= (e) => n("update:modelValue", e.target.value)
-			}, null, 8, [
+			default: k(({ controlId: e, describedBy: t, errorId: a, required: o }) => [y(E(u), x(i.value, {
+				id: e,
+				"aria-describedby": t,
+				"aria-errormessage": a,
+				required: o,
+				"onUpdate:modelValue": n[0] ||= (e) => r("update:modelValue", e)
+			}), null, 16, [
 				"id",
-				"type",
-				"class",
-				"model-value",
-				"required",
-				"aria-errormessage"
+				"aria-describedby",
+				"aria-errormessage",
+				"required"
 			])]),
 			_: 2
 		}, [t.$slots.error ? {
 			name: "error",
-			fn: O(() => [w(t.$slots, "error")]),
+			fn: k(() => [w(t.$slots, "error")]),
 			key: "0"
 		} : void 0]), 1032, [
 			"label",
-			"tooltip",
-			"label-class",
-			"required"
+			"description",
+			"requirement",
+			"layout",
+			"error-live",
+			"invalid",
+			"disabled"
 		]));
 	}
-}), R = {
-	key: 0,
-	class: "ml-auto pl-2 text-micro text-muted-foreground whitespace-nowrap"
-}, z = /* @__PURE__ */ b({
+}), I = /* @__PURE__ */ b({
+	name: "LabeledSelect",
 	__name: "LabeledSelect",
 	props: {
 		modelValue: {},
-		isOpen: { type: Boolean },
 		items: {},
-		descriptions: {},
-		label: {},
-		tooltip: {},
-		labelClass: {},
+		open: { type: Boolean },
+		placeholder: {},
+		invalid: { type: Boolean },
+		disabled: { type: Boolean },
 		required: { type: Boolean },
-		hideLabel: { type: Boolean }
+		label: {},
+		description: {},
+		requirement: {},
+		layout: {},
+		errorLive: {}
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, l) => (S(), p(I, {
+		return (t, l) => (S(), p(P, {
 			label: e.label,
-			tooltip: e.tooltip,
-			"label-class": e.labelClass,
-			required: e.required,
-			"hide-label": e.hideLabel
-		}, {
-			default: O(({ controlId: t }) => [y(E(o), {
+			description: e.description,
+			requirement: e.required ? "required" : e.requirement,
+			layout: e.layout,
+			"error-live": e.errorLive,
+			invalid: e.invalid,
+			disabled: e.disabled
+		}, _({
+			default: k(({ controlId: t, labelledBy: u, describedBy: f, errorId: m, required: g }) => [y(E(r), {
 				"model-value": e.modelValue,
-				open: e.isOpen,
+				open: e.open,
+				disabled: e.disabled,
+				required: g,
 				"onUpdate:open": l[0] ||= (e) => c("update:open", e),
-				"onUpdate:modelValue": l[1] ||= (e) => c("update:modelValue", e)
+				"onUpdate:modelValue": l[1] ||= (e) => c("update:modelValue", String(e))
 			}, {
-				default: O(() => [y(E(n), {
+				default: k(() => [y(E(a), {
 					id: t,
-					class: "fira-code"
+					"aria-labelledby": u,
+					"aria-describedby": f,
+					"aria-errormessage": m,
+					"aria-invalid": e.invalid || void 0
 				}, {
-					default: O(() => [y(E(i))]),
+					default: k(() => [y(E(s), { placeholder: e.placeholder }, null, 8, ["placeholder"])]),
 					_: 1
-				}, 8, ["id"]), y(E(r), null, {
-					default: O(() => [y(E(s), { class: "fira-code" }, {
-						default: O(() => [(S(!0), h(f, null, C(e.items, (t) => (S(), p(E(a), {
-							key: t,
-							value: t
+				}, 8, [
+					"id",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-errormessage",
+					"aria-invalid"
+				]), y(E(n), null, {
+					default: k(() => [y(E(i), null, {
+						default: k(() => [(S(!0), h(d, null, C(e.items, (e) => (S(), p(E(o), {
+							key: e,
+							value: e
 						}, {
-							description: O(() => [e.descriptions?.[t] ? (S(), h("span", R, T(e.descriptions[t]), 1)) : m("", !0)]),
-							default: O(() => [v(T(t) + " ", 1)]),
+							default: k(() => [v(T(e), 1)]),
 							_: 2
 						}, 1032, ["value"]))), 128))]),
 						_: 1
@@ -173,99 +206,169 @@ var k = ["id", "for"], A = {
 					_: 1
 				})]),
 				_: 2
-			}, 1032, ["model-value", "open"])]),
-			_: 1
-		}, 8, [
+			}, 1032, [
+				"model-value",
+				"open",
+				"disabled",
+				"required"
+			])]),
+			_: 2
+		}, [t.$slots.error ? {
+			name: "error",
+			fn: k(() => [w(t.$slots, "error")]),
+			key: "0"
+		} : void 0]), 1032, [
 			"label",
-			"tooltip",
-			"label-class",
-			"required",
-			"hide-label"
+			"description",
+			"requirement",
+			"layout",
+			"error-live",
+			"invalid",
+			"disabled"
 		]));
 	}
-}), B = /* @__PURE__ */ b({
+}), L = /* @__PURE__ */ b({
+	name: "LabeledSlider",
 	__name: "LabeledSlider",
 	props: {
-		modelValue: {},
-		label: {},
-		tooltip: {},
-		labelClass: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		inverted: { type: Boolean },
 		min: {},
 		max: {},
 		step: {},
+		minStepsBetweenThumbs: {},
+		variant: {},
+		size: {},
+		marks: {},
+		invalid: { type: Boolean },
+		keepDockOpen: { type: Boolean },
+		motion: {},
+		name: {},
 		required: { type: Boolean },
-		hideLabel: { type: Boolean }
+		label: {},
+		description: {},
+		requirement: {},
+		layout: {},
+		errorLive: {},
+		modelValue: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = t;
-		return (t, r) => (S(), p(I, {
+		let n = e, r = t, i = f(() => {
+			let { label: e, description: t, requirement: r, layout: i, errorLive: a, modelValue: o, ...s } = n;
+			return s;
+		});
+		return (t, n) => (S(), p(P, {
 			label: e.label,
-			tooltip: e.tooltip,
-			"label-class": e.labelClass,
-			required: e.required,
-			"hide-label": e.hideLabel
-		}, {
-			default: O(() => [y(E(c), {
-				"aria-label": e.label,
-				class: "py-2",
-				min: e.min,
-				max: e.max,
-				step: e.step,
+			description: e.description,
+			requirement: e.required ? "required" : e.requirement,
+			layout: e.layout,
+			"error-live": e.errorLive,
+			invalid: e.invalid,
+			disabled: e.disabled,
+			"control-labelable": !1
+		}, _({
+			default: k(({ controlId: t, labelledBy: a, describedBy: o, errorId: s, required: l }) => [y(E(c), x(i.value, {
+				id: t,
 				"model-value": [e.modelValue],
-				"onUpdate:modelValue": r[0] ||= (e) => {
-					e && n("update:modelValue", e[0]);
-				}
-			}, null, 8, [
-				"aria-label",
-				"min",
-				"max",
-				"step",
-				"model-value"
+				"aria-labelledby": a,
+				"aria-describedby": o,
+				"aria-errormessage": s,
+				required: l,
+				"onUpdate:modelValue": n[0] ||= (t) => r("update:modelValue", t?.[0] ?? e.modelValue)
+			}), null, 16, [
+				"id",
+				"model-value",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-errormessage",
+				"required"
 			])]),
-			_: 1
-		}, 8, [
+			_: 2
+		}, [t.$slots.error ? {
+			name: "error",
+			fn: k(() => [w(t.$slots, "error")]),
+			key: "0"
+		} : void 0]), 1032, [
 			"label",
-			"tooltip",
-			"label-class",
-			"required",
-			"hide-label"
+			"description",
+			"requirement",
+			"layout",
+			"error-live",
+			"invalid",
+			"disabled"
 		]));
 	}
-}), V = { class: "flex items-center" }, H = /* @__PURE__ */ b({
+}), R = /* @__PURE__ */ b({
+	name: "LabeledSwitch",
 	__name: "LabeledSwitch",
 	props: {
-		checked: { type: Boolean },
-		label: {},
-		tooltip: {},
-		labelClass: {},
+		defaultValue: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		value: {},
+		size: {},
+		invalid: { type: Boolean },
+		name: {},
 		required: { type: Boolean },
-		hideLabel: { type: Boolean }
+		label: {},
+		description: {},
+		requirement: {},
+		layout: {},
+		errorLive: {},
+		modelValue: { type: Boolean }
 	},
-	emits: ["update:checked"],
+	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = t;
-		return (t, r) => (S(), p(I, {
+		let n = e, r = t, i = f(() => {
+			let { label: e, description: t, requirement: r, layout: i, errorLive: a, invalid: o, modelValue: s, ...c } = n;
+			return c;
+		});
+		return (t, n) => (S(), p(P, {
 			label: e.label,
-			tooltip: e.tooltip,
-			"label-class": e.labelClass,
-			required: e.required,
-			"hide-label": e.hideLabel
-		}, {
-			default: O(({ controlId: t }) => [g("div", V, [y(E(l), {
+			description: e.description,
+			requirement: e.required ? "required" : e.requirement,
+			layout: e.layout,
+			"error-live": e.errorLive,
+			invalid: e.invalid,
+			disabled: e.disabled
+		}, _({
+			default: k(({ controlId: t, labelledBy: a, describedBy: o, errorId: s, required: c }) => [y(E(l), x(i.value, {
 				id: t,
-				"model-value": e.checked,
-				"onUpdate:modelValue": r[0] ||= (e) => n("update:checked", e)
-			}, null, 8, ["id", "model-value"])])]),
-			_: 1
-		}, 8, [
+				"model-value": e.modelValue,
+				"aria-labelledby": a,
+				"aria-describedby": o,
+				"aria-errormessage": s,
+				invalid: e.invalid,
+				required: c,
+				"onUpdate:modelValue": n[0] ||= (e) => r("update:modelValue", e)
+			}), null, 16, [
+				"id",
+				"model-value",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-errormessage",
+				"invalid",
+				"required"
+			])]),
+			_: 2
+		}, [t.$slots.error ? {
+			name: "error",
+			fn: k(() => [w(t.$slots, "error")]),
+			key: "0"
+		} : void 0]), 1032, [
 			"label",
-			"tooltip",
-			"label-class",
-			"required",
-			"hide-label"
+			"description",
+			"requirement",
+			"layout",
+			"error-live",
+			"invalid",
+			"disabled"
 		]));
 	}
 });
 //#endregion
-export { I as LabeledField, L as LabeledInput, z as LabeledSelect, B as LabeledSlider, H as LabeledSwitch };
+export { P as LabeledField, F as LabeledInput, I as LabeledSelect, L as LabeledSlider, R as LabeledSwitch };