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/DependencyListBuilder-Cf8AMMJM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DependencyListBuilder-Cf8AMMJM.js","names":[],"sources":["../../src/components/compositions/elements/builder/DependencyListBuilder.vue","../../src/components/compositions/elements/builder/DependencyListBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * DependencyListBuilder — visual editor for a list of conditional\n * rules of the shape \"when X happens then Y\".\n *\n * Three-pane layout (matches FormBuilder):\n * - LEFT (Palette): \"Add rule\" + a handful of rule templates.\n * - MIDDLE (Canvas): ordered list of rules; click a row to select.\n * - RIGHT (Inspector): edits the selected rule — name, enabled,\n * conditions (add/edit/remove), actions\n * (add/edit/remove), conditionsLogic.\n *\n * State is owned by `dependencyListBuilderStore`. Two-way binds the\n * full `DependencyListBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { 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 {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport {\n useDependencyListBuilder,\n type DependencyAction,\n type DependencyActionType,\n type DependencyCondition,\n type DependencyListBuilderSchema,\n type DependencyOperator,\n type DependencyRule,\n type DependencyRuleTemplate,\n} from \"@/stores/dependencyListBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DependencyListBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: DependencyListBuilderSchema\n /**\n * Identifier used to key the dependencyListBuilderStore. Defaults to\n * a stable auto-generated id so multiple builders on the same page\n * 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<DependencyListBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<DependencyListBuilderSchema | undefined>(\n \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `dep-list-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useDependencyListBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is DependencyListBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n return Array.isArray((value as Record<string, unknown>).rules)\n}\n\nonMounted(() => {\n const seed = model.value\n if (isSchema(seed)) {\n builder.loadSchema(seed)\n }\n})\n\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = next\n },\n { deep: true },\n)\n\nconst rules = computed<DependencyRule[]>(() => builder.schema.value.rules)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedRule = computed<DependencyRule | null>(() => {\n const id = selectedId.value\n if (!id) {\n return null\n }\n return rules.value.find((r) => r.id === id) ?? null\n})\n\nconst OPERATORS: { label: string; value: DependencyOperator }[] = [\n { label: \"equals\", value: \"equals\" },\n { label: \"not equals\", value: \"not_equals\" },\n { label: \"greater than\", value: \"greater_than\" },\n { label: \"less than\", value: \"less_than\" },\n { label: \"contains\", value: \"contains\" },\n { label: \"is truthy\", value: \"is_truthy\" },\n { label: \"is falsy\", value: \"is_falsy\" },\n]\n\nconst ACTION_TYPES: { label: string; value: DependencyActionType }[] = [\n { label: \"Show field\", value: \"show\" },\n { label: \"Hide field\", value: \"hide\" },\n { label: \"Require field\", value: \"require\" },\n { label: \"Set value\", value: \"set_value\" },\n { label: \"Emit event\", value: \"emit_event\" },\n]\n\nconst LOGIC: { label: string; value: \"AND\" | \"OR\" }[] = [\n { label: \"AND (all)\", value: \"AND\" },\n { label: \"OR (any)\", value: \"OR\" },\n]\n\nconst PALETTE: { label: string; template: DependencyRuleTemplate }[] = [\n { label: \"Add rule\", template: \"blank\" },\n { label: \"Show field\", template: \"show-field\" },\n { label: \"Hide field\", template: \"hide-field\" },\n { label: \"Set value\", template: \"set-value\" },\n]\n\nfunction onPaletteAdd(template: DependencyRuleTemplate): void {\n const id = builder.addRule(template)\n builder.select(id)\n}\n\nfunction onRuleClick(ruleId: string): void {\n builder.select(ruleId)\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n const id = selectedId.value\n if (id) {\n builder.removeRule(id)\n }\n}\n\nfunction patchSelected(patch: Partial<Omit<DependencyRule, \"id\">>): void {\n const id = selectedId.value\n if (id) {\n builder.updateRule(id, patch)\n }\n}\n\nfunction onNameInput(e: Event): void {\n patchSelected({ name: (e.target as HTMLInputElement).value })\n}\n\nfunction onEnabledChange(v: boolean): void {\n patchSelected({ enabled: v })\n}\n\nfunction onLogicChange(v: unknown): void {\n if (v === \"AND\" || v === \"OR\") {\n patchSelected({ conditionsLogic: v })\n }\n}\n\nfunction onAddCondition(): void {\n const id = selectedId.value\n if (id) {\n builder.addCondition(id)\n }\n}\n\nfunction onConditionFieldInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateCondition(id, index, {\n field: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onConditionOperatorChange(index: number, v: unknown): void {\n const id = selectedId.value\n if (id && isOperator(v)) {\n builder.updateCondition(id, index, { operator: v })\n }\n}\n\nfunction onConditionValueInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateCondition(id, index, {\n value: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onRemoveCondition(index: number): void {\n const id = selectedId.value\n if (id) {\n builder.removeCondition(id, index)\n }\n}\n\nfunction onAddAction(): void {\n const id = selectedId.value\n if (id) {\n builder.addAction(id)\n }\n}\n\nfunction onActionTypeChange(index: number, v: unknown): void {\n const id = selectedId.value\n if (id && isActionType(v)) {\n builder.updateAction(id, index, { type: v })\n }\n}\n\nfunction onActionTargetInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateAction(id, index, {\n target: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onActionPayloadInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateAction(id, index, {\n payload: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onRemoveAction(index: number): void {\n const id = selectedId.value\n if (id) {\n builder.removeAction(id, index)\n }\n}\n\nfunction isOperator(value: unknown): value is DependencyOperator {\n return OPERATORS.some((o) => o.value === value)\n}\n\nfunction isActionType(value: unknown): value is DependencyActionType {\n return ACTION_TYPES.some((a) => a.value === value)\n}\n\nfunction conditionValueString(c: DependencyCondition): string {\n if (c.value === null || c.value === undefined) {\n return \"\"\n }\n return String(c.value)\n}\n\nfunction actionTargetString(a: DependencyAction): string {\n return a.target ?? \"\"\n}\n\nfunction actionPayloadString(a: DependencyAction): string {\n if (a.payload === null || a.payload === undefined) {\n return \"\"\n }\n return String(a.payload)\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 <div\n :class=\"cn('gxp-dependency-list-builder grid gap-3 rounded-lg border bg-card')\"\n style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n data-testid=\"dependency-list-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=\"dependency-list-builder-palette\"\n >\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Rule palette\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"entry in PALETTE\"\n :key=\"entry.template\"\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=\"`dependency-list-builder-palette-${entry.template}`\"\n @click=\"onPaletteAdd(entry.template)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"font-medium\">{{ entry.label }}</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=\"dependency-list-builder-canvas\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Rules\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/dependency-list-builder\n </Badge>\n </header>\n\n <p\n v-if=\"rules.length === 0\"\n class=\"py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"dependency-list-builder-canvas-empty\"\n >\n Click \"Add rule\" in the palette to create a rule.\n </p>\n\n <ul\n v-else\n class=\"flex flex-col gap-1 text-xs\"\n data-testid=\"dependency-list-builder-canvas-list\"\n >\n <li\n v-for=\"(rule, index) in rules\"\n :key=\"rule.id\"\n class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n :class=\"\n selectedId === rule.id ? 'border-primary bg-accent/30' : ''\n \"\n :data-testid=\"`dependency-list-builder-row-${rule.id}`\"\n @click=\"onRuleClick(rule.id)\"\n >\n <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n {{ index + 1 }}.\n </span>\n <span class=\"font-medium\">{{ rule.name || \"(unnamed)\" }}</span>\n <Badge variant=\"secondary\" class=\"font-mono text-[9px]\">\n {{ rule.conditions.length }}c / {{ rule.actions.length }}a\n </Badge>\n <Switch\n class=\"ml-auto\"\n :model-value=\"rule.enabled\"\n :data-testid=\"`dependency-list-builder-row-enabled-${rule.id}`\"\n @click.stop\n @update:model-value=\"\n (v: boolean) => builder.updateRule(rule.id, { enabled: v })\n \"\n />\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=\"dependency-list-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Inspector\n </h4>\n <Button\n v-if=\"selectedId\"\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=\"!selectedRule\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"dependency-list-builder-inspector-empty\"\n >\n Select a rule on the canvas to edit it.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"dependency-list-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 Rule\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=\"dep-name\">Name</Label>\n <Input\n id=\"dep-name\"\n :model-value=\"selectedRule.name\"\n data-testid=\"dependency-list-builder-inspector-name\"\n @input=\"onNameInput\"\n />\n </div>\n\n <div class=\"flex items-center justify-between rounded border bg-background px-2 py-1\">\n <Label for=\"dep-enabled\">Enabled</Label>\n <Switch\n id=\"dep-enabled\"\n :model-value=\"selectedRule.enabled\"\n data-testid=\"dependency-list-builder-inspector-enabled\"\n @update:model-value=\"onEnabledChange\"\n />\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label>Conditions logic</Label>\n <Select\n :model-value=\"selectedRule.conditionsLogic\"\n @update:model-value=\"onLogicChange\"\n >\n <SelectTrigger\n data-testid=\"dependency-list-builder-inspector-logic\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"opt in LOGIC\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n >\n {{ opt.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n </CardContent>\n </Card>\n\n <Card class=\"border-dashed\">\n <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Conditions ({{ selectedRule.conditions.length }})\n </CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n data-testid=\"dependency-list-builder-add-condition\"\n @click=\"onAddCondition\"\n >\n <Plus class=\"h-3.5 w-3.5\" />\n Add\n </Button>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-3 pb-3\">\n <p\n v-if=\"selectedRule.conditions.length === 0\"\n class=\"text-xs text-muted-foreground\"\n >\n No conditions yet.\n </p>\n <div\n v-for=\"(condition, index) in selectedRule.conditions\"\n :key=\"index\"\n class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n :data-testid=\"`dependency-list-builder-condition-${index}`\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n #{{ index + 1 }}\n </span>\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove condition\"\n :data-testid=\"`dependency-list-builder-condition-remove-${index}`\"\n @click=\"onRemoveCondition(index)\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n </Button>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-cond-field-${index}`\">Field</Label>\n <Input\n :id=\"`dep-cond-field-${index}`\"\n :model-value=\"condition.field\"\n :data-testid=\"`dependency-list-builder-condition-field-${index}`\"\n @input=\"(e: Event) => onConditionFieldInput(index, e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label>Operator</Label>\n <Select\n :model-value=\"condition.operator\"\n @update:model-value=\"(v: unknown) => onConditionOperatorChange(index, v)\"\n >\n <SelectTrigger\n :data-testid=\"`dependency-list-builder-condition-operator-${index}`\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"op in OPERATORS\"\n :key=\"op.value\"\n :value=\"op.value\"\n >\n {{ op.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div\n v-if=\"condition.operator !== 'is_truthy' && condition.operator !== 'is_falsy'\"\n class=\"flex flex-col gap-1\"\n >\n <Label :for=\"`dep-cond-value-${index}`\">Value</Label>\n <Input\n :id=\"`dep-cond-value-${index}`\"\n :model-value=\"conditionValueString(condition)\"\n :data-testid=\"`dependency-list-builder-condition-value-${index}`\"\n @input=\"(e: Event) => onConditionValueInput(index, e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <Card class=\"border-dashed\">\n <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Actions ({{ selectedRule.actions.length }})\n </CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n data-testid=\"dependency-list-builder-add-action\"\n @click=\"onAddAction\"\n >\n <Plus class=\"h-3.5 w-3.5\" />\n Add\n </Button>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-3 pb-3\">\n <p\n v-if=\"selectedRule.actions.length === 0\"\n class=\"text-xs text-muted-foreground\"\n >\n No actions yet.\n </p>\n <div\n v-for=\"(action, index) in selectedRule.actions\"\n :key=\"index\"\n class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n :data-testid=\"`dependency-list-builder-action-${index}`\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n #{{ index + 1 }}\n </span>\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove action\"\n :data-testid=\"`dependency-list-builder-action-remove-${index}`\"\n @click=\"onRemoveAction(index)\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n </Button>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label>Type</Label>\n <Select\n :model-value=\"action.type\"\n @update:model-value=\"(v: unknown) => onActionTypeChange(index, v)\"\n >\n <SelectTrigger\n :data-testid=\"`dependency-list-builder-action-type-${index}`\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"t in ACTION_TYPES\"\n :key=\"t.value\"\n :value=\"t.value\"\n >\n {{ t.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-action-target-${index}`\">Target</Label>\n <Input\n :id=\"`dep-action-target-${index}`\"\n :model-value=\"actionTargetString(action)\"\n :data-testid=\"`dependency-list-builder-action-target-${index}`\"\n @input=\"(e: Event) => onActionTargetInput(index, e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-action-payload-${index}`\">Payload</Label>\n <Input\n :id=\"`dep-action-payload-${index}`\"\n :model-value=\"actionPayloadString(action)\"\n :data-testid=\"`dependency-list-builder-action-payload-${index}`\"\n @input=\"(e: Event) => onActionPayloadInput(index, e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"dependency-list-builder-remove\"\n @click=\"onRemoveSelected\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove rule\n </Button>\n </div>\n </div>\n </aside>\n </div>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * DependencyListBuilder — visual editor for a list of conditional\n * rules of the shape \"when X happens then Y\".\n *\n * Three-pane layout (matches FormBuilder):\n * - LEFT (Palette): \"Add rule\" + a handful of rule templates.\n * - MIDDLE (Canvas): ordered list of rules; click a row to select.\n * - RIGHT (Inspector): edits the selected rule — name, enabled,\n * conditions (add/edit/remove), actions\n * (add/edit/remove), conditionsLogic.\n *\n * State is owned by `dependencyListBuilderStore`. Two-way binds the\n * full `DependencyListBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { 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 {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport {\n useDependencyListBuilder,\n type DependencyAction,\n type DependencyActionType,\n type DependencyCondition,\n type DependencyListBuilderSchema,\n type DependencyOperator,\n type DependencyRule,\n type DependencyRuleTemplate,\n} from \"@/stores/dependencyListBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DependencyListBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: DependencyListBuilderSchema\n /**\n * Identifier used to key the dependencyListBuilderStore. Defaults to\n * a stable auto-generated id so multiple builders on the same page\n * 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<DependencyListBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<DependencyListBuilderSchema | undefined>(\n \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `dep-list-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useDependencyListBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is DependencyListBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n return Array.isArray((value as Record<string, unknown>).rules)\n}\n\nonMounted(() => {\n const seed = model.value\n if (isSchema(seed)) {\n builder.loadSchema(seed)\n }\n})\n\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = next\n },\n { deep: true },\n)\n\nconst rules = computed<DependencyRule[]>(() => builder.schema.value.rules)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedRule = computed<DependencyRule | null>(() => {\n const id = selectedId.value\n if (!id) {\n return null\n }\n return rules.value.find((r) => r.id === id) ?? null\n})\n\nconst OPERATORS: { label: string; value: DependencyOperator }[] = [\n { label: \"equals\", value: \"equals\" },\n { label: \"not equals\", value: \"not_equals\" },\n { label: \"greater than\", value: \"greater_than\" },\n { label: \"less than\", value: \"less_than\" },\n { label: \"contains\", value: \"contains\" },\n { label: \"is truthy\", value: \"is_truthy\" },\n { label: \"is falsy\", value: \"is_falsy\" },\n]\n\nconst ACTION_TYPES: { label: string; value: DependencyActionType }[] = [\n { label: \"Show field\", value: \"show\" },\n { label: \"Hide field\", value: \"hide\" },\n { label: \"Require field\", value: \"require\" },\n { label: \"Set value\", value: \"set_value\" },\n { label: \"Emit event\", value: \"emit_event\" },\n]\n\nconst LOGIC: { label: string; value: \"AND\" | \"OR\" }[] = [\n { label: \"AND (all)\", value: \"AND\" },\n { label: \"OR (any)\", value: \"OR\" },\n]\n\nconst PALETTE: { label: string; template: DependencyRuleTemplate }[] = [\n { label: \"Add rule\", template: \"blank\" },\n { label: \"Show field\", template: \"show-field\" },\n { label: \"Hide field\", template: \"hide-field\" },\n { label: \"Set value\", template: \"set-value\" },\n]\n\nfunction onPaletteAdd(template: DependencyRuleTemplate): void {\n const id = builder.addRule(template)\n builder.select(id)\n}\n\nfunction onRuleClick(ruleId: string): void {\n builder.select(ruleId)\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n const id = selectedId.value\n if (id) {\n builder.removeRule(id)\n }\n}\n\nfunction patchSelected(patch: Partial<Omit<DependencyRule, \"id\">>): void {\n const id = selectedId.value\n if (id) {\n builder.updateRule(id, patch)\n }\n}\n\nfunction onNameInput(e: Event): void {\n patchSelected({ name: (e.target as HTMLInputElement).value })\n}\n\nfunction onEnabledChange(v: boolean): void {\n patchSelected({ enabled: v })\n}\n\nfunction onLogicChange(v: unknown): void {\n if (v === \"AND\" || v === \"OR\") {\n patchSelected({ conditionsLogic: v })\n }\n}\n\nfunction onAddCondition(): void {\n const id = selectedId.value\n if (id) {\n builder.addCondition(id)\n }\n}\n\nfunction onConditionFieldInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateCondition(id, index, {\n field: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onConditionOperatorChange(index: number, v: unknown): void {\n const id = selectedId.value\n if (id && isOperator(v)) {\n builder.updateCondition(id, index, { operator: v })\n }\n}\n\nfunction onConditionValueInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateCondition(id, index, {\n value: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onRemoveCondition(index: number): void {\n const id = selectedId.value\n if (id) {\n builder.removeCondition(id, index)\n }\n}\n\nfunction onAddAction(): void {\n const id = selectedId.value\n if (id) {\n builder.addAction(id)\n }\n}\n\nfunction onActionTypeChange(index: number, v: unknown): void {\n const id = selectedId.value\n if (id && isActionType(v)) {\n builder.updateAction(id, index, { type: v })\n }\n}\n\nfunction onActionTargetInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateAction(id, index, {\n target: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onActionPayloadInput(index: number, e: Event): void {\n const id = selectedId.value\n if (id) {\n builder.updateAction(id, index, {\n payload: (e.target as HTMLInputElement).value,\n })\n }\n}\n\nfunction onRemoveAction(index: number): void {\n const id = selectedId.value\n if (id) {\n builder.removeAction(id, index)\n }\n}\n\nfunction isOperator(value: unknown): value is DependencyOperator {\n return OPERATORS.some((o) => o.value === value)\n}\n\nfunction isActionType(value: unknown): value is DependencyActionType {\n return ACTION_TYPES.some((a) => a.value === value)\n}\n\nfunction conditionValueString(c: DependencyCondition): string {\n if (c.value === null || c.value === undefined) {\n return \"\"\n }\n return String(c.value)\n}\n\nfunction actionTargetString(a: DependencyAction): string {\n return a.target ?? \"\"\n}\n\nfunction actionPayloadString(a: DependencyAction): string {\n if (a.payload === null || a.payload === undefined) {\n return \"\"\n }\n return String(a.payload)\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 <div\n :class=\"cn('gxp-dependency-list-builder grid gap-3 rounded-lg border bg-card')\"\n style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n data-testid=\"dependency-list-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=\"dependency-list-builder-palette\"\n >\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Rule palette\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"entry in PALETTE\"\n :key=\"entry.template\"\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=\"`dependency-list-builder-palette-${entry.template}`\"\n @click=\"onPaletteAdd(entry.template)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"font-medium\">{{ entry.label }}</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=\"dependency-list-builder-canvas\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Rules\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/dependency-list-builder\n </Badge>\n </header>\n\n <p\n v-if=\"rules.length === 0\"\n class=\"py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"dependency-list-builder-canvas-empty\"\n >\n Click \"Add rule\" in the palette to create a rule.\n </p>\n\n <ul\n v-else\n class=\"flex flex-col gap-1 text-xs\"\n data-testid=\"dependency-list-builder-canvas-list\"\n >\n <li\n v-for=\"(rule, index) in rules\"\n :key=\"rule.id\"\n class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n :class=\"\n selectedId === rule.id ? 'border-primary bg-accent/30' : ''\n \"\n :data-testid=\"`dependency-list-builder-row-${rule.id}`\"\n @click=\"onRuleClick(rule.id)\"\n >\n <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n {{ index + 1 }}.\n </span>\n <span class=\"font-medium\">{{ rule.name || \"(unnamed)\" }}</span>\n <Badge variant=\"secondary\" class=\"font-mono text-[9px]\">\n {{ rule.conditions.length }}c / {{ rule.actions.length }}a\n </Badge>\n <Switch\n class=\"ml-auto\"\n :model-value=\"rule.enabled\"\n :data-testid=\"`dependency-list-builder-row-enabled-${rule.id}`\"\n @click.stop\n @update:model-value=\"\n (v: boolean) => builder.updateRule(rule.id, { enabled: v })\n \"\n />\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=\"dependency-list-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Inspector\n </h4>\n <Button\n v-if=\"selectedId\"\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=\"!selectedRule\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"dependency-list-builder-inspector-empty\"\n >\n Select a rule on the canvas to edit it.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"dependency-list-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 Rule\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=\"dep-name\">Name</Label>\n <Input\n id=\"dep-name\"\n :model-value=\"selectedRule.name\"\n data-testid=\"dependency-list-builder-inspector-name\"\n @input=\"onNameInput\"\n />\n </div>\n\n <div class=\"flex items-center justify-between rounded border bg-background px-2 py-1\">\n <Label for=\"dep-enabled\">Enabled</Label>\n <Switch\n id=\"dep-enabled\"\n :model-value=\"selectedRule.enabled\"\n data-testid=\"dependency-list-builder-inspector-enabled\"\n @update:model-value=\"onEnabledChange\"\n />\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label>Conditions logic</Label>\n <Select\n :model-value=\"selectedRule.conditionsLogic\"\n @update:model-value=\"onLogicChange\"\n >\n <SelectTrigger\n data-testid=\"dependency-list-builder-inspector-logic\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"opt in LOGIC\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n >\n {{ opt.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n </CardContent>\n </Card>\n\n <Card class=\"border-dashed\">\n <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Conditions ({{ selectedRule.conditions.length }})\n </CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n data-testid=\"dependency-list-builder-add-condition\"\n @click=\"onAddCondition\"\n >\n <Plus class=\"h-3.5 w-3.5\" />\n Add\n </Button>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-3 pb-3\">\n <p\n v-if=\"selectedRule.conditions.length === 0\"\n class=\"text-xs text-muted-foreground\"\n >\n No conditions yet.\n </p>\n <div\n v-for=\"(condition, index) in selectedRule.conditions\"\n :key=\"index\"\n class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n :data-testid=\"`dependency-list-builder-condition-${index}`\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n #{{ index + 1 }}\n </span>\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove condition\"\n :data-testid=\"`dependency-list-builder-condition-remove-${index}`\"\n @click=\"onRemoveCondition(index)\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n </Button>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-cond-field-${index}`\">Field</Label>\n <Input\n :id=\"`dep-cond-field-${index}`\"\n :model-value=\"condition.field\"\n :data-testid=\"`dependency-list-builder-condition-field-${index}`\"\n @input=\"(e: Event) => onConditionFieldInput(index, e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label>Operator</Label>\n <Select\n :model-value=\"condition.operator\"\n @update:model-value=\"(v: unknown) => onConditionOperatorChange(index, v)\"\n >\n <SelectTrigger\n :data-testid=\"`dependency-list-builder-condition-operator-${index}`\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"op in OPERATORS\"\n :key=\"op.value\"\n :value=\"op.value\"\n >\n {{ op.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div\n v-if=\"condition.operator !== 'is_truthy' && condition.operator !== 'is_falsy'\"\n class=\"flex flex-col gap-1\"\n >\n <Label :for=\"`dep-cond-value-${index}`\">Value</Label>\n <Input\n :id=\"`dep-cond-value-${index}`\"\n :model-value=\"conditionValueString(condition)\"\n :data-testid=\"`dependency-list-builder-condition-value-${index}`\"\n @input=\"(e: Event) => onConditionValueInput(index, e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <Card class=\"border-dashed\">\n <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Actions ({{ selectedRule.actions.length }})\n </CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n data-testid=\"dependency-list-builder-add-action\"\n @click=\"onAddAction\"\n >\n <Plus class=\"h-3.5 w-3.5\" />\n Add\n </Button>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-3 pb-3\">\n <p\n v-if=\"selectedRule.actions.length === 0\"\n class=\"text-xs text-muted-foreground\"\n >\n No actions yet.\n </p>\n <div\n v-for=\"(action, index) in selectedRule.actions\"\n :key=\"index\"\n class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n :data-testid=\"`dependency-list-builder-action-${index}`\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n #{{ index + 1 }}\n </span>\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove action\"\n :data-testid=\"`dependency-list-builder-action-remove-${index}`\"\n @click=\"onRemoveAction(index)\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n </Button>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label>Type</Label>\n <Select\n :model-value=\"action.type\"\n @update:model-value=\"(v: unknown) => onActionTypeChange(index, v)\"\n >\n <SelectTrigger\n :data-testid=\"`dependency-list-builder-action-type-${index}`\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"t in ACTION_TYPES\"\n :key=\"t.value\"\n :value=\"t.value\"\n >\n {{ t.label }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-action-target-${index}`\">Target</Label>\n <Input\n :id=\"`dep-action-target-${index}`\"\n :model-value=\"actionTargetString(action)\"\n :data-testid=\"`dependency-list-builder-action-target-${index}`\"\n @input=\"(e: Event) => onActionTargetInput(index, e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label :for=\"`dep-action-payload-${index}`\">Payload</Label>\n <Input\n :id=\"`dep-action-payload-${index}`\"\n :model-value=\"actionPayloadString(action)\"\n :data-testid=\"`dependency-list-builder-action-payload-${index}`\"\n @input=\"(e: Event) => onActionPayloadInput(index, e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"dependency-list-builder-remove\"\n @click=\"onRemoveSelected\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove rule\n </Button>\n </div>\n </div>\n </aside>\n </div>\n </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/DialogBlock-BuZTVRb2.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./badge-4iQG4kuk.js";
+import { n as r } from "./button-BAwcISlK.js";
+import { n as i, o as a, r as o, t as s, u as c } from "./dialog-BoGlhUrd.js";
+import { t as l } from "./ElementRenderer-DUhlfnFD.js";
+import { Fragment as u, computed as d, createBlock as f, createElementBlock as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, openBlock as v, renderList as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import { Construction as C } from "@lucide/vue";
+//#region src/components/compositions/elements/configuration-block/DialogBlock.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	key: 0,
+	class: "flex flex-col gap-3"
+}, T = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, E = "dialog", D = /* @__PURE__ */ g({
+	__name: "DialogBlock",
+	props: {
+		label: { default: "Dialog" },
+		name: {},
+		triggerLabel: {},
+		title: {},
+		nestedElements: { default: () => [] },
+		item: { default: () => ({}) },
+		classList: {}
+	},
+	setup(e) {
+		let g = e, D = d(() => g.triggerLabel ?? g.label ?? "Open dialog"), O = d(() => g.title ?? g.label ?? "Dialog"), k = d(() => (g.nestedElements ?? []).filter((e) => typeof e == "object" && !!e && typeof e.type == "string"));
+		return (e, d) => (v(), f(x(c), null, {
+			default: S(() => [h(x(s), { "as-child": "" }, {
+				default: S(() => [h(x(r), {
+					type: "button",
+					variant: "outline",
+					class: _(x(t)(g.classList)),
+					"data-element-name": g.name ?? void 0,
+					"data-stub": `configuration-block/${E}`,
+					"aria-label": g.label
+				}, {
+					default: S(() => [
+						h(x(C), { class: "size-4" }),
+						m(" " + b(D.value) + " ", 1),
+						h(x(n), {
+							variant: "outline",
+							size: "sm"
+						}, {
+							default: S(() => [m(b(E))]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, [
+					"class",
+					"data-element-name",
+					"data-stub",
+					"aria-label"
+				])]),
+				_: 1
+			}), h(x(a), null, {
+				default: S(() => [h(x(o), null, {
+					default: S(() => [h(x(i), null, {
+						default: S(() => [m(b(O.value), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), k.value.length ? (v(), p("div", w, [(v(!0), p(u, null, y(k.value, (e) => (v(), f(l, {
+					key: e.id,
+					element: e,
+					item: g.item
+				}, null, 8, ["element", "item"]))), 128))])) : (v(), p("p", T, " Dialog block — FormBuilder integration coming in task #7. "))]),
+				_: 1
+			})]),
+			_: 1
+		}));
+	}
+}), O = /* @__PURE__ */ e({ default: () => k }), k = D;
+//#endregion
+export { O as n, k as t };
+//# sourceMappingURL=DialogBlock-BuZTVRb2.js.map

package/dist/chunks/DialogBlock-BuZTVRb2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DialogBlock-BuZTVRb2.js","names":[],"sources":["../../src/components/compositions/elements/configuration-block/DialogBlock.vue","../../src/components/compositions/elements/configuration-block/DialogBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven renderer for `configuration-block/dialog`.\n *\n * Wraps the inner children (`nestedElements`) in a Dialog opened by a\n * trigger Button. Full FormBuilder integration arrives in task #7.\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DialogBlockProps {\n label?: string\n name?: string | null\n triggerLabel?: string\n title?: string\n nestedElements?: CardElement[]\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DialogBlockProps>(), {\n label: \"Dialog\",\n nestedElements: () => [],\n item: () => ({}),\n})\n\nconst styleKey = \"dialog\"\n\nconst resolvedTrigger = computed(\n () => props.triggerLabel ?? props.label ?? \"Open dialog\",\n)\nconst resolvedTitle = computed(\n () => props.title ?? props.label ?? \"Dialog\",\n)\n\nconst children = computed<CardElement[]>(() =>\n (props.nestedElements ?? []).filter(\n (entry): entry is CardElement =>\n typeof entry === \"object\" &&\n entry !== null &&\n typeof (entry as { type?: unknown }).type === \"string\",\n ),\n)\n</script>\n\n<template>\n <Dialog>\n <DialogTrigger as-child>\n <Button\n type=\"button\"\n variant=\"outline\"\n :class=\"cn(props.classList)\"\n :data-element-name=\"props.name ?? undefined\"\n :data-stub=\"`configuration-block/${styleKey}`\"\n :aria-label=\"props.label\"\n >\n <Construction class=\"size-4\" />\n {{ resolvedTrigger }}\n <Badge variant=\"outline\" size=\"sm\">{{ styleKey }}</Badge>\n </Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>{{ resolvedTitle }}</DialogTitle>\n </DialogHeader>\n <div v-if=\"children.length\" class=\"flex flex-col gap-3\">\n <ElementRenderer\n v-for=\"child in children\"\n :key=\"child.id\"\n :element=\"child\"\n :item=\"props.item\"\n />\n </div>\n <p v-else class=\"text-sm text-muted-foreground\">\n Dialog block — FormBuilder integration coming in task #7.\n </p>\n </DialogContent>\n </Dialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven renderer for `configuration-block/dialog`.\n *\n * Wraps the inner children (`nestedElements`) in a Dialog opened by a\n * trigger Button. Full FormBuilder integration arrives in task #7.\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DialogBlockProps {\n label?: string\n name?: string | null\n triggerLabel?: string\n title?: string\n nestedElements?: CardElement[]\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DialogBlockProps>(), {\n label: \"Dialog\",\n nestedElements: () => [],\n item: () => ({}),\n})\n\nconst styleKey = \"dialog\"\n\nconst resolvedTrigger = computed(\n () => props.triggerLabel ?? props.label ?? \"Open dialog\",\n)\nconst resolvedTitle = computed(\n () => props.title ?? props.label ?? \"Dialog\",\n)\n\nconst children = computed<CardElement[]>(() =>\n (props.nestedElements ?? []).filter(\n (entry): entry is CardElement =>\n typeof entry === \"object\" &&\n entry !== null &&\n typeof (entry as { type?: unknown }).type === \"string\",\n ),\n)\n</script>\n\n<template>\n <Dialog>\n <DialogTrigger as-child>\n <Button\n type=\"button\"\n variant=\"outline\"\n :class=\"cn(props.classList)\"\n :data-element-name=\"props.name ?? undefined\"\n :data-stub=\"`configuration-block/${styleKey}`\"\n :aria-label=\"props.label\"\n >\n <Construction class=\"size-4\" />\n {{ resolvedTrigger }}\n <Badge variant=\"outline\" size=\"sm\">{{ styleKey }}</Badge>\n </Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>{{ resolvedTitle }}</DialogTitle>\n </DialogHeader>\n <div v-if=\"children.length\" class=\"flex flex-col gap-3\">\n <ElementRenderer\n v-for=\"child in children\"\n :key=\"child.id\"\n :element=\"child\"\n :item=\"props.item\"\n />\n </div>\n <p v-else class=\"text-sm text-muted-foreground\">\n Dialog block — FormBuilder integration coming in task #7.\n </p>\n </DialogContent>\n </Dialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;GAsCM,IAAW;;;;;;;;;;;;EANjB,IAAM,IAAQ,GAQR,IAAkB,QAChB,EAAM,gBAAgB,EAAM,SAAS,aAC7C,GACM,IAAgB,QACd,EAAM,SAAS,EAAM,SAAS,QACtC,GAEM,IAAW,SACd,EAAM,kBAAkB,CAAC,GAAG,QAC1B,MACC,OAAO,KAAU,cACjB,KACA,OAAQ,EAA6B,QAAS,QAClD,CACF;yBAIE,EA+BS,EAAA,CAAA,GAAA,MAAA;oBAjBS,CAbhB,EAagB,EAAA,CAAA,GAAA,EAbD,YAAA,GAAQ,GAAA;qBAYZ,CAXT,EAWS,EAAA,CAAA,GAAA;KAVP,MAAK;KACL,SAAQ;KACP,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;KACzB,qBAAmB,EAAM,QAAQ,KAAA;KACjC,aAAS,uBAAyB;KAClC,cAAY,EAAM;;sBAEY;MAA/B,EAA+B,EAAA,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA;QAAG,MAC/B,EAAG,EAAA,KAAe,IAAG,KACrB,CAAA;MAAA,EAAyD,EAAA,CAAA,GAAA;OAAlD,SAAQ;OAAU,MAAK;;wBAAmB,CAAA,EAAA,EAAX,CAAQ,CAAA,CAAA,CAAA;;;;;;;;;;;;OAGlD,EAegB,EAAA,CAAA,GAAA,MAAA;qBAZC,CAFf,EAEe,EAAA,CAAA,GAAA,MAAA;sBADiC,CAA9C,EAA8C,EAAA,CAAA,GAAA,MAAA;uBAAd,CAAA,EAAA,EAAhB,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA;;;;QAEpB,EAAA,MAAS,UAAA,EAAA,GAApB,EAOM,OAPN,GAOM,EAAA,EAAA,EAAA,GANJ,EAKE,GAAA,MAAA,EAJgB,EAAA,QAAT,YADT,EAKE,GAAA;KAHC,KAAK,EAAM;KACX,SAAS;KACT,MAAM,EAAM;yDAGjB,EAEI,KAFJ,GAAgD,6DAEhD,EAAA,CAAA"}

package/dist/chunks/DropzoneFile-CTl8bEtC.js ADDED Viewed

@@ -0,0 +1,156 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./button-BAwcISlK.js";
+import { o as r, s as i } from "./card-DAfWnvro.js";
+import { t as a } from "./field-frame-n5oLDNBT.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
+import { UploadCloud as E, X as D } from "@lucide/vue";
+//#region src/components/compositions/elements/file/DropzoneFile.vue?vue&type=script&setup=true&lang.ts
+var O = [
+	"data-drag-over",
+	"data-element-name",
+	"onKeydown"
+], k = { class: "text-sm font-medium" }, A = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, j = [
+	"accept",
+	"multiple",
+	"disabled",
+	"required",
+	"name"
+], M = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, N = { class: "flex flex-col" }, P = { class: "text-sm font-medium" }, F = { class: "text-xs text-muted-foreground" }, I = /* @__PURE__ */ p({
+	__name: "DropzoneFile",
+	props: /* @__PURE__ */ m({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		accept: {},
+		acceptedFileTypes: { default: () => [] },
+		multiple: { type: Boolean },
+		maxFileSize: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let p = e, m = x(e, "modelValue"), I = _(null), L = _(!1), R = _([]);
+		S(() => m.value, (e) => {
+			e instanceof File ? R.value = [e] : Array.isArray(e) && e.every((e) => e instanceof File) ? R.value = e : R.value = [];
+		}, { immediate: !0 });
+		let z = s(() => {
+			if (p.accept) return p.accept;
+			let e = p.acceptedFileTypes;
+			return Array.isArray(e) && e.length ? e.join(",") : "";
+		}), B = s(() => p.maxFileSize);
+		function V() {
+			p.multiple ? m.value = R.value.slice() : m.value = R.value[0] ?? null;
+		}
+		function H(e) {
+			e.length && (B.value && e.find((e) => e.size > B.value) || (p.multiple ? R.value = [...R.value, ...e] : R.value = [e[0]], V()));
+		}
+		function U(e) {
+			let t = e.target;
+			H(t.files ? Array.from(t.files) : []), t.value = "";
+		}
+		function W(e) {
+			e.preventDefault(), L.value = !1, !(p.disabled || p.readonly) && H(e.dataTransfer ? Array.from(e.dataTransfer.files) : []);
+		}
+		function G(e) {
+			e.preventDefault(), !p.disabled && !p.readonly && (L.value = !0);
+		}
+		function K(e) {
+			e.preventDefault(), L.value = !1;
+		}
+		function q() {
+			I.value?.click();
+		}
+		function J(e) {
+			R.value.splice(e, 1), V();
+		}
+		function Y(e) {
+			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+		}
+		return (s, p) => (g(), c(b(a), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: C(() => [d("div", {
+				class: h(b(t)("flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors", L.value && "border-primary bg-primary/5", (e.disabled || e.readonly) && "cursor-not-allowed opacity-50")),
+				role: "button",
+				tabindex: "0",
+				"data-testid": "dropzone-target",
+				"data-drag-over": L.value || void 0,
+				"data-element-name": e.name ?? void 0,
+				onClick: q,
+				onKeydown: [w(T(q, ["prevent"]), ["enter"]), w(T(q, ["prevent"]), ["space"])],
+				onDrop: W,
+				onDragover: G,
+				onDragleave: K
+			}, [
+				f(b(E), { class: "size-8 text-muted-foreground" }),
+				d("p", k, y(e.placeholder ?? "Drop files here, or click to browse"), 1),
+				z.value ? (g(), u("p", A, y(z.value), 1)) : l("", !0),
+				d("input", {
+					ref_key: "fileInput",
+					ref: I,
+					type: "file",
+					class: "sr-only",
+					accept: z.value || void 0,
+					multiple: e.multiple,
+					disabled: e.disabled || e.readonly,
+					required: e.required,
+					name: e.name ?? void 0,
+					"data-testid": "dropzone-input",
+					onChange: U
+				}, null, 40, j)
+			], 42, O), R.value.length ? (g(), u("div", M, [(g(!0), u(o, null, v(R.value, (t, a) => (g(), c(b(i), {
+				key: `${t.name}-${a}`,
+				class: "border"
+			}, {
+				default: C(() => [f(b(r), { class: "flex items-center justify-between gap-3 py-3" }, {
+					default: C(() => [d("div", N, [d("span", P, y(t.name), 1), d("span", F, y(Y(t.size)), 1)]), f(b(n), {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Remove file",
+						disabled: e.disabled || e.readonly,
+						"data-testid": "dropzone-remove",
+						onClick: T((e) => J(a), ["stop"])
+					}, {
+						default: C(() => [f(b(D), { class: "size-4" })]),
+						_: 1
+					}, 8, ["disabled", "onClick"])]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1024))), 128))])) : l("", !0)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+}), L = /* @__PURE__ */ e({ default: () => R }), R = I;
+//#endregion
+export { L as n, R as t };
+//# sourceMappingURL=DropzoneFile-CTl8bEtC.js.map

package/dist/chunks/DropzoneFile-CTl8bEtC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DropzoneFile-CTl8bEtC.js","names":[],"sources":["../../src/components/compositions/elements/file/DropzoneFile.vue","../../src/components/compositions/elements/file/DropzoneFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven dropzone composition.\n *\n * Drag-and-drop target backed by a hidden `<input type=\"file\">` for\n * click-to-browse. Same value contract as `UploadFile` — single `File`\n * or `File[]` when `multiple` is true.\n *\n * <DropzoneFile v-model=\"doc\" label=\"Document\" accept=\"application/pdf\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { UploadCloud, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DropzoneFileProps {\n modelValue?: File | File[] | null\n id?: string\n name?: string\n label?: string\n hideLabel?: boolean\n placeholder?: string\n accept?: string\n acceptedFileTypes?: string[]\n multiple?: boolean\n maxFileSize?: number\n required?: boolean\n readonly?: boolean\n disabled?: boolean\n helpText?: string\n errors?: string[]\n}\n\nconst props = withDefaults(defineProps<DropzoneFileProps>(), {\n errors: () => [],\n acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst dragOver = ref<boolean>(false)\nconst files = ref<File[]>([])\n\nwatch(\n () => model.value,\n (next) => {\n if (next instanceof File) {\n files.value = [next]\n } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n files.value = next as File[]\n } else {\n files.value = []\n }\n },\n { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n if (props.accept) {\n return props.accept\n }\n const list = props.acceptedFileTypes\n return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction emitFiles(): void {\n if (props.multiple) {\n model.value = files.value.slice()\n } else {\n model.value = files.value[0] ?? null\n }\n}\n\nfunction ingest(incoming: File[]): void {\n if (!incoming.length) {\n return\n }\n const tooLarge = maxBytes.value\n ? incoming.find((f) => f.size > (maxBytes.value as number))\n : undefined\n if (tooLarge) {\n return\n }\n if (props.multiple) {\n files.value = [...files.value, ...incoming]\n } else {\n files.value = [incoming[0]!]\n }\n emitFiles()\n}\n\nfunction onChange(event: Event): void {\n const target = event.target as HTMLInputElement\n const list = target.files ? Array.from(target.files) : []\n ingest(list)\n target.value = \"\"\n}\n\nfunction onDrop(event: DragEvent): void {\n event.preventDefault()\n dragOver.value = false\n if (props.disabled || props.readonly) {\n return\n }\n const list = event.dataTransfer ? Array.from(event.dataTransfer.files) : []\n ingest(list)\n}\n\nfunction onDragOver(event: DragEvent): void {\n event.preventDefault()\n if (!props.disabled && !props.readonly) {\n dragOver.value = true\n }\n}\n\nfunction onDragLeave(event: DragEvent): void {\n event.preventDefault()\n dragOver.value = false\n}\n\nfunction openPicker(): void {\n fileInput.value?.click()\n}\n\nfunction removeFile(index: number): void {\n files.value.splice(index, 1)\n emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`\n }\n return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\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=\"\n cn(\n 'flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors',\n dragOver && 'border-primary bg-primary/5',\n (disabled || readonly) && 'cursor-not-allowed opacity-50',\n )\n \"\n role=\"button\"\n tabindex=\"0\"\n data-testid=\"dropzone-target\"\n :data-drag-over=\"dragOver || undefined\"\n :data-element-name=\"name ?? undefined\"\n @click=\"openPicker\"\n @keydown.enter.prevent=\"openPicker\"\n @keydown.space.prevent=\"openPicker\"\n @drop=\"onDrop\"\n @dragover=\"onDragOver\"\n @dragleave=\"onDragLeave\"\n >\n <UploadCloud class=\"size-8 text-muted-foreground\" />\n <p class=\"text-sm font-medium\">\n {{ placeholder ?? \"Drop files here, or click to browse\" }}\n </p>\n <p v-if=\"accept\" class=\"text-xs text-muted-foreground\">\n {{ accept }}\n </p>\n <input\n ref=\"fileInput\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept || undefined\"\n :multiple=\"multiple\"\n :disabled=\"disabled || readonly\"\n :required=\"required\"\n :name=\"name ?? undefined\"\n data-testid=\"dropzone-input\"\n @change=\"onChange\"\n >\n </div>\n\n <div v-if=\"files.length\" class=\"flex flex-col gap-2\">\n <Card\n v-for=\"(file, i) in files\"\n :key=\"`${file.name}-${i}`\"\n class=\"border\"\n >\n <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n <div class=\"flex flex-col\">\n <span class=\"text-sm font-medium\">{{ file.name }}</span>\n <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n </div>\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove file\"\n :disabled=\"disabled || readonly\"\n data-testid=\"dropzone-remove\"\n @click.stop=\"removeFile(i)\"\n >\n <X class=\"size-4\" />\n </Button>\n </CardContent>\n </Card>\n </div>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven dropzone composition.\n *\n * Drag-and-drop target backed by a hidden `<input type=\"file\">` for\n * click-to-browse. Same value contract as `UploadFile` — single `File`\n * or `File[]` when `multiple` is true.\n *\n * <DropzoneFile v-model=\"doc\" label=\"Document\" accept=\"application/pdf\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { UploadCloud, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DropzoneFileProps {\n modelValue?: File | File[] | null\n id?: string\n name?: string\n label?: string\n hideLabel?: boolean\n placeholder?: string\n accept?: string\n acceptedFileTypes?: string[]\n multiple?: boolean\n maxFileSize?: number\n required?: boolean\n readonly?: boolean\n disabled?: boolean\n helpText?: string\n errors?: string[]\n}\n\nconst props = withDefaults(defineProps<DropzoneFileProps>(), {\n errors: () => [],\n acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst dragOver = ref<boolean>(false)\nconst files = ref<File[]>([])\n\nwatch(\n () => model.value,\n (next) => {\n if (next instanceof File) {\n files.value = [next]\n } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n files.value = next as File[]\n } else {\n files.value = []\n }\n },\n { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n if (props.accept) {\n return props.accept\n }\n const list = props.acceptedFileTypes\n return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction emitFiles(): void {\n if (props.multiple) {\n model.value = files.value.slice()\n } else {\n model.value = files.value[0] ?? null\n }\n}\n\nfunction ingest(incoming: File[]): void {\n if (!incoming.length) {\n return\n }\n const tooLarge = maxBytes.value\n ? incoming.find((f) => f.size > (maxBytes.value as number))\n : undefined\n if (tooLarge) {\n return\n }\n if (props.multiple) {\n files.value = [...files.value, ...incoming]\n } else {\n files.value = [incoming[0]!]\n }\n emitFiles()\n}\n\nfunction onChange(event: Event): void {\n const target = event.target as HTMLInputElement\n const list = target.files ? Array.from(target.files) : []\n ingest(list)\n target.value = \"\"\n}\n\nfunction onDrop(event: DragEvent): void {\n event.preventDefault()\n dragOver.value = false\n if (props.disabled || props.readonly) {\n return\n }\n const list = event.dataTransfer ? Array.from(event.dataTransfer.files) : []\n ingest(list)\n}\n\nfunction onDragOver(event: DragEvent): void {\n event.preventDefault()\n if (!props.disabled && !props.readonly) {\n dragOver.value = true\n }\n}\n\nfunction onDragLeave(event: DragEvent): void {\n event.preventDefault()\n dragOver.value = false\n}\n\nfunction openPicker(): void {\n fileInput.value?.click()\n}\n\nfunction removeFile(index: number): void {\n files.value.splice(index, 1)\n emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`\n }\n return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\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=\"\n cn(\n 'flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors',\n dragOver && 'border-primary bg-primary/5',\n (disabled || readonly) && 'cursor-not-allowed opacity-50',\n )\n \"\n role=\"button\"\n tabindex=\"0\"\n data-testid=\"dropzone-target\"\n :data-drag-over=\"dragOver || undefined\"\n :data-element-name=\"name ?? undefined\"\n @click=\"openPicker\"\n @keydown.enter.prevent=\"openPicker\"\n @keydown.space.prevent=\"openPicker\"\n @drop=\"onDrop\"\n @dragover=\"onDragOver\"\n @dragleave=\"onDragLeave\"\n >\n <UploadCloud class=\"size-8 text-muted-foreground\" />\n <p class=\"text-sm font-medium\">\n {{ placeholder ?? \"Drop files here, or click to browse\" }}\n </p>\n <p v-if=\"accept\" class=\"text-xs text-muted-foreground\">\n {{ accept }}\n </p>\n <input\n ref=\"fileInput\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept || undefined\"\n :multiple=\"multiple\"\n :disabled=\"disabled || readonly\"\n :required=\"required\"\n :name=\"name ?? undefined\"\n data-testid=\"dropzone-input\"\n @change=\"onChange\"\n >\n </div>\n\n <div v-if=\"files.length\" class=\"flex flex-col gap-2\">\n <Card\n v-for=\"(file, i) in files\"\n :key=\"`${file.name}-${i}`\"\n class=\"border\"\n >\n <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n <div class=\"flex flex-col\">\n <span class=\"text-sm font-medium\">{{ file.name }}</span>\n <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n </div>\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-sm\"\n aria-label=\"Remove file\"\n :disabled=\"disabled || readonly\"\n data-testid=\"dropzone-remove\"\n @click.stop=\"removeFile(i)\"\n >\n <X class=\"size-4\" />\n </Button>\n </CardContent>\n </Card>\n </div>\n </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/ElementDisplayCard-CgWTdKNZ.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t, n, o as r, r as i, s as a } from "./card-DAfWnvro.js";
+import { t as o } from "./ElementRenderer-DUhlfnFD.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+//#region src/components/compositions/cards/ElementDisplayCard.vue?vue&type=script&setup=true&lang.ts
+var v = /* @__PURE__ */ f({
+	__name: "ElementDisplayCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !1
+		},
+		element: {},
+		item: { default: () => ({}) }
+	},
+	setup(e) {
+		let f = e, v = s(() => f.showCard === !0), y = s(() => !!f.title || !!f.subtitle);
+		return (s, f) => v.value && e.element ? (m(), c(g(a), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: _(() => [y.value ? (m(), c(g(i), { key: 0 }, {
+				default: _(() => [e.title ? (m(), c(g(n), { key: 0 }, {
+					default: _(() => [u(h(e.title), 1)]),
+					_: 1
+				})) : l("", !0), e.subtitle ? (m(), c(g(t), { key: 1 }, {
+					default: _(() => [u(h(e.subtitle), 1)]),
+					_: 1
+				})) : l("", !0)]),
+				_: 1
+			})) : l("", !0), d(g(r), { class: p([y.value ? "" : "pt-6"]) }, {
+				default: _(() => [d(o, {
+					element: e.element,
+					item: e.item
+				}, null, 8, ["element", "item"])]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		})) : e.element ? (m(), c(o, {
+			key: 1,
+			element: e.element,
+			item: e.item
+		}, null, 8, ["element", "item"])) : l("", !0);
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };
+//# sourceMappingURL=ElementDisplayCard-CgWTdKNZ.js.map

package/dist/chunks/ElementDisplayCard-CgWTdKNZ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ElementDisplayCard-CgWTdKNZ.js","names":[],"sources":["../../src/components/compositions/cards/ElementDisplayCard.vue","../../src/components/compositions/cards/ElementDisplayCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-display` composition. Renders a single\n * CardElement standalone (no label, no column wrapping, no card chrome\n * by default).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n * <ElementDisplayCard\n * :element=\"myChartElement\"\n * :item=\"dataModel\"\n * title=\"Featured widget\"\n * show-card\n * />\n *\n * Renders nothing when `element` is not provided — keeps a missing\n * reference from breaking the page. ID resolution happens upstream in\n * `CardRenderer`.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementDisplayCardProps {\n title?: string\n subtitle?: string\n showCard?: boolean\n /** Resolved element to render. */\n element?: CardElement\n /** Page-level data model passed through to the element renderer. */\n item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementDisplayCardProps>(), {\n showCard: false,\n item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard === true)\n\nconst hasHeader = computed<boolean>(\n () => Boolean(props.title) || Boolean(props.subtitle),\n)\n</script>\n\n<template>\n <Card v-if=\"showChrome && element\" class=\"flex flex-col\">\n <CardHeader v-if=\"hasHeader\">\n <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n <CardDescription v-if=\"subtitle\">\n {{ subtitle }}\n </CardDescription>\n </CardHeader>\n <CardContent :class=\"[hasHeader ? '' : 'pt-6']\">\n <ElementRenderer :element=\"element\" :item=\"item\" />\n </CardContent>\n </Card>\n <ElementRenderer\n v-else-if=\"element\"\n :element=\"element\"\n :item=\"item\"\n />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `element-display` composition. Renders a single\n * CardElement standalone (no label, no column wrapping, no card chrome\n * by default).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n * <ElementDisplayCard\n * :element=\"myChartElement\"\n * :item=\"dataModel\"\n * title=\"Featured widget\"\n * show-card\n * />\n *\n * Renders nothing when `element` is not provided — keeps a missing\n * reference from breaking the page. ID resolution happens upstream in\n * `CardRenderer`.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementDisplayCardProps {\n title?: string\n subtitle?: string\n showCard?: boolean\n /** Resolved element to render. */\n element?: CardElement\n /** Page-level data model passed through to the element renderer. */\n item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementDisplayCardProps>(), {\n showCard: false,\n item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard === true)\n\nconst hasHeader = computed<boolean>(\n () => Boolean(props.title) || Boolean(props.subtitle),\n)\n</script>\n\n<template>\n <Card v-if=\"showChrome && element\" class=\"flex flex-col\">\n <CardHeader v-if=\"hasHeader\">\n <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n <CardDescription v-if=\"subtitle\">\n {{ subtitle }}\n </CardDescription>\n </CardHeader>\n <CardContent :class=\"[hasHeader ? '' : 'pt-6']\">\n <ElementRenderer :element=\"element\" :item=\"item\" />\n </CardContent>\n </Card>\n <ElementRenderer\n v-else-if=\"element\"\n :element=\"element\"\n :item=\"item\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAQ,GAKR,IAAa,QAAwB,EAAM,aAAa,EAAI,GAE5D,IAAY,QACV,EAAQ,EAAM,SAAU,EAAQ,EAAM,QAC9C;mBAIc,EAAA,SAAc,EAAA,WAAA,EAAA,GAA1B,EAUO,EAAA,CAAA,GAAA;;GAV4B,OAAM;;oBAM1B,CALK,EAAA,SAAA,EAAA,GAAlB,EAKa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAJoC,CAA9B,EAAA,SAAA,EAAA,GAAjB,EAA+C,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBAAZ,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;qBACT,EAAA,YAAA,EAAA,GAAvB,EAEkB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADF,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;oBAGf,EAEc,EAAA,CAAA,GAAA,EAFA,OAAK,EAAA,CAAG,EAAA,QAAS,KAAA,MAAA,CAAA,EAAA,GAAA;qBACsB,CAAnD,EAAmD,GAAA;KAAjC,SAAS,EAAA;KAAU,MAAM,EAAA;;;;;QAIlC,EAAA,WAAA,EAAA,GADb,EAIE,GAAA;;GAFC,SAAS,EAAA;GACT,MAAM,EAAA"}