@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/ColorPicker-qCaoBqPV.js

@@ -0,0 +1,151 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { t as n } from "./input-tw5ZQGKQ.js";
+import { n as r, s as i, t as a } from "./popover-_VzKSUl8.js";
+import { t as o } from "./field-frame-n5oLDNBT.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeStyle as g, openBlock as _, renderList as v, unref as y, useModel as b, watch as x, withCtx as S } from "vue";
+import { Pipette as C } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var w = ["data-element-name"], T = { class: "flex flex-col gap-3" }, E = ["value", "disabled"], D = {
+	key: 0,
+	class: "flex flex-wrap gap-2"
+}, O = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], k = /* @__PURE__ */ m({
+	__name: "ColorPicker",
+	props: /* @__PURE__ */ h({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		colorFormat: {},
+		swatches: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let m = e, h = b(e, "modelValue"), k = c(() => {
+			let e = h.value;
+			return e && typeof e == "string" ? A(e) : "#000000";
+		});
+		x(h, (e) => {
+			if (typeof e == "string" && e.length > 0) {
+				let t = A(e);
+				t !== e && (h.value = t);
+			}
+		});
+		function A(e) {
+			if (!e) return "#000000";
+			let t = e.trim().toLowerCase();
+			return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(t) ? t : /^([0-9a-f]{6})$/.test(t) ? `#${t}` : e;
+		}
+		function j(e) {
+			h.value = A(e);
+		}
+		function M(e) {
+			let t = e.target;
+			j(t?.value ?? "#000000");
+		}
+		function N(e) {
+			j(typeof e == "string" ? e : "");
+		}
+		let P = c(() => Array.isArray(m.swatches) ? m.swatches : []);
+		return (c, m) => (_(), l(y(o), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: S(() => [f("div", {
+				class: "flex items-center gap-2",
+				"data-element-name": e.name ?? void 0
+			}, [
+				p(y(i), null, {
+					default: S(() => [p(y(a), { "as-child": "" }, {
+						default: S(() => [p(y(t), {
+							type: "button",
+							variant: "outline",
+							size: "icon",
+							disabled: e.disabled,
+							"aria-label": "Choose a color",
+							"data-testid": "color-swatch-trigger"
+						}, {
+							default: S(() => [f("span", {
+								class: "size-5 rounded-sm border",
+								style: g({ backgroundColor: k.value })
+							}, null, 4)]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}), p(y(r), { class: "w-auto p-3" }, {
+						default: S(() => [f("div", T, [f("input", {
+							type: "color",
+							value: k.value,
+							disabled: e.disabled || e.readonly,
+							class: "h-10 w-32 cursor-pointer rounded border",
+							"data-testid": "color-native-input",
+							onInput: M
+						}, null, 40, E), P.value.length ? (_(), d("div", D, [(_(!0), d(s, null, v(P.value, (t) => (_(), d("button", {
+							key: t,
+							type: "button",
+							class: "size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+							style: g({ backgroundColor: t }),
+							"aria-label": `Use ${t}`,
+							disabled: e.disabled,
+							"data-testid": "color-swatch",
+							onClick: (e) => j(t)
+						}, null, 12, O))), 128))])) : u("", !0)])]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				p(y(n), {
+					"model-value": k.value,
+					placeholder: e.placeholder ?? "#000000",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					required: e.required,
+					class: "w-32 font-mono uppercase",
+					"data-testid": "color-hex-input",
+					spellcheck: "false",
+					"onUpdate:modelValue": N
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"disabled",
+					"readonly",
+					"required"
+				]),
+				P.value.length ? u("", !0) : (_(), l(y(C), {
+					key: 0,
+					class: "size-4 text-muted-foreground"
+				}))
+			], 8, w)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), A = /* @__PURE__ */ e({ default: () => j }), j = k;
+//#endregion
+export { A as n, j as t };
+
+//# sourceMappingURL=ColorPicker-qCaoBqPV.js.map

package/dist/chunks/ColorPicker-qCaoBqPV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-qCaoBqPV.js","names":[],"sources":["../../src/components/compositions/elements/picker/ColorPicker.vue","../../src/components/compositions/elements/picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven color picker composition. Native `<input type=\"color\">`\n * inside a Popover plus a hex Input fallback. Optional `swatches` render\n * as preset chips. Round-trips a lowercased hex string (with leading\n * `#`).\n *\n *   <ColorPicker v-model=\"color\" label=\"Brand color\" />\n */\nimport { computed, watch } from \"vue\"\nimport { Pipette } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface ColorPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  colorFormat?: \"hex\" | \"rgb\" | \"hsl\"\n  swatches?: string[]\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  errors: () => [],\n  swatches: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst currentColor = computed<string>(() => {\n  const raw = model.value\n  if (raw && typeof raw === \"string\") {\n    return normalizeHex(raw)\n  }\n  return \"#000000\"\n})\n\n// Ensure stored value is normalized once the user picks a hex.\nwatch(model, (next) => {\n  if (typeof next === \"string\" && next.length > 0) {\n    const normalized = normalizeHex(next)\n    if (normalized !== next) {\n      model.value = normalized\n    }\n  }\n})\n\nfunction normalizeHex(value: string): string {\n  if (!value) {\n    return \"#000000\"\n  }\n  const trimmed = value.trim().toLowerCase()\n  if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) {\n    return trimmed\n  }\n  if (/^([0-9a-f]{6})$/.test(trimmed)) {\n    return `#${trimmed}`\n  }\n  return value\n}\n\nfunction setColor(next: string): void {\n  model.value = normalizeHex(next)\n}\n\nfunction onNativeInput(event: Event): void {\n  const target = event.target as HTMLInputElement | null\n  setColor(target?.value ?? \"#000000\")\n}\n\nfunction onHexInput(value: string | number | undefined): void {\n  setColor(typeof value === \"string\" ? value : \"\")\n}\n\nconst swatchList = computed<string[]>(() =>\n  Array.isArray(props.swatches) ? props.swatches : [],\n)\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-center gap-2\" :data-element-name=\"name ?? undefined\">\n      <Popover>\n        <PopoverTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            :disabled=\"disabled\"\n            aria-label=\"Choose a color\"\n            data-testid=\"color-swatch-trigger\"\n          >\n            <span\n              class=\"size-5 rounded-sm border\"\n              :style=\"{ backgroundColor: currentColor }\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-3\">\n          <div class=\"flex flex-col gap-3\">\n            <input\n              type=\"color\"\n              :value=\"currentColor\"\n              :disabled=\"disabled || readonly\"\n              class=\"h-10 w-32 cursor-pointer rounded border\"\n              data-testid=\"color-native-input\"\n              @input=\"onNativeInput\"\n            >\n            <div v-if=\"swatchList.length\" class=\"flex flex-wrap gap-2\">\n              <button\n                v-for=\"swatch in swatchList\"\n                :key=\"swatch\"\n                type=\"button\"\n                class=\"size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                :style=\"{ backgroundColor: swatch }\"\n                :aria-label=\"`Use ${swatch}`\"\n                :disabled=\"disabled\"\n                data-testid=\"color-swatch\"\n                @click=\"setColor(swatch)\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Input\n        :model-value=\"currentColor\"\n        :placeholder=\"placeholder ?? '#000000'\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        class=\"w-32 font-mono uppercase\"\n        data-testid=\"color-hex-input\"\n        spellcheck=\"false\"\n        @update:model-value=\"onHexInput\"\n      />\n      <Pipette\n        v-if=\"!swatchList.length\"\n        class=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven color picker composition. Native `<input type=\"color\">`\n * inside a Popover plus a hex Input fallback. Optional `swatches` render\n * as preset chips. Round-trips a lowercased hex string (with leading\n * `#`).\n *\n *   <ColorPicker v-model=\"color\" label=\"Brand color\" />\n */\nimport { computed, watch } from \"vue\"\nimport { Pipette } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface ColorPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  colorFormat?: \"hex\" | \"rgb\" | \"hsl\"\n  swatches?: string[]\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  errors: () => [],\n  swatches: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst currentColor = computed<string>(() => {\n  const raw = model.value\n  if (raw && typeof raw === \"string\") {\n    return normalizeHex(raw)\n  }\n  return \"#000000\"\n})\n\n// Ensure stored value is normalized once the user picks a hex.\nwatch(model, (next) => {\n  if (typeof next === \"string\" && next.length > 0) {\n    const normalized = normalizeHex(next)\n    if (normalized !== next) {\n      model.value = normalized\n    }\n  }\n})\n\nfunction normalizeHex(value: string): string {\n  if (!value) {\n    return \"#000000\"\n  }\n  const trimmed = value.trim().toLowerCase()\n  if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) {\n    return trimmed\n  }\n  if (/^([0-9a-f]{6})$/.test(trimmed)) {\n    return `#${trimmed}`\n  }\n  return value\n}\n\nfunction setColor(next: string): void {\n  model.value = normalizeHex(next)\n}\n\nfunction onNativeInput(event: Event): void {\n  const target = event.target as HTMLInputElement | null\n  setColor(target?.value ?? \"#000000\")\n}\n\nfunction onHexInput(value: string | number | undefined): void {\n  setColor(typeof value === \"string\" ? value : \"\")\n}\n\nconst swatchList = computed<string[]>(() =>\n  Array.isArray(props.swatches) ? props.swatches : [],\n)\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-center gap-2\" :data-element-name=\"name ?? undefined\">\n      <Popover>\n        <PopoverTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            :disabled=\"disabled\"\n            aria-label=\"Choose a color\"\n            data-testid=\"color-swatch-trigger\"\n          >\n            <span\n              class=\"size-5 rounded-sm border\"\n              :style=\"{ backgroundColor: currentColor }\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-3\">\n          <div class=\"flex flex-col gap-3\">\n            <input\n              type=\"color\"\n              :value=\"currentColor\"\n              :disabled=\"disabled || readonly\"\n              class=\"h-10 w-32 cursor-pointer rounded border\"\n              data-testid=\"color-native-input\"\n              @input=\"onNativeInput\"\n            >\n            <div v-if=\"swatchList.length\" class=\"flex flex-wrap gap-2\">\n              <button\n                v-for=\"swatch in swatchList\"\n                :key=\"swatch\"\n                type=\"button\"\n                class=\"size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                :style=\"{ backgroundColor: swatch }\"\n                :aria-label=\"`Use ${swatch}`\"\n                :disabled=\"disabled\"\n                data-testid=\"color-swatch\"\n                @click=\"setColor(swatch)\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Input\n        :model-value=\"currentColor\"\n        :placeholder=\"placeholder ?? '#000000'\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        class=\"w-32 font-mono uppercase\"\n        data-testid=\"color-hex-input\"\n        spellcheck=\"false\"\n        @update:model-value=\"onHexInput\"\n      />\n      <Pipette\n        v-if=\"!swatchList.length\"\n        class=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAQ,GAKR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAe,QAAuB;GAC1C,IAAM,IAAM,EAAM;GAIlB,OAHI,KAAO,OAAO,KAAQ,WACjB,EAAa,CAAG,IAElB;EACT,CAAC;EAGD,EAAM,IAAQ,MAAS;GACrB,IAAI,OAAO,KAAS,YAAY,EAAK,SAAS,GAAG;IAC/C,IAAM,IAAa,EAAa,CAAI;IACpC,AAAI,MAAe,MACjB,EAAM,QAAQ;GAElB;EACF,CAAC;EAED,SAAS,EAAa,GAAuB;GAC3C,IAAI,CAAC,GACH,OAAO;GAET,IAAM,IAAU,EAAM,KAAK,EAAE,YAAY;GAOzC,OANI,2CAA2C,KAAK,CAAO,IAClD,IAEL,kBAAkB,KAAK,CAAO,IACzB,IAAI,MAEN;EACT;EAEA,SAAS,EAAS,GAAoB;GACpC,EAAM,QAAQ,EAAa,CAAI;EACjC;EAEA,SAAS,EAAc,GAAoB;GACzC,IAAM,IAAS,EAAM;GACrB,EAAS,GAAQ,SAAS,SAAS;EACrC;EAEA,SAAS,EAAW,GAA0C;GAC5D,EAAS,OAAO,KAAU,WAAW,IAAQ,EAAE;EACjD;EAEA,IAAM,IAAa,QACjB,MAAM,QAAQ,EAAM,QAAQ,IAAI,EAAM,WAAW,CAAC,CACpD;yBAIE,EAmEa,EAAA,CAAA,GAAA;GAlEV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA4DH,CA1DN,EA0DM,OAAA;IA1DD,OAAM;IAA2B,qBAAmB,EAAA,QAAQ,KAAA;;IAC/D,EAyCU,EAAA,CAAA,GAAA,MAAA;sBA1BS,CAdjB,EAciB,EAAA,CAAA,GAAA,EAdD,YAAA,GAAQ,GAAA;uBAab,CAZT,EAYS,EAAA,CAAA,GAAA;OAXP,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAU,EAAA;OACX,cAAW;OACX,eAAY;;wBAKV,CAHF,EAGE,QAAA;QAFA,OAAM;QACL,OAAK,EAAA,EAAA,iBAAqB,EAAA,MAAY,CAAA;;;;;SAI7C,EAwBiB,EAAA,CAAA,GAAA,EAxBD,OAAM,aAAY,GAAA;uBAuB1B,CAtBN,EAsBM,OAtBN,GAsBM,CArBJ,EAOC,SAAA;OANC,MAAK;OACJ,OAAO,EAAA;OACP,UAAU,EAAA,YAAY,EAAA;OACvB,OAAM;OACN,eAAY;OACX,SAAO;uBAEC,EAAA,MAAW,UAAA,EAAA,GAAtB,EAYM,OAZN,GAYM,EAAA,EAAA,EAAA,GAXJ,EAUE,GAAA,MAAA,EATiB,EAAA,QAAV,YADT,EAUE,UAAA;OARC,KAAK;OACN,MAAK;OACL,OAAM;OACL,OAAK,EAAA,EAAA,iBAAqB,EAAM,CAAA;OAChC,cAAU,OAAS;OACnB,UAAU,EAAA;OACX,eAAY;OACX,UAAK,MAAE,EAAS,CAAM;;;;;;IAMjC,EAUE,EAAA,CAAA,GAAA;KATC,eAAa,EAAA;KACb,aAAa,EAAA,eAAW;KACxB,UAAU,EAAA;KACV,UAAU,EAAA;KACV,UAAU,EAAA;KACX,OAAM;KACN,eAAY;KACZ,YAAW;KACV,uBAAoB;;;;;;;;IAGd,EAAA,MAAW,sBAAA,EAAA,GADpB,EAGE,EAAA,CAAA,GAAA;;KADA,OAAM"}

package/dist/chunks/DataModelPicker-8xyYcLdo.js

@@ -0,0 +1,95 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, s } from "./combobox-BrYBRIqW.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { Fragment as l, computed as u, createBlock as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
+import { Code2 as T } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/DataModelPicker.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "font-mono" }, D = /* @__PURE__ */ g({
+	__name: "DataModelPicker",
+	props: /* @__PURE__ */ _({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		dataModelKeys: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let g = e, _ = C(e, "modelValue"), D = y(""), O = u(() => {
+			let e = D.value.trim().toLowerCase(), t = Array.isArray(g.dataModelKeys) ? g.dataModelKeys : [];
+			return e ? t.filter((t) => t.toLowerCase().includes(e)).slice(0, 200) : t.slice(0, 200);
+		});
+		function k(e) {
+			_.value = typeof e == "string" ? e : "";
+		}
+		return (u, g) => (v(), d(S(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: w(() => [h(S(r), {
+				"model-value": _.value ?? "",
+				disabled: e.disabled,
+				"onUpdate:modelValue": k
+			}, {
+				default: w(() => [h(S(t), {
+					"data-element-name": e.name ?? void 0,
+					"data-readonly": e.readonly || void 0
+				}, {
+					default: w(() => [h(S(T), { class: "mr-2 size-4 shrink-0 opacity-50" }), h(S(n), {
+						modelValue: D.value,
+						"onUpdate:modelValue": g[0] ||= (e) => D.value = e,
+						placeholder: e.placeholder ?? "data.key.path",
+						readonly: e.readonly,
+						required: e.required,
+						class: "font-mono text-sm"
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"readonly",
+						"required"
+					])]),
+					_: 1
+				}, 8, ["data-element-name", "data-readonly"]), h(S(s), null, {
+					default: w(() => [h(S(a), null, {
+						default: w(() => [...g[1] ||= [m("No fields match.", -1)]]),
+						_: 1
+					}), (v(!0), f(l, null, b(O.value, (e) => (v(), d(S(o), {
+						key: e,
+						value: e
+					}, {
+						default: w(() => [h(S(i)), p("span", E, x(e), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), O = /* @__PURE__ */ e({ default: () => k }), k = D;
+//#endregion
+export { O as n, k as t };
+
+//# sourceMappingURL=DataModelPicker-8xyYcLdo.js.map

package/dist/chunks/DataModelPicker-8xyYcLdo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker-8xyYcLdo.js","names":[],"sources":["../../src/components/compositions/elements/picker/DataModelPicker.vue","../../src/components/compositions/elements/picker/DataModelPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven data-model picker composition. Searchable combobox over a\n * list of field-path keys supplied via `dataModelKeys`. Used by the\n * FormBuilder inspector to pick a data-model key; the eventual async\n * lookup service will swap in the same surface area.\n *\n *   <DataModelPicker\n *     v-model=\"key\"\n *     label=\"Field\"\n *     :data-model-keys=\"['first_name', 'last_name', 'email']\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { Code2 } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface DataModelPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Candidate field paths to choose from. */\n  dataModelKeys?: string[]\n}\n\nconst props = withDefaults(defineProps<DataModelPickerProps>(), {\n  errors: () => [],\n  dataModelKeys: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  const keys = Array.isArray(props.dataModelKeys) ? props.dataModelKeys : []\n  if (!q) {\n    return keys.slice(0, 200)\n  }\n  return keys.filter((k) => k.toLowerCase().includes(q)).slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Code2 class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'data.key.path'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n          class=\"font-mono text-sm\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No fields match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"key in filtered\" :key=\"key\" :value=\"key\">\n          <ComboboxItemIndicator />\n          <span class=\"font-mono\">{{ key }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven data-model picker composition. Searchable combobox over a\n * list of field-path keys supplied via `dataModelKeys`. Used by the\n * FormBuilder inspector to pick a data-model key; the eventual async\n * lookup service will swap in the same surface area.\n *\n *   <DataModelPicker\n *     v-model=\"key\"\n *     label=\"Field\"\n *     :data-model-keys=\"['first_name', 'last_name', 'email']\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { Code2 } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface DataModelPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Candidate field paths to choose from. */\n  dataModelKeys?: string[]\n}\n\nconst props = withDefaults(defineProps<DataModelPickerProps>(), {\n  errors: () => [],\n  dataModelKeys: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  const keys = Array.isArray(props.dataModelKeys) ? props.dataModelKeys : []\n  if (!q) {\n    return keys.slice(0, 200)\n  }\n  return keys.filter((k) => k.toLowerCase().includes(q)).slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Code2 class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'data.key.path'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n          class=\"font-mono text-sm\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No fields match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"key in filtered\" :key=\"key\" :value=\"key\">\n          <ComboboxItemIndicator />\n          <span class=\"font-mono\">{{ key }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAKR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAQ,EAAY,EAAE,GAEtB,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY,GACnC,IAAO,MAAM,QAAQ,EAAM,aAAa,IAAI,EAAM,gBAAgB,CAAC;GAIzE,OAHK,IAGE,EAAK,QAAQ,MAAM,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,IAF1D,EAAK,MAAM,GAAG,GAAG;EAG5B,CAAC;EAED,SAAS,EAAS,GAAsB;GACtC,EAAM,QAAQ,OAAO,KAAU,WAAW,IAAQ;EACpD;yBAIE,EAkCa,EAAA,CAAA,GAAA;GAjCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA2BE,CAzBX,EAyBW,EAAA,CAAA,GAAA;IAxBR,eAAa,EAAA,SAAK;IAClB,UAAU,EAAA;IACV,uBAAoB;;qBAcJ,CAZjB,EAYiB,EAAA,CAAA,GAAA;KAXd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,iBAAe,EAAA,YAAY,KAAA;;sBAEqB,CAAjD,EAAiD,EAAA,CAAA,GAAA,EAA1C,OAAM,kCAAiC,CAAA,GAC9C,EAME,EAAA,CAAA,GAAA;kBALS,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;MACxB,UAAU,EAAA;MACV,UAAU,EAAA;MACX,OAAM;;;;;;;;mDAGV,EAMkB,EAAA,CAAA,GAAA,MAAA;sBAL+B,CAA/C,EAA+C,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAhB,oBAAgB,EAAA,CAAA,CAAA,CAAA;;iBAC/B,EAGe,GAAA,MAAA,EAHa,EAAA,QAAP,YAArB,EAGe,EAAA,CAAA,GAAA;MAH6B;MAAM,OAAO;;uBAC9B,CAAzB,EAAyB,EAAA,CAAA,CAAA,GACzB,EAAwC,QAAxC,GAAwC,EAAb,CAAG,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/DataTableCard-BpsxPMb7.js

@@ -0,0 +1,322 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { t as n } from "./input-tw5ZQGKQ.js";
+import { a as r, c as i, n as a, r as o, s, t as c } from "./table-CanciZAw.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, toRef as w, unref as T, watch as E, withCtx as D } from "vue";
+//#region src/components/compositions/cards/useDataTableData.ts
+function O(e) {
+	return { rows: u(() => {
+		let t = e.item.value, n = e.options.value, r = e.listKey.value, i = e.listData.value;
+		if (n?.searchRoute) return console.debug("[DataTableCard] searchRoute fetch is stubbed; returning empty rows.", n.searchRoute), [];
+		if (r) {
+			let e = t[r];
+			return Array.isArray(e) ? e : [];
+		}
+		return Array.isArray(i) ? i : [];
+	}) };
+}
+//#endregion
+//#region src/components/compositions/cards/DataTableCard.vue?vue&type=script&setup=true&lang.ts
+var k = {
+	key: 0,
+	class: "flex flex-col gap-0.5"
+}, A = {
+	key: 0,
+	class: "text-base font-semibold"
+}, ee = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, te = {
+	key: 1,
+	class: "flex flex-wrap items-center justify-between gap-2"
+}, ne = {
+	key: 0,
+	class: "flex items-center gap-2",
+	"data-testid": "datatable-exports"
+}, re = {
+	key: 1,
+	class: "ml-auto w-full max-w-xs"
+}, ie = ["data-testid", "onClick"], ae = { class: "text-xs" }, oe = { key: 1 }, se = {
+	key: 0,
+	"data-testid": "cell-timestamp"
+}, ce = ["aria-label"], le = ["src", "alt"], ue = {
+	key: 3,
+	class: "inline-flex items-center gap-2"
+}, de = { key: 4 }, fe = { class: "inline-flex items-center justify-end gap-1" }, pe = { "data-testid": "datatable-empty" }, j = {
+	key: 2,
+	class: "flex items-center justify-between gap-2",
+	"data-testid": "datatable-pagination"
+}, M = { class: "text-sm text-muted-foreground" }, N = { class: "flex items-center gap-2" }, P = /* @__PURE__ */ _({
+	__name: "DataTableCard",
+	props: {
+		tableTitle: {},
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		classList: {},
+		headers: { default: () => [] },
+		options: {},
+		listKey: {},
+		listData: {},
+		actions: {},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		bulkActions: {},
+		emptyMessage: {},
+		item: { default: () => ({}) },
+		createConfig: {},
+		updateConfig: {},
+		deleteConfig: {}
+	},
+	emits: ["action", "export"],
+	setup(e, { emit: _ }) {
+		let P = e, F = _, I = x(P.options?.defaultSortBy ? {
+			key: P.options.defaultSortBy,
+			direction: P.options.defaultSortDirection ?? "asc"
+		} : null), L = x(""), R = x(1), z = u(() => {
+			let e = P.options;
+			return e?.perPage ?? e?.defaultItemsPerPage ?? 25;
+		}), B = u(() => P.options?.paginated === !0), V = u(() => (P.headers ?? []).filter((e) => e.visible !== !1)), me = u(() => P.emptyMessage ?? P.options?.emptyText ?? "No results"), H = u(() => P.options?.exports ?? []), U = u(() => {
+			let e = P.actions ?? [], t = P.options?.additionalActions ?? [];
+			return [...e, ...t];
+		}), W = u(() => {
+			let e = P.options?.searchRoute;
+			return !(e && e.hide);
+		}), { rows: G } = O({
+			listKey: w(P, "listKey"),
+			listData: w(P, "listData"),
+			options: w(P, "options"),
+			item: w(P, "item")
+		});
+		function K(e, t) {
+			if (!t) return;
+			let n = t.split("."), r = e;
+			for (let e of n) {
+				if (typeof r != "object" || !r) return;
+				r = r[e];
+			}
+			return r;
+		}
+		function q(e) {
+			return e == null ? "" : typeof e == "number" ? e : typeof e == "boolean" ? +!!e : e instanceof Date ? e.getTime() : String(e).toLowerCase();
+		}
+		let J = u(() => {
+			let e = L.value.trim().toLowerCase();
+			return e ? G.value.filter((t) => V.value.some((n) => {
+				let r = K(t, n.key);
+				return r == null ? !1 : String(r).toLowerCase().includes(e);
+			})) : G.value;
+		}), Y = u(() => {
+			let e = I.value;
+			if (!e) return J.value;
+			let t = e.direction === "asc" ? 1 : -1;
+			return [...J.value].sort((n, r) => {
+				let i = q(K(n, e.key)), a = q(K(r, e.key));
+				return i < a ? -1 * t : i > a ? 1 * t : 0;
+			});
+		}), X = u(() => B.value ? Math.max(1, Math.ceil(Y.value.length / z.value)) : 1), Z = u(() => {
+			if (!B.value) return Y.value;
+			let e = (R.value - 1) * z.value;
+			return Y.value.slice(e, e + z.value);
+		});
+		E([J, z], () => {
+			R.value > X.value && (R.value = 1);
+		});
+		function he(e) {
+			if (!e.sortable) return;
+			let t = I.value;
+			if (!t || t.key !== e.key) {
+				I.value = {
+					key: e.key,
+					direction: "asc"
+				};
+				return;
+			}
+			if (t.direction === "asc") {
+				I.value = {
+					key: e.key,
+					direction: "desc"
+				};
+				return;
+			}
+			I.value = null;
+		}
+		function ge(e) {
+			let t = I.value;
+			return !t || t.key !== e.key ? "" : t.direction === "asc" ? "↑" : "↓";
+		}
+		function Q(e) {
+			let t = e.align;
+			return t === "center" ? "text-center" : t === "end" || t === "right" ? "text-right" : "text-left";
+		}
+		function $() {
+			R.value > 1 && --R.value;
+		}
+		function _e() {
+			R.value < X.value && (R.value += 1);
+		}
+		function ve(e) {
+			if (e == null) return "";
+			let t = e instanceof Date ? e : new Date(typeof e == "number" ? e : String(e));
+			return Number.isNaN(t.getTime()) ? String(e) : new Intl.DateTimeFormat(void 0, {
+				year: "numeric",
+				month: "short",
+				day: "numeric",
+				hour: "numeric",
+				minute: "numeric"
+			}).format(t);
+		}
+		function ye(e) {
+			let t = String(e ?? "").toLowerCase();
+			return t === "success" || t === "active" || t === "ok" || t === "paid" ? "bg-green-500" : t === "warning" || t === "pending" ? "bg-yellow-500" : t === "danger" || t === "error" || t === "failed" || t === "unpaid" ? "bg-red-500" : t === "info" ? "bg-blue-500" : "bg-gray-400";
+		}
+		function be(e, t) {
+			F("action", {
+				action: e,
+				row: t
+			});
+		}
+		function xe(e) {
+			F("export", { export: e });
+		}
+		return (u, _) => (b(), p("section", {
+			class: v(["gxp-datatable-card flex flex-col gap-3", e.showCard === !1 ? "" : "rounded-lg border bg-card text-card-foreground shadow-sm p-4"]),
+			"data-testid": "datatable-card"
+		}, [
+			e.tableTitle || e.title || e.subtitle ? (b(), p("header", k, [e.tableTitle || e.title ? (b(), p("h3", A, C(e.tableTitle ?? e.title), 1)) : f("", !0), e.subtitle ? (b(), p("p", ee, C(e.subtitle), 1)) : f("", !0)])) : f("", !0),
+			H.value.length > 0 || W.value ? (b(), p("div", te, [H.value.length > 0 ? (b(), p("div", ne, [(b(!0), p(l, null, S(H.value, (e, n) => (b(), d(T(t), {
+				key: n,
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				onClick: (t) => xe(e)
+			}, {
+				default: D(() => [h(C(e.label ?? "Export"), 1)]),
+				_: 2
+			}, 1032, ["onClick"]))), 128))])) : f("", !0), W.value ? (b(), p("div", re, [g(T(n), {
+				modelValue: L.value,
+				"onUpdate:modelValue": _[0] ||= (e) => L.value = e,
+				type: "search",
+				placeholder: "Search...",
+				"data-testid": "datatable-search"
+			}, null, 8, ["modelValue"])])) : f("", !0)])) : f("", !0),
+			g(T(i), null, {
+				default: D(() => [g(T(a), null, {
+					default: D(() => [g(T(c), null, {
+						default: D(() => [(b(!0), p(l, null, S(V.value, (e) => (b(), d(T(o), {
+							key: e.key,
+							class: v(Q(e)),
+							style: y(e.width ? { width: e.width } : void 0)
+						}, {
+							default: D(() => [e.sortable ? (b(), p("button", {
+								key: 0,
+								type: "button",
+								class: "inline-flex items-center gap-1 hover:text-foreground",
+								"data-testid": `sort-${e.key}`,
+								onClick: (t) => he(e)
+							}, [m("span", null, C(e.title ?? e.key), 1), m("span", ae, C(ge(e)), 1)], 8, ie)) : (b(), p("span", oe, C(e.title ?? e.key), 1))]),
+							_: 2
+						}, 1032, ["class", "style"]))), 128)), U.value.length > 0 ? (b(), d(T(o), {
+							key: 0,
+							class: "text-right"
+						}, {
+							default: D(() => [..._[1] ||= [h(" Actions ", -1)]]),
+							_: 1
+						})) : f("", !0)]),
+						_: 1
+					})]),
+					_: 1
+				}), g(T(s), null, {
+					default: D(() => [Z.value.length > 0 ? (b(!0), p(l, { key: 0 }, S(Z.value, (e, n) => (b(), d(T(c), {
+						key: n,
+						"data-testid": `datatable-row-${n}`
+					}, {
+						default: D(() => [(b(!0), p(l, null, S(V.value, (t) => (b(), d(T(r), {
+							key: t.key,
+							class: v(Q(t))
+						}, {
+							default: D(() => [t.type === "timestamp" || t.type === "laravel-timestamp" ? (b(), p("span", se, C(ve(K(e, t.key))), 1)) : t.type === "boolean" ? (b(), p("span", {
+								key: 1,
+								"data-testid": "cell-boolean",
+								class: v(K(e, t.key) ? "text-green-600" : "text-red-600"),
+								"aria-label": K(e, t.key) ? "true" : "false"
+							}, C(K(e, t.key) ? "✓" : "✗"), 11, ce)) : t.type === "image" ? (b(), p("img", {
+								key: 2,
+								"data-testid": "cell-image",
+								src: String(K(e, t.key) ?? ""),
+								alt: t.title ?? t.key,
+								class: "h-8 w-8 rounded object-cover"
+							}, null, 8, le)) : t.type === "status_circle" ? (b(), p("span", ue, [m("span", {
+								"data-testid": "cell-status-circle",
+								class: v(["inline-block h-2.5 w-2.5 rounded-full", ye(K(e, t.key))])
+							}, null, 2), m("span", null, C(K(e, t.key)), 1)])) : (b(), p("span", de, [
+								t.prepend ? (b(), p(l, { key: 0 }, [h(C(t.prepend), 1)], 64)) : f("", !0),
+								h(" " + C(K(e, t.key) ?? "") + " ", 1),
+								t.append ? (b(), p(l, { key: 1 }, [h(C(t.append), 1)], 64)) : f("", !0)
+							]))]),
+							_: 2
+						}, 1032, ["class"]))), 128)), U.value.length > 0 ? (b(), d(T(r), {
+							key: 0,
+							class: "text-right"
+						}, {
+							default: D(() => [m("div", fe, [(b(!0), p(l, null, S(U.value, (n, r) => (b(), d(T(t), {
+								key: r,
+								variant: "ghost",
+								size: "sm",
+								type: "button",
+								"data-testid": `datatable-action-${n.slug ?? r}`,
+								onClick: (t) => be(n, e)
+							}, {
+								default: D(() => [h(C(n.label ?? n.tooltip ?? n.slug ?? "Action"), 1)]),
+								_: 2
+							}, 1032, ["data-testid", "onClick"]))), 128))])]),
+							_: 2
+						}, 1024)) : f("", !0)]),
+						_: 2
+					}, 1032, ["data-testid"]))), 128)) : (b(), d(T(c), { key: 1 }, {
+						default: D(() => [g(T(r), {
+							colspan: V.value.length + +(U.value.length > 0),
+							class: "text-center text-muted-foreground"
+						}, {
+							default: D(() => [m("span", pe, C(me.value), 1)]),
+							_: 1
+						}, 8, ["colspan"])]),
+						_: 1
+					}))]),
+					_: 1
+				})]),
+				_: 1
+			}),
+			B.value && Y.value.length > 0 ? (b(), p("footer", j, [m("span", M, " Page " + C(R.value) + " of " + C(X.value), 1), m("div", N, [g(T(t), {
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				disabled: R.value <= 1,
+				"data-testid": "datatable-prev",
+				onClick: $
+			}, {
+				default: D(() => [..._[2] ||= [h(" Previous ", -1)]]),
+				_: 1
+			}, 8, ["disabled"]), g(T(t), {
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				disabled: R.value >= X.value,
+				"data-testid": "datatable-next",
+				onClick: _e
+			}, {
+				default: D(() => [..._[3] ||= [h(" Next ", -1)]]),
+				_: 1
+			}, 8, ["disabled"])])])) : f("", !0)
+		], 2));
+	}
+}), F = /* @__PURE__ */ e({ default: () => I }), I = P;
+//#endregion
+export { F as n, I as t };
+
+//# sourceMappingURL=DataTableCard-BpsxPMb7.js.map