@quidgest/ui 0.25.0 → 0.27.0

package/esm/components/QPopover/QPopover.vue.js

@@ -1,13 +1,14 @@
-import { QOverlay as e } from "../QOverlay/index.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+import { useId as e } from "../../composables/useId/index.js";
+import { QOverlay as t } from "../QOverlay/index.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, toRef as g, unref as _, useAttrs as v, useModel as y, useSlots as b, withCtx as x } from "vue";
 //#region src/components/QPopover/QPopover.vue?vue&type=script&setup=true&lang.ts
-var v = { class: "q-popover__content" }, y = {
+var S = { class: "q-popover__content" }, C = {
 	key: 0,
 	class: "q-popover__header"
-}, b = ["innerHTML"], x = { key: 1 }, S = /*@__PURE__*/ c({
+}, w = ["innerHTML"], T = { key: 1 }, E = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "QPopover",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ u({
 		id: {},
 		class: {},
 		anchor: {},
@@ -31,37 +32,59 @@ var v = { class: "q-popover__content" }, y = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(c) {
-		let l = c, S = g(c, "modelValue"), C = n(() => l.headingLevel >= 1 && l.headingLevel <= 6 ? "h" + l.headingLevel : "div");
-		return (n, c) => (d(), r(h(e), {
-			id: l.id,
-			modelValue: S.value,
-			"onUpdate:modelValue": c[0] ||= (e) => S.value = e,
-			class: u(["q-popover", l.class]),
+	setup(l) {
+		let u = l, E = y(l, "modelValue"), D = e(g(u, "id")), O = b(), k = v(), A = r(() => `${D.value}_title`), j = r(() => u.headingLevel >= 1 && u.headingLevel <= 6 ? "h" + u.headingLevel : "div");
+		function M() {
+			return !!u.title && !O.header;
+		}
+		function N() {
+			if (M()) return A.value;
+			if (u.title) return;
+			let e = k["aria-labelledby"];
+			return typeof e == "string" && e ? e : void 0;
+		}
+		function P() {
+			if (M()) return;
+			if (u.title) return u.title;
+			let e = k["aria-label"];
+			return typeof e == "string" && e ? e : void 0;
+		}
+		return (e, r) => (f(), i(_(t), {
+			id: _(D),
+			modelValue: E.value,
+			"onUpdate:modelValue": r[0] ||= (e) => E.value = e,
+			class: d(["q-popover", u.class]),
+			"aria-labelledby": N(),
+			"aria-label": P(),
 			trigger: "click",
-			anchor: l.anchor,
-			arrow: l.arrow,
-			attach: l.attach,
-			inline: l.inline,
-			disabled: l.disabled,
-			placement: l.placement
+			anchor: u.anchor,
+			arrow: u.arrow,
+			attach: u.attach,
+			inline: u.inline,
+			disabled: u.disabled,
+			placement: u.placement
 		}, {
-			default: _(() => [o("div", v, [l.title || n.$slots.header ? (d(), a("div", y, [n.$slots.header ? f(n.$slots, "header", { key: 0 }) : (d(), a(t, { key: 1 }, [
-				f(n.$slots, "header.prepend"),
-				(d(), r(p(C.value), { class: "q-popover__title" }, {
-					default: _(() => [s(m(l.title), 1)]),
+			default: x(() => [s("div", S, [u.title || e.$slots.header ? (f(), o("div", C, [e.$slots.header ? p(e.$slots, "header", { key: 0 }) : (f(), o(n, { key: 1 }, [
+				p(e.$slots, "header.prepend"),
+				(f(), i(m(j.value), {
+					id: A.value,
+					class: "q-popover__title"
+				}, {
+					default: x(() => [c(h(u.title), 1)]),
 					_: 1
-				})),
-				f(n.$slots, "header.append")
-			], 64))])) : i("v-if", !0), f(n.$slots, "default", {}, () => [l.text ? (d(), a(t, { key: 0 }, [l.html ? (d(), a("span", {
+				}, 8, ["id"])),
+				p(e.$slots, "header.append")
+			], 64))])) : a("v-if", !0), p(e.$slots, "default", {}, () => [u.text ? (f(), o(n, { key: 0 }, [u.html ? (f(), o("span", {
 				key: 0,
-				innerHTML: l.text
-			}, null, 8, b)) : (d(), a("span", x, m(l.text), 1))], 64)) : i("v-if", !0)])])]),
+				innerHTML: u.text
+			}, null, 8, w)) : (f(), o("span", T, h(u.text), 1))], 64)) : a("v-if", !0)])])]),
 			_: 3
 		}, 8, [
 			"id",
 			"modelValue",
 			"class",
+			"aria-labelledby",
+			"aria-label",
 			"anchor",
 			"arrow",
 			"attach",
@@ -72,4 +95,4 @@ var v = { class: "q-popover__content" }, y = {
 	}
 });
 //#endregion
-export { S as default };
+export { E as default };

package/esm/components/QProgress/QProgress.vue.js

@@ -1,5 +1,5 @@
-import { useColor as e } from "../../composables/useColor/index.js";
-import { useId as t } from "../../composables/useId/index.js";
+import { useId as e } from "../../composables/useId/index.js";
+import { useColor as t } from "../../composables/useColor/index.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, toDisplayString as m, toRef as h, unref as g, useModel as _, watch as v } from "vue";
 //#region src/components/QProgress/QProgress.vue?vue&type=script&setup=true&lang.ts
 var y = ["id"], b = [
@@ -58,7 +58,7 @@ var y = ["id"], b = [
 	}),
 	emits: ["update:modelValue"],
 	setup(o) {
-		let s = o, E = _(o, "modelValue"), { style: D } = e(h(s, "color")), O = t(h(s, "id")), k = n(() => Number.isFinite(s.min) ? s.min < s.max ? s.min : s.max : 0), A = n(() => Number.isFinite(s.max) ? s.max > s.min ? s.max : s.min === s.max ? s.max + 1 : s.min : k.value + 1), j = n(() => Number.isNaN(E.value) ? 0 : E.value < k.value ? k.value : E.value > A.value ? A.value : E.value), M = n(() => Number(((j.value - k.value) / (A.value - k.value) * 100).toFixed(2))), N = n(() => ["q-progress", s.class]), P = n(() => ["q-progress__bar", { "q-progress__bar--mini": s.mini }]), F = n(() => ["q-progress__fill", {
+		let s = o, E = _(o, "modelValue"), { style: D } = t(h(s, "color")), O = e(h(s, "id")), k = n(() => Number.isFinite(s.min) ? s.min < s.max ? s.min : s.max : 0), A = n(() => Number.isFinite(s.max) ? s.max > s.min ? s.max : s.min === s.max ? s.max + 1 : s.min : k.value + 1), j = n(() => Number.isNaN(E.value) ? 0 : E.value < k.value ? k.value : E.value > A.value ? A.value : E.value), M = n(() => Number(((j.value - k.value) / (A.value - k.value) * 100).toFixed(2))), N = n(() => ["q-progress", s.class]), P = n(() => ["q-progress__bar", { "q-progress__bar--mini": s.mini }]), F = n(() => ["q-progress__fill", {
 			"q-progress__fill--striped": s.striped,
 			"q-progress__fill--animated": s.animated && M.value < 100
 		}]), I = n(() => ({ width: `${M.value}%` })), L = n(() => {

package/esm/components/QPropertyList/QPropertyList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QPropertyList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyList.vue"],"names":[],"mappings":"AAyDA;AA2NC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM1D,OAAO,KAAK,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,GAAG,CAAA;AAiKzF,iBAAS,cAAc;WAiIT,OAAO,IAA6B;;;UAbqC,GAAG;;;;;;;;;;YAE9D,GAAG;;;;;;EAgB9B;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QPropertyList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyList.vue"],"names":[],"mappings":"AA+DA;AAyPC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAS1D,OAAO,KAAK,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,GAAG,CAAA;AAsLzF,iBAAS,cAAc;WA8IT,OAAO,IAA6B;;;UAbqC,GAAG;;;;;;;;;;YAE9D,GAAG;;;;;;EAgB9B;AAyBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QPropertyList/QPropertyList.vue.js

@@ -1,8 +1,9 @@
-import { DEFAULT_ICONS as e, DEFAULT_TEXTS as t } from "./constants.js";
-import { QPropertyListGroup as n, QPropertyListPanel as r, QPropertyListRow as i } from "./index.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, renderSlot as _, unref as v, watch as y, withCtx as b } from "vue";
+import { useId as e } from "../../composables/useId/index.js";
+import { DEFAULT_ICONS as t, DEFAULT_TEXTS as n } from "./constants.js";
+import { QPropertyListGroup as r, QPropertyListPanel as i, QPropertyListRow as a } from "./index.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, watch as S, withCtx as C } from "vue";
 //#region src/components/QPropertyList/QPropertyList.vue?vue&type=script&setup=true&lang.ts
-var x = ["id"], S = { class: "q-property-list__table" }, C = /*@__PURE__*/ d({
+var w = ["id"], T = { class: "q-property-list__table" }, E = { class: "q-property-list__header" }, D = { scope: "col" }, O = { class: "q-sr-only" }, k = { scope: "col" }, A = { class: "q-sr-only" }, j = /*@__PURE__*/ f({
 	__name: "QPropertyList",
 	props: {
 		id: {},
@@ -14,78 +15,87 @@ var x = ["id"], S = { class: "q-property-list__table" }, C = /*@__PURE__*/ d({
 		noPanel: { type: Boolean },
 		noToggle: { type: Boolean },
 		readonly: { type: Boolean },
-		icons: { default: () => e },
-		texts: { default: () => t }
+		icons: { default: () => t },
+		texts: { default: () => n }
 	},
 	emits: ["field-change", "select-field"],
-	setup(e, { emit: t }) {
-		let d = e, C = t, w = h(d.groups.map((e) => e.id)), T = h(void 0), E = h(null), D = o(() => d.groups.length ? d.groups.filter((e) => d.fields.some((t) => t.group === e.id)) : [{
+	setup(t, { emit: n }) {
+		let f = t, j = n, M = e(b(f, "id")), N = g([]);
+		S(() => f.groups.map((e) => e.id), (e, t) => {
+			let n = new Set(e);
+			N.value = N.value.filter((e) => n.has(e));
+			let r = new Set(t ?? []);
+			for (let t of e) !r.has(t) && !N.value.includes(t) && N.value.push(t);
+		}, { immediate: !0 });
+		let P = g(void 0), F = g(null), I = s(() => f.groups.length ? f.groups.filter((e) => f.fields.some((t) => t.group === e.id)) : [{
 			id: "",
 			title: ""
-		}]), O = o(() => [
+		}]), L = s(() => [
 			"q-property-list",
 			{
-				"q-property-list--side-panel": d.panelPosition === "right",
-				"q-property-list--block": d.block
+				"q-property-list--side-panel": f.panelPosition === "right",
+				"q-property-list--block": f.block
 			},
-			d.class
+			f.class
 		]);
-		function k() {
-			E.value?.contains(document.activeElement) || (T.value = void 0);
+		function R() {
+			F.value?.contains(document.activeElement) || (P.value = void 0);
 		}
-		function A(e) {
-			return e ? d.fields.filter((t) => t.group === e) : d.fields;
+		function z(e) {
+			return e ? f.fields.filter((t) => t.group === e) : f.fields;
 		}
-		function j(e) {
-			let t = w.value.indexOf(e);
-			t === -1 ? w.value.push(e) : w.value.splice(t, 1);
+		function B(e, t) {
+			let n = N.value.includes(e);
+			t && !n ? N.value.push(e) : !t && n && (N.value = N.value.filter((t) => t !== e));
 		}
-		function M(e) {
-			return [{ "q-property-list__row--selected": T.value?.id === e.id }];
+		function V(e) {
+			return [{ "q-property-list__row--selected": P.value?.id === e.id }];
 		}
-		function N(e) {
-			T.value = e, C("select-field", T.value.id);
+		function H(e) {
+			P.value = e, j("select-field", P.value.id);
 		}
-		function P(e, t) {
-			d.readonly || (e.props.readonly ?? !1) || C("field-change", e, t);
+		function U(e, t) {
+			f.readonly || (e.props.readonly ?? !1) || j("field-change", e, t);
 		}
-		function F() {
-			if (!E.value) return;
-			let e = E.value.offsetWidth;
-			E.value.style.minWidth = `${e}px`;
+		function W() {
+			if (!F.value) return;
+			let e = F.value.offsetWidth;
+			F.value.style.minWidth = `${e}px`;
 		}
-		return y(() => d.block, async (e) => {
-			await f(), e ? E.value?.removeAttribute("style") : F();
-		}, { immediate: !0 }), (e, t) => (m(), l("div", {
-			id: d.id,
+		return S(() => f.block, async (e) => {
+			await p(), e ? F.value?.removeAttribute("style") : W();
+		}, { immediate: !0 }), (e, t) => (h(), u("div", {
+			id: x(M),
 			ref_key: "componentRoot",
-			ref: E,
+			ref: F,
 			tabindex: "0",
-			class: p(O.value),
-			onFocusout: k
-		}, [u("table", S, [t[0] ||= u("thead", { class: "q-property-list__header" }, [u("tr", null, [u("th", { colspan: "2" })])], -1), u("tbody", null, [(m(!0), l(a, null, g(D.value, (t) => (m(), l(a, { key: t.id }, [t.title ? (m(), s(v(n), {
+			class: m(L.value),
+			onFocusout: R
+		}, [d("table", T, [d("thead", E, [d("tr", null, [d("th", D, [d("span", O, y(f.texts.property), 1)]), d("th", k, [d("span", A, y(f.texts.value), 1)])])]), d("tbody", null, [(h(!0), u(o, null, _(I.value, (t) => (h(), u(o, { key: t.id }, [t.title ? (h(), c(x(r), {
 			key: 0,
 			"data-key": t.id,
 			title: t.title,
-			icons: d.icons,
-			"no-toggle": d.noToggle,
-			onClick: () => j(t.id ?? "")
+			icons: f.icons,
+			"no-toggle": f.noToggle,
+			open: N.value.includes(t.id ?? ""),
+			"onUpdate:open": (e) => B(t.id ?? "", e)
 		}, null, 8, [
 			"data-key",
 			"title",
 			"icons",
 			"no-toggle",
-			"onClick"
-		])) : c("v-if", !0), t.id === "" || w.value.includes(t.id ?? "") ? (m(!0), l(a, { key: 1 }, g(A(t.id), (t) => (m(), s(v(i), {
+			"open",
+			"onUpdate:open"
+		])) : l("v-if", !0), t.id === "" || N.value.includes(t.id ?? "") ? (h(!0), u(o, { key: 1 }, _(z(t.id), (t) => (h(), c(x(a), {
 			key: t.id,
-			class: p(M(t)),
+			class: m(V(t)),
 			field: t,
 			"model-value": t.props.modelValue,
-			readonly: d.readonly,
-			onFocus: N,
-			onFieldChange: (e) => P(t, e)
+			readonly: f.readonly,
+			onFocus: H,
+			onFieldChange: (e) => U(t, e)
 		}, {
-			default: b(() => [_(e.$slots, t.id, { field: t })]),
+			default: C(() => [v(e.$slots, t.id, { field: t })]),
 			_: 2
 		}, 1032, [
 			"class",
@@ -93,18 +103,18 @@ var x = ["id"], S = { class: "q-property-list__table" }, C = /*@__PURE__*/ d({
 			"model-value",
 			"readonly",
 			"onFieldChange"
-		]))), 128)) : c("v-if", !0)], 64))), 128))])]), d.noPanel ? c("v-if", !0) : (m(), s(v(r), {
+		]))), 128)) : l("v-if", !0)], 64))), 128))])]), f.noPanel ? l("v-if", !0) : (h(), c(x(i), {
 			key: 0,
-			field: T.value,
-			texts: d.texts
+			field: P.value,
+			texts: f.texts
 		}, {
-			default: b(() => [T.value ? _(e.$slots, "panel", {
+			default: C(() => [P.value ? v(e.$slots, "panel", {
 				key: 0,
-				field: T.value
-			}) : c("v-if", !0)]),
+				field: P.value
+			}) : l("v-if", !0)]),
 			_: 3
-		}, 8, ["field", "texts"]))], 42, x));
+		}, 8, ["field", "texts"]))], 42, w));
 	}
 });
 //#endregion
-export { C as default };
+export { j as default };

package/esm/components/QPropertyList/QPropertyListGroup.d.ts

@@ -1,9 +1,13 @@
 import { DEFAULT_ICONS } from './constants';
 import { QPropertyListGroupProps } from '.';
-declare const _default: import('vue').DefineComponent<QPropertyListGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    click: () => any;
-}, string, import('vue').PublicProps, Readonly<QPropertyListGroupProps> & Readonly<{
-    onClick?: (() => any) | undefined;
+type __VLS_Props = QPropertyListGroupProps;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icons: typeof DEFAULT_ICONS;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;

package/esm/components/QPropertyList/QPropertyListGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QPropertyListGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListGroup.vue"],"names":[],"mappings":"AAsBA;AAwEC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAU3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,GAAG,CAAA;;;;;;;;AA6HjD,wBASG"}
+{"version":3,"file":"QPropertyListGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListGroup.vue"],"names":[],"mappings":"AAsBA;AAoEC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAU3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,GAAG,CAAA;AAKhD,KAAK,WAAW,GAAG,uBAAuB,CAAC;AAiC5C,KAAK,iBAAiB,GAAG;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,WAAW,CAAC;;;;;;;;AA6FhB,wBASG"}

package/esm/components/QPropertyList/QPropertyListGroup.vue.js

@@ -1,47 +1,50 @@
-import { QButton as e } from "../QButton/index.js";
-import { QIcon as t } from "../QIcon/index.js";
-import { useId as n } from "../../composables/useId/index.js";
+import { useId as e } from "../../composables/useId/index.js";
+import { QButton as t } from "../QButton/index.js";
+import { QIcon as n } from "../QIcon/index.js";
 import { DEFAULT_ICONS as r } from "./constants.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, ref as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeModels as p, normalizeClass as m, normalizeProps as h, openBlock as g, toDisplayString as _, toRef as v, unref as y, useModel as b, withCtx as x } from "vue";
 //#region src/components/QPropertyList/QPropertyListGroup.vue?vue&type=script&setup=true&lang.ts
-var b = ["id", "aria-labelledby"], x = ["id"], S = { class: "q-property-list-group__content" }, C = /*@__PURE__*/ d({
+var S = ["id"], C = { colspan: "2" }, w = { class: "q-property-list-group__content" }, T = /*@__PURE__*/ d({
 	__name: "QPropertyListGroup",
-	props: {
+	props: /*@__PURE__*/ p({
 		id: {},
 		class: {},
 		title: {},
 		noToggle: { type: Boolean },
 		icons: { default: () => r },
 		texts: {}
-	},
-	emits: ["click"],
-	setup(r, { emit: d }) {
-		let C = r, w = d, T = g(!0), E = n(), D = i(() => T.value ? C.icons.open : C.icons.close), O = i(() => [
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(r) {
+		let d = r, p = b(r, "open"), T = e(v(d, "id")), E = a(() => p.value ? d.icons.open : d.icons.close), D = a(() => [
 			"q-property-list-group",
-			{ "q-property-list-group--no-toggle": C.noToggle },
-			C.class
+			{ "q-property-list-group--no-toggle": d.noToggle },
+			d.class
 		]);
-		function k() {
-			C.noToggle || (T.value = !T.value, w("click"));
+		function O() {
+			d.noToggle || (p.value = !p.value);
 		}
-		return (n, r) => (h(), s("tr", {
-			id: C.id,
-			class: p(O.value),
-			role: "group",
-			"aria-labelledby": v(E),
-			onClick: k
-		}, [c("td", {
-			id: v(E),
-			colspan: "2"
-		}, [c("div", S, [C.noToggle ? o("v-if", !0) : (h(), a(v(e), {
+		return (e, r) => (g(), s("tr", {
+			id: y(T),
+			class: m(D.value),
+			onClick: O
+		}, [c("td", C, [c("div", w, [d.noToggle ? (g(), s(i, { key: 1 }, [l(_(d.title), 1)], 64)) : (g(), o(y(t), {
 			key: 0,
 			variant: "text",
-			onClick: k
+			label: d.title,
+			"aria-expanded": p.value,
+			onClick: O
 		}, {
-			default: y(() => [u(v(t), m(f(D.value)), null, 16)]),
+			default: x(() => [u(y(n), h(f(E.value)), null, 16)]),
 			_: 1
-		})), l(" " + _(C.title), 1)])], 8, x)], 10, b));
+		}, 8, ["label", "aria-expanded"]))])])], 10, S));
 	}
 });
 //#endregion
-export { C as default };
+export { T as default };

package/esm/components/QPropertyList/QPropertyListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QPropertyListPanel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListPanel.vue"],"names":[],"mappings":"AAiBA;AAgCC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAG3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,GAAG,CAAA;AAYjD,iBAAS,cAAc;WAyCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;wFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QPropertyListPanel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListPanel.vue"],"names":[],"mappings":"AAiBA;AAwCC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAM3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,GAAG,CAAA;AAiBjD,iBAAS,cAAc;WAyCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;wFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QPropertyList/QPropertyListPanel.vue.js

@@ -1,25 +1,26 @@
-import { DEFAULT_TEXTS as e } from "./constants.js";
-import { createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+import { useId as e } from "../../composables/useId/index.js";
+import { DEFAULT_TEXTS as t } from "./constants.js";
+import { createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c, toRef as l, unref as u } from "vue";
 //#region src/components/QPropertyList/QPropertyListPanel.vue?vue&type=script&setup=true&lang.ts
-var c = ["id"], l = { class: "q-property-list-panel__label" }, u = { class: "q-property-list-panel__description" }, d = {
+var d = ["id"], f = { class: "q-property-list-panel__label" }, p = { class: "q-property-list-panel__description" }, m = {
 	key: 1,
 	class: "q-property-list-panel__empty"
-}, f = /*@__PURE__*/ r({
+}, h = /*@__PURE__*/ i({
 	__name: "QPropertyListPanel",
 	props: {
 		id: {},
 		class: {},
 		field: {},
 		icons: {},
-		texts: { default: () => e }
+		texts: { default: () => t }
 	},
-	setup(e) {
-		let r = e;
-		return (e, f) => (a(), t("div", {
-			id: r.id,
-			class: i(["q-property-list-panel", r.class])
-		}, [r.field ? o(e.$slots, "default", { key: 0 }, () => [n("div", l, s(r.field.label), 1), n("div", u, s(r.field.description), 1)]) : (a(), t("div", d, s(r.texts.emptyMessage), 1))], 10, c));
+	setup(t) {
+		let i = t, h = e(l(i, "id"));
+		return (e, t) => (o(), n("div", {
+			id: u(h),
+			class: a(["q-property-list-panel", i.class])
+		}, [i.field ? s(e.$slots, "default", { key: 0 }, () => [r("div", f, c(i.field.label), 1), r("div", p, c(i.field.description), 1)]) : (o(), n("div", m, c(i.texts.emptyMessage), 1))], 10, d));
 	}
 });
 //#endregion
-export { f as default };
+export { h as default };

package/esm/components/QPropertyList/QPropertyListRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QPropertyListRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListRow.vue"],"names":[],"mappings":"AAgCA;AAyGC,OAAO,KAAK,EAAE,kBAAkB,EAAyB,MAAM,GAAG,CAAA;yBAKjD,CAAC,eACL,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA6K1D,mBAAmB,CAAC;;;;;qBA9Gf,CAAC;;;;;oBA8GgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArCkB,GAAG;;UAuCzB;YA3KD,OAAO,SAAS,kBAAkB,GAAG,IAAI;YACzC,cAAc,SAAS,OAAO,GAAG,IAAI;sDA0KA;OAG/B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAvLxE,wBAuL2E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"QPropertyListRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyListRow.vue"],"names":[],"mappings":"AAgCA;AAqKC,OAAO,KAAK,EAAE,kBAAkB,EAAyB,MAAM,GAAG,CAAA;yBAKjD,CAAC,eACL,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0O1D,mBAAmB,CAAC;;;;;qBA/Gf,CAAC;;;;;oBA+GgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAtCkB,GAAG;;UAwCzB;YAxOD,OAAO,SAAS,kBAAkB,GAAG,IAAI;YACzC,cAAc,SAAS,OAAO,GAAG,IAAI;sDAuOA;OAG/B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApPxE,wBAoP2E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/esm/components/QPropertyList/QPropertyListRow.vue.js

@@ -19,30 +19,55 @@ var y = ["id", "data-group"], b = {
 	}),
 	emits: /*@__PURE__*/ l(["focus", "field-change"], ["update:modelValue"]),
 	setup(c, { emit: l }) {
-		let x = c, S = l, C = _(c, "modelValue"), w = n(() => ["q-property-list__row", x.class]), T = n(() => ["q-property-list__cell", "q-property-list__cell-label"]), E = n(() => x.readonly || (x.field.props.readonly ?? !1)), D = n(() => x.required || !!x.field.props?.required), O = e(h(x, "id")), k = n(() => ({
-			id: O.value,
+		let x = c, S = l, C = _(c, "modelValue"), w = /* @__PURE__ */ new Set([
+			"QTextField",
+			"QTextArea",
+			"QSelect",
+			"QCombobox",
+			"QColorPicker",
+			"QPasswordField",
+			"QPhoneField",
+			"QDateTimePicker"
+		]);
+		function T(e) {
+			return e.split("-").filter((e) => e.length > 0).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("");
+		}
+		function E(e) {
+			let t = "";
+			if (typeof e == "string") t = e;
+			else if (typeof e == "object" && e) {
+				let n = e;
+				t = n.name || n.__name || "";
+			}
+			return T(t);
+		}
+		let D = n(() => ["q-property-list__row", x.class]), O = n(() => ["q-property-list__cell", "q-property-list__cell-label"]), k = n(() => x.readonly || (x.field.props.readonly ?? !1)), A = n(() => x.required || !!x.field.props?.required), j = e(h(x, "id")), M = n(() => {
+			let e = x.field.props.id;
+			return typeof e == "string" && e ? e : `${j.value}_field`;
+		}), N = n(() => w.has(E(x.field.component)) ? `${M.value}_input` : M.value), P = n(() => ({
 			...x.field.props,
-			readonly: E.value,
-			required: D.value
+			id: M.value,
+			readonly: k.value,
+			required: A.value
 		}));
-		function A() {
+		function F() {
 			S("focus", x.field);
 		}
-		function j(e) {
+		function I(e) {
 			C.value = e, S("field-change", e);
 		}
 		return (e, n) => (f(), a("tr", {
-			id: x.id,
-			class: d(w.value),
+			id: g(j),
+			class: d(D.value),
 			"data-group": x.field.group,
-			onFocusin: A
+			onFocusin: F
 		}, [o("td", {
-			class: d(T.value),
-			onClick: v(A, ["prevent", "stop"])
+			class: d(O.value),
+			onClick: v(F, ["prevent", "stop"])
 		}, [s(g(t), {
-			for: g(O),
+			for: N.value,
 			label: x.field.label,
-			required: D.value,
+			required: A.value,
 			onClick: n[0] ||= v(() => {}, ["stop"])
 		}, null, 8, [
 			"for",
@@ -50,10 +75,10 @@ var y = ["id", "data-group"], b = {
 			"required"
 		])], 2), o("td", {
 			class: "q-property-list__cell",
-			onClick: v(A, ["prevent", "stop"])
-		}, [p(e.$slots, "default", {}, () => [x.field.component ? (f(), a("div", b, [(f(), r(m(x.field.component), u(k.value, {
+			onClick: v(F, ["prevent", "stop"])
+		}, [p(e.$slots, "default", {}, () => [x.field.component ? (f(), a("div", b, [(f(), r(m(x.field.component), u(P.value, {
 			modelValue: C.value,
-			"onUpdate:modelValue": [n[1] ||= (e) => C.value = e, j]
+			"onUpdate:modelValue": [n[1] ||= (e) => C.value = e, I]
 		}), null, 16, ["modelValue"]))])) : i("v-if", !0)])])], 42, y));
 	}
 });

package/esm/components/QPropertyList/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const DEFAULT_TEXTS: {
     emptyMessage: string;
+    property: string;
+    value: string;
 };
 export declare const DEFAULT_ICONS: {
     open: {

package/esm/components/QPropertyList/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;CAEQ,CAAA;AAGlC,eAAO,MAAM,aAAa;;;;;;;CAOY,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;CAIQ,CAAA;AAGlC,eAAO,MAAM,aAAa;;;;;;;CAOY,CAAA"}

package/esm/components/QPropertyList/constants.js

@@ -1,5 +1,9 @@
 //#region src/components/QPropertyList/constants.ts
-var e = { emptyMessage: "Select a field to view details." }, t = {
+var e = {
+	emptyMessage: "Select a field to view details.",
+	property: "Property",
+	value: "Value"
+}, t = {
 	open: { icon: "minus-box" },
 	close: { icon: "plus-box" }
 };

package/esm/components/QPropertyList/index.d.ts

@@ -94,10 +94,22 @@ declare const QPropertyListRow: <T>(__VLS_props: NonNullable<Awaited<typeof __VL
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const QPropertyListGroup: import('vue').DefineComponent<import('./types').QPropertyListGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    click: () => any;
-}, string, import('vue').PublicProps, Readonly<import('./types').QPropertyListGroupProps> & Readonly<{
-    onClick?: (() => any) | undefined;
+declare const QPropertyListGroup: import('vue').DefineComponent<{
+    open?: boolean;
+} & import('../..').QBaseComponentProps & Omit<import('./types').QPropertyListGroup, "id"> & {
+    noToggle?: boolean;
+    icons?: typeof import('./constants').DEFAULT_ICONS;
+    texts?: typeof import('./constants').DEFAULT_TEXTS;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    open?: boolean;
+} & import('../..').QBaseComponentProps & Omit<import('./types').QPropertyListGroup, "id"> & {
+    noToggle?: boolean;
+    icons?: typeof import('./constants').DEFAULT_ICONS;
+    texts?: typeof import('./constants').DEFAULT_TEXTS;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icons: typeof import('./constants').DEFAULT_ICONS;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;

package/esm/components/QPropertyList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/index.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkC,CAAA;AACrD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;2BASwhR,KAAK;;;;;;;;;cAA4J,KAAK;SAAiB,CAAC;CAT3qR,CAAA;AAC3D,QAAA,MAAM,kBAAkB;;;;;;6FAAuC,CAAA;AAC/D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;EAAuC,CAAA;AAG/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AAGlF,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/index.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkC,CAAA;AACrD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;2BASymY,KAAK;;;;;;;;;cAA4J,KAAK;SAAiB,CAAC;CAT5vY,CAAA;AAC3D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;6FAAuC,CAAA;AAC/D,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;EAAuC,CAAA;AAG/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AAGlF,cAAc,SAAS,CAAA"}

package/esm/components/QSection/QSection.d.ts

@@ -2,6 +2,8 @@ import { QSectionProps } from '.';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        'title.prepend'?(_: {}): any;
+        'title.append'?(_: {}): any;
         default?(_: {}): any;
     };
     refs: {};