@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/labeled-field.js

@@ -1,197 +1,204 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { a as n, c as r, i, o as a, r as o, s } from "./select-BIv4R3Ir.js";
-import { n as c } from "./slider-Cc_qw6GA.js";
-import { t as l } from "./switch-Boj4Ucn5.js";
-import { t as u } from "./Input-B4WQ_CMc.js";
-import { t as d } from "./icon-tooltip-CO6rw0dZ.js";
-import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as v, createTextVNode as y, createVNode as b, defineComponent as x, mergeProps as S, normalizeClass as C, normalizeStyle as w, openBlock as T, renderList as E, renderSlot as D, toDisplayString as O, unref as k, useAttrs as A, useId as j, withCtx as M } 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 N = ["id", "for"], P = {
-	key: 0,
-	class: "text-destructive",
-	"aria-hidden": "true"
-}, F = ["id", "for"], I = {
-	key: 0,
-	class: "text-destructive",
-	"aria-hidden": "true"
-}, L = {
-	key: 2,
-	class: "labeled-field-row"
-}, R = { class: "labeled-field-action" }, z = ["id", "aria-live"], B = /* @__PURE__ */ t(/* @__PURE__ */ x({
+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 },
-		errorLive: { default: "polite" },
-		hideLabel: { type: Boolean },
-		horizontal: { type: Boolean }
+		description: {},
+		requirement: {},
+		layout: { default: "default" },
+		errorLive: { default: "polite" }
 	},
-	setup(t) {
-		let n = j(), r = j(), i = j();
-		return (a, o) => (T(), g("div", { class: C(k(e)("labeled-field", t.horizontal && "labeled-field--horizontal")) }, [
-			t.tooltip && !t.hideLabel ? (T(), m(k(d), {
-				key: 0,
-				text: t.tooltip
-			}, {
-				default: M(() => [_("label", {
-					id: k(i),
-					for: k(r),
-					class: C(k(e)("labeled-field-label", t.labelClass))
-				}, [y(O(t.label), 1), t.required ? (T(), g("span", P, " *")) : h("", !0)], 10, N)]),
-				_: 1
-			}, 8, ["text"])) : (T(), g("label", {
-				key: 1,
-				id: k(i),
-				for: k(r),
-				class: C(k(e)(t.hideLabel ? "sr-only" : "labeled-field-label", t.labelClass))
-			}, [y(O(t.label), 1), t.required ? (T(), g("span", I, " *")) : h("", !0)], 10, F)),
-			a.$slots.action ? (T(), g("div", L, [D(a.$slots, "default", {
-				errorId: k(n),
-				controlId: k(r),
-				labelledBy: k(i)
-			}, void 0, !0), _("div", R, [D(a.$slots, "action", { controlId: k(r) }, void 0, !0)])])) : D(a.$slots, "default", {
-				key: 3,
-				errorId: k(n),
-				controlId: k(r),
-				labelledBy: k(i)
-			}, void 0, !0),
-			a.$slots.error ? (T(), g("div", {
-				key: 4,
-				id: k(n),
-				class: "labeled-field-error",
-				"aria-live": t.errorLive === "off" ? void 0 : t.errorLive
-			}, [D(a.$slots, "error", {}, void 0, !0)], 8, z)) : h("", !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-75b9b63c"]]), V = /* @__PURE__ */ x({
-	inheritAttrs: !1,
+}), [["__scopeId", "data-v-2095a7b2"]]), F = /* @__PURE__ */ b({
+	name: "LabeledInput",
 	__name: "LabeledInput",
 	props: {
-		modelValue: {},
-		label: {},
-		tooltip: {},
-		labelClass: {},
-		inputClass: {},
-		type: {},
 		autocomplete: {},
-		inputmode: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
 		enterkeyhint: {},
+		form: {},
+		inputmode: {},
+		invalid: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		modelValue: {},
+		name: {},
 		pattern: {},
 		placeholder: {},
+		readonly: { type: Boolean },
 		required: { type: Boolean },
+		size: {},
+		type: {},
+		label: {},
+		description: {},
+		requirement: {},
+		layout: {},
 		errorLive: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = A(), r = p(() => {
-			let { class: e, style: t, ...r } = n;
-			return r;
-		}), i = t;
-		return (t, n) => (T(), m(B, {
-			class: C(t.$attrs.class),
-			style: w(t.$attrs.style),
+		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,
-			"error-live": e.errorLive
-		}, v({
-			default: M(({ errorId: a, controlId: o }) => [b(k(u), S(r.value, {
-				id: o,
-				type: e.type ?? "text",
-				autocomplete: e.autocomplete,
-				inputmode: e.inputmode,
-				enterkeyhint: e.enterkeyhint,
-				pattern: e.pattern,
-				placeholder: e.placeholder,
-				class: e.inputClass ?? "fira-code",
-				"model-value": e.modelValue,
-				required: e.required,
-				"aria-errormessage": t.$slots.error ? a : void 0,
-				"onUpdate:modelValue": n[0] ||= (e) => i("update:modelValue", e)
+			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: 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",
-				"autocomplete",
-				"inputmode",
-				"enterkeyhint",
-				"pattern",
-				"placeholder",
-				"class",
-				"model-value",
-				"required",
-				"aria-errormessage"
+				"aria-describedby",
+				"aria-errormessage",
+				"required"
 			])]),
 			_: 2
 		}, [t.$slots.error ? {
 			name: "error",
-			fn: M(() => [D(t.$slots, "error")]),
+			fn: k(() => [w(t.$slots, "error")]),
 			key: "0"
 		} : void 0]), 1032, [
-			"class",
-			"style",
 			"label",
-			"tooltip",
-			"label-class",
-			"required",
-			"error-live"
+			"description",
+			"requirement",
+			"layout",
+			"error-live",
+			"invalid",
+			"disabled"
 		]));
 	}
-}), H = {
-	key: 0,
-	class: "ml-auto pl-2 text-micro text-muted-foreground whitespace-nowrap"
-}, U = /* @__PURE__ */ x({
+}), 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) => (T(), m(B, {
+		return (t, l) => (S(), p(P, {
 			label: e.label,
-			tooltip: e.tooltip,
-			"label-class": e.labelClass,
-			required: e.required,
-			"hide-label": e.hideLabel
-		}, {
-			default: M(({ controlId: t }) => [b(k(r), {
+			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: M(() => [b(k(a), {
+				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: M(() => [b(k(s))]),
+					default: k(() => [y(E(s), { placeholder: e.placeholder }, null, 8, ["placeholder"])]),
 					_: 1
-				}, 8, ["id"]), b(k(n), null, {
-					default: M(() => [b(k(i), { class: "fira-code" }, {
-						default: M(() => [(T(!0), g(f, null, E(e.items, (t) => (T(), m(k(o), {
-							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: M(() => [e.descriptions?.[t] ? (T(), g("span", H, O(e.descriptions[t]), 1)) : h("", !0)]),
-							default: M(() => [y(O(t) + " ", 1)]),
+							default: k(() => [v(T(e), 1)]),
 							_: 2
 						}, 1032, ["value"]))), 128))]),
 						_: 1
@@ -199,99 +206,169 @@ var N = ["id", "for"], P = {
 					_: 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"
 		]));
 	}
-}), W = /* @__PURE__ */ x({
+}), 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) => (T(), m(B, {
+		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: M(() => [b(k(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"
 		]));
 	}
-}), G = { class: "flex items-center" }, K = /* @__PURE__ */ x({
+}), 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) => (T(), m(B, {
+		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: M(({ controlId: t }) => [_("div", G, [b(k(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 { B as LabeledField, V as LabeledInput, U as LabeledSelect, W as LabeledSlider, K as LabeledSwitch };
+export { P as LabeledField, F as LabeledInput, I as LabeledSelect, L as LabeledSlider, R as LabeledSwitch };