1419 lines
41 KiB
Markdown
1419 lines
41 KiB
Markdown
# @design.estate/dees-catalog
|
|
|
|
A comprehensive web components library built with TypeScript and LitElement, providing **80+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
|
|
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://lit.dev/)
|
|
|
|
## Issue Reporting and Security
|
|
|
|
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
|
|
|
## ✨ Features
|
|
|
|
- 🎨 **Consistent Design System** - Beautiful, cohesive components following modern UI/UX principles
|
|
- 🌙 **Dark/Light Theme Support** - All components automatically adapt to your theme
|
|
- ⌨️ **Keyboard Accessible** - Full keyboard navigation and ARIA support
|
|
- 📱 **Responsive** - Mobile-first design that works across all screen sizes
|
|
- 🔧 **TypeScript-First** - Fully typed APIs with excellent IDE support
|
|
- 🧩 **Modular** - Use only what you need, tree-shakeable architecture
|
|
|
|
## 📦 Installation
|
|
|
|
```bash
|
|
npm install @design.estate/dees-catalog
|
|
# or
|
|
pnpm add @design.estate/dees-catalog
|
|
```
|
|
|
|
## 🚀 Quick Start
|
|
|
|
```typescript
|
|
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-catalog';
|
|
|
|
@customElement('my-app')
|
|
class MyApp extends DeesElement {
|
|
render() {
|
|
return html`
|
|
<dees-button type="highlighted" @click=${() => alert('Hello!')}>
|
|
Click me!
|
|
</dees-button>
|
|
`;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 📖 Development Guide
|
|
|
|
For developers working on this library, please refer to the [UI Components Playbook](readme.playbook.md) for comprehensive patterns, best practices, and architectural guidelines.
|
|
|
|
## 📚 Components Overview
|
|
|
|
| Category | Components |
|
|
|----------|------------|
|
|
| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
|
|
| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
|
|
| **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
|
|
| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
|
|
| **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
|
|
| **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
|
|
| **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
|
|
| **Development** | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
|
|
| **Theming** | [`DeesTheme`](#deestheme) |
|
|
| **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
|
|
| **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
|
|
|
|
---
|
|
|
|
## 🎯 Detailed Component Documentation
|
|
|
|
### Core UI Components
|
|
|
|
#### `DeesButton`
|
|
A versatile button component supporting multiple styles and states.
|
|
|
|
```typescript
|
|
// Basic usage
|
|
const button = document.createElement('dees-button');
|
|
button.text = 'Click me';
|
|
|
|
// With options
|
|
<dees-button
|
|
type="highlighted" // Options: normal, highlighted, discreet
|
|
status="pending" // Options: normal, pending, success, error
|
|
disabled={false} // Optional: disables the button
|
|
@click=${handleClick}
|
|
>Click me</dees-button>
|
|
```
|
|
|
|
#### `DeesBadge`
|
|
Display status indicators or counts with customizable styles.
|
|
|
|
```typescript
|
|
<dees-badge
|
|
type="success" // Options: default, primary, success, warning, error
|
|
text="New" // Text to display
|
|
rounded // Optional: applies rounded corners
|
|
></dees-badge>
|
|
```
|
|
|
|
#### `DeesChips`
|
|
Interactive chips/tags with selection capabilities.
|
|
|
|
```typescript
|
|
<dees-chips
|
|
selectionMode="multiple" // Options: none, single, multiple
|
|
chipsAreRemovable // Optional: allows removing chips
|
|
.selectableChips=${[
|
|
{ key: 'tag1', value: 'Important' },
|
|
{ key: 'tag2', value: 'Urgent' }
|
|
]}
|
|
@selection-change=${handleSelection}
|
|
></dees-chips>
|
|
```
|
|
|
|
#### `DeesIcon`
|
|
Display icons from FontAwesome and Lucide icon libraries with library prefixes.
|
|
|
|
```typescript
|
|
// FontAwesome icons - use 'fa:' prefix
|
|
<dees-icon
|
|
icon="fa:check" // FontAwesome icon with fa: prefix
|
|
iconSize="24" // Size in pixels
|
|
color="#22c55e" // Optional: custom color
|
|
></dees-icon>
|
|
|
|
// Lucide icons - use 'lucide:' prefix
|
|
<dees-icon
|
|
icon="lucide:menu" // Lucide icon with lucide: prefix
|
|
iconSize="24" // Size in pixels
|
|
color="#007bff" // Optional: custom color
|
|
strokeWidth="2" // Optional: stroke width for Lucide icons
|
|
></dees-icon>
|
|
|
|
// Legacy API (deprecated but still supported)
|
|
<dees-icon
|
|
iconFA="check" // Without prefix - assumes FontAwesome
|
|
></dees-icon>
|
|
```
|
|
|
|
#### `DeesLabel`
|
|
Text label component with optional icon and status indicators.
|
|
|
|
```typescript
|
|
<dees-label
|
|
text="Status" // Label text
|
|
icon="info-circle" // Optional: icon name
|
|
type="info" // Options: default, info, success, warning, error
|
|
size="medium" // Options: small, medium, large
|
|
></dees-label>
|
|
```
|
|
|
|
#### `DeesSpinner`
|
|
Loading indicator with customizable appearance.
|
|
|
|
```typescript
|
|
<dees-spinner
|
|
size="medium" // Options: small, medium, large
|
|
type="primary" // Options: primary, secondary, light, dark
|
|
overlay // Optional: adds a full-screen overlay
|
|
></dees-spinner>
|
|
```
|
|
|
|
#### `DeesToast`
|
|
Notification toast messages with various styles, positions, and auto-dismiss functionality.
|
|
|
|
```typescript
|
|
// Programmatic usage
|
|
DeesToast.show({
|
|
message: 'Operation successful',
|
|
type: 'success', // Options: info, success, warning, error
|
|
duration: 3000, // Time in milliseconds before auto-dismiss
|
|
position: 'top-right' // Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
|
|
});
|
|
|
|
// Convenience methods
|
|
DeesToast.info('Information message');
|
|
DeesToast.success('Success message');
|
|
DeesToast.warning('Warning message');
|
|
DeesToast.error('Error message');
|
|
|
|
// Advanced control
|
|
const toast = await DeesToast.show({
|
|
message: 'Processing...',
|
|
type: 'info',
|
|
duration: 0 // No auto-dismiss
|
|
});
|
|
|
|
// Later dismiss programmatically
|
|
toast.dismiss();
|
|
```
|
|
|
|
**Key Features:**
|
|
- Multiple toast types with distinct icons and colors
|
|
- 6 position options for flexible placement
|
|
- Auto-dismiss with visual progress indicator
|
|
- Manual dismiss by clicking
|
|
- Smooth animations and transitions
|
|
- Automatic stacking of multiple toasts
|
|
- Theme-aware styling
|
|
- 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
|
|
|
|
#### `DeesForm`
|
|
Container component for form elements with built-in validation and data handling.
|
|
|
|
```typescript
|
|
<dees-form
|
|
@formData=${(e) => handleFormData(e.detail)} // Emitted when form is submitted
|
|
@formValidation=${(e) => handleValidation(e.detail)} // Emitted during validation
|
|
>
|
|
<dees-input-text required></dees-input-text>
|
|
<dees-form-submit>Submit</dees-form-submit>
|
|
</dees-form>
|
|
```
|
|
|
|
#### `DeesInputText`
|
|
Text input field with validation and formatting options.
|
|
|
|
```typescript
|
|
<dees-input-text
|
|
key="email" // Unique identifier for form data
|
|
label="Email" // Input label
|
|
value="initial@value.com" // Initial value
|
|
required // Makes the field required
|
|
disabled // Disables the input
|
|
placeholder="Enter your email"
|
|
></dees-input-text>
|
|
```
|
|
|
|
#### `DeesInputCheckbox`
|
|
Checkbox input component for boolean values.
|
|
|
|
```typescript
|
|
<dees-input-checkbox
|
|
key="terms"
|
|
label="Accept Terms"
|
|
checked // Initial checked state
|
|
required
|
|
@change=${handleChange}
|
|
></dees-input-checkbox>
|
|
```
|
|
|
|
#### `DeesInputDropdown`
|
|
Dropdown selection component with search and filtering capabilities.
|
|
|
|
```typescript
|
|
<dees-input-dropdown
|
|
key="country"
|
|
label="Select Country"
|
|
.options=${[
|
|
{ key: 'us', option: 'United States' },
|
|
{ key: 'uk', option: 'United Kingdom' }
|
|
]}
|
|
searchable // Enables search functionality
|
|
multiple // Allows multiple selections
|
|
></dees-input-dropdown>
|
|
```
|
|
|
|
#### `DeesInputFileupload`
|
|
File upload component with drag-and-drop support.
|
|
|
|
```typescript
|
|
<dees-input-fileupload
|
|
key="documents"
|
|
label="Upload Files"
|
|
multiple // Allow multiple file selection
|
|
accept=".pdf,.doc" // Accepted file types
|
|
maxSize="5MB" // Maximum file size
|
|
@upload=${handleUpload}
|
|
></dees-input-fileupload>
|
|
```
|
|
|
|
#### `DeesInputIban`
|
|
Specialized input for IBAN (International Bank Account Number) with validation.
|
|
|
|
```typescript
|
|
<dees-input-iban
|
|
key="bankAccount"
|
|
label="IBAN"
|
|
country="DE" // Default country format
|
|
required
|
|
@validate=${handleIbanValidation}
|
|
></dees-input-iban>
|
|
```
|
|
|
|
#### `DeesInputPhone`
|
|
Phone number input with country code selection and formatting.
|
|
|
|
```typescript
|
|
<dees-input-phone
|
|
key="phone"
|
|
label="Phone Number"
|
|
defaultCountry="US" // Default country code
|
|
required
|
|
@validate=${handlePhoneValidation}
|
|
></dees-input-phone>
|
|
```
|
|
|
|
#### `DeesInputQuantitySelector`
|
|
Numeric input with increment/decrement controls.
|
|
|
|
```typescript
|
|
<dees-input-quantity-selector
|
|
key="quantity"
|
|
label="Quantity"
|
|
min="0" // Minimum value
|
|
max="100" // Maximum value
|
|
step="1" // Increment/decrement step
|
|
value="1" // Initial value
|
|
></dees-input-quantity-selector>
|
|
```
|
|
|
|
#### `DeesInputMultitoggle`
|
|
Multi-state toggle button group.
|
|
|
|
```typescript
|
|
<dees-input-multitoggle
|
|
key="status"
|
|
label="Status"
|
|
.options=${[
|
|
{ key: 'active', label: 'Active' },
|
|
{ key: 'pending', label: 'Pending' },
|
|
{ key: 'inactive', label: 'Inactive' }
|
|
]}
|
|
value="active" // Initial selected value
|
|
></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>
|
|
```
|
|
|
|
#### `DeesInputList`
|
|
Advanced list input with drag-and-drop reordering, inline editing, and validation.
|
|
|
|
```typescript
|
|
<dees-input-list
|
|
key="items"
|
|
label="List Items"
|
|
placeholder="Add new item..."
|
|
.value=${['Item 1', 'Item 2', 'Item 3']}
|
|
maxItems={10} // Optional: maximum items
|
|
minItems={1} // Optional: minimum items
|
|
allowDuplicates={false} // Optional: allow duplicate values
|
|
sortable={true} // Optional: enable drag-and-drop reordering
|
|
confirmDelete={true} // Optional: confirm before deletion
|
|
@change=${handleListChange}
|
|
></dees-input-list>
|
|
```
|
|
|
|
**Key Features:**
|
|
- Add, edit, and remove items inline
|
|
- Drag-and-drop reordering with visual feedback
|
|
- Optional duplicate prevention
|
|
- Min/max item constraints
|
|
- Delete confirmation dialog
|
|
- Full keyboard support
|
|
- Form validation integration
|
|
|
|
#### `DeesInputProfilepicture`
|
|
Profile picture input with cropping, zoom, and image processing.
|
|
|
|
```typescript
|
|
<dees-input-profilepicture
|
|
key="avatar"
|
|
label="Profile Picture"
|
|
shape="round" // Options: round, square
|
|
size={120} // Display size in pixels
|
|
.value=${imageBase64} // Base64 encoded image or URL
|
|
allowUpload={true} // Enable upload button
|
|
allowDelete={true} // Enable delete button
|
|
maxFileSize={5242880} // Max file size in bytes (5MB)
|
|
.acceptedFormats=${['image/jpeg', 'image/png', 'image/webp']}
|
|
outputSize={800} // Output resolution in pixels
|
|
outputQuality={0.95} // JPEG quality (0-1)
|
|
@change=${handleAvatarChange}
|
|
></dees-input-profilepicture>
|
|
```
|
|
|
|
**Key Features:**
|
|
- Interactive cropping modal with zoom and pan
|
|
- Drag-and-drop file upload
|
|
- Round or square output shapes
|
|
- Configurable output size and quality
|
|
- File size and format validation
|
|
- Delete functionality
|
|
- Preview on hover
|
|
|
|
#### `DeesInputDatepicker`
|
|
Date and time picker component with calendar interface and manual typing support.
|
|
|
|
```typescript
|
|
<dees-input-datepicker
|
|
key="eventDate"
|
|
label="Event Date"
|
|
placeholder="YYYY-MM-DD"
|
|
value="2025-01-15T14:30:00Z" // ISO string format
|
|
dateFormat="YYYY-MM-DD" // Display format (default: YYYY-MM-DD)
|
|
enableTime={true} // Enable time selection
|
|
timeFormat="24h" // Options: 24h, 12h
|
|
minuteIncrement={15} // Time step in minutes
|
|
minDate="2025-01-01" // Minimum selectable date
|
|
maxDate="2025-12-31" // Maximum selectable date
|
|
.disabledDates=${[ // Array of disabled dates
|
|
'2025-01-10',
|
|
'2025-01-11'
|
|
]}
|
|
weekStartsOn={1} // 0 = Sunday, 1 = Monday
|
|
required
|
|
@change=${handleDateChange}
|
|
></dees-input-datepicker>
|
|
```
|
|
|
|
**Key Features:**
|
|
- Interactive calendar popup
|
|
- Manual date typing with multiple formats
|
|
- Optional time selection
|
|
- Configurable date format
|
|
- Min/max date constraints
|
|
- Disable specific dates
|
|
- Keyboard navigation
|
|
- Today button
|
|
- Clear functionality
|
|
- 12/24 hour time formats
|
|
- Theme-aware styling
|
|
- Live parsing and validation
|
|
|
|
**Manual Input Formats:**
|
|
```typescript
|
|
// Date formats supported
|
|
"2023-12-20" // ISO format (YYYY-MM-DD)
|
|
"20.12.2023" // European format (DD.MM.YYYY)
|
|
"12/20/2023" // US format (MM/DD/YYYY)
|
|
|
|
// Date with time (add space and time after any date format)
|
|
"2023-12-20 14:30"
|
|
"20.12.2023 9:45"
|
|
"12/20/2023 16:00"
|
|
```
|
|
|
|
#### `DeesInputSearchselect`
|
|
Search-enabled dropdown selection component.
|
|
|
|
```typescript
|
|
<dees-input-searchselect
|
|
key="category"
|
|
label="Select Category"
|
|
placeholder="Search categories..."
|
|
.options=${[
|
|
{ key: 'tech', label: 'Technology' },
|
|
{ key: 'health', label: 'Healthcare' },
|
|
{ key: 'finance', label: 'Finance' }
|
|
]}
|
|
required
|
|
@change=${handleCategoryChange}
|
|
></dees-input-searchselect>
|
|
```
|
|
|
|
#### `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`
|
|
Submit button component specifically designed for `DeesForm`.
|
|
|
|
```typescript
|
|
<dees-form-submit
|
|
disabled // Optional: disable submit button
|
|
status="normal" // Options: normal, pending, success, error
|
|
>Submit Form</dees-form-submit>
|
|
```
|
|
|
|
---
|
|
|
|
### Layout Components
|
|
|
|
#### `DeesAppui`
|
|
A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
|
|
|
|
> **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui/readme.md](./ts_web/elements/00group-appui/dees-appui/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
|
|
|
|
**Quick Start:**
|
|
|
|
```typescript
|
|
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
|
import { DeesAppui } from '@design.estate/dees-catalog';
|
|
|
|
@customElement('my-app')
|
|
class MyApp extends DeesElement {
|
|
private appui: DeesAppui;
|
|
|
|
async firstUpdated() {
|
|
this.appui = this.shadowRoot.querySelector('dees-appui');
|
|
|
|
// Configure with views and menu
|
|
this.appui.configure({
|
|
branding: { logoIcon: 'lucide:box', logoText: 'My App' },
|
|
views: [
|
|
{ id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
|
|
{ id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
|
|
],
|
|
mainMenu: {
|
|
sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
|
|
},
|
|
defaultView: 'dashboard'
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return html`<dees-appui></dees-appui>`;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Key Features:**
|
|
- **Configure API**: Single `configure()` method for complete app setup
|
|
- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks
|
|
- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
|
|
- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components
|
|
- **Hash-based Routing**: Automatic URL synchronization with view navigation
|
|
- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
|
|
- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
|
|
- **Activity Log Toggle**: Built-in appbar button to show/hide activity panel with entry count badge
|
|
|
|
**Programmatic APIs include:**
|
|
- `navigateToView(viewId, params?)` - Navigate between views
|
|
- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
|
|
- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
|
|
- `setMainMenuCollapsed()`, `setMainMenuVisible()` - Control main menu visibility
|
|
- `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu
|
|
- `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI
|
|
- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
|
|
- `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` - Control activity panel
|
|
|
|
**View Visibility Control:**
|
|
```typescript
|
|
// In your view's onActivate hook
|
|
onActivate(context: IViewActivationContext) {
|
|
// Hide secondary menu for a fullscreen view
|
|
context.appui.setSecondaryMenuVisible(false);
|
|
|
|
// Hide content tabs
|
|
context.appui.setContentTabsVisible(false);
|
|
|
|
// Collapse main menu to give more space
|
|
context.appui.setMainMenuCollapsed(true);
|
|
}
|
|
```
|
|
|
|
#### `DeesAppuiMainmenu`
|
|
Main navigation menu component for application-wide navigation.
|
|
|
|
```typescript
|
|
<dees-appui-mainmenu
|
|
.menuGroups=${[
|
|
{
|
|
name: 'Main',
|
|
items: [
|
|
{ key: 'dashboard', iconName: 'lucide:home', action: () => navigate('dashboard') },
|
|
{ key: 'settings', iconName: 'lucide:settings', action: () => navigate('settings') }
|
|
]
|
|
}
|
|
]}
|
|
collapsed // Optional: show collapsed version
|
|
></dees-appui-mainmenu>
|
|
```
|
|
|
|
#### `DeesAppuiSecondarymenu`
|
|
Secondary navigation component for sub-section selection with collapsible groups and badges.
|
|
|
|
```typescript
|
|
<dees-appui-secondarymenu
|
|
.heading=${'Projects'}
|
|
.groups=${[
|
|
{
|
|
name: 'Active',
|
|
iconName: 'lucide:folder',
|
|
items: [
|
|
{ key: 'Frontend App', iconName: 'lucide:code', action: () => select('frontend'), badge: 3, badgeVariant: 'warning' },
|
|
{ key: 'API Server', iconName: 'lucide:server', action: () => select('api') }
|
|
]
|
|
}
|
|
]}
|
|
@item-select=${handleSectionChange}
|
|
></dees-appui-secondarymenu>
|
|
```
|
|
|
|
#### `DeesAppuiMaincontent`
|
|
Main content area with tab management support.
|
|
|
|
```typescript
|
|
<dees-appui-maincontent
|
|
.tabs=${[
|
|
{ key: 'Overview', iconName: 'lucide:home', action: () => selectTab('overview') },
|
|
{ key: 'Details', iconName: 'lucide:info', action: () => selectTab('details') }
|
|
]}
|
|
@tab-select=${handleTabChange}
|
|
>
|
|
<!-- Content goes here -->
|
|
</dees-appui-maincontent>
|
|
```
|
|
|
|
#### `DeesAppuiAppbar`
|
|
Professional application bar component with hierarchical menus, breadcrumb navigation, user account management, and activity log toggle.
|
|
|
|
```typescript
|
|
<dees-appui-appbar
|
|
.menuItems=${[
|
|
{
|
|
name: 'File',
|
|
action: async () => {}, // No-op for parent menu items
|
|
submenu: [
|
|
{
|
|
name: 'New File',
|
|
shortcut: 'Cmd+N',
|
|
iconName: 'file-plus',
|
|
action: async () => handleNewFile()
|
|
},
|
|
{
|
|
name: 'Open...',
|
|
shortcut: 'Cmd+O',
|
|
iconName: 'folder-open',
|
|
action: async () => handleOpen()
|
|
},
|
|
{ divider: true }, // Menu separator
|
|
{
|
|
name: 'Save',
|
|
shortcut: 'Cmd+S',
|
|
iconName: 'save',
|
|
action: async () => handleSave(),
|
|
disabled: true // Disabled state
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
.breadcrumbs=${'Project > src > components'}
|
|
.showWindowControls=${true}
|
|
.showSearch=${true}
|
|
.showActivityLogToggle=${true}
|
|
.activityLogCount=${5}
|
|
.activityLogActive=${false}
|
|
.user=${{
|
|
name: 'John Doe',
|
|
avatar: '/path/to/avatar.jpg',
|
|
status: 'online' // Options: 'online' | 'offline' | 'busy' | 'away'
|
|
}}
|
|
@menu-select=${(e) => handleMenuSelect(e.detail.item)}
|
|
@breadcrumb-navigate=${(e) => handleBreadcrumbClick(e.detail)}
|
|
@activity-toggle=${() => handleActivityToggle()}
|
|
></dees-appui-appbar>
|
|
```
|
|
|
|
**Key Features:**
|
|
- **Hierarchical Menu System** - Top-level menus with dropdown submenus, icons, and keyboard shortcuts
|
|
- **Keyboard Navigation** - Full keyboard support (Tab, Arrow keys, Enter, Escape)
|
|
- **Breadcrumb Navigation** - Customizable breadcrumb trail with click events
|
|
- **User Account Section** - Avatar with status indicator and profile dropdown
|
|
- **Activity Log Toggle** - Button with badge count to show/hide activity panel
|
|
- **Accessibility** - Full ARIA support with menubar roles
|
|
|
|
#### `DeesAppuiActivitylog`
|
|
Real-time activity log panel for displaying user actions and system events.
|
|
|
|
```typescript
|
|
<dees-appui-activitylog></dees-appui-activitylog>
|
|
|
|
// Programmatic API
|
|
activityLog.add({
|
|
type: 'update', // Options: login, logout, view, create, update, delete, custom
|
|
user: 'John Doe',
|
|
message: 'Updated project settings',
|
|
iconName: 'lucide:settings' // Optional: custom icon
|
|
});
|
|
|
|
activityLog.addMany(entries); // Add multiple entries
|
|
activityLog.clear(); // Clear all entries
|
|
activityLog.getEntries(); // Get all entries
|
|
activityLog.filter({ user: 'John' }); // Filter by user/type
|
|
activityLog.search('settings'); // Search by message
|
|
```
|
|
|
|
**Key Features:**
|
|
- Stacked entry layout with icon, user, timestamp, and message
|
|
- Date grouping (Today, Yesterday, etc.)
|
|
- Search and filter functionality
|
|
- Context menu for entry actions
|
|
- Live streaming indicator
|
|
- Animated slide-in/out panel
|
|
- Theme-aware styling
|
|
|
|
#### `DeesAppuiTabs`
|
|
Reusable tab component with horizontal/vertical layout support.
|
|
|
|
```typescript
|
|
<dees-appui-tabs
|
|
.tabs=${[
|
|
{ key: 'Home', iconName: 'lucide:home', action: () => console.log('Home') },
|
|
{ key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') }
|
|
]}
|
|
tabStyle="horizontal" // Options: horizontal, vertical
|
|
showTabIndicator={true}
|
|
@tab-select=${handleTabSelect}
|
|
></dees-appui-tabs>
|
|
```
|
|
|
|
---
|
|
|
|
### Data Display Components
|
|
|
|
#### `DeesTable`
|
|
Advanced table component with sorting, filtering, and action support.
|
|
|
|
```typescript
|
|
<dees-table
|
|
.data=${tableData}
|
|
.displayFunction=${(item) => ({
|
|
name: item.name,
|
|
date: item.date,
|
|
amount: item.amount,
|
|
description: item.description
|
|
})}
|
|
.dataActions=${[
|
|
{
|
|
name: 'Edit',
|
|
icon: 'edit',
|
|
action: (item) => handleEdit(item)
|
|
},
|
|
{
|
|
name: 'Delete',
|
|
icon: 'trash',
|
|
action: (item) => handleDelete(item)
|
|
}
|
|
]}
|
|
heading1="Transactions"
|
|
heading2="Recent Activity"
|
|
searchable // Enable search functionality
|
|
dataName="transaction" // Name for single data item
|
|
@selection-change=${handleSelectionChange}
|
|
></dees-table>
|
|
```
|
|
|
|
**Advanced Features:**
|
|
- Schema-first columns or `displayFunction` rendering
|
|
- Sorting via header clicks with `aria-sort` + `sortChange`
|
|
- Global search with Lucene-like syntax; modes: `table`, `data`, `server`
|
|
- Per-column quick filters row; `showColumnFilters` and `column.filterable=false`
|
|
- Selection: `none` | `single` | `multi`, with select-all and `selectionChange`
|
|
- Sticky header + internal scroll (`stickyHeader`, `--table-max-height`)
|
|
- Rich actions: header/in-row/contextmenu/footer/doubleClick; pinned Actions column
|
|
- Editable cells via `editableFields`
|
|
- Drag & drop files onto rows
|
|
|
|
#### `DeesDataviewCodebox`
|
|
Code display component with syntax highlighting and line numbers.
|
|
|
|
```typescript
|
|
<dees-dataview-codebox
|
|
progLang="typescript" // Programming language for syntax highlighting
|
|
.codeToDisplay=${`
|
|
import { html } from '@design.estate/dees-element';
|
|
|
|
export const myComponent = () => {
|
|
return html\`<div>Hello World</div>\`;
|
|
};
|
|
`}
|
|
></dees-dataview-codebox>
|
|
```
|
|
|
|
#### `DeesDataviewStatusobject`
|
|
Status display component for complex objects with nested status indicators.
|
|
|
|
```typescript
|
|
<dees-dataview-statusobject
|
|
.statusObject=${{
|
|
id: '1',
|
|
name: 'System Status',
|
|
combinedStatus: 'partly_ok',
|
|
combinedStatusText: 'Partially OK',
|
|
details: [
|
|
{ name: 'Database', value: 'Connected', status: 'ok', statusText: 'OK' },
|
|
{ name: 'API Service', value: 'Degraded', status: 'partly_ok', statusText: 'Partially OK' }
|
|
]
|
|
}}
|
|
></dees-dataview-statusobject>
|
|
```
|
|
|
|
#### `DeesPdf`
|
|
PDF viewer component with navigation and zoom controls.
|
|
|
|
```typescript
|
|
<dees-pdf
|
|
source="path/to/document.pdf" // URL or base64 encoded PDF
|
|
page={1} // Current page number
|
|
scale={1.0} // Zoom level
|
|
.controls=${['zoom', 'download', 'print', 'navigation']}
|
|
@page-change=${handlePageChange}
|
|
></dees-pdf>
|
|
```
|
|
|
|
#### `DeesStatsGrid`
|
|
A responsive grid component for displaying statistical data with various visualization types.
|
|
|
|
```typescript
|
|
<dees-statsgrid
|
|
.tiles=${[
|
|
{
|
|
id: 'revenue',
|
|
title: 'Total Revenue',
|
|
value: 125420,
|
|
unit: '$',
|
|
type: 'number',
|
|
icon: 'faDollarSign',
|
|
description: '+12.5% from last month',
|
|
color: '#22c55e'
|
|
},
|
|
{
|
|
id: 'cpu',
|
|
title: 'CPU Usage',
|
|
value: 73,
|
|
type: 'gauge',
|
|
icon: 'faMicrochip',
|
|
gaugeOptions: {
|
|
min: 0, max: 100,
|
|
thresholds: [
|
|
{ value: 0, color: '#22c55e' },
|
|
{ value: 60, color: '#f59e0b' },
|
|
{ value: 80, color: '#ef4444' }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
id: 'requests',
|
|
title: 'API Requests',
|
|
value: '1.2k',
|
|
unit: '/min',
|
|
type: 'trend',
|
|
icon: 'faServer',
|
|
trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
|
|
}
|
|
]}
|
|
.minTileWidth=${250}
|
|
.gap=${16}
|
|
></dees-statsgrid>
|
|
```
|
|
|
|
#### `DeesPagination`
|
|
Pagination component for navigating through large datasets.
|
|
|
|
```typescript
|
|
<dees-pagination
|
|
totalItems={500}
|
|
itemsPerPage={20}
|
|
currentPage={1}
|
|
maxVisiblePages={7}
|
|
@page-change=${handlePageChange}
|
|
></dees-pagination>
|
|
```
|
|
|
|
---
|
|
|
|
### Visualization Components
|
|
|
|
#### `DeesChartArea`
|
|
Area chart component built on ApexCharts for visualizing time-series data.
|
|
|
|
```typescript
|
|
<dees-chart-area
|
|
label="System Usage"
|
|
.series=${[
|
|
{
|
|
name: 'CPU',
|
|
data: [
|
|
{ x: '2025-01-15T03:00:00', y: 25 },
|
|
{ x: '2025-01-15T07:00:00', y: 30 },
|
|
{ x: '2025-01-15T11:00:00', y: 20 }
|
|
]
|
|
}
|
|
]}
|
|
></dees-chart-area>
|
|
```
|
|
|
|
#### `DeesChartLog`
|
|
Specialized chart component for visualizing log data and events.
|
|
|
|
```typescript
|
|
<dees-chart-log
|
|
label="System Events"
|
|
.data=${[
|
|
{ timestamp: '2025-01-15T03:00:00', event: 'Server Start', type: 'info' },
|
|
{ timestamp: '2025-01-15T03:15:00', event: 'Error Detected', type: 'error' }
|
|
]}
|
|
.filters=${['info', 'warning', 'error']}
|
|
@event-click=${handleEventClick}
|
|
></dees-chart-log>
|
|
```
|
|
|
|
---
|
|
|
|
### Dialogs & Overlays Components
|
|
|
|
#### `DeesModal`
|
|
Modal dialog component with customizable content and actions.
|
|
|
|
```typescript
|
|
// Programmatic usage
|
|
DeesModal.createAndShow({
|
|
heading: 'Confirm Action',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text .label=${'Enter reason'}></dees-input-text>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modal) => { modal.destroy(); return null; } },
|
|
{ name: 'Confirm', action: async (modal) => { /* handle */ modal.destroy(); return null; } }
|
|
]
|
|
});
|
|
```
|
|
|
|
#### `DeesContextmenu`
|
|
Context menu component for right-click actions.
|
|
|
|
```typescript
|
|
<dees-contextmenu
|
|
.items=${[
|
|
{ label: 'Edit', icon: 'edit', action: () => handleEdit() },
|
|
{ label: 'Delete', icon: 'trash', action: () => handleDelete() }
|
|
]}
|
|
position="right"
|
|
></dees-contextmenu>
|
|
```
|
|
|
|
#### `DeesSpeechbubble`
|
|
Tooltip-style speech bubble component for contextual information.
|
|
|
|
```typescript
|
|
// Programmatic usage
|
|
const bubble = await DeesSpeechbubble.createAndShow(
|
|
referenceElement,
|
|
'Helpful information about this feature'
|
|
);
|
|
```
|
|
|
|
#### `DeesWindowlayer`
|
|
Base overlay component used by modal dialogs and other overlay components.
|
|
|
|
```typescript
|
|
const layer = await DeesWindowLayer.createAndShow({
|
|
blur: true,
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
### Navigation Components
|
|
|
|
#### `DeesStepper`
|
|
Multi-step navigation component for guided user flows.
|
|
|
|
```typescript
|
|
<dees-stepper
|
|
.steps=${[
|
|
{ key: 'personal', label: 'Personal Info', content: html`<div>Form 1</div>` },
|
|
{ key: 'address', label: 'Address', content: html`<div>Form 2</div>` },
|
|
{ key: 'confirm', label: 'Confirmation', content: html`<div>Review</div>` }
|
|
]}
|
|
currentStep="personal"
|
|
@step-change=${handleStepChange}
|
|
@complete=${handleComplete}
|
|
></dees-stepper>
|
|
```
|
|
|
|
#### `DeesProgressbar`
|
|
Progress indicator component for tracking completion status.
|
|
|
|
```typescript
|
|
<dees-progressbar
|
|
value={75}
|
|
label="Uploading"
|
|
showPercentage
|
|
type="determinate" // Options: determinate, indeterminate
|
|
status="normal" // Options: normal, success, warning, error
|
|
></dees-progressbar>
|
|
```
|
|
|
|
---
|
|
|
|
### Theming Components
|
|
|
|
#### `DeesTheme`
|
|
Theme provider component that wraps children and provides CSS custom properties for consistent theming.
|
|
|
|
```typescript
|
|
// Basic usage - wrap your app
|
|
<dees-theme>
|
|
<my-app></my-app>
|
|
</dees-theme>
|
|
|
|
// With custom overrides
|
|
<dees-theme
|
|
.customColors=${{
|
|
primary: '#007bff',
|
|
success: '#28a745'
|
|
}}
|
|
.customSpacing=${{
|
|
lg: '24px',
|
|
xl: '32px'
|
|
}}
|
|
>
|
|
<my-section></my-section>
|
|
</dees-theme>
|
|
```
|
|
|
|
**Key Features:**
|
|
- Provides CSS custom properties for colors, spacing, radius, shadows, and transitions
|
|
- Can be nested for section-specific theming
|
|
- Works with dark/light mode
|
|
- Overrides cascade to all child components
|
|
|
|
---
|
|
|
|
### Development Components
|
|
|
|
#### `DeesEditor`
|
|
Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
|
|
|
|
```typescript
|
|
<dees-editor
|
|
.value=${code}
|
|
@change=${handleCodeChange}
|
|
.language=${'typescript'}
|
|
.theme=${'vs-dark'}
|
|
.options=${{
|
|
lineNumbers: true,
|
|
minimap: { enabled: true },
|
|
autoClosingBrackets: 'always'
|
|
}}
|
|
></dees-editor>
|
|
```
|
|
|
|
#### `DeesEditorMarkdown`
|
|
Markdown editor component with live preview.
|
|
|
|
```typescript
|
|
<dees-editor-markdown
|
|
.value=${markdown}
|
|
@change=${handleMarkdownChange}
|
|
.options=${{ preview: true, toolbar: true, spellcheck: true }}
|
|
></dees-editor-markdown>
|
|
```
|
|
|
|
#### `DeesEditorMarkdownoutlet`
|
|
Markdown preview component for rendering markdown content.
|
|
|
|
```typescript
|
|
<dees-editor-markdownoutlet
|
|
.markdown=${markdownContent}
|
|
.theme=${'github'}
|
|
allowHtml={false}
|
|
></dees-editor-markdownoutlet>
|
|
```
|
|
|
|
#### `DeesTerminal`
|
|
Terminal emulator component for command-line interface.
|
|
|
|
```typescript
|
|
<dees-terminal
|
|
.commands=${{
|
|
'echo': (args) => `Echo: ${args.join(' ')}`,
|
|
'help': () => 'Available commands: echo, help'
|
|
}}
|
|
.prompt=${'$'}
|
|
.welcomeMessage=${'Welcome! Type "help" for available commands.'}
|
|
></dees-terminal>
|
|
```
|
|
|
|
#### `DeesUpdater`
|
|
Component for managing application updates and version control.
|
|
|
|
```typescript
|
|
<dees-updater
|
|
.currentVersion=${'1.5.2'}
|
|
.checkInterval=${3600000}
|
|
.autoUpdate=${false}
|
|
@update-available=${handleUpdateAvailable}
|
|
></dees-updater>
|
|
```
|
|
|
|
---
|
|
|
|
### 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>
|
|
```
|
|
|
|
#### `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']}
|
|
showForgotPassword
|
|
showRememberMe
|
|
@login=${handleLogin}
|
|
@forgot-password=${handleForgotPassword}
|
|
></dees-simple-login>
|
|
```
|
|
|
|
---
|
|
|
|
### Shopping Components
|
|
|
|
#### `DeesShoppingProductcard`
|
|
Product card component for e-commerce applications.
|
|
|
|
```typescript
|
|
<dees-shopping-productcard
|
|
.productData=${{
|
|
name: 'Premium Headphones',
|
|
category: 'Electronics',
|
|
description: 'High-quality wireless headphones with noise cancellation',
|
|
price: 199.99,
|
|
originalPrice: 249.99,
|
|
currency: '$',
|
|
inStock: true,
|
|
imageUrl: '/images/headphones.jpg'
|
|
}}
|
|
quantity={1}
|
|
showQuantitySelector={true}
|
|
@quantityChange=${handleQuantityChange}
|
|
></dees-shopping-productcard>
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 TypeScript Interfaces
|
|
|
|
The library exports unified interfaces for consistent API patterns:
|
|
|
|
```typescript
|
|
// Base menu item interface (used by tabs, menus, etc.)
|
|
interface IMenuItem {
|
|
key: string;
|
|
iconName?: string;
|
|
action: () => void;
|
|
badge?: string | number;
|
|
badgeVariant?: 'default' | 'success' | 'warning' | 'error';
|
|
}
|
|
|
|
// Menu group interface for organized menus
|
|
interface IMenuGroup {
|
|
name: string;
|
|
items: IMenuItem[];
|
|
collapsed?: boolean;
|
|
iconName?: string;
|
|
}
|
|
|
|
// View definition for app navigation
|
|
interface IViewDefinition {
|
|
id: string;
|
|
name: string;
|
|
iconName?: string;
|
|
content: string | HTMLElement | (() => TemplateResult);
|
|
secondaryMenu?: ISecondaryMenuGroup[];
|
|
contentTabs?: IMenuItem[];
|
|
route?: string;
|
|
badge?: string | number;
|
|
}
|
|
|
|
// Activity log entry
|
|
interface IActivityEntry {
|
|
id?: string;
|
|
timestamp?: Date;
|
|
type: 'login' | 'logout' | 'view' | 'create' | 'update' | 'delete' | 'custom';
|
|
user: string;
|
|
message: string;
|
|
iconName?: string;
|
|
data?: Record<string, unknown>;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## License and Legal Information
|
|
|
|
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
|
|
|
|
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
|
|
|
### Trademarks
|
|
|
|
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
|
|
|
|
Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
|
|
|
|
### Company Information
|
|
|
|
Task Venture Capital GmbH
|
|
Registered at District Court Bremen HRB 35230 HB, Germany
|
|
|
|
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
|
|
|
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|