mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-26 14:44:55 +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.
47 lines
1.2 KiB
JSON
47 lines
1.2 KiB
JSON
{
|
|
"id": "password-input",
|
|
"type": "Input",
|
|
"bindings": {
|
|
"type": {
|
|
"source": "visibility.showPassword",
|
|
"transform": "data ? 'text' : 'password'"
|
|
},
|
|
"value": {
|
|
"source": "value",
|
|
"transform": "data"
|
|
},
|
|
"onChange": {
|
|
"source": "onChange",
|
|
"transform": "(e) => data(e.target.value)"
|
|
},
|
|
"label": {
|
|
"source": "label",
|
|
"transform": "data"
|
|
},
|
|
"error": {
|
|
"source": "error",
|
|
"transform": "data"
|
|
},
|
|
"helperText": {
|
|
"source": "helperText",
|
|
"transform": "data"
|
|
},
|
|
"placeholder": {
|
|
"source": "placeholder",
|
|
"transform": "data || 'Enter password'"
|
|
},
|
|
"disabled": {
|
|
"source": "disabled",
|
|
"transform": "data"
|
|
},
|
|
"className": {
|
|
"source": "className",
|
|
"transform": "data"
|
|
},
|
|
"rightIcon": {
|
|
"source": "visibility.showPassword",
|
|
"transform": "{ _element: 'button', _props: { type: 'button', onClick: () => visibility.toggleVisibility(), className: 'text-muted-foreground hover:text-foreground transition-colors', 'aria-label': data ? 'Hide password' : 'Show password' }, _children: [{ _element: data ? 'EyeSlash' : 'Eye', _props: { size: 18 } }] }"
|
|
}
|
|
}
|
|
}
|