mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-28 07:34:56 +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.
57 lines
1.7 KiB
JSON
57 lines
1.7 KiB
JSON
{
|
|
"id": "image-container",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": "className",
|
|
"transform": "const base = 'relative overflow-hidden'; return data ? `${base} ${data}` : base"
|
|
},
|
|
"style": {
|
|
"source": ["width", "height"],
|
|
"transform": "const width = data[0]; const height = data[1]; return { width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "image-loading",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": null,
|
|
"transform": "'absolute inset-0 bg-muted animate-pulse'"
|
|
},
|
|
"_if": {
|
|
"source": "imageState.loading",
|
|
"transform": "data"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "image-element",
|
|
"type": "img",
|
|
"bindings": {
|
|
"src": {
|
|
"source": ["imageState.error", "fallback", "src"],
|
|
"transform": "const error = data[0]; const fallback = data[1]; const src = data[2]; return (error && fallback) ? fallback : src"
|
|
},
|
|
"alt": {
|
|
"source": "alt",
|
|
"transform": "data"
|
|
},
|
|
"onLoad": {
|
|
"source": "imageState.handleLoad",
|
|
"transform": "data"
|
|
},
|
|
"onError": {
|
|
"source": "imageState.handleError",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": ["imageState.loading", "fit"],
|
|
"transform": "const loading = data[0]; const fit = data[1] || 'cover'; const base = 'w-full h-full transition-opacity'; const opacity = loading ? 'opacity-0' : 'opacity-100'; return `${base} ${opacity} object-${fit}`"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|