{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-drag-drop-organizer", "title": "Feature Drag Drop Organizer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-drag-drop-organizer/feature-drag-drop-organizer.component.ts", "content": "// Composable dashboard layout workbench: widget hierarchy with up/down reordering, visibility\n// toggles, a live canvas preview that follows the order, and a generated JSON schema with copy.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n ArrowDown,\n ArrowRight,\n ArrowUp,\n Check,\n Copy,\n Eye,\n EyeOff,\n Layers,\n LucideAngularModule,\n RotateCcw,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface LayoutWidget {\n id: string\n name: string\n category: string\n visible: boolean\n colSpan: number\n previewSnippet: string\n}\n\nexport const INITIAL_WIDGETS: LayoutWidget[] = [\n {\n id: 'widget-kpi',\n name: 'Real-time KPI Metrics',\n category: 'Analytics',\n visible: true,\n colSpan: 12,\n previewSnippet: '3 Cards: $124.5k MRR • 18ms Latency • 99.99% Uptime',\n },\n {\n id: 'widget-chart',\n name: 'Traffic Sparkline Chart',\n category: 'Telemetry',\n visible: true,\n colSpan: 8,\n previewSnippet: 'SVG Real-time stream (35,000 req/s live)',\n },\n {\n id: 'widget-nodes',\n name: 'Edge PoP Status',\n category: 'Infrastructure',\n visible: true,\n colSpan: 4,\n previewSnippet: '8 global edge regions active (optimal)',\n },\n {\n id: 'widget-feed',\n name: 'Deployment Activity Feed',\n category: 'Workflows',\n visible: true,\n colSpan: 12,\n previewSnippet: 'sha-a81f9c deployed to edge via CLI (2 mins ago)',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-drag-drop-organizer, [ui-feature-drag-drop-organizer]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Composable Layout Workbench\n \n \n\n

{{ title }}

\n\n

{{ description }}

\n
\n\n \n
\n \n
\n
\n
\n
\n \n Widget Hierarchy\n
\n \n \n Reset\n \n
\n\n \n
\n @for (widget of widgets(); track widget.id; let idx = $index) {\n
\n
\n
\n \n \n \n \n \n \n
\n\n
\n
\n {{ widget.name }}\n \n {{ widget.category }}\n \n
\n
{{ widget.previewSnippet }}
\n
\n
\n\n \n @if (widget.visible) {\n \n } @else {\n \n }\n \n
\n }\n
\n\n \n
\n
\n Generated Layout JSON\n \n @if (copied()) {\n \n } @else {\n \n }\n {{ copied() ? 'Copied' : 'Copy JSON' }}\n \n
\n {{ exportJson() }}\n
\n
\n
\n\n \n
\n
\n
\n
\n \n Rendered Canvas Preview\n
\n Live Synchronized\n
\n\n \n \n @for (widget of widgets(); track widget.id) {\n @if (widget.visible) {\n
\n
\n {{ widget.name }}\n col-span-{{ widget.colSpan }}\n
\n
{{ widget.previewSnippet }}
\n
\n }\n }\n
\n
\n
\n
\n \n
\n `,\n})\nexport class UiFeatureDragDropOrganizerComponent {\n protected readonly Activity = Activity\n protected readonly ArrowDown = ArrowDown\n protected readonly ArrowRight = ArrowRight\n protected readonly ArrowUp = ArrowUp\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Eye = Eye\n protected readonly EyeOff = EyeOff\n protected readonly Layers = Layers\n protected readonly RotateCcw = RotateCcw\n\n @Input() title = 'Arrange dashboard layouts intuitively with zero boilerplate.'\n @Input() description =\n 'Customize widget order, toggle component visibility, and export clean declarative JSON layout schemas for your application.'\n @Input() set initialWidgets(v: LayoutWidget[] | undefined) {\n this.widgets.set((v ?? INITIAL_WIDGETS).map((w) => ({ ...w })))\n }\n @Input('class') className?: string\n\n readonly widgets = signal(INITIAL_WIDGETS.map((w) => ({ ...w })))\n readonly copied = signal(false)\n private copyTimer: ReturnType | undefined\n\n readonly exportJson = computed(() =>\n JSON.stringify(\n this.widgets().map((w, idx) => ({ order: idx, id: w.id, name: w.name, visible: w.visible, colSpan: w.colSpan })),\n null,\n 2,\n ),\n )\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n widgetRowClass(widget: LayoutWidget): string {\n return cn(\n 'flex items-center justify-between rounded-lg border p-3 transition-colors',\n widget.visible ? 'border-border bg-background' : 'border-border/60 bg-muted/30 opacity-60',\n )\n }\n\n moveWidget(index: number, direction: 'up' | 'down'): void {\n const targetIndex = direction === 'up' ? index - 1 : index + 1\n if (targetIndex < 0 || targetIndex >= this.widgets().length) return\n const updated = [...this.widgets()]\n const [removed] = updated.splice(index, 1)\n updated.splice(targetIndex, 0, removed!)\n this.widgets.set(updated)\n }\n\n toggleVisibility(index: number): void {\n this.widgets.update((prev) => {\n const next = [...prev]\n next[index] = { ...next[index]!, visible: !next[index]!.visible }\n return next\n })\n }\n\n resetLayout(): void {\n this.widgets.set(INITIAL_WIDGETS.map((w) => ({ ...w })))\n }\n\n async copyJson(): Promise {\n try {\n await navigator.clipboard.writeText(this.exportJson())\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n } catch {\n // Clipboard unavailable (insecure context / jsdom): leave the label unchanged.\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-drag-drop-organizer/feature-drag-drop-organizer.component.ts" }, { "path": "packages/registry-angular/blocks/feature-drag-drop-organizer/index.ts", "content": "export {\n UiFeatureDragDropOrganizerComponent,\n INITIAL_WIDGETS,\n type LayoutWidget,\n} from './feature-drag-drop-organizer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-drag-drop-organizer/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Interactive dashboard block layout organizer with position reordering, visibility toggling, and JSON schema export.", "categories": [ "feature", "marketing" ] }