@illinois-grad/grad-vue 6.0.5 → 6.0.6

package/custom-elements.json

@@ -2936,6 +2936,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GToggleElement",
+          "tagName": "g-toggle",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "optional": false,
+              "description": "Accessible label"
+            },
+            {
+              "kind": "field",
+              "name": "describedby",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "ID of an element that describes the input"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Error message"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "optional": true,
+              "description": "Disabled"
+            },
+            {
+              "kind": "field",
+              "name": "modelValue",
+              "type": {
+                "text": "boolean"
+              },
+              "optional": true
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/web-components.js",

package/dist/components/GToggle.vue.d.ts

@@ -0,0 +1,71 @@
+/**
+ * A compact two-state toggle for boolean values.
+ *
+ * Arrow keys and the 'y' and 'n' keys can be used to set the value when the
+ * toggle has focus. A `describedby` prop can be passed with an ID to an
+ * element to be used as the `aria-describedby` for the toggle group.
+ *
+ * When the value changes, `v-model` is updated. A `change` event is also
+ * emitted if the value changed from user interaction.
+ *
+ * Slots:
+ * - `label`: Custom label content. Defaults to `label` prop if not provided.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Accessible label
+     * @demo Toggle
+     */
+    label: string;
+    /**
+     * ID of an element that describes the input
+     */
+    describedby?: string;
+    /**
+     * Error message
+     * @demo
+     */
+    error?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+} & {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Accessible label
+     * @demo Toggle
+     */
+    label: string;
+    /**
+     * ID of an element that describes the input
+     */
+    describedby?: string;
+    /**
+     * Error message
+     * @demo
+     */
+    error?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+} & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/{grad-vue-Dfq5ZPeu.js → grad-vue-HOjq8hB5.js}

@@ -4915,10 +4915,75 @@ var xi = { class: "g-table-outer-wrap" }, Si = {
 			}, null, 8, ["errors", "id"])
 		], 2));
 	}
+}), Oo = { class: "g-toggle-wrapper" }, ko = { class: "g-toggle-control" }, Ao = ["for"], jo = [
+	"id",
+	"checked",
+	"disabled",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-errormessage"
+], Mo = ["id"], No = /* @__PURE__ */ u({
+	__name: "GToggle",
+	props: /*@__PURE__*/ m({
+		label: {},
+		describedby: {},
+		error: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m(["change"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = e, r = B(e, "modelValue"), i = t;
+		function l(e) {
+			let t = r.value;
+			r.value = e, e !== t && i("change", {
+				was: t,
+				to: e
+			});
+		}
+		function u(e) {
+			n.disabled || l(e);
+		}
+		function d(e) {
+			e.target instanceof HTMLInputElement && u(e.target.checked);
+		}
+		function f(e) {
+			n.disabled || (e.key === "n" || e.key === "N" || e.key === "ArrowLeft" ? (l(!1), e.preventDefault()) : (e.key === "y" || e.key === "Y" || e.key === "ArrowRight") && (l(!0), e.preventDefault()));
+		}
+		let p = z(), m = z();
+		return (t, n) => (w(), o("div", Oo, [s("div", ko, [s("label", {
+			class: "g-label",
+			for: L(m)
+		}, [k(t.$slots, "label", {}, () => [c(N(e.label), 1)])], 8, Ao), s("div", { class: _(["g-toggle", { "g-has-error": e.error }]) }, [s("div", { class: _(["g-toggle-track", [r.value ? "g-right" : "g-left", { "g-disabled": e.disabled }]]) }, [s("span", {
+			class: _(["g-toggle-thumb", r.value ? "g-right" : "g-left"]),
+			"aria-hidden": "true"
+		}, null, 2), s("input", {
+			id: L(m),
+			type: "checkbox",
+			checked: r.value,
+			disabled: e.disabled,
+			"aria-describedby": e.describedby,
+			"aria-invalid": e.error ? "true" : void 0,
+			"aria-errormessage": e.error ? L(p) + "-error" : void 0,
+			onChange: d,
+			onKeydown: f
+		}, null, 40, jo)], 2)], 2)]), e.error ? (w(), o("div", {
+			key: 0,
+			id: `${L(p)}-error`,
+			class: "g-form-error",
+			role: "alert",
+			"aria-atomic": "true"
+		}, N(e.error), 9, Mo)) : a("", !0)]));
+	}
 });
 //#endregion
 //#region src/compose/useActiveLink.ts
-function Oo(e, t, n) {
+function Po(e, t, n) {
 	let r = [
 		0,
 		.25,
@@ -4955,7 +5020,7 @@ function Oo(e, t, n) {
 }
 //#endregion
 //#region src/compose/useSidebar.ts
-function ko(e = "(max-width: 800px)") {
+function Fo(e = "(max-width: 800px)") {
 	let t = z(), n = D(!1), r = ue(e, { ssrWidth: 1e3 });
 	function i(e) {
 		if (!r.value || !n.value) return;
@@ -4986,41 +5051,41 @@ function ko(e = "(max-width: 800px)") {
 }
 //#endregion
 //#region src/compose/usePaging.ts
-function Ao(e) {
+function Io(e) {
 	let t = /* @__PURE__ */ new Set();
 	return (e ?? []).filter((e) => !e?.key || t.has(e.key) || e.order !== 1 && e.order !== -1 ? !1 : (t.add(e.key), !0));
 }
-function jo(e) {
-	return e == null ? [] : Ao((typeof e == "string" ? e.split(",") : e).filter((e) => e !== null).map((e) => e.trim()).filter(Boolean).map((e) => ({
+function Lo(e) {
+	return e == null ? [] : Io((typeof e == "string" ? e.split(",") : e).filter((e) => e !== null).map((e) => e.trim()).filter(Boolean).map((e) => ({
 		key: e.replace(/^-/, ""),
 		order: e.startsWith("-") ? -1 : 1
 	})));
 }
-function Mo(e) {
-	let t = Ao(e);
+function Ro(e) {
+	let t = Io(e);
 	if (t.length !== 0) return t.map(({ key: e, order: t }) => `${t === -1 ? "-" : ""}${e}`);
 }
-function No(e, t = []) {
-	let n = Ao(e);
+function zo(e, t = []) {
+	let n = Io(e);
 	if (n.length === 0) return;
 	let r = n.map(({ key: e, order: t }) => `${t === -1 ? "-" : ""}${e}`), i = new Set(n.map(({ key: e }) => String(e))), a = n.length === 1 && n[0].order === -1 ? "-" : "";
 	return t.forEach((e) => {
 		i.has(e) || r.push(`${a}${e}`);
 	}), r.join(",");
 }
-function Po(e) {
+function Bo(e) {
 	return Array.isArray(e) ? [...e] : e;
 }
-function Fo(e, t) {
+function Vo(e, t) {
 	return Array.isArray(e) || Array.isArray(t) ? !Array.isArray(e) || !Array.isArray(t) ? !1 : e.length === t.length && e.every((e, n) => e === t[n]) : e === t;
 }
-function Io(e, t) {
+function Ho(e, t) {
 	return e.length === t.length && e.every((e, n) => {
 		let r = t[n];
 		return e.key === r?.key && e.order === r?.order;
 	});
 }
-function Lo(e, t) {
+function Uo(e, t) {
 	if (typeof e == "string") return Number(e);
 	if (Array.isArray(e)) {
 		let n = e.find((e) => e !== null);
@@ -5028,35 +5093,35 @@ function Lo(e, t) {
 	}
 	return t;
 }
-function Ro(e = {}) {
+function Wo(e = {}) {
 	let t = e.defaultPageSize ?? 50, n = e.defaultPageOffset ?? 0, i = e.sortKey ?? "sort", a = e.pageSizeKey ?? "pageSize", o = e.pageOffsetKey ?? "pageOffset", s = M([]), c = D(t), l = D(n);
 	return e.route && e.router && (G(() => e.route?.query[i], (e) => {
-		let t = jo(e);
-		Io(s.value, t) || (s.value = t);
+		let t = Lo(e);
+		Ho(s.value, t) || (s.value = t);
 	}, { immediate: !0 }), G(() => e.route?.query[a], (e) => {
-		let n = Lo(e, t);
+		let n = Uo(e, t);
 		c.value !== n && (c.value = n);
 	}, { immediate: !0 }), G(() => e.route?.query[o], (e) => {
-		let t = Lo(e, n);
+		let t = Uo(e, n);
 		l.value !== t && (l.value = t);
 	}, { immediate: !0 }), G([
 		s,
 		c,
 		l
 	], ([r, s, c]) => {
-		let l = { ...e.route.query }, u = Mo(r);
-		u === void 0 ? delete l[i] : l[i] = Po(u), s === t || s === void 0 ? delete l[a] : l[a] = String(s), c === n || c === void 0 ? delete l[o] : l[o] = String(c);
+		let l = { ...e.route.query }, u = Ro(r);
+		u === void 0 ? delete l[i] : l[i] = Bo(u), s === t || s === void 0 ? delete l[a] : l[a] = String(s), c === n || c === void 0 ? delete l[o] : l[o] = String(c);
 		let d = /* @__PURE__ */ new Set([...Object.keys(e.route.query), ...Object.keys(l)]), f = !1;
-		for (let t of d) if (!Fo(e.route.query[t], l[t])) {
+		for (let t of d) if (!Vo(e.route.query[t], l[t])) {
 			f = !0;
 			break;
 		}
 		f && e.router.replace({ query: l });
 	})), {
 		sort: r({
-			get: () => Ao(s.value),
+			get: () => Io(s.value),
 			set: (e) => {
-				s.value = Ao(e);
+				s.value = Io(e);
 			}
 		}),
 		pageSize: c,
@@ -5065,7 +5130,7 @@ function Ro(e = {}) {
 }
 //#endregion
 //#region src/compose/useTableChanges.ts
-function zo() {
+function Go() {
 	let e = j(/* @__PURE__ */ new Map()), t = re(), n = (n) => {
 		let r = n.column.key, i = n.row.key, a = n.value, o = n.previousValue;
 		e.has(i) || e.set(i, j(/* @__PURE__ */ new Map()));
@@ -5169,7 +5234,7 @@ function zo() {
 }
 //#endregion
 //#region src/compose/usePersistentTableColumnState.ts
-function Bo(e, t) {
+function Ko(e, t) {
 	if (!e || typeof e != "object" || Array.isArray(e)) return {};
 	let n = new Set(t.map(({ key: e }) => String(e))), r = {};
 	for (let [t, i] of Object.entries(e)) {
@@ -5179,13 +5244,13 @@ function Bo(e, t) {
 	}
 	return r;
 }
-function Vo(e, t) {
+function qo(e, t) {
 	let n = le(e, {});
 	return G(() => I(t).map(({ key: e }) => String(e)), () => {
-		n.value = Bo(n.value, I(t));
+		n.value = Ko(n.value, I(t));
 	}, { immediate: !0 }), { columnState: n };
 }
 //#endregion
-export { lt as $, vi as A, An as B, Fa as C, ui as D, fi as E, kr as F, mn as G, Tn as H, pr as I, Yt as J, ln as K, Qn as L, bi as M, yi as N, _i as O, Br as P, _t as Q, Ln as R, za as S, Oa as T, Cn as U, kn as V, Sn as W, kt as X, Ft as Y, wt as Z, to as _, jo as a, Be as at, Ga as b, ko as c, ke as ct, xo as d, xe as dt, it as et, bo as f, Q as ft, no as g, lo as h, Ao as i, Ye as it, pi as j, di as k, Oo as l, Oe as lt, uo as m, zo as n, nt, Mo as o, $ as ot, vo as p, on as q, No as r, Je as rt, Ro as s, je as st, Vo as t, rt as tt, Do as u, Se as ut, eo as v, Pa as w, Va as x, Ya as y, Mn as z };
+export { _t as $, di as A, Mn as B, za as C, fi as D, Oa as E, Br as F, Sn as G, kn as H, kr as I, on as J, mn as K, pr as L, pi as M, bi as N, ui as O, yi as P, wt as Q, Qn as R, Va as S, Pa as T, Tn as U, An as V, Cn as W, Ft as X, Yt as Y, kt as Z, no as _, Lo as a, Ye as at, Ya as b, Fo as c, je as ct, Do as d, Se as dt, lt as et, xo as f, xe as ft, lo as g, uo as h, Io as i, Je as it, vi as j, _i as k, Po as l, ke as lt, vo as m, Go as n, rt as nt, Ro as o, Be as ot, bo as p, Q as pt, ln as q, zo as r, nt as rt, Wo as s, $ as st, qo as t, it as tt, No as u, Oe as ut, to as v, Fa as w, Ga as x, eo as y, Ln as z };
 
-//# sourceMappingURL=grad-vue-Dfq5ZPeu.js.map
+//# sourceMappingURL=grad-vue-HOjq8hB5.js.map