feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly
This commit is contained in:
588
readme.md
588
readme.md
@@ -1,32 +1,71 @@
|
||||
# @design.estate/dees-catalog
|
||||
A comprehensive web components library built with TypeScript and LitElement, providing 75+ UI components for building modern web applications with consistent design and behavior.
|
||||
|
||||
## 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.
|
||||
A comprehensive web components library built with TypeScript and LitElement, providing **75+ UI components** for building modern web applications with consistent design and behavior. 🚀
|
||||
|
||||
## Install
|
||||
To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager:
|
||||
[](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
|
||||
```
|
||||
|
||||
## Components Overview
|
||||
## 🚀 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), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
|
||||
| Layout | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiMainselector`](#deesappuimainselector), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`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) |
|
||||
| Auth & Utilities | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
|
||||
| Shopping | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
|
||||
| **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), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
|
||||
| **Layout** | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`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) |
|
||||
| **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
|
||||
| **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
|
||||
|
||||
## Detailed Component Documentation
|
||||
---
|
||||
|
||||
## 🎯 Detailed Component Documentation
|
||||
|
||||
### Core UI Components
|
||||
|
||||
@@ -84,7 +123,7 @@ Display icons from FontAwesome and Lucide icon libraries with library prefixes.
|
||||
color="#22c55e" // Optional: custom color
|
||||
></dees-icon>
|
||||
|
||||
// Lucide icons - use 'lucide:' prefix
|
||||
// Lucide icons - use 'lucide:' prefix
|
||||
<dees-icon
|
||||
icon="lucide:menu" // Lucide icon with lucide: prefix
|
||||
iconSize="24" // Size in pixels
|
||||
@@ -148,16 +187,9 @@ const toast = await DeesToast.show({
|
||||
|
||||
// Later dismiss programmatically
|
||||
toast.dismiss();
|
||||
|
||||
// Component usage (not typically used directly)
|
||||
<dees-toast
|
||||
message="Changes saved"
|
||||
type="success"
|
||||
duration="3000"
|
||||
></dees-toast>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
**Key Features:**
|
||||
- Multiple toast types with distinct icons and colors
|
||||
- 6 position options for flexible placement
|
||||
- Auto-dismiss with visual progress indicator
|
||||
@@ -254,6 +286,8 @@ Window control buttons (minimize, maximize, close) for desktop-like applications
|
||||
></dees-windowcontrols>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Form Components
|
||||
|
||||
#### `DeesForm`
|
||||
@@ -427,7 +461,7 @@ Tag input component for managing lists of tags with auto-complete and validation
|
||||
></dees-input-tags>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
**Key Features:**
|
||||
- Add tags by pressing Enter or typing comma/semicolon
|
||||
- Remove tags with click or backspace
|
||||
- Auto-complete suggestions with keyboard navigation
|
||||
@@ -464,7 +498,7 @@ Date and time picker component with calendar interface and manual typing support
|
||||
minDate="2025-01-01" // Minimum selectable date
|
||||
maxDate="2025-12-31" // Maximum selectable date
|
||||
.disabledDates=${[ // Array of disabled dates
|
||||
'2025-01-10',
|
||||
'2025-01-10',
|
||||
'2025-01-11'
|
||||
]}
|
||||
weekStartsOn={1} // 0 = Sunday, 1 = Monday
|
||||
@@ -473,7 +507,7 @@ Date and time picker component with calendar interface and manual typing support
|
||||
></dees-input-datepicker>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
**Key Features:**
|
||||
- Interactive calendar popup
|
||||
- Manual date typing with multiple formats
|
||||
- Optional time selection
|
||||
@@ -487,7 +521,7 @@ Key Features:
|
||||
- Theme-aware styling
|
||||
- Live parsing and validation
|
||||
|
||||
Manual Input Formats:
|
||||
**Manual Input Formats:**
|
||||
```typescript
|
||||
// Date formats supported
|
||||
"2023-12-20" // ISO format (YYYY-MM-DD)
|
||||
@@ -500,8 +534,6 @@ Manual Input Formats:
|
||||
"12/20/2023 16:00"
|
||||
```
|
||||
|
||||
The component automatically parses and validates input as you type, updating the internal date value when a valid date is recognized.
|
||||
|
||||
#### `DeesInputSearchselect`
|
||||
Search-enabled dropdown selection component.
|
||||
|
||||
@@ -535,7 +567,7 @@ Rich text editor with formatting toolbar powered by TipTap.
|
||||
></dees-input-richtext>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
**Key Features:**
|
||||
- Full formatting toolbar (bold, italic, underline, strike, etc.)
|
||||
- Heading levels (H1-H6)
|
||||
- Lists (bullet, ordered)
|
||||
@@ -560,7 +592,7 @@ Advanced block-based editor with slash commands and rich content blocks.
|
||||
></dees-input-wysiwyg>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
**Key Features:**
|
||||
- Slash commands for quick formatting
|
||||
- Block-based editing (paragraphs, headings, lists, etc.)
|
||||
- Drag and drop block reordering
|
||||
@@ -579,6 +611,8 @@ Submit button component specifically designed for `DeesForm`.
|
||||
>Submit Form</dees-form-submit>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Layout Components
|
||||
|
||||
#### `DeesAppuiBase`
|
||||
@@ -640,41 +674,37 @@ Main navigation menu component for application-wide navigation.
|
||||
|
||||
```typescript
|
||||
<dees-appui-mainmenu
|
||||
.menuItems=${[
|
||||
.menuGroups=${[
|
||||
{
|
||||
key: 'dashboard',
|
||||
label: 'Dashboard',
|
||||
icon: 'home',
|
||||
action: () => handleNavigation('dashboard')
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Settings',
|
||||
icon: 'cog',
|
||||
action: () => handleNavigation('settings')
|
||||
name: 'Main',
|
||||
items: [
|
||||
{ key: 'dashboard', iconName: 'lucide:home', action: () => navigate('dashboard') },
|
||||
{ key: 'settings', iconName: 'lucide:settings', action: () => navigate('settings') }
|
||||
]
|
||||
}
|
||||
]}
|
||||
collapsed // Optional: show collapsed version
|
||||
position="left" // Options: left, right
|
||||
></dees-appui-mainmenu>
|
||||
```
|
||||
|
||||
#### `DeesAppuiMainselector`
|
||||
Secondary navigation component for sub-section selection.
|
||||
#### `DeesAppuiSecondarymenu`
|
||||
Secondary navigation component for sub-section selection with collapsible groups and badges.
|
||||
|
||||
```typescript
|
||||
<dees-appui-mainselector
|
||||
.items=${[
|
||||
<dees-appui-secondarymenu
|
||||
.heading=${'Projects'}
|
||||
.groups=${[
|
||||
{
|
||||
key: 'section1',
|
||||
label: 'Section 1',
|
||||
icon: 'folder',
|
||||
action: () => selectSection('section1')
|
||||
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') }
|
||||
]
|
||||
}
|
||||
]}
|
||||
selectedKey="section1" // Currently selected section
|
||||
@selection-change=${handleSectionChange}
|
||||
></dees-appui-mainselector>
|
||||
@item-select=${handleSectionChange}
|
||||
></dees-appui-secondarymenu>
|
||||
```
|
||||
|
||||
#### `DeesAppuiMaincontent`
|
||||
@@ -683,16 +713,13 @@ Main content area with tab management support.
|
||||
```typescript
|
||||
<dees-appui-maincontent
|
||||
.tabs=${[
|
||||
{
|
||||
key: 'tab1',
|
||||
label: 'Tab 1',
|
||||
content: html`<div>Tab 1 Content</div>`,
|
||||
action: () => handleTabAction('tab1')
|
||||
}
|
||||
{ key: 'Overview', iconName: 'lucide:home', action: () => selectTab('overview') },
|
||||
{ key: 'Details', iconName: 'lucide:info', action: () => selectTab('details') }
|
||||
]}
|
||||
selectedTab="tab1" // Currently active tab
|
||||
@tab-change=${handleTabChange}
|
||||
></dees-appui-maincontent>
|
||||
@tab-select=${handleTabChange}
|
||||
>
|
||||
<!-- Content goes here -->
|
||||
</dees-appui-maincontent>
|
||||
```
|
||||
|
||||
#### `DeesAppuiAppbar`
|
||||
@@ -705,91 +732,82 @@ Professional application bar component with hierarchical menus, breadcrumb navig
|
||||
name: 'File',
|
||||
action: async () => {}, // No-op for parent menu items
|
||||
submenu: [
|
||||
{
|
||||
name: 'New File',
|
||||
shortcut: 'Cmd+N',
|
||||
iconName: 'file-plus',
|
||||
action: async () => handleNewFile()
|
||||
{
|
||||
name: 'New File',
|
||||
shortcut: 'Cmd+N',
|
||||
iconName: 'file-plus',
|
||||
action: async () => handleNewFile()
|
||||
},
|
||||
{
|
||||
name: 'Open...',
|
||||
shortcut: 'Cmd+O',
|
||||
iconName: 'folder-open',
|
||||
action: async () => handleOpen()
|
||||
{
|
||||
name: 'Open...',
|
||||
shortcut: 'Cmd+O',
|
||||
iconName: 'folder-open',
|
||||
action: async () => handleOpen()
|
||||
},
|
||||
{ divider: true }, // Menu separator
|
||||
{
|
||||
name: 'Save',
|
||||
shortcut: 'Cmd+S',
|
||||
iconName: 'save',
|
||||
{
|
||||
name: 'Save',
|
||||
shortcut: 'Cmd+S',
|
||||
iconName: 'save',
|
||||
action: async () => handleSave(),
|
||||
disabled: true // Disabled state
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Edit',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => handleUndo() },
|
||||
{ name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => handleRedo() }
|
||||
]
|
||||
}
|
||||
]}
|
||||
.breadcrumbs=${'Project > src > components > AppBar.ts'}
|
||||
.breadcrumbSeparator=${' > '}
|
||||
.breadcrumbs=${'Project > src > components'}
|
||||
.showWindowControls=${true}
|
||||
.showSearch=${true}
|
||||
.theme=${'dark'} // Options: 'light' | 'dark'
|
||||
.user=${{
|
||||
name: 'John Doe',
|
||||
avatar: '/path/to/avatar.jpg', // Optional
|
||||
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)}
|
||||
@search-click=${() => handleSearchClick()}
|
||||
@user-menu-open=${() => handleUserMenuOpen()}
|
||||
></dees-appui-appbar>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- **Hierarchical Menu System**
|
||||
- Top-level text-only menus (following desktop UI standards)
|
||||
- Dropdown submenus with icons and keyboard shortcuts
|
||||
- Support for nested submenus
|
||||
- Menu dividers for visual grouping
|
||||
- Disabled state support
|
||||
|
||||
- **Keyboard Navigation**
|
||||
- Tab navigation between top-level items
|
||||
- Arrow keys for dropdown navigation (Up/Down in dropdowns, Left/Right between top items)
|
||||
- Enter to select items
|
||||
- Escape to close dropdowns
|
||||
- Home/End keys for first/last item
|
||||
|
||||
- **Breadcrumb Navigation**
|
||||
- Customizable breadcrumb trail
|
||||
- Configurable separator
|
||||
- Click events for navigation
|
||||
|
||||
- **User Account Section**
|
||||
- User avatar with fallback to initials
|
||||
- Status indicator (online, offline, busy, away)
|
||||
- Click handler for user menu
|
||||
|
||||
- **Visual Features**
|
||||
- Light and dark theme support
|
||||
- Smooth animations and transitions
|
||||
- Window controls integration
|
||||
- Search icon with click handler
|
||||
- Responsive layout using CSS Grid
|
||||
|
||||
- **Accessibility**
|
||||
- Full ARIA support (menubar, menuitem roles)
|
||||
- Keyboard navigation
|
||||
- Focus management
|
||||
- Screen reader compatible
|
||||
**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
|
||||
- **Accessibility** - Full ARIA support with menubar roles
|
||||
|
||||
#### `DeesAppuiView`
|
||||
View wrapper component for single-view layouts with internal tabs.
|
||||
|
||||
```typescript
|
||||
<dees-appui-view
|
||||
.viewConfig=${{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
tabs: [
|
||||
{ key: 'General', iconName: 'lucide:settings', action: () => {}, content: html`<div>General settings</div>` },
|
||||
{ key: 'Security', iconName: 'lucide:shield', action: () => {}, content: html`<div>Security settings</div>` }
|
||||
]
|
||||
}}
|
||||
.paddingPx=${16} // Default padding for tab content
|
||||
></dees-appui-view>
|
||||
```
|
||||
|
||||
#### `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
|
||||
|
||||
@@ -825,9 +843,7 @@ Advanced table component with sorting, filtering, and action support.
|
||||
></dees-table>
|
||||
```
|
||||
|
||||
##### DeesTable (Updated)
|
||||
|
||||
Newer features available in `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`
|
||||
@@ -846,9 +862,9 @@ Code display component with syntax highlighting and line numbers.
|
||||
progLang="typescript" // Programming language for syntax highlighting
|
||||
.codeToDisplay=${`
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
|
||||
export const myComponent = () => {
|
||||
return html`<div>Hello World</div>`;
|
||||
return html\`<div>Hello World</div>\`;
|
||||
};
|
||||
`}
|
||||
></dees-dataview-codebox>
|
||||
@@ -865,18 +881,8 @@ Status display component for complex objects with nested status indicators.
|
||||
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'
|
||||
}
|
||||
{ name: 'Database', value: 'Connected', status: 'ok', statusText: 'OK' },
|
||||
{ name: 'API Service', value: 'Degraded', status: 'partly_ok', statusText: 'Partially OK' }
|
||||
]
|
||||
}}
|
||||
></dees-dataview-statusobject>
|
||||
@@ -890,19 +896,13 @@ PDF viewer component with navigation and zoom controls.
|
||||
source="path/to/document.pdf" // URL or base64 encoded PDF
|
||||
page={1} // Current page number
|
||||
scale={1.0} // Zoom level
|
||||
.controls=${[ // Optional: customize available controls
|
||||
'zoom',
|
||||
'download',
|
||||
'print',
|
||||
'navigation'
|
||||
]}
|
||||
.controls=${['zoom', 'download', 'print', 'navigation']}
|
||||
@page-change=${handlePageChange}
|
||||
@document-loaded=${handleDocumentLoaded}
|
||||
></dees-pdf>
|
||||
```
|
||||
|
||||
#### `DeesStatsGrid`
|
||||
A responsive grid component for displaying statistical data with various visualization types including numbers, gauges, percentages, and trends.
|
||||
A responsive grid component for displaying statistical data with various visualization types.
|
||||
|
||||
```typescript
|
||||
<dees-statsgrid
|
||||
@@ -915,23 +915,7 @@ A responsive grid component for displaying statistical data with various visuali
|
||||
type: 'number',
|
||||
icon: 'faDollarSign',
|
||||
description: '+12.5% from last month',
|
||||
color: '#22c55e',
|
||||
actions: [
|
||||
{
|
||||
name: 'View Details',
|
||||
iconName: 'faChartLine',
|
||||
action: async () => {
|
||||
console.log('Viewing revenue details');
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export Data',
|
||||
iconName: 'faFileExport',
|
||||
action: async () => {
|
||||
console.log('Exporting revenue data');
|
||||
}
|
||||
}
|
||||
]
|
||||
color: '#22c55e'
|
||||
},
|
||||
{
|
||||
id: 'cpu',
|
||||
@@ -940,8 +924,7 @@ A responsive grid component for displaying statistical data with various visuali
|
||||
type: 'gauge',
|
||||
icon: 'faMicrochip',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
min: 0, max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: '#22c55e' },
|
||||
{ value: 60, color: '#f59e0b' },
|
||||
@@ -949,15 +932,6 @@ A responsive grid component for displaying statistical data with various visuali
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
title: 'Storage Used',
|
||||
value: 65,
|
||||
type: 'percentage',
|
||||
icon: 'faHardDrive',
|
||||
description: '650 GB of 1 TB',
|
||||
color: '#3b82f6'
|
||||
},
|
||||
{
|
||||
id: 'requests',
|
||||
title: 'API Requests',
|
||||
@@ -966,35 +940,10 @@ A responsive grid component for displaying statistical data with various visuali
|
||||
type: 'trend',
|
||||
icon: 'faServer',
|
||||
trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
|
||||
},
|
||||
{
|
||||
id: 'uptime',
|
||||
title: 'System Uptime',
|
||||
value: '99.95%',
|
||||
type: 'text',
|
||||
icon: 'faCheckCircle',
|
||||
color: '#22c55e',
|
||||
description: 'Last 30 days'
|
||||
}
|
||||
]}
|
||||
.gridActions=${[
|
||||
{
|
||||
name: 'Refresh',
|
||||
iconName: 'faSync',
|
||||
action: async () => {
|
||||
console.log('Refreshing stats...');
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export Report',
|
||||
iconName: 'faFileExport',
|
||||
action: async () => {
|
||||
console.log('Exporting stats report...');
|
||||
}
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${250} // Minimum tile width in pixels
|
||||
.gap=${16} // Gap between tiles in pixels
|
||||
.minTileWidth=${250}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
```
|
||||
|
||||
@@ -1006,11 +955,13 @@ Pagination component for navigating through large datasets.
|
||||
totalItems={500}
|
||||
itemsPerPage={20}
|
||||
currentPage={1}
|
||||
maxVisiblePages={7} // Maximum page numbers to display
|
||||
maxVisiblePages={7}
|
||||
@page-change=${handlePageChange}
|
||||
></dees-pagination>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Visualization Components
|
||||
|
||||
#### `DeesChartArea`
|
||||
@@ -1018,7 +969,7 @@ Area chart component built on ApexCharts for visualizing time-series data.
|
||||
|
||||
```typescript
|
||||
<dees-chart-area
|
||||
label="System Usage" // Chart title
|
||||
label="System Usage"
|
||||
.series=${[
|
||||
{
|
||||
name: 'CPU',
|
||||
@@ -1027,14 +978,6 @@ Area chart component built on ApexCharts for visualizing time-series data.
|
||||
{ x: '2025-01-15T07:00:00', y: 30 },
|
||||
{ x: '2025-01-15T11:00:00', y: 20 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Memory',
|
||||
data: [
|
||||
{ x: '2025-01-15T03:00:00', y: 10 },
|
||||
{ x: '2025-01-15T07:00:00', y: 12 },
|
||||
{ x: '2025-01-15T11:00:00', y: 10 }
|
||||
]
|
||||
}
|
||||
]}
|
||||
></dees-chart-area>
|
||||
@@ -1047,22 +990,16 @@ Specialized chart component for visualizing log data and events.
|
||||
<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'
|
||||
}
|
||||
{ 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 types to display
|
||||
.filters=${['info', 'warning', 'error']}
|
||||
@event-click=${handleEventClick}
|
||||
></dees-chart-log>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Dialogs & Overlays Components
|
||||
|
||||
#### `DeesModal`
|
||||
@@ -1074,36 +1011,14 @@ DeesModal.createAndShow({
|
||||
heading: 'Confirm Action',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text
|
||||
.label=${'Enter reason'}
|
||||
></dees-input-text>
|
||||
<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 confirmation
|
||||
modal.destroy();
|
||||
return null;
|
||||
}
|
||||
}
|
||||
{ name: 'Cancel', action: async (modal) => { modal.destroy(); return null; } },
|
||||
{ name: 'Confirm', action: async (modal) => { /* handle */ modal.destroy(); return null; } }
|
||||
]
|
||||
});
|
||||
|
||||
// Component usage
|
||||
<dees-modal
|
||||
heading="Settings"
|
||||
.content=${settingsContent}
|
||||
.menuOptions=${actions}
|
||||
></dees-modal>
|
||||
```
|
||||
|
||||
#### `DeesContextmenu`
|
||||
@@ -1112,19 +1027,10 @@ Context menu component for right-click actions.
|
||||
```typescript
|
||||
<dees-contextmenu
|
||||
.items=${[
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'edit',
|
||||
action: () => handleEdit()
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'trash',
|
||||
action: () => handleDelete()
|
||||
}
|
||||
{ label: 'Edit', icon: 'edit', action: () => handleEdit() },
|
||||
{ label: 'Delete', icon: 'trash', action: () => handleDelete() }
|
||||
]}
|
||||
position="right" // Options: right, left, auto
|
||||
@item-click=${handleMenuItemClick}
|
||||
position="right"
|
||||
></dees-contextmenu>
|
||||
```
|
||||
|
||||
@@ -1134,39 +1040,22 @@ Tooltip-style speech bubble component for contextual information.
|
||||
```typescript
|
||||
// Programmatic usage
|
||||
const bubble = await DeesSpeechbubble.createAndShow(
|
||||
referenceElement, // Element to attach to
|
||||
referenceElement,
|
||||
'Helpful information about this feature'
|
||||
);
|
||||
|
||||
// Component usage
|
||||
<dees-speechbubble
|
||||
.reffedElement=${targetElement}
|
||||
text="Click here to continue"
|
||||
></dees-speechbubble>
|
||||
```
|
||||
|
||||
#### `DeesWindowlayer`
|
||||
Base overlay component used by modal dialogs and other overlay components.
|
||||
|
||||
```typescript
|
||||
// Programmatic usage
|
||||
const layer = await DeesWindowLayer.createAndShow({
|
||||
blur: true, // Enable backdrop blur
|
||||
blur: true,
|
||||
});
|
||||
|
||||
// Component usage
|
||||
<dees-windowlayer
|
||||
.options=${{
|
||||
blur: true
|
||||
}}
|
||||
@clicked=${handleOverlayClick}
|
||||
>
|
||||
<div class="content">
|
||||
<!-- Overlay content -->
|
||||
</div>
|
||||
</dees-windowlayer>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Navigation Components
|
||||
|
||||
#### `DeesStepper`
|
||||
@@ -1175,23 +1064,9 @@ Multi-step navigation component for guided user flows.
|
||||
```typescript
|
||||
<dees-stepper
|
||||
.steps=${[
|
||||
{
|
||||
key: 'personal',
|
||||
label: 'Personal Info',
|
||||
content: html`<div>Personal Information Form</div>`,
|
||||
validation: () => validatePersonalInfo()
|
||||
},
|
||||
{
|
||||
key: 'address',
|
||||
label: 'Address',
|
||||
content: html`<div>Address Form</div>`,
|
||||
validation: () => validateAddress()
|
||||
},
|
||||
{
|
||||
key: 'confirm',
|
||||
label: 'Confirmation',
|
||||
content: html`<div>Review and Confirm</div>`
|
||||
}
|
||||
{ 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}
|
||||
@@ -1204,15 +1079,16 @@ Progress indicator component for tracking completion status.
|
||||
|
||||
```typescript
|
||||
<dees-progressbar
|
||||
value={75} // Current progress (0-100)
|
||||
label="Uploading" // Optional label
|
||||
showPercentage // Display percentage
|
||||
value={75}
|
||||
label="Uploading"
|
||||
showPercentage
|
||||
type="determinate" // Options: determinate, indeterminate
|
||||
status="normal" // Options: normal, success, warning, error
|
||||
@progress=${handleProgress}
|
||||
></dees-progressbar>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Development Components
|
||||
|
||||
#### `DeesEditor`
|
||||
@@ -1239,12 +1115,7 @@ Markdown editor component with live preview.
|
||||
<dees-editor-markdown
|
||||
.value=${markdown}
|
||||
@change=${handleMarkdownChange}
|
||||
.options=${{
|
||||
preview: true,
|
||||
toolbar: true,
|
||||
spellcheck: true,
|
||||
autosave: true
|
||||
}}
|
||||
.options=${{ preview: true, toolbar: true, spellcheck: true }}
|
||||
></dees-editor-markdown>
|
||||
```
|
||||
|
||||
@@ -1254,9 +1125,8 @@ 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
|
||||
.theme=${'github'}
|
||||
allowHtml={false}
|
||||
></dees-editor-markdownoutlet>
|
||||
```
|
||||
|
||||
@@ -1271,8 +1141,6 @@ Terminal emulator component for command-line interface.
|
||||
}}
|
||||
.prompt=${'$'}
|
||||
.welcomeMessage=${'Welcome! Type "help" for available commands.'}
|
||||
.historySize=${100}
|
||||
.autoFocus={true}
|
||||
></dees-terminal>
|
||||
```
|
||||
|
||||
@@ -1282,13 +1150,14 @@ Component for managing application updates and version control.
|
||||
```typescript
|
||||
<dees-updater
|
||||
.currentVersion=${'1.5.2'}
|
||||
.checkInterval=${3600000} // Check every hour
|
||||
.checkInterval=${3600000}
|
||||
.autoUpdate=${false}
|
||||
@update-available=${handleUpdateAvailable}
|
||||
@update-progress=${handleUpdateProgress}
|
||||
></dees-updater>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Auth & Utilities Components
|
||||
|
||||
#### `DeesSimpleAppdash`
|
||||
@@ -1301,10 +1170,7 @@ Simple application dashboard component for quick prototyping.
|
||||
{ name: 'Dashboard', icon: 'home', route: '/dashboard' },
|
||||
{ name: 'Settings', icon: 'settings', route: '/settings' }
|
||||
]}
|
||||
.user=${{
|
||||
name: 'John Doe',
|
||||
role: 'Administrator'
|
||||
}}
|
||||
.user=${{ name: 'John Doe', role: 'Administrator' }}
|
||||
@menu-select=${handleMenuSelect}
|
||||
>
|
||||
<!-- Dashboard content -->
|
||||
@@ -1319,7 +1185,7 @@ Simple login form component with validation and customization.
|
||||
.appName=${'My Application'}
|
||||
.logo=${'./assets/logo.png'}
|
||||
.backgroundImage=${'./assets/background.jpg'}
|
||||
.fields=${['username', 'password']} // Options: username, email, password
|
||||
.fields=${['username', 'password']}
|
||||
showForgotPassword
|
||||
showRememberMe
|
||||
@login=${handleLogin}
|
||||
@@ -1327,6 +1193,8 @@ Simple login form component with validation and customization.
|
||||
></dees-simple-login>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Shopping Components
|
||||
|
||||
#### `DeesShoppingProductcard`
|
||||
@@ -1339,37 +1207,69 @@ Product card component for e-commerce applications.
|
||||
category: 'Electronics',
|
||||
description: 'High-quality wireless headphones with noise cancellation',
|
||||
price: 199.99,
|
||||
originalPrice: 249.99, // Shows strikethrough price
|
||||
originalPrice: 249.99,
|
||||
currency: '$',
|
||||
inStock: true,
|
||||
stockText: 'In Stock', // Custom stock text
|
||||
imageUrl: '/images/headphones.jpg',
|
||||
iconName: 'lucide:headphones' // Fallback icon if no image
|
||||
imageUrl: '/images/headphones.jpg'
|
||||
}}
|
||||
quantity={1} // Current quantity
|
||||
showQuantitySelector={true} // Show quantity selector
|
||||
selectable={false} // Enable selection mode
|
||||
selected={false} // Selection state
|
||||
@quantityChange=${(e) => handleQuantityChange(e.detail)}
|
||||
@selectionChange=${(e) => handleSelectionChange(e.detail)}
|
||||
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';
|
||||
}
|
||||
|
||||
// Extended tab interface for views with content
|
||||
interface IViewTab extends IMenuItem {
|
||||
content?: TemplateResult | (() => TemplateResult);
|
||||
useSlotName?: boolean;
|
||||
slotName?: string;
|
||||
paddingPx?: number;
|
||||
}
|
||||
|
||||
// Menu group interface for organized menus
|
||||
interface IMenuGroup {
|
||||
name: string;
|
||||
items: IMenuItem[];
|
||||
collapsed?: boolean;
|
||||
iconName?: string;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 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.
|
||||
**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 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, and any usage must be approved in writing by Task Venture Capital GmbH.
|
||||
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
|
||||
Registered at District Court Bremen HRB 35230 HB, Germany
|
||||
|
||||
For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user