update readme
This commit is contained in:
Juergen Kunz
471
readme.md
471
readme.md
@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog
|
|||||||
|
|
||||||
| Category | Components |
|
| Category | Components |
|
||||||
|----------|------------|
|
|----------|------------|
|
||||||
| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
|
| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
|
||||||
| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
|
| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
|
||||||
| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
|
| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
|
||||||
| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
|
| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
|
||||||
| Visualization | `DeesChartArea`, `DeesChartLog` |
|
| Visualization | `DeesChartArea`, `DeesChartLog` |
|
||||||
| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
|
| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
|
||||||
| Navigation | `DeesStepper`, `DeesProgressbar` |
|
| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
|
||||||
| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
|
| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
|
||||||
|
| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
|
||||||
|
|
||||||
## Detailed Component Documentation
|
## Detailed Component Documentation
|
||||||
|
|
||||||
@ -149,6 +150,93 @@ Key Features:
|
|||||||
- Theme-aware styling
|
- Theme-aware styling
|
||||||
- Programmatic control
|
- Programmatic control
|
||||||
|
|
||||||
|
#### `DeesButtonExit`
|
||||||
|
Exit/close button component with consistent styling.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-button-exit
|
||||||
|
@click=${handleClose}
|
||||||
|
></dees-button-exit>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesButtonGroup`
|
||||||
|
Container for grouping related buttons together.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-button-group
|
||||||
|
.buttons=${[
|
||||||
|
{ text: 'Save', type: 'highlighted', action: handleSave },
|
||||||
|
{ text: 'Cancel', type: 'normal', action: handleCancel }
|
||||||
|
]}
|
||||||
|
spacing="medium" // Options: small, medium, large
|
||||||
|
></dees-button-group>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesHeading`
|
||||||
|
Consistent heading component with level and styling options.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-heading
|
||||||
|
level={1} // 1-6 for H1-H6
|
||||||
|
text="Page Title"
|
||||||
|
.subheading=${'Optional subtitle'}
|
||||||
|
centered // Optional: center alignment
|
||||||
|
></dees-heading>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesHint`
|
||||||
|
Hint/tooltip component for providing contextual help.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-hint
|
||||||
|
text="This field is required"
|
||||||
|
type="info" // Options: info, warning, error, success
|
||||||
|
position="top" // Options: top, bottom, left, right
|
||||||
|
></dees-hint>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesPanel`
|
||||||
|
Container component for grouping related content with optional title and actions.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-panel
|
||||||
|
.title=${'Panel Title'}
|
||||||
|
.subtitle=${'Optional subtitle'}
|
||||||
|
collapsible // Optional: allow collapse/expand
|
||||||
|
collapsed={false} // Initial collapsed state
|
||||||
|
.actions=${[
|
||||||
|
{ icon: 'settings', action: handleSettings }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<!-- Panel content -->
|
||||||
|
</dees-panel>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesSearchbar`
|
||||||
|
Search input component with suggestions and search handling.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-searchbar
|
||||||
|
placeholder="Search..."
|
||||||
|
.suggestions=${['item1', 'item2', 'item3']}
|
||||||
|
showClearButton // Show clear button when has value
|
||||||
|
@search=${handleSearch}
|
||||||
|
@suggestion-select=${handleSuggestionSelect}
|
||||||
|
></dees-searchbar>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesWindowcontrols`
|
||||||
|
Window control buttons (minimize, maximize, close) for desktop-like applications.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-windowcontrols
|
||||||
|
.controls=${['minimize', 'maximize', 'close']}
|
||||||
|
@minimize=${handleMinimize}
|
||||||
|
@maximize=${handleMaximize}
|
||||||
|
@close=${handleClose}
|
||||||
|
></dees-windowcontrols>
|
||||||
|
```
|
||||||
|
|
||||||
### Form Components
|
### Form Components
|
||||||
|
|
||||||
#### `DeesForm`
|
#### `DeesForm`
|
||||||
@ -207,22 +295,6 @@ Dropdown selection component with search and filtering capabilities.
|
|||||||
></dees-input-dropdown>
|
></dees-input-dropdown>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `DeesInputRadio`
|
|
||||||
Radio button group for single-choice selections.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
<dees-input-radio
|
|
||||||
key="gender"
|
|
||||||
label="Gender"
|
|
||||||
.options=${[
|
|
||||||
{ key: 'male', option: 'Male' },
|
|
||||||
{ key: 'female', option: 'Female' },
|
|
||||||
{ key: 'other', option: 'Other' }
|
|
||||||
]}
|
|
||||||
required
|
|
||||||
></dees-input-radio>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `DeesInputFileupload`
|
#### `DeesInputFileupload`
|
||||||
File upload component with drag-and-drop support.
|
File upload component with drag-and-drop support.
|
||||||
|
|
||||||
@ -293,6 +365,121 @@ Multi-state toggle button group.
|
|||||||
></dees-input-multitoggle>
|
></dees-input-multitoggle>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### `DeesInputRadiogroup`
|
||||||
|
Radio button group for single-choice selections with internal state management.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-input-radiogroup
|
||||||
|
key="plan"
|
||||||
|
label="Select Plan"
|
||||||
|
.options=${['Free', 'Pro', 'Enterprise']}
|
||||||
|
selectedOption="Pro"
|
||||||
|
required
|
||||||
|
@change=${handlePlanChange}
|
||||||
|
></dees-input-radiogroup>
|
||||||
|
|
||||||
|
// With custom option objects
|
||||||
|
<dees-input-radiogroup
|
||||||
|
key="priority"
|
||||||
|
label="Priority Level"
|
||||||
|
.options=${[
|
||||||
|
{ key: 'low', label: 'Low Priority' },
|
||||||
|
{ key: 'medium', label: 'Medium Priority' },
|
||||||
|
{ key: 'high', label: 'High Priority' }
|
||||||
|
]}
|
||||||
|
selectedOption="medium"
|
||||||
|
></dees-input-radiogroup>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesInputTags`
|
||||||
|
Tag input component for managing lists of tags with auto-complete and validation.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-input-tags
|
||||||
|
key="skills"
|
||||||
|
label="Skills"
|
||||||
|
.value=${['JavaScript', 'TypeScript', 'CSS']}
|
||||||
|
placeholder="Add a skill..."
|
||||||
|
.suggestions=${[
|
||||||
|
'JavaScript', 'TypeScript', 'Python', 'Go', 'Rust',
|
||||||
|
'React', 'Vue', 'Angular', 'Node.js', 'Docker'
|
||||||
|
]}
|
||||||
|
maxTags={10} // Optional: limit number of tags
|
||||||
|
required
|
||||||
|
@change=${handleTagsChange}
|
||||||
|
></dees-input-tags>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Add tags by pressing Enter or typing comma/semicolon
|
||||||
|
- Remove tags with click or backspace
|
||||||
|
- Auto-complete suggestions with keyboard navigation
|
||||||
|
- Maximum tag limit support
|
||||||
|
- Full theme support
|
||||||
|
- Form validation integration
|
||||||
|
|
||||||
|
#### `DeesInputTypelist`
|
||||||
|
Dynamic list input for managing arrays of typed values.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-input-typelist
|
||||||
|
key="features"
|
||||||
|
label="Product Features"
|
||||||
|
placeholder="Add a feature..."
|
||||||
|
.value=${['Feature 1', 'Feature 2']}
|
||||||
|
@change=${handleFeaturesChange}
|
||||||
|
></dees-input-typelist>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesInputRichtext`
|
||||||
|
Rich text editor with formatting toolbar powered by TipTap.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-input-richtext
|
||||||
|
key="content"
|
||||||
|
label="Article Content"
|
||||||
|
.value=${htmlContent}
|
||||||
|
placeholder="Start writing..."
|
||||||
|
minHeight={300} // Minimum editor height
|
||||||
|
showWordCount={true} // Show word/character count
|
||||||
|
@change=${handleContentChange}
|
||||||
|
></dees-input-richtext>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Full formatting toolbar (bold, italic, underline, strike, etc.)
|
||||||
|
- Heading levels (H1-H6)
|
||||||
|
- Lists (bullet, ordered)
|
||||||
|
- Links with URL editing
|
||||||
|
- Code blocks and inline code
|
||||||
|
- Blockquotes
|
||||||
|
- Horizontal rules
|
||||||
|
- Undo/redo support
|
||||||
|
- Word and character count
|
||||||
|
- HTML output
|
||||||
|
|
||||||
|
#### `DeesInputWysiwyg`
|
||||||
|
Advanced block-based editor with slash commands and rich content blocks.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-input-wysiwyg
|
||||||
|
key="document"
|
||||||
|
label="Document Editor"
|
||||||
|
.value=${documentContent}
|
||||||
|
outputFormat="html" // Options: html, markdown, json
|
||||||
|
@change=${handleDocumentChange}
|
||||||
|
></dees-input-wysiwyg>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Slash commands for quick formatting
|
||||||
|
- Block-based editing (paragraphs, headings, lists, etc.)
|
||||||
|
- Drag and drop block reordering
|
||||||
|
- Multiple output formats
|
||||||
|
- Keyboard shortcuts
|
||||||
|
- Collaborative editing ready
|
||||||
|
- Extensible block types
|
||||||
|
|
||||||
#### `DeesFormSubmit`
|
#### `DeesFormSubmit`
|
||||||
Submit button component specifically designed for `DeesForm`.
|
Submit button component specifically designed for `DeesForm`.
|
||||||
|
|
||||||
@ -622,6 +809,91 @@ Best Practices:
|
|||||||
- Test with screen readers
|
- Test with screen readers
|
||||||
- Maintain focus management
|
- Maintain focus management
|
||||||
|
|
||||||
|
#### `DeesAppuiActivitylog`
|
||||||
|
Activity log component for displaying system events and user actions.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-appui-activitylog
|
||||||
|
.entries=${[
|
||||||
|
{
|
||||||
|
timestamp: new Date(),
|
||||||
|
type: 'info',
|
||||||
|
message: 'User logged in',
|
||||||
|
details: { userId: '123' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: new Date(),
|
||||||
|
type: 'error',
|
||||||
|
message: 'Failed to save document',
|
||||||
|
details: { error: 'Network error' }
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
maxEntries={100} // Maximum entries to display
|
||||||
|
@entry-click=${handleEntryClick}
|
||||||
|
></dees-appui-activitylog>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesAppuiProfiledropdown`
|
||||||
|
User profile dropdown component with status and menu options.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-appui-profiledropdown
|
||||||
|
.user=${{
|
||||||
|
name: 'John Doe',
|
||||||
|
email: 'john@example.com',
|
||||||
|
avatar: '/path/to/avatar.jpg',
|
||||||
|
status: 'online' // Options: online, offline, busy, away
|
||||||
|
}}
|
||||||
|
.menuItems=${[
|
||||||
|
{ name: 'Profile', iconName: 'user', action: async () => {} },
|
||||||
|
{ name: 'Settings', iconName: 'settings', action: async () => {} },
|
||||||
|
{ divider: true },
|
||||||
|
{ name: 'Logout', iconName: 'logOut', action: async () => {} }
|
||||||
|
]}
|
||||||
|
@status-change=${handleStatusChange}
|
||||||
|
></dees-appui-profiledropdown>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesAppuiTabs`
|
||||||
|
Tab navigation component for organizing content sections.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-appui-tabs
|
||||||
|
.tabs=${[
|
||||||
|
{
|
||||||
|
key: 'overview',
|
||||||
|
label: 'Overview',
|
||||||
|
icon: 'home',
|
||||||
|
content: html`<div>Overview content</div>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'details',
|
||||||
|
label: 'Details',
|
||||||
|
icon: 'info',
|
||||||
|
content: html`<div>Details content</div>`
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
selectedTab="overview"
|
||||||
|
@tab-change=${handleTabChange}
|
||||||
|
></dees-appui-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `DeesAppuiView`
|
||||||
|
View container component for consistent page layouts.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-appui-view
|
||||||
|
viewTitle="Dashboard"
|
||||||
|
viewSubtitle="System Overview"
|
||||||
|
.headerActions=${[
|
||||||
|
{ icon: 'refresh', action: handleRefresh },
|
||||||
|
{ icon: 'settings', action: handleSettings }
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<!-- View content -->
|
||||||
|
</dees-appui-view>
|
||||||
|
```
|
||||||
|
|
||||||
#### `DeesMobileNavigation`
|
#### `DeesMobileNavigation`
|
||||||
Responsive navigation component for mobile devices.
|
Responsive navigation component for mobile devices.
|
||||||
|
|
||||||
@ -982,6 +1254,27 @@ setInterval(() => {
|
|||||||
}, 3000);
|
}, 3000);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### `DeesPagination`
|
||||||
|
Pagination component for navigating through large datasets.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-pagination
|
||||||
|
totalItems={500}
|
||||||
|
itemsPerPage={20}
|
||||||
|
currentPage={1}
|
||||||
|
maxVisiblePages={7} // Maximum page numbers to display
|
||||||
|
@page-change=${handlePageChange}
|
||||||
|
></dees-pagination>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Page number navigation
|
||||||
|
- Previous/next buttons
|
||||||
|
- Jump to first/last page
|
||||||
|
- Configurable items per page
|
||||||
|
- Responsive design
|
||||||
|
- Keyboard navigation support
|
||||||
|
|
||||||
### Visualization Components
|
### Visualization Components
|
||||||
|
|
||||||
#### `DeesChartArea`
|
#### `DeesChartArea`
|
||||||
@ -1306,52 +1599,6 @@ Key Features:
|
|||||||
- Animation support
|
- Animation support
|
||||||
- Accessibility features
|
- Accessibility features
|
||||||
|
|
||||||
#### `DeesMobileNavigation`
|
|
||||||
Mobile-optimized navigation component with touch support.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Programmatic usage
|
|
||||||
DeesMobilenavigation.createAndShow([
|
|
||||||
{
|
|
||||||
name: 'Home',
|
|
||||||
action: async (nav) => {
|
|
||||||
// Handle navigation
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Settings',
|
|
||||||
action: async (nav) => {
|
|
||||||
// Handle navigation
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Component usage
|
|
||||||
<dees-mobilenavigation
|
|
||||||
heading="MENU"
|
|
||||||
.menuItems=${[
|
|
||||||
{
|
|
||||||
name: 'Profile',
|
|
||||||
action: (nav) => handleNavigation('profile')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Settings',
|
|
||||||
action: (nav) => handleNavigation('settings')
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
></dees-mobilenavigation>
|
|
||||||
```
|
|
||||||
|
|
||||||
Key Features:
|
|
||||||
- Touch-friendly interface
|
|
||||||
- Slide-in animation
|
|
||||||
- Backdrop overlay
|
|
||||||
- Single instance management
|
|
||||||
- Custom menu items
|
|
||||||
- Responsive design
|
|
||||||
|
|
||||||
Best Practices:
|
Best Practices:
|
||||||
|
|
||||||
1. Stepper Implementation
|
1. Stepper Implementation
|
||||||
@ -1368,13 +1615,6 @@ Best Practices:
|
|||||||
- Performance monitoring
|
- Performance monitoring
|
||||||
- Error state handling
|
- Error state handling
|
||||||
|
|
||||||
3. Mobile Navigation
|
|
||||||
- Touch-optimized targets
|
|
||||||
- Clear visual hierarchy
|
|
||||||
- Smooth animations
|
|
||||||
- Gesture support
|
|
||||||
- Responsive behavior
|
|
||||||
|
|
||||||
Common Use Cases:
|
Common Use Cases:
|
||||||
|
|
||||||
1. Stepper
|
1. Stepper
|
||||||
@ -1391,13 +1631,6 @@ Common Use Cases:
|
|||||||
- Task completion
|
- Task completion
|
||||||
- Step progression
|
- Step progression
|
||||||
|
|
||||||
3. Mobile Navigation
|
|
||||||
- Responsive menus
|
|
||||||
- App navigation
|
|
||||||
- Settings access
|
|
||||||
- User actions
|
|
||||||
- Context switching
|
|
||||||
|
|
||||||
Accessibility Considerations:
|
Accessibility Considerations:
|
||||||
- Keyboard navigation support
|
- Keyboard navigation support
|
||||||
- ARIA labels and roles
|
- ARIA labels and roles
|
||||||
@ -1461,6 +1694,26 @@ Key Features:
|
|||||||
- Spellcheck integration
|
- Spellcheck integration
|
||||||
- Auto-save functionality
|
- Auto-save functionality
|
||||||
|
|
||||||
|
#### `DeesEditorMarkdownoutlet`
|
||||||
|
Markdown preview component for rendering markdown content.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-editor-markdownoutlet
|
||||||
|
.markdown=${markdownContent}
|
||||||
|
.theme=${'github'} // Options: github, dark, custom
|
||||||
|
.plugins=${['mermaid', 'highlight']} // Optional plugins
|
||||||
|
allowHtml={false} // Security: disable raw HTML
|
||||||
|
></dees-editor-markdownoutlet>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Safe markdown rendering
|
||||||
|
- Multiple themes
|
||||||
|
- Plugin support (mermaid diagrams, syntax highlighting)
|
||||||
|
- XSS protection
|
||||||
|
- Custom CSS injection
|
||||||
|
- Responsive images
|
||||||
|
|
||||||
#### `DeesTerminal`
|
#### `DeesTerminal`
|
||||||
Terminal emulator component for command-line interface.
|
Terminal emulator component for command-line interface.
|
||||||
|
|
||||||
@ -1606,6 +1859,60 @@ Accessibility Features:
|
|||||||
- Focus management
|
- Focus management
|
||||||
- ARIA attributes
|
- ARIA attributes
|
||||||
|
|
||||||
|
### Auth & Utilities Components
|
||||||
|
|
||||||
|
#### `DeesSimpleAppdash`
|
||||||
|
Simple application dashboard component for quick prototyping.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-simple-appdash
|
||||||
|
.appTitle=${'My Application'}
|
||||||
|
.menuItems=${[
|
||||||
|
{ name: 'Dashboard', icon: 'home', route: '/dashboard' },
|
||||||
|
{ name: 'Settings', icon: 'settings', route: '/settings' }
|
||||||
|
]}
|
||||||
|
.user=${{
|
||||||
|
name: 'John Doe',
|
||||||
|
role: 'Administrator'
|
||||||
|
}}
|
||||||
|
@menu-select=${handleMenuSelect}
|
||||||
|
>
|
||||||
|
<!-- Dashboard content -->
|
||||||
|
</dees-simple-appdash>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Quick setup dashboard layout
|
||||||
|
- Built-in navigation
|
||||||
|
- User profile section
|
||||||
|
- Responsive design
|
||||||
|
- Minimal configuration
|
||||||
|
|
||||||
|
#### `DeesSimpleLogin`
|
||||||
|
Simple login form component with validation and customization.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
<dees-simple-login
|
||||||
|
.appName=${'My Application'}
|
||||||
|
.logo=${'./assets/logo.png'}
|
||||||
|
.backgroundImage=${'./assets/background.jpg'}
|
||||||
|
.fields=${['username', 'password']} // Options: username, email, password
|
||||||
|
showForgotPassword
|
||||||
|
showRememberMe
|
||||||
|
@login=${handleLogin}
|
||||||
|
@forgot-password=${handleForgotPassword}
|
||||||
|
></dees-simple-login>
|
||||||
|
```
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Customizable fields
|
||||||
|
- Built-in validation
|
||||||
|
- Remember me option
|
||||||
|
- Forgot password link
|
||||||
|
- Custom branding
|
||||||
|
- Responsive layout
|
||||||
|
- Loading states
|
||||||
|
|
||||||
## License and Legal Information
|
## License and Legal Information
|
||||||
|
|
||||||
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.
|
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.
|
||||||
|
|||||||
Reference in New Issue
Block a user