mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 22:25:01 +00:00
johndoe6345789
809803283b
- Introduced `menu.json` for menu component structure with bindings for trigger and content. - Created `password-input.json` for password input handling visibility and value changes. - Added `popover.json` for popover component with trigger and content bindings. feat: Implement custom hooks for UI interactions - Added `useAccordion` for managing accordion state with single/multiple item support. - Created `useBindingEditor` for managing bindings in a dynamic editor. - Implemented `useCopyState` for clipboard copy functionality with feedback. - Developed `useFileUpload` for handling file uploads with drag-and-drop support. - Introduced `useFocusState` for managing focus state in components. - Created `useImageState` for handling image loading and error states. - Added `useMenuState` for managing menu interactions and item clicks. - Implemented `usePasswordVisibility` for toggling password visibility. - Developed `usePopoverState` for managing popover visibility and interactions. feat: Add constants and interfaces for JSON UI components - Introduced constants for sizes, placements, styles, and object-fit handling. - Created interfaces for various components including Accordion, Binding Editor, Copy Button, Data Source Editor, File Upload, and more. - Added type definitions for menu items, popover props, and other UI elements to enhance type safety and maintainability.
115 lines
3.3 KiB
JSON
115 lines
3.3 KiB
JSON
{
|
|
"id": "input-wrapper",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'w-full'"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "input-label",
|
|
"type": "label",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'block text-sm font-medium mb-1.5 text-foreground'"
|
|
},
|
|
"children": {
|
|
"source": "label",
|
|
"transform": "data"
|
|
},
|
|
"_if": {
|
|
"source": "label",
|
|
"transform": "!!data"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "input-container",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'relative'"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "input-left-icon",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'"
|
|
},
|
|
"children": {
|
|
"source": "leftIcon",
|
|
"transform": "data"
|
|
},
|
|
"_if": {
|
|
"source": "leftIcon",
|
|
"transform": "!!data"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "input-element",
|
|
"type": "input",
|
|
"bindings": {
|
|
"ref": {
|
|
"source": "_ref",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": ["error", "leftIcon", "rightIcon", "className"],
|
|
"transform": "const error = data[0]; const leftIcon = data[1]; const rightIcon = data[2]; const className = data[3] || ''; const baseClasses = 'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors'; const errorClass = error ? 'border-destructive focus-visible:ring-destructive' : 'border-input'; const leftIconClass = leftIcon ? 'pl-10' : ''; const rightIconClass = rightIcon ? 'pr-10' : ''; return `${baseClasses} ${errorClass} ${leftIconClass} ${rightIconClass} ${className}`.trim()"
|
|
},
|
|
"_spreadProps": {
|
|
"source": "_spreadProps",
|
|
"transform": "data"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "input-right-icon",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground'"
|
|
},
|
|
"children": {
|
|
"source": "rightIcon",
|
|
"transform": "data"
|
|
},
|
|
"_if": {
|
|
"source": "rightIcon",
|
|
"transform": "!!data"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-helper-text",
|
|
"type": "p",
|
|
"bindings": {
|
|
"className": {
|
|
"source": "error",
|
|
"transform": "const baseClass = 'text-xs mt-1.5'; return data ? `${baseClass} text-destructive` : `${baseClass} text-muted-foreground`"
|
|
},
|
|
"children": {
|
|
"source": "helperText",
|
|
"transform": "data"
|
|
},
|
|
"_if": {
|
|
"source": "helperText",
|
|
"transform": "!!data"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|