npm - @gxp-dev/mod-ui - Versions diffs - 2.0.10 → 2.0.14 - Mend

@gxp-dev/mod-ui 2.0.10 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1651) hide show

package/dist/chunks/ObjectBuilder-2gxFY61a.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectBuilder-2gxFY61a.js","names":[],"sources":["../../src/components/compositions/elements/builder/ObjectBuilder.vue","../../src/components/compositions/elements/builder/ObjectBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ObjectBuilder — visually compose a JSON object as a list of typed\n * key / value entries.\n *\n * Three-pane layout:\n * - LEFT (Palette): Buttons for each entry type\n * (string / number / boolean / array / object /\n * null). Clicking appends a new entry of that\n * type.\n * - MIDDLE (Canvas): Ordered list of entries. Each row shows the\n * key, a type badge, and a value preview.\n * Click to select.\n * - RIGHT (Inspector): Edits the selected entry's key, type, and\n * value. The editor swaps based on `type`.\n *\n * The schema is owned by `objectBuilderStore`. The builder accepts an\n * initial value via `modelValue` (either an `ObjectBuilderSchema` or a\n * plain `Record<string, unknown>`) and emits the current schema\n * through `update:modelValue` on every mutation.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { ArrowDown, ArrowUp, Plus, Trash2, X } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport {\n useObjectBuilder,\n recordToSchema,\n toRecord,\n type ObjectBuilderEntry,\n type ObjectBuilderEntryType,\n type ObjectBuilderSchema,\n} from \"@/stores/objectBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ObjectBuilderProps {\n /**\n * Initial / current value. Accepts either an `ObjectBuilderSchema`\n * (preferred) or a plain `Record<string, unknown>` (which is\n * normalised to entries on mount).\n */\n modelValue?: ObjectBuilderSchema | Record<string, unknown>\n /**\n * Identifier used to key the objectBuilderStore. Defaults to a\n * stable auto-generated id so multiple builders on the same page\n * don't collide.\n */\n builderId?: string\n label?: string\n name?: string | null\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ObjectBuilderProps>(), {\n label: \"Object Builder\",\n})\n\nconst model = defineModel<\n ObjectBuilderSchema | Record<string, unknown> | undefined\n>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `object-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useObjectBuilder(builderId.value)\n\nconst PALETTE_TYPES: Array<{\n type: ObjectBuilderEntryType\n displayLabel: string\n description: string\n}> = [\n {\n type: \"string\",\n displayLabel: \"String\",\n description: \"A text value.\",\n },\n {\n type: \"number\",\n displayLabel: \"Number\",\n description: \"A numeric value.\",\n },\n {\n type: \"boolean\",\n displayLabel: \"Boolean\",\n description: \"true or false.\",\n },\n {\n type: \"array\",\n displayLabel: \"Array\",\n description: \"A JSON array (edit as JSON).\",\n },\n {\n type: \"object\",\n displayLabel: \"Object\",\n description: \"A nested object (edit as JSON).\",\n },\n {\n type: \"null\",\n displayLabel: \"Null\",\n description: \"Explicit null.\",\n },\n]\n\nfunction isObjectBuilderSchema(value: unknown): value is ObjectBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return Array.isArray(v.entries)\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n const seed = model.value\n if (seed === undefined || seed === null) {\n return\n }\n if (isObjectBuilderSchema(seed)) {\n builder.loadSchema(seed)\n } else if (typeof seed === \"object\") {\n builder.loadSchema(recordToSchema(seed as Record<string, unknown>))\n }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = {\n entries: next.entries.map((e) => ({ ...e })),\n }\n },\n { deep: true },\n)\n\nconst entries = computed<ObjectBuilderEntry[]>(\n () => builder.schema.value.entries,\n)\n\nconst selectedEntry = computed<ObjectBuilderEntry | null>(() => {\n const sel = builder.selection.value\n if (!sel.id) {\n return null\n }\n return entries.value.find((e) => e.id === sel.id) ?? null\n})\n\nconst selectedIndex = computed<number>(() => {\n const sel = builder.selection.value\n if (!sel.id) {\n return -1\n }\n return entries.value.findIndex((e) => e.id === sel.id)\n})\n\nconst canMoveDown = computed<boolean>(() => {\n return (\n selectedIndex.value >= 0 && selectedIndex.value < entries.value.length - 1\n )\n})\n\nfunction onPaletteClick(type: ObjectBuilderEntryType): void {\n const newId = builder.addEntry(type)\n builder.select(newId)\n}\n\nfunction onRowClick(entryId: string): void {\n builder.select(entryId)\n}\n\nfunction onMoveUp(): void {\n if (selectedIndex.value <= 0) {\n return\n }\n builder.reorderEntry(selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n if (!canMoveDown.value) {\n return\n }\n builder.reorderEntry(selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n const sel = builder.selection.value\n if (sel.id) {\n builder.removeEntry(sel.id)\n }\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<Omit<ObjectBuilderEntry, \"id\">>): void {\n const sel = builder.selection.value\n if (sel.id) {\n builder.updateEntry(sel.id, patch)\n }\n}\n\nfunction previewValue(entry: ObjectBuilderEntry): string {\n switch (entry.type) {\n case \"null\":\n return \"null\"\n case \"boolean\":\n return entry.value ? \"true\" : \"false\"\n case \"string\":\n return entry.value === \"\" ? '\"\"' : String(entry.value)\n case \"number\":\n return String(entry.value)\n case \"array\":\n case \"object\":\n try {\n return JSON.stringify(entry.value)\n } catch {\n return \"(invalid)\"\n }\n }\n}\n\nconst keyValue = computed<string>(() => selectedEntry.value?.key ?? \"\")\nconst stringValue = computed<string>(() =>\n selectedEntry.value && selectedEntry.value.type === \"string\"\n ? String(selectedEntry.value.value ?? \"\")\n : \"\",\n)\nconst numberValue = computed<string>(() =>\n selectedEntry.value && selectedEntry.value.type === \"number\"\n ? String(selectedEntry.value.value ?? 0)\n : \"\",\n)\nconst booleanValue = computed<boolean>(() =>\n selectedEntry.value && selectedEntry.value.type === \"boolean\"\n ? Boolean(selectedEntry.value.value)\n : false,\n)\n\nconst jsonDraft = ref<string>(\"\")\nconst jsonError = ref<string>(\"\")\n\nwatch(\n () => selectedEntry.value,\n (next) => {\n if (!next) {\n jsonDraft.value = \"\"\n jsonError.value = \"\"\n return\n }\n if (next.type === \"array\" || next.type === \"object\") {\n try {\n jsonDraft.value = JSON.stringify(next.value, null, 2)\n } catch {\n jsonDraft.value = \"\"\n }\n jsonError.value = \"\"\n }\n },\n { immediate: true },\n)\n\nfunction onJsonInput(raw: string): void {\n jsonDraft.value = raw\n try {\n const parsed = JSON.parse(raw)\n const entry = selectedEntry.value\n if (!entry) {\n return\n }\n if (entry.type === \"array\" && !Array.isArray(parsed)) {\n jsonError.value = \"Value must be a JSON array.\"\n return\n }\n if (\n entry.type === \"object\" &&\n (parsed === null || typeof parsed !== \"object\" || Array.isArray(parsed))\n ) {\n jsonError.value = \"Value must be a JSON object.\"\n return\n }\n jsonError.value = \"\"\n patchSelected({ value: parsed })\n } catch (err) {\n jsonError.value = err instanceof Error ? err.message : \"Invalid JSON.\"\n }\n}\n\nfunction onTypeChange(next: string): void {\n const t = next as ObjectBuilderEntryType\n patchSelected({ type: t })\n}\n\n/** Re-export the flattening helper so consumers can `toRecord(schema)`. */\ndefineExpose({ toRecord })\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'gxp-object-builder grid gap-3 rounded-lg border bg-card',\n props.classList,\n )\n \"\n style=\"grid-template-columns: 200px 1fr 300px; min-height: 22rem\"\n data-testid=\"object-builder\"\n :data-element-name=\"props.name ?? undefined\"\n >\n <aside\n class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n data-testid=\"object-builder-palette\"\n >\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n {{ props.label }}\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"entry in PALETTE_TYPES\"\n :key=\"entry.type\"\n type=\"button\"\n class=\"flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n :data-testid=\"`object-builder-palette-${entry.type}`\"\n @click=\"onPaletteClick(entry.type)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"flex min-w-0 flex-col gap-0.5\">\n <span class=\"font-medium\">{{ entry.displayLabel }}</span>\n <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n {{ entry.description }}\n </span>\n </span>\n </button>\n </div>\n </aside>\n\n <section\n class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n data-testid=\"object-builder-canvas\"\n >\n <header class=\"flex items-center justify-between\">\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n Entries\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/object-builder\n </Badge>\n </header>\n\n <p\n v-if=\"entries.length === 0\"\n class=\"rounded-md border border-dashed bg-background py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"object-builder-canvas-empty\"\n >\n Click an entry type in the palette to add one.\n </p>\n\n <ul\n v-else\n class=\"flex flex-col gap-1 text-xs\"\n data-testid=\"object-builder-canvas-list\"\n >\n <li\n v-for=\"(entry, index) in entries\"\n :key=\"entry.id\"\n class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n :class=\"\n builder.selection.value.id === entry.id\n ? 'border-primary bg-accent/30'\n : ''\n \"\n :data-testid=\"`object-builder-row-${entry.id}`\"\n @click=\"onRowClick(entry.id)\"\n >\n <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n {{ index + 1 }}.\n </span>\n <span class=\"font-medium\">\n {{ entry.key || \"(unnamed)\" }}\n </span>\n <Badge variant=\"secondary\" class=\"font-mono text-[9px]\">\n {{ entry.type }}\n </Badge>\n <span\n class=\"ml-auto max-w-[12rem] truncate font-mono text-[10px] text-muted-foreground\"\n >\n {{ previewValue(entry) }}\n </span>\n </li>\n </ul>\n </section>\n\n <aside\n class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n data-testid=\"object-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n Inspector\n </h4>\n <Button\n v-if=\"builder.selection.value.id\"\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Clear selection\"\n @click=\"onClearSelection\"\n >\n <X class=\"h-3.5 w-3.5\" />\n </Button>\n </header>\n\n <p\n v-if=\"!selectedEntry\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"object-builder-inspector-empty\"\n >\n Select an entry to edit its key, type, and value.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"object-builder-inspector-fields\"\n >\n <Card class=\"border-dashed\">\n <CardHeader class=\"py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n {{ selectedEntry.type }}\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"ob-key\">Key</Label>\n <Input\n id=\"ob-key\"\n :model-value=\"keyValue\"\n data-testid=\"object-builder-inspector-key\"\n @input=\"\n (e: Event) =>\n patchSelected({\n key: (e.target as HTMLInputElement).value,\n })\n \"\n />\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label for=\"ob-type\">Type</Label>\n <Select\n :model-value=\"selectedEntry.type\"\n @update:model-value=\"(v) => onTypeChange(v as string)\"\n >\n <SelectTrigger\n id=\"ob-type\"\n data-testid=\"object-builder-inspector-type\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"opt in PALETTE_TYPES\"\n :key=\"opt.type\"\n :value=\"opt.type\"\n >\n {{ opt.displayLabel }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div\n v-if=\"selectedEntry.type === 'string'\"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-string\">Value</Label>\n <Input\n id=\"ob-value-string\"\n :model-value=\"stringValue\"\n data-testid=\"object-builder-inspector-value-string\"\n @input=\"\n (e: Event) =>\n patchSelected({\n value: (e.target as HTMLInputElement).value,\n })\n \"\n />\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'number'\"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-number\">Value</Label>\n <Input\n id=\"ob-value-number\"\n type=\"number\"\n :model-value=\"numberValue\"\n data-testid=\"object-builder-inspector-value-number\"\n @input=\"\n (e: Event) => {\n const v = (e.target as HTMLInputElement).value\n const parsed = v === '' ? 0 : Number(v)\n patchSelected({\n value: Number.isNaN(parsed) ? 0 : parsed,\n })\n }\n \"\n />\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'boolean'\"\n class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n >\n <Label for=\"ob-value-boolean\">Value</Label>\n <Switch\n id=\"ob-value-boolean\"\n :model-value=\"booleanValue\"\n data-testid=\"object-builder-inspector-value-boolean\"\n @update:model-value=\"(v: boolean) => patchSelected({ value: v })\"\n />\n </div>\n\n <div\n v-else-if=\"\n selectedEntry.type === 'array' ||\n selectedEntry.type === 'object'\n \"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-json\">Value (JSON)</Label>\n <Textarea\n id=\"ob-value-json\"\n :model-value=\"jsonDraft\"\n rows=\"6\"\n data-testid=\"object-builder-inspector-value-json\"\n @input=\"\n (e: Event) =>\n onJsonInput((e.target as HTMLTextAreaElement).value)\n \"\n />\n <p\n v-if=\"jsonError\"\n class=\"text-[11px] text-destructive\"\n data-testid=\"object-builder-inspector-value-json-error\"\n >\n {{ jsonError }}\n </p>\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'null'\"\n class=\"rounded border bg-background px-2 py-1 text-xs text-muted-foreground\"\n data-testid=\"object-builder-inspector-value-null\"\n >\n Value is fixed to <code class=\"font-mono\">null</code>.\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"selectedIndex <= 0\"\n data-testid=\"object-builder-move-up\"\n @click=\"onMoveUp\"\n >\n <ArrowUp class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"!canMoveDown\"\n data-testid=\"object-builder-move-down\"\n @click=\"onMoveDown\"\n >\n <ArrowDown class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"object-builder-remove\"\n @click=\"onRemove\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove\n </Button>\n </div>\n </div>\n </aside>\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * ObjectBuilder — visually compose a JSON object as a list of typed\n * key / value entries.\n *\n * Three-pane layout:\n * - LEFT (Palette): Buttons for each entry type\n * (string / number / boolean / array / object /\n * null). Clicking appends a new entry of that\n * type.\n * - MIDDLE (Canvas): Ordered list of entries. Each row shows the\n * key, a type badge, and a value preview.\n * Click to select.\n * - RIGHT (Inspector): Edits the selected entry's key, type, and\n * value. The editor swaps based on `type`.\n *\n * The schema is owned by `objectBuilderStore`. The builder accepts an\n * initial value via `modelValue` (either an `ObjectBuilderSchema` or a\n * plain `Record<string, unknown>`) and emits the current schema\n * through `update:modelValue` on every mutation.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { ArrowDown, ArrowUp, Plus, Trash2, X } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport {\n useObjectBuilder,\n recordToSchema,\n toRecord,\n type ObjectBuilderEntry,\n type ObjectBuilderEntryType,\n type ObjectBuilderSchema,\n} from \"@/stores/objectBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ObjectBuilderProps {\n /**\n * Initial / current value. Accepts either an `ObjectBuilderSchema`\n * (preferred) or a plain `Record<string, unknown>` (which is\n * normalised to entries on mount).\n */\n modelValue?: ObjectBuilderSchema | Record<string, unknown>\n /**\n * Identifier used to key the objectBuilderStore. Defaults to a\n * stable auto-generated id so multiple builders on the same page\n * don't collide.\n */\n builderId?: string\n label?: string\n name?: string | null\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ObjectBuilderProps>(), {\n label: \"Object Builder\",\n})\n\nconst model = defineModel<\n ObjectBuilderSchema | Record<string, unknown> | undefined\n>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `object-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useObjectBuilder(builderId.value)\n\nconst PALETTE_TYPES: Array<{\n type: ObjectBuilderEntryType\n displayLabel: string\n description: string\n}> = [\n {\n type: \"string\",\n displayLabel: \"String\",\n description: \"A text value.\",\n },\n {\n type: \"number\",\n displayLabel: \"Number\",\n description: \"A numeric value.\",\n },\n {\n type: \"boolean\",\n displayLabel: \"Boolean\",\n description: \"true or false.\",\n },\n {\n type: \"array\",\n displayLabel: \"Array\",\n description: \"A JSON array (edit as JSON).\",\n },\n {\n type: \"object\",\n displayLabel: \"Object\",\n description: \"A nested object (edit as JSON).\",\n },\n {\n type: \"null\",\n displayLabel: \"Null\",\n description: \"Explicit null.\",\n },\n]\n\nfunction isObjectBuilderSchema(value: unknown): value is ObjectBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return Array.isArray(v.entries)\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n const seed = model.value\n if (seed === undefined || seed === null) {\n return\n }\n if (isObjectBuilderSchema(seed)) {\n builder.loadSchema(seed)\n } else if (typeof seed === \"object\") {\n builder.loadSchema(recordToSchema(seed as Record<string, unknown>))\n }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = {\n entries: next.entries.map((e) => ({ ...e })),\n }\n },\n { deep: true },\n)\n\nconst entries = computed<ObjectBuilderEntry[]>(\n () => builder.schema.value.entries,\n)\n\nconst selectedEntry = computed<ObjectBuilderEntry | null>(() => {\n const sel = builder.selection.value\n if (!sel.id) {\n return null\n }\n return entries.value.find((e) => e.id === sel.id) ?? null\n})\n\nconst selectedIndex = computed<number>(() => {\n const sel = builder.selection.value\n if (!sel.id) {\n return -1\n }\n return entries.value.findIndex((e) => e.id === sel.id)\n})\n\nconst canMoveDown = computed<boolean>(() => {\n return (\n selectedIndex.value >= 0 && selectedIndex.value < entries.value.length - 1\n )\n})\n\nfunction onPaletteClick(type: ObjectBuilderEntryType): void {\n const newId = builder.addEntry(type)\n builder.select(newId)\n}\n\nfunction onRowClick(entryId: string): void {\n builder.select(entryId)\n}\n\nfunction onMoveUp(): void {\n if (selectedIndex.value <= 0) {\n return\n }\n builder.reorderEntry(selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n if (!canMoveDown.value) {\n return\n }\n builder.reorderEntry(selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n const sel = builder.selection.value\n if (sel.id) {\n builder.removeEntry(sel.id)\n }\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<Omit<ObjectBuilderEntry, \"id\">>): void {\n const sel = builder.selection.value\n if (sel.id) {\n builder.updateEntry(sel.id, patch)\n }\n}\n\nfunction previewValue(entry: ObjectBuilderEntry): string {\n switch (entry.type) {\n case \"null\":\n return \"null\"\n case \"boolean\":\n return entry.value ? \"true\" : \"false\"\n case \"string\":\n return entry.value === \"\" ? '\"\"' : String(entry.value)\n case \"number\":\n return String(entry.value)\n case \"array\":\n case \"object\":\n try {\n return JSON.stringify(entry.value)\n } catch {\n return \"(invalid)\"\n }\n }\n}\n\nconst keyValue = computed<string>(() => selectedEntry.value?.key ?? \"\")\nconst stringValue = computed<string>(() =>\n selectedEntry.value && selectedEntry.value.type === \"string\"\n ? String(selectedEntry.value.value ?? \"\")\n : \"\",\n)\nconst numberValue = computed<string>(() =>\n selectedEntry.value && selectedEntry.value.type === \"number\"\n ? String(selectedEntry.value.value ?? 0)\n : \"\",\n)\nconst booleanValue = computed<boolean>(() =>\n selectedEntry.value && selectedEntry.value.type === \"boolean\"\n ? Boolean(selectedEntry.value.value)\n : false,\n)\n\nconst jsonDraft = ref<string>(\"\")\nconst jsonError = ref<string>(\"\")\n\nwatch(\n () => selectedEntry.value,\n (next) => {\n if (!next) {\n jsonDraft.value = \"\"\n jsonError.value = \"\"\n return\n }\n if (next.type === \"array\" || next.type === \"object\") {\n try {\n jsonDraft.value = JSON.stringify(next.value, null, 2)\n } catch {\n jsonDraft.value = \"\"\n }\n jsonError.value = \"\"\n }\n },\n { immediate: true },\n)\n\nfunction onJsonInput(raw: string): void {\n jsonDraft.value = raw\n try {\n const parsed = JSON.parse(raw)\n const entry = selectedEntry.value\n if (!entry) {\n return\n }\n if (entry.type === \"array\" && !Array.isArray(parsed)) {\n jsonError.value = \"Value must be a JSON array.\"\n return\n }\n if (\n entry.type === \"object\" &&\n (parsed === null || typeof parsed !== \"object\" || Array.isArray(parsed))\n ) {\n jsonError.value = \"Value must be a JSON object.\"\n return\n }\n jsonError.value = \"\"\n patchSelected({ value: parsed })\n } catch (err) {\n jsonError.value = err instanceof Error ? err.message : \"Invalid JSON.\"\n }\n}\n\nfunction onTypeChange(next: string): void {\n const t = next as ObjectBuilderEntryType\n patchSelected({ type: t })\n}\n\n/** Re-export the flattening helper so consumers can `toRecord(schema)`. */\ndefineExpose({ toRecord })\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'gxp-object-builder grid gap-3 rounded-lg border bg-card',\n props.classList,\n )\n \"\n style=\"grid-template-columns: 200px 1fr 300px; min-height: 22rem\"\n data-testid=\"object-builder\"\n :data-element-name=\"props.name ?? undefined\"\n >\n <aside\n class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n data-testid=\"object-builder-palette\"\n >\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n {{ props.label }}\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"entry in PALETTE_TYPES\"\n :key=\"entry.type\"\n type=\"button\"\n class=\"flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n :data-testid=\"`object-builder-palette-${entry.type}`\"\n @click=\"onPaletteClick(entry.type)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"flex min-w-0 flex-col gap-0.5\">\n <span class=\"font-medium\">{{ entry.displayLabel }}</span>\n <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n {{ entry.description }}\n </span>\n </span>\n </button>\n </div>\n </aside>\n\n <section\n class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n data-testid=\"object-builder-canvas\"\n >\n <header class=\"flex items-center justify-between\">\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n Entries\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/object-builder\n </Badge>\n </header>\n\n <p\n v-if=\"entries.length === 0\"\n class=\"rounded-md border border-dashed bg-background py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"object-builder-canvas-empty\"\n >\n Click an entry type in the palette to add one.\n </p>\n\n <ul\n v-else\n class=\"flex flex-col gap-1 text-xs\"\n data-testid=\"object-builder-canvas-list\"\n >\n <li\n v-for=\"(entry, index) in entries\"\n :key=\"entry.id\"\n class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n :class=\"\n builder.selection.value.id === entry.id\n ? 'border-primary bg-accent/30'\n : ''\n \"\n :data-testid=\"`object-builder-row-${entry.id}`\"\n @click=\"onRowClick(entry.id)\"\n >\n <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n {{ index + 1 }}.\n </span>\n <span class=\"font-medium\">\n {{ entry.key || \"(unnamed)\" }}\n </span>\n <Badge variant=\"secondary\" class=\"font-mono text-[9px]\">\n {{ entry.type }}\n </Badge>\n <span\n class=\"ml-auto max-w-[12rem] truncate font-mono text-[10px] text-muted-foreground\"\n >\n {{ previewValue(entry) }}\n </span>\n </li>\n </ul>\n </section>\n\n <aside\n class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n data-testid=\"object-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4\n class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n >\n Inspector\n </h4>\n <Button\n v-if=\"builder.selection.value.id\"\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Clear selection\"\n @click=\"onClearSelection\"\n >\n <X class=\"h-3.5 w-3.5\" />\n </Button>\n </header>\n\n <p\n v-if=\"!selectedEntry\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"object-builder-inspector-empty\"\n >\n Select an entry to edit its key, type, and value.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"object-builder-inspector-fields\"\n >\n <Card class=\"border-dashed\">\n <CardHeader class=\"py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n {{ selectedEntry.type }}\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"ob-key\">Key</Label>\n <Input\n id=\"ob-key\"\n :model-value=\"keyValue\"\n data-testid=\"object-builder-inspector-key\"\n @input=\"\n (e: Event) =>\n patchSelected({\n key: (e.target as HTMLInputElement).value,\n })\n \"\n />\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label for=\"ob-type\">Type</Label>\n <Select\n :model-value=\"selectedEntry.type\"\n @update:model-value=\"(v) => onTypeChange(v as string)\"\n >\n <SelectTrigger\n id=\"ob-type\"\n data-testid=\"object-builder-inspector-type\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"opt in PALETTE_TYPES\"\n :key=\"opt.type\"\n :value=\"opt.type\"\n >\n {{ opt.displayLabel }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div\n v-if=\"selectedEntry.type === 'string'\"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-string\">Value</Label>\n <Input\n id=\"ob-value-string\"\n :model-value=\"stringValue\"\n data-testid=\"object-builder-inspector-value-string\"\n @input=\"\n (e: Event) =>\n patchSelected({\n value: (e.target as HTMLInputElement).value,\n })\n \"\n />\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'number'\"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-number\">Value</Label>\n <Input\n id=\"ob-value-number\"\n type=\"number\"\n :model-value=\"numberValue\"\n data-testid=\"object-builder-inspector-value-number\"\n @input=\"\n (e: Event) => {\n const v = (e.target as HTMLInputElement).value\n const parsed = v === '' ? 0 : Number(v)\n patchSelected({\n value: Number.isNaN(parsed) ? 0 : parsed,\n })\n }\n \"\n />\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'boolean'\"\n class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n >\n <Label for=\"ob-value-boolean\">Value</Label>\n <Switch\n id=\"ob-value-boolean\"\n :model-value=\"booleanValue\"\n data-testid=\"object-builder-inspector-value-boolean\"\n @update:model-value=\"(v: boolean) => patchSelected({ value: v })\"\n />\n </div>\n\n <div\n v-else-if=\"\n selectedEntry.type === 'array' ||\n selectedEntry.type === 'object'\n \"\n class=\"flex flex-col gap-1\"\n >\n <Label for=\"ob-value-json\">Value (JSON)</Label>\n <Textarea\n id=\"ob-value-json\"\n :model-value=\"jsonDraft\"\n rows=\"6\"\n data-testid=\"object-builder-inspector-value-json\"\n @input=\"\n (e: Event) =>\n onJsonInput((e.target as HTMLTextAreaElement).value)\n \"\n />\n <p\n v-if=\"jsonError\"\n class=\"text-[11px] text-destructive\"\n data-testid=\"object-builder-inspector-value-json-error\"\n >\n {{ jsonError }}\n </p>\n </div>\n\n <div\n v-else-if=\"selectedEntry.type === 'null'\"\n class=\"rounded border bg-background px-2 py-1 text-xs text-muted-foreground\"\n data-testid=\"object-builder-inspector-value-null\"\n >\n Value is fixed to <code class=\"font-mono\">null</code>.\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"selectedIndex <= 0\"\n data-testid=\"object-builder-move-up\"\n @click=\"onMoveUp\"\n >\n <ArrowUp class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"!canMoveDown\"\n data-testid=\"object-builder-move-down\"\n @click=\"onMoveDown\"\n >\n <ArrowDown class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"object-builder-remove\"\n @click=\"onRemove\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove\n </Button>\n </div>\n </div>\n </aside>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/chunks/PasswordInput-D9Ok_2e6.js ADDED Viewed

@@ -0,0 +1,109 @@
+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 { t as r } from "./field-frame-n5oLDNBT.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, onMounted as f, openBlock as p, ref as m, unref as h, useModel as g, useTemplateRef as _, withCtx as v } from "vue";
+import { Eye as y, EyeOff as b } from "@lucide/vue";
+//#region src/components/compositions/elements/input/PasswordInput.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "relative" }, S = /* @__PURE__ */ l({
+	__name: "PasswordInput",
+	props: /* @__PURE__ */ u({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean },
+		togglePasswordVisibility: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let l = e, u = g(e, "modelValue"), S = _("inputRef"), C = m(!1), w = i(() => C.value ? "text" : "password");
+		f(() => {
+			l.autoFocus && S.value?.focus();
+		});
+		function T() {
+			C.value = !C.value;
+		}
+		return (i, l) => (p(), a(h(r), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: v(() => [s("div", x, [c(h(n), {
+				ref_key: "inputRef",
+				ref: S,
+				"model-value": u.value ?? void 0,
+				id: e.id,
+				name: e.name ?? void 0,
+				type: w.value,
+				placeholder: e.placeholder ?? "",
+				readonly: e.readonly,
+				disabled: e.disabled,
+				required: e.required,
+				maxlength: e.maxlength,
+				minlength: e.minlength,
+				"data-element-name": e.name ?? void 0,
+				class: d([e.errors.length ? "border-destructive ring-destructive" : "", e.togglePasswordVisibility ? "pr-10" : ""]),
+				"onUpdate:modelValue": l[0] ||= (e) => u.value = e == null ? "" : String(e)
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"type",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"data-element-name",
+				"class"
+			]), e.togglePasswordVisibility ? (p(), a(h(t), {
+				key: 0,
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				class: "absolute right-1 top-1/2 -translate-y-1/2",
+				"aria-label": C.value ? "Hide password" : "Show password",
+				"data-testid": "password-toggle",
+				onClick: T
+			}, {
+				default: v(() => [C.value ? (p(), a(h(b), {
+					key: 0,
+					class: "h-4 w-4"
+				})) : (p(), a(h(y), {
+					key: 1,
+					class: "h-4 w-4"
+				}))]),
+				_: 1
+			}, 8, ["aria-label"])) : o("", !0)])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), C = /* @__PURE__ */ e({ default: () => w }), w = S;
+//#endregion
+export { C as n, w as t };
+//# sourceMappingURL=PasswordInput-D9Ok_2e6.js.map

package/dist/chunks/PasswordInput-D9Ok_2e6.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PasswordInput-D9Ok_2e6.js","names":[],"sources":["../../src/components/compositions/elements/input/PasswordInput.vue","../../src/components/compositions/elements/input/PasswordInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven password input composition. Composes the shadcn `Input`\n * primitive (with `type=\"password\"`) and `FieldFrame` chrome. When\n * `togglePasswordVisibility` is set, renders an Eye/EyeOff toggle\n * button.\n *\n * Self-contained — usable directly in any Vue app:\n *\n * <PasswordInput v-model=\"pw\" label=\"Password\" required toggle-password-visibility />\n */\nimport { computed, onMounted, ref, useTemplateRef } from \"vue\"\nimport { Eye, EyeOff } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PasswordInputProps {\n modelValue?: string\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 maxlength?: number\n minlength?: number\n helpText?: string\n errors?: string[]\n autoFocus?: boolean\n togglePasswordVisibility?: boolean\n}\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nconst visible = ref(false)\nconst inputType = computed<\"password\" | \"text\">(() =>\n visible.value ? \"text\" : \"password\",\n)\n\nonMounted(() => {\n if (props.autoFocus) {\n inputRef.value?.focus()\n }\n})\n\nfunction toggleVisibility(): void {\n visible.value = !visible.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 <div class=\"relative\">\n <Input\n ref=\"inputRef\"\n :model-value=\"model ?? undefined\"\n :id=\"id\"\n :name=\"name ?? undefined\"\n :type=\"inputType\"\n :placeholder=\"placeholder ?? ''\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :required=\"required\"\n :maxlength=\"maxlength\"\n :minlength=\"minlength\"\n :data-element-name=\"name ?? undefined\"\n :class=\"[\n errors.length ? 'border-destructive ring-destructive' : '',\n togglePasswordVisibility ? 'pr-10' : '',\n ]\"\n @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n />\n <Button\n v-if=\"togglePasswordVisibility\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-sm\"\n class=\"absolute right-1 top-1/2 -translate-y-1/2\"\n :aria-label=\"visible ? 'Hide password' : 'Show password'\"\n data-testid=\"password-toggle\"\n @click=\"toggleVisibility\"\n >\n <EyeOff v-if=\"visible\" class=\"h-4 w-4\" />\n <Eye v-else class=\"h-4 w-4\" />\n </Button>\n </div>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven password input composition. Composes the shadcn `Input`\n * primitive (with `type=\"password\"`) and `FieldFrame` chrome. When\n * `togglePasswordVisibility` is set, renders an Eye/EyeOff toggle\n * button.\n *\n * Self-contained — usable directly in any Vue app:\n *\n * <PasswordInput v-model=\"pw\" label=\"Password\" required toggle-password-visibility />\n */\nimport { computed, onMounted, ref, useTemplateRef } from \"vue\"\nimport { Eye, EyeOff } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PasswordInputProps {\n modelValue?: string\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 maxlength?: number\n minlength?: number\n helpText?: string\n errors?: string[]\n autoFocus?: boolean\n togglePasswordVisibility?: boolean\n}\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nconst visible = ref(false)\nconst inputType = computed<\"password\" | \"text\">(() =>\n visible.value ? \"text\" : \"password\",\n)\n\nonMounted(() => {\n if (props.autoFocus) {\n inputRef.value?.focus()\n }\n})\n\nfunction toggleVisibility(): void {\n visible.value = !visible.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 <div class=\"relative\">\n <Input\n ref=\"inputRef\"\n :model-value=\"model ?? undefined\"\n :id=\"id\"\n :name=\"name ?? undefined\"\n :type=\"inputType\"\n :placeholder=\"placeholder ?? ''\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :required=\"required\"\n :maxlength=\"maxlength\"\n :minlength=\"minlength\"\n :data-element-name=\"name ?? undefined\"\n :class=\"[\n errors.length ? 'border-destructive ring-destructive' : '',\n togglePasswordVisibility ? 'pr-10' : '',\n ]\"\n @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n />\n <Button\n v-if=\"togglePasswordVisibility\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-sm\"\n class=\"absolute right-1 top-1/2 -translate-y-1/2\"\n :aria-label=\"visible ? 'Hide password' : 'Show password'\"\n data-testid=\"password-toggle\"\n @click=\"toggleVisibility\"\n >\n <EyeOff v-if=\"visible\" class=\"h-4 w-4\" />\n <Eye v-else class=\"h-4 w-4\" />\n </Button>\n </div>\n </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM,IAAQ,GAIR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAW,EAAiC,UAAU,GAEtD,IAAU,EAAI,EAAK,GACnB,IAAY,QAChB,EAAQ,QAAQ,SAAS,UAC3B;EAEA,QAAgB;GACd,AAAI,EAAM,aACR,EAAS,OAAO,MAAM;EAE1B,CAAC;EAED,SAAS,IAAyB;GAChC,EAAQ,QAAQ,CAAC,EAAQ;EAC3B;yBAIE,EA0Ca,EAAA,CAAA,GAAA;GAzCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAmCH,CAjCN,EAiCM,OAjCN,GAiCM,CAhCJ,EAkBE,EAAA,CAAA,GAAA;aAjBI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACd,MAAM,EAAA;IACN,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAA,CAAc,EAAA,OAAO,SAAM,wCAAA,IAAyD,EAAA,2BAAwB,UAAA,EAAA,CAAA;IAIjH,uBAAkB,AAAA,EAAA,QAAG,MAAoC,EAAA,QAAQ,KAAC,OAAA,KAAgB,OAAO,CAAC;;;;;;;;;;;;;;OAGrF,EAAA,4BAAA,EAAA,GADR,EAYS,EAAA,CAAA,GAAA;;IAVP,MAAK;IACL,SAAQ;IACR,MAAK;IACL,OAAM;IACL,cAAY,EAAA,QAAO,kBAAA;IACpB,eAAY;IACX,SAAO;;qBAEiC,CAA3B,EAAA,SAAA,EAAA,GAAd,EAAyC,EAAA,CAAA,GAAA;;KAAlB,OAAM;gBAC7B,EAA8B,EAAA,CAAA,GAAA;;KAAlB,OAAM"}

package/dist/chunks/PillSelectOption-BF_982xH.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { t as n } from "./field-frame-n5oLDNBT.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+//#region src/components/compositions/elements/option-select/PillSelectOption.vue?vue&type=script&setup=true&lang.ts
+var v = ["data-element-name"], y = /* @__PURE__ */ l({
+	__name: "PillSelectOption",
+	props: /* @__PURE__ */ u({
+		modelValue: {},
+		options: { default: () => [] },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let l = e, u = g(e, "modelValue");
+		function y(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let b = i(() => (l.options ?? []).map(y)), x = i(() => {
+			let e = u.value;
+			return e ? Array.isArray(e) ? e.map((e) => String(e)) : [String(e)] : [];
+		});
+		function S(e) {
+			return x.value.includes(e);
+		}
+		function C(e) {
+			if (e.disabled || l.disabled || l.readonly) return;
+			let t = x.value;
+			t.includes(e.value) ? u.value = t.filter((t) => t !== e.value) : u.value = [...t, e.value];
+		}
+		return (i, l) => (f(), a(h(n), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: _(() => [s("div", {
+				class: "flex flex-wrap gap-2",
+				"data-element-name": e.name ?? void 0
+			}, [(f(!0), o(r, null, p(b.value, (n) => (f(), a(h(t), {
+				key: n.value,
+				as: "button",
+				type: "button",
+				variant: S(n.value) ? "default" : "outline",
+				size: "lg",
+				class: d(["cursor-pointer transition-colors", n.disabled || e.disabled || e.readonly ? "pointer-events-none opacity-50" : ""]),
+				"data-active": S(n.value),
+				"aria-pressed": S(n.value),
+				onClick: (e) => C(n)
+			}, {
+				default: _(() => [c(m(n.label), 1)]),
+				_: 2
+			}, 1032, [
+				"variant",
+				"class",
+				"data-active",
+				"aria-pressed",
+				"onClick"
+			]))), 128))], 8, v)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+}), b = /* @__PURE__ */ e({ default: () => x }), x = y;
+//#endregion
+export { b as n, x as t };
+//# sourceMappingURL=PillSelectOption-BF_982xH.js.map

package/dist/chunks/PillSelectOption-BF_982xH.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PillSelectOption-BF_982xH.js","names":[],"sources":["../../src/components/compositions/elements/option-select/PillSelectOption.vue","../../src/components/compositions/elements/option-select/PillSelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-select pill composition. Each option becomes a\n * toggleable Badge with multi-select semantics.\n *\n * <PillSelectOption v-model=\"tags\" :options=\"[...]\" label=\"Tags\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PillSelectOptionProps {\n modelValue?: Array<string | number> | null\n options?: SelectOptionLike[]\n id?: string\n name?: string\n label?: string\n hideLabel?: boolean\n required?: boolean\n readonly?: boolean\n disabled?: boolean\n helpText?: string\n errors?: string[]\n}\n\nconst props = withDefaults(defineProps<PillSelectOptionProps>(), {\n errors: () => [],\n options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n label: string\n value: string\n disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n if (typeof opt === \"string\") {\n return { label: opt, value: opt, disabled: false }\n }\n return {\n label: opt.label,\n value: String(opt.value),\n disabled: Boolean(opt.disabled),\n }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n const v = model.value\n if (!v) {\n return []\n }\n if (Array.isArray(v)) {\n return v.map((x) => String(x))\n }\n return [String(v)]\n})\n\nfunction isActive(val: string): boolean {\n return selected.value.includes(val)\n}\n\nfunction togglePill(opt: NormalisedOption): void {\n if (opt.disabled || props.disabled || props.readonly) {\n return\n }\n const current = selected.value\n if (current.includes(opt.value)) {\n model.value = current.filter((v) => v !== opt.value)\n } else {\n model.value = [...current, opt.value]\n }\n}\n</script>\n\n<template>\n <FieldFrame\n :label=\"label\"\n :required=\"required\"\n :hide-label=\"hideLabel\"\n :help-text=\"helpText\"\n :errors=\"errors\"\n >\n <div\n class=\"flex flex-wrap gap-2\"\n :data-element-name=\"name ?? undefined\"\n >\n <Badge\n v-for=\"opt in normalised\"\n :key=\"opt.value\"\n as=\"button\"\n type=\"button\"\n :variant=\"isActive(opt.value) ? 'default' : 'outline'\"\n size=\"lg\"\n :class=\"[\n 'cursor-pointer transition-colors',\n opt.disabled || disabled || readonly\n ? 'pointer-events-none opacity-50'\n : '',\n ]\"\n :data-active=\"isActive(opt.value)\"\n :aria-pressed=\"isActive(opt.value)\"\n @click=\"togglePill(opt)\"\n >\n {{ opt.label }}\n </Badge>\n </div>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven multi-select pill composition. Each option becomes a\n * toggleable Badge with multi-select semantics.\n *\n * <PillSelectOption v-model=\"tags\" :options=\"[...]\" label=\"Tags\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PillSelectOptionProps {\n modelValue?: Array<string | number> | null\n options?: SelectOptionLike[]\n id?: string\n name?: string\n label?: string\n hideLabel?: boolean\n required?: boolean\n readonly?: boolean\n disabled?: boolean\n helpText?: string\n errors?: string[]\n}\n\nconst props = withDefaults(defineProps<PillSelectOptionProps>(), {\n errors: () => [],\n options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n label: string\n value: string\n disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n if (typeof opt === \"string\") {\n return { label: opt, value: opt, disabled: false }\n }\n return {\n label: opt.label,\n value: String(opt.value),\n disabled: Boolean(opt.disabled),\n }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n const v = model.value\n if (!v) {\n return []\n }\n if (Array.isArray(v)) {\n return v.map((x) => String(x))\n }\n return [String(v)]\n})\n\nfunction isActive(val: string): boolean {\n return selected.value.includes(val)\n}\n\nfunction togglePill(opt: NormalisedOption): void {\n if (opt.disabled || props.disabled || props.readonly) {\n return\n }\n const current = selected.value\n if (current.includes(opt.value)) {\n model.value = current.filter((v) => v !== opt.value)\n } else {\n model.value = [...current, opt.value]\n }\n}\n</script>\n\n<template>\n <FieldFrame\n :label=\"label\"\n :required=\"required\"\n :hide-label=\"hideLabel\"\n :help-text=\"helpText\"\n :errors=\"errors\"\n >\n <div\n class=\"flex flex-wrap gap-2\"\n :data-element-name=\"name ?? undefined\"\n >\n <Badge\n v-for=\"opt in normalised\"\n :key=\"opt.value\"\n as=\"button\"\n type=\"button\"\n :variant=\"isActive(opt.value) ? 'default' : 'outline'\"\n size=\"lg\"\n :class=\"[\n 'cursor-pointer transition-colors',\n opt.disabled || disabled || readonly\n ? 'pointer-events-none opacity-50'\n : '',\n ]\"\n :data-active=\"isActive(opt.value)\"\n :aria-pressed=\"isActive(opt.value)\"\n @click=\"togglePill(opt)\"\n >\n {{ opt.label }}\n </Badge>\n </div>\n </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAM,IAAQ,GAKR,IAAQ,EAA0C,GAAC,YAAY;EAQrE,SAAS,EAAgB,GAAyC;GAIhE,OAHI,OAAO,KAAQ,WACV;IAAE,OAAO;IAAK,OAAO;IAAK,UAAU;GAAM,IAE5C;IACL,OAAO,EAAI;IACX,OAAO,OAAO,EAAI,KAAK;IACvB,UAAU,EAAQ,EAAI;GACxB;EACF;EAEA,IAAM,IAAa,SAChB,EAAM,WAAW,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM;GAOhB,OANK,IAGD,MAAM,QAAQ,CAAC,IACV,EAAE,KAAK,MAAM,OAAO,CAAC,CAAC,IAExB,CAAC,OAAO,CAAC,CAAC,IALR,CAAC;EAMZ,CAAC;EAED,SAAS,EAAS,GAAsB;GACtC,OAAO,EAAS,MAAM,SAAS,CAAG;EACpC;EAEA,SAAS,EAAW,GAA6B;GAC/C,IAAI,EAAI,YAAY,EAAM,YAAY,EAAM,UAC1C;GAEF,IAAM,IAAU,EAAS;GACzB,AAAI,EAAQ,SAAS,EAAI,KAAK,IAC5B,EAAM,QAAQ,EAAQ,QAAQ,MAAM,MAAM,EAAI,KAAK,IAEnD,EAAM,QAAQ,CAAC,GAAG,GAAS,EAAI,KAAK;EAExC;yBAIE,EA+Ba,EAAA,CAAA,GAAA;GA9BV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAyBH,CAvBN,EAuBM,OAAA;IAtBJ,OAAM;IACL,qBAAmB,EAAA,QAAQ,KAAA;eAE5B,EAkBQ,GAAA,MAAA,EAjBQ,EAAA,QAAP,YADT,EAkBQ,EAAA,CAAA,GAAA;IAhBL,KAAK,EAAI;IACV,IAAG;IACH,MAAK;IACJ,SAAS,EAAS,EAAI,KAAK,IAAA,YAAA;IAC5B,MAAK;IACJ,OAAK,EAAA,CAAA,oCAA4D,EAAI,YAAY,EAAA,YAAY,EAAA,WAAA,mCAAA,EAAA,CAAA;IAM7F,eAAa,EAAS,EAAI,KAAK;IAC/B,gBAAc,EAAS,EAAI,KAAK;IAChC,UAAK,MAAE,EAAW,CAAG;;qBAEP,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/PresetBuilder-bfko3eAb.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./formBuilderStore-D-G-ujKs.js";
+import { n } from "./utils-DAErOi9O.js";
+import { n as r } from "./badge-4iQG4kuk.js";
+import { n as i, o as a, r as o, s } from "./card-DAfWnvro.js";
+import { t as c } from "./input-tw5ZQGKQ.js";
+import { n as l } from "./label-I5voJX5E.js";
+import { t as u } from "./textarea-lgNOfYRH.js";
+import { n as d } from "./presetBuilderStore-DK4cmCJz.js";
+import { t as f } from "./field-frame-n5oLDNBT.js";
+import { t as p } from "./FormBuilder-D314W1mI.js";
+import { computed as m, createBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeClass as x, onMounted as S, openBlock as C, ref as w, unref as T, useModel as E, watch as D, withCtx as O } from "vue";
+//#region src/components/compositions/elements/builder/PresetBuilder.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "flex items-center justify-between gap-2" }, A = { class: "grid gap-3 sm:grid-cols-2" }, j = { class: "flex flex-col gap-1" }, M = { class: "flex flex-col gap-1" }, N = /* @__PURE__ */ y({
+	__name: "PresetBuilder",
+	props: /* @__PURE__ */ b({
+		modelValue: {},
+		builderId: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let y = e, b = E(e, "modelValue"), N = 0;
+		function P() {
+			return N += 1, `preset-builder-${Date.now()}-${N}`;
+		}
+		let F = w(P()), I = d(m(() => y.builderId ?? F.value).value), L = m(() => I.state.value.innerBuilderId), R = t(L.value);
+		function z(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return typeof t.presetName == "string" && typeof t.schema == "object" && t.schema !== null;
+		}
+		S(() => {
+			let e = b.value;
+			z(e) && (I.loadMeta({
+				presetName: e.presetName,
+				presetDescription: e.presetDescription
+			}), R.loadSchema(e.schema));
+		});
+		let B = m(() => R.schema.value), V = m(() => I.state.value);
+		D([V, B], ([e, t]) => {
+			b.value = {
+				presetName: e.presetName,
+				presetDescription: e.presetDescription,
+				schema: t
+			};
+		}, { deep: !0 });
+		function H(e) {
+			I.setName(e.target.value);
+		}
+		function U(e) {
+			I.setDescription(e.target.value);
+		}
+		return (e, t) => (C(), h(T(f), {
+			label: y.label,
+			"hide-label": y.hideLabel,
+			"help-text": y.helpText,
+			errors: y.errors,
+			class: x(y.classList)
+		}, {
+			default: O(() => [v(T(s), {
+				class: "gxp-preset-builder",
+				"data-testid": "preset-builder",
+				"data-element-name": y.name ?? void 0
+			}, {
+				default: O(() => [v(T(o), null, {
+					default: O(() => [g("div", k, [v(T(i), { class: "text-base" }, {
+						default: O(() => [...t[0] ||= [_("Preset", -1)]]),
+						_: 1
+					}), v(T(r), {
+						variant: "outline",
+						class: "font-mono text-[10px]"
+					}, {
+						default: O(() => [...t[1] ||= [_(" builder/preset-builder ", -1)]]),
+						_: 1
+					})])]),
+					_: 1
+				}), v(T(a), { class: "flex flex-col gap-4" }, {
+					default: O(() => [g("div", A, [g("div", j, [v(T(l), { for: "preset-builder-name" }, {
+						default: O(() => [...t[2] ||= [_("Preset name", -1)]]),
+						_: 1
+					}), v(T(c), {
+						id: "preset-builder-name",
+						"model-value": V.value.presetName,
+						placeholder: "My preset",
+						"data-testid": "preset-builder-name",
+						onInput: H
+					}, null, 8, ["model-value"])]), g("div", M, [v(T(l), { for: "preset-builder-description" }, {
+						default: O(() => [...t[3] ||= [_("Description", -1)]]),
+						_: 1
+					}), v(T(u), {
+						id: "preset-builder-description",
+						"model-value": V.value.presetDescription,
+						placeholder: "Optional description",
+						"data-testid": "preset-builder-description",
+						onInput: U
+					}, null, 8, ["model-value"])])]), g("div", {
+						class: x(T(n)("rounded-md border bg-card/40 p-2")),
+						"data-testid": "preset-builder-inner"
+					}, [v(p, {
+						"builder-id": L.value,
+						item: y.item
+					}, null, 8, ["builder-id", "item"])], 2)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["data-element-name"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"hide-label",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+}), P = /* @__PURE__ */ e({ default: () => F }), F = N;
+//#endregion
+export { P as n, F as t };
+//# sourceMappingURL=PresetBuilder-bfko3eAb.js.map

package/dist/chunks/PresetBuilder-bfko3eAb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PresetBuilder-bfko3eAb.js","names":[],"sources":["../../src/components/compositions/elements/builder/PresetBuilder.vue","../../src/components/compositions/elements/builder/PresetBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * PresetBuilder — wraps a FormBuilder schema with a named, described\n * preset envelope.\n *\n * Layout:\n * - Canvas header: preset name + description inputs.\n * - Canvas body: embedded FormBuilder bound to the inner schema.\n *\n * State for the name + description lives in `presetBuilderStore`. The\n * inner schema is owned by `formBuilderStore` (keyed off a derived\n * `innerBuilderId`) so all existing FormBuilder behaviours work\n * unchanged.\n *\n * Two-way binds the full `PresetBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport FormBuilder from \"./FormBuilder.vue\"\nimport {\n usePresetBuilder,\n type PresetBuilderSchema,\n} from \"@/stores/presetBuilderStore\"\nimport {\n useFormBuilder,\n type BuilderSchema,\n} from \"@/stores/formBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface PresetBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: PresetBuilderSchema\n /**\n * Identifier used to key the presetBuilderStore. Defaults to a\n * stable auto-generated id so multiple PresetBuilders on the same\n * page don't collide.\n */\n builderId?: string\n name?: string | null\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<PresetBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<PresetBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `preset-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = usePresetBuilder(builderId.value)\nconst innerBuilderId = computed<string>(() => builder.state.value.innerBuilderId)\nconst inner = useFormBuilder(innerBuilderId.value)\n\nfunction isPresetSchema(value: unknown): value is PresetBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return (\n typeof v.presetName === \"string\" &&\n typeof v.schema === \"object\" &&\n v.schema !== null\n )\n}\n\n/** Seed both stores from the initial modelValue. */\nonMounted(() => {\n const seed = model.value\n if (isPresetSchema(seed)) {\n builder.loadMeta({\n presetName: seed.presetName,\n presetDescription: seed.presetDescription,\n })\n inner.loadSchema(seed.schema)\n }\n})\n\nconst innerSchemaRef = computed<BuilderSchema>(() => inner.schema.value)\nconst stateRef = computed(() => builder.state.value)\n\n/** Push schema changes back via v-model. */\nwatch(\n [stateRef, innerSchemaRef],\n ([state, schema]) => {\n model.value = {\n presetName: state.presetName,\n presetDescription: state.presetDescription,\n schema,\n }\n },\n { deep: true },\n)\n\nfunction onNameInput(e: Event): void {\n builder.setName((e.target as HTMLInputElement).value)\n}\n\nfunction onDescriptionInput(e: Event): void {\n builder.setDescription((e.target as HTMLTextAreaElement).value)\n}\n</script>\n\n<template>\n <FieldFrame\n :label=\"props.label\"\n :hide-label=\"props.hideLabel\"\n :help-text=\"props.helpText\"\n :errors=\"props.errors\"\n :class=\"props.classList\"\n >\n <Card\n class=\"gxp-preset-builder\"\n data-testid=\"preset-builder\"\n :data-element-name=\"props.name ?? undefined\"\n >\n <CardHeader>\n <div class=\"flex items-center justify-between gap-2\">\n <CardTitle class=\"text-base\">Preset</CardTitle>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/preset-builder\n </Badge>\n </div>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-4\">\n <div class=\"grid gap-3 sm:grid-cols-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"preset-builder-name\">Preset name</Label>\n <Input\n id=\"preset-builder-name\"\n :model-value=\"stateRef.presetName\"\n placeholder=\"My preset\"\n data-testid=\"preset-builder-name\"\n @input=\"onNameInput\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"preset-builder-description\">Description</Label>\n <Textarea\n id=\"preset-builder-description\"\n :model-value=\"stateRef.presetDescription\"\n placeholder=\"Optional description\"\n data-testid=\"preset-builder-description\"\n @input=\"onDescriptionInput\"\n />\n </div>\n </div>\n\n <div\n :class=\"cn('rounded-md border bg-card/40 p-2')\"\n data-testid=\"preset-builder-inner\"\n >\n <FormBuilder\n :builder-id=\"innerBuilderId\"\n :item=\"props.item\"\n />\n </div>\n </CardContent>\n </Card>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * PresetBuilder — wraps a FormBuilder schema with a named, described\n * preset envelope.\n *\n * Layout:\n * - Canvas header: preset name + description inputs.\n * - Canvas body: embedded FormBuilder bound to the inner schema.\n *\n * State for the name + description lives in `presetBuilderStore`. The\n * inner schema is owned by `formBuilderStore` (keyed off a derived\n * `innerBuilderId`) so all existing FormBuilder behaviours work\n * unchanged.\n *\n * Two-way binds the full `PresetBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport FormBuilder from \"./FormBuilder.vue\"\nimport {\n usePresetBuilder,\n type PresetBuilderSchema,\n} from \"@/stores/presetBuilderStore\"\nimport {\n useFormBuilder,\n type BuilderSchema,\n} from \"@/stores/formBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface PresetBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: PresetBuilderSchema\n /**\n * Identifier used to key the presetBuilderStore. Defaults to a\n * stable auto-generated id so multiple PresetBuilders on the same\n * page don't collide.\n */\n builderId?: string\n name?: string | null\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<PresetBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<PresetBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `preset-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = usePresetBuilder(builderId.value)\nconst innerBuilderId = computed<string>(() => builder.state.value.innerBuilderId)\nconst inner = useFormBuilder(innerBuilderId.value)\n\nfunction isPresetSchema(value: unknown): value is PresetBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return (\n typeof v.presetName === \"string\" &&\n typeof v.schema === \"object\" &&\n v.schema !== null\n )\n}\n\n/** Seed both stores from the initial modelValue. */\nonMounted(() => {\n const seed = model.value\n if (isPresetSchema(seed)) {\n builder.loadMeta({\n presetName: seed.presetName,\n presetDescription: seed.presetDescription,\n })\n inner.loadSchema(seed.schema)\n }\n})\n\nconst innerSchemaRef = computed<BuilderSchema>(() => inner.schema.value)\nconst stateRef = computed(() => builder.state.value)\n\n/** Push schema changes back via v-model. */\nwatch(\n [stateRef, innerSchemaRef],\n ([state, schema]) => {\n model.value = {\n presetName: state.presetName,\n presetDescription: state.presetDescription,\n schema,\n }\n },\n { deep: true },\n)\n\nfunction onNameInput(e: Event): void {\n builder.setName((e.target as HTMLInputElement).value)\n}\n\nfunction onDescriptionInput(e: Event): void {\n builder.setDescription((e.target as HTMLTextAreaElement).value)\n}\n</script>\n\n<template>\n <FieldFrame\n :label=\"props.label\"\n :hide-label=\"props.hideLabel\"\n :help-text=\"props.helpText\"\n :errors=\"props.errors\"\n :class=\"props.classList\"\n >\n <Card\n class=\"gxp-preset-builder\"\n data-testid=\"preset-builder\"\n :data-element-name=\"props.name ?? undefined\"\n >\n <CardHeader>\n <div class=\"flex items-center justify-between gap-2\">\n <CardTitle class=\"text-base\">Preset</CardTitle>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/preset-builder\n </Badge>\n </div>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-4\">\n <div class=\"grid gap-3 sm:grid-cols-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"preset-builder-name\">Preset name</Label>\n <Input\n id=\"preset-builder-name\"\n :model-value=\"stateRef.presetName\"\n placeholder=\"My preset\"\n data-testid=\"preset-builder-name\"\n @input=\"onNameInput\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"preset-builder-description\">Description</Label>\n <Textarea\n id=\"preset-builder-description\"\n :model-value=\"stateRef.presetDescription\"\n placeholder=\"Optional description\"\n data-testid=\"preset-builder-description\"\n @input=\"onDescriptionInput\"\n />\n </div>\n </div>\n\n <div\n :class=\"cn('rounded-md border bg-card/40 p-2')\"\n data-testid=\"preset-builder-inner\"\n >\n <FormBuilder\n :builder-id=\"innerBuilderId\"\n :item=\"props.item\"\n />\n </div>\n </CardContent>\n </Card>\n </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/ProgressBarDisplay-CnOulmUw.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { r as t } from "./progress-DqH3yH0e.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, toDisplayString as u, unref as d } from "vue";
+//#region src/components/compositions/elements/display/ProgressBarDisplay.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	key: 0,
+	class: "flex items-center justify-between text-sm"
+}, p = { key: 0 }, m = {
+	class: "text-muted-foreground",
+	"data-testid": "progress-bar-value"
+}, h = /* @__PURE__ */ s({
+	__name: "ProgressBarDisplay",
+	props: {
+		progress: { default: 0 },
+		label: {},
+		hideLabel: { type: Boolean },
+		classList: {}
+	},
+	setup(e) {
+		let s = e;
+		function h(e) {
+			return e < 0 ? 0 : e > 100 ? 100 : e;
+		}
+		let g = n(() => typeof s.progress != "number" || !Number.isFinite(s.progress) ? 0 : h(s.progress)), _ = n(() => {
+			let e = s.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (n, s) => (l(), i("div", {
+			class: c(["flex flex-col gap-1.5", _.value]),
+			"data-testid": "progress-bar-display"
+		}, [e.label && !e.hideLabel || !e.hideLabel ? (l(), i("div", f, [e.label && !e.hideLabel ? (l(), i("span", p, u(e.label), 1)) : r("", !0), a("span", m, u(g.value) + "%", 1)])) : r("", !0), o(d(t), {
+			value: g.value,
+			max: 100
+		}, null, 8, ["value"])], 2));
+	}
+}), g = /* @__PURE__ */ e({ default: () => _ }), _ = h;
+//#endregion
+export { g as n, _ as t };
+//# sourceMappingURL=ProgressBarDisplay-CnOulmUw.js.map

package/dist/chunks/ProgressBarDisplay-CnOulmUw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ProgressBarDisplay-CnOulmUw.js","names":[],"sources":["../../src/components/compositions/elements/display/ProgressBarDisplay.vue","../../src/components/compositions/elements/display/ProgressBarDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven progress bar display.\n *\n * Wraps the shadcn-vue Progress primitive. The numeric `progress`\n * prop (0-100) is clamped before being passed to the underlying\n * indicator.\n */\nimport { computed } from \"vue\"\nimport { Progress } from \"@/components/ui/progress\"\n\nexport interface ProgressBarDisplayProps {\n progress?: number\n label?: string\n hideLabel?: boolean\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ProgressBarDisplayProps>(), {\n progress: 0,\n})\n\nfunction clamp(n: number): number {\n if (n < 0) {\n return 0\n }\n if (n > 100) {\n return 100\n }\n return n\n}\n\nconst value = computed<number>(() => {\n if (typeof props.progress !== \"number\" || !Number.isFinite(props.progress)) {\n return 0\n }\n return clamp(props.progress)\n})\n\nconst rootClass = computed<string>(() => {\n const cl = props.classList\n if (!cl) {\n return \"\"\n }\n return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n <div\n class=\"flex flex-col gap-1.5\"\n :class=\"rootClass\"\n data-testid=\"progress-bar-display\"\n >\n <div\n v-if=\"(label && !hideLabel) || !hideLabel\"\n class=\"flex items-center justify-between text-sm\"\n >\n <span v-if=\"label && !hideLabel\">{{ label }}</span>\n <span\n class=\"text-muted-foreground\"\n data-testid=\"progress-bar-value\"\n >{{ value }}%</span>\n </div>\n <Progress\n :value=\"value\"\n :max=\"100\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven progress bar display.\n *\n * Wraps the shadcn-vue Progress primitive. The numeric `progress`\n * prop (0-100) is clamped before being passed to the underlying\n * indicator.\n */\nimport { computed } from \"vue\"\nimport { Progress } from \"@/components/ui/progress\"\n\nexport interface ProgressBarDisplayProps {\n progress?: number\n label?: string\n hideLabel?: boolean\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ProgressBarDisplayProps>(), {\n progress: 0,\n})\n\nfunction clamp(n: number): number {\n if (n < 0) {\n return 0\n }\n if (n > 100) {\n return 100\n }\n return n\n}\n\nconst value = computed<number>(() => {\n if (typeof props.progress !== \"number\" || !Number.isFinite(props.progress)) {\n return 0\n }\n return clamp(props.progress)\n})\n\nconst rootClass = computed<string>(() => {\n const cl = props.classList\n if (!cl) {\n return \"\"\n }\n return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n <div\n class=\"flex flex-col gap-1.5\"\n :class=\"rootClass\"\n data-testid=\"progress-bar-display\"\n >\n <div\n v-if=\"(label && !hideLabel) || !hideLabel\"\n class=\"flex items-center justify-between text-sm\"\n >\n <span v-if=\"label && !hideLabel\">{{ label }}</span>\n <span\n class=\"text-muted-foreground\"\n data-testid=\"progress-bar-value\"\n >{{ value }}%</span>\n </div>\n <Progress\n :value=\"value\"\n :max=\"100\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAkBA,IAAM,IAAQ;EAId,SAAS,EAAM,GAAmB;GAOhC,OANI,IAAI,IACC,IAEL,IAAI,MACC,MAEF;EACT;EAEA,IAAM,IAAQ,QACR,OAAO,EAAM,YAAa,YAAY,CAAC,OAAO,SAAS,EAAM,QAAQ,IAChE,IAEF,EAAM,EAAM,QAAQ,CAC5B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAmBM,OAAA;GAlBJ,OAAK,EAAA,CAAC,yBACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAGH,EAAA,SAAK,CAAK,EAAA,aAAS,CAAM,EAAA,aAAA,EAAA,GADlC,EASM,OATN,GASM,CALQ,EAAA,SAAK,CAAK,EAAA,aAAA,EAAA,GAAtB,EAAmD,QAAA,GAAA,EAAf,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GACzC,EAGoB,QAHpB,GAGoB,EAAhB,EAAA,KAAK,IAAG,KAAC,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEf,EAGE,EAAA,CAAA,GAAA;GAFC,OAAO,EAAA;GACP,KAAK"}