Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@design.estate/dees-catalog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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 for comprehensive patterns, best practices, and architectural guidelines.
Install
To install the @design.estate/dees-catalog library, you can use npm or any other compatible JavaScript package manager:
npm install @design.estate/dees-catalogComponents Overview
Detailed Component Documentation
Core UI Components
DeesButton
A versatile button component supporting multiple styles and states.
// 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.
<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.
<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.
// 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.
<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.
<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.
// 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();
// Component usage (not typically used directly)
<dees-toast
message="Changes saved"
type="success"
duration="3000"
></dees-toast>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.
<dees-button-exit
@click=${handleClose}
></dees-button-exit>DeesButtonGroup
Container for grouping related buttons together.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<dees-input-typelist
key="features"
label="Product Features"
placeholder="Add a feature..."
.value=${['Feature 1', 'Feature 2']}
@change=${handleFeaturesChange}
></dees-input-typelist>DeesInputDatepicker
Date and time picker component with calendar interface and manual typing support.
<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:
// 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"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.
<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.
<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.
<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.
<dees-form-submit
disabled // Optional: disable submit button
status="normal" // Options: normal, pending, success, error
>Submit Form</dees-form-submit>Layout Components
DeesAppuiBase
Base container component for application layout structure with integrated appbar, menu system, and content areas.
<dees-appui-base
// Appbar configuration
.appbarMenuItems=${[
{
name: 'File',
action: async () => {}, // No-op for parent menu items
submenu: [
{ name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => {} },
{ name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => {} },
{ divider: true },
{ name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => {} }
]
},
{
name: 'Edit',
action: async () => {},
submenu: [
{ name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => {} },
{ name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => {} }
]
}
]}
.appbarBreadcrumbs=${'Dashboard > Overview'}
.appbarTheme=${'dark'}
.appbarUser=${{ name: 'John Doe', status: 'online' }}
.appbarShowSearch=${true}
.appbarShowWindowControls=${true}
// Main menu configuration (left sidebar)
.mainmenuTabs=${[
{ key: 'dashboard', iconName: 'lucide:home', action: () => {} },
{ key: 'projects', iconName: 'lucide:folder', action: () => {} },
{ key: 'settings', iconName: 'lucide:settings', action: () => {} }
]}
.mainmenuSelectedTab=${selectedTab}
// Selector configuration (second sidebar)
.mainselectorOptions=${[
{ key: 'Overview', action: () => {} },
{ key: 'Components', action: () => {} },
{ key: 'Services', action: () => {} }
]}
.mainselectorSelectedOption=${selectedOption}
// Main content tabs
.maincontentTabs=${[
{ key: 'tab1', iconName: 'lucide:file', action: () => {} }
]}
// Event handlers
@appbar-menu-select=${(e) => handleMenuSelect(e.detail)}
@appbar-breadcrumb-navigate=${(e) => handleBreadcrumbNav(e.detail)}
@appbar-search-click=${() => handleSearch()}
@appbar-user-menu-open=${() => handleUserMenu()}
@mainmenu-tab-select=${(e) => handleTabSelect(e.detail)}
@mainselector-option-select=${(e) => handleOptionSelect(e.detail)}
>
<div slot="maincontent">
<!-- Your main application content goes here -->
</div>
</dees-appui-base>Key Features:
- Integrated Layout System: Automatically arranges appbar, sidebars, and content area
- Centralized Configuration: Pass properties to all child components from one place
- Event Propagation: All child component events are re-emitted for easy handling
- Responsive Grid: Uses CSS Grid for flexible, responsive layout
- Slot Support: Main content area supports custom content via slots
DeesAppuiMainmenu
Main navigation menu component for application-wide navigation.
<dees-appui-mainmenu
.menuItems=${[
{
key: 'dashboard',
label: 'Dashboard',
icon: 'home',
action: () => handleNavigation('dashboard')
},
{
key: 'settings',
label: 'Settings',
icon: 'cog',
action: () => handleNavigation('settings')
}
]}
collapsed // Optional: show collapsed version
position="left" // Options: left, right
></dees-appui-mainmenu>DeesAppuiMainselector
Secondary navigation component for sub-section selection.
<dees-appui-mainselector
.items=${[
{
key: 'section1',
label: 'Section 1',
icon: 'folder',
action: () => selectSection('section1')
}
]}
selectedKey="section1" // Currently selected section
@selection-change=${handleSectionChange}
></dees-appui-mainselector>DeesAppuiMaincontent
Main content area with tab management support.
<dees-appui-maincontent
.tabs=${[
{
key: 'tab1',
label: 'Tab 1',
content: html`<div>Tab 1 Content</div>`,
action: () => handleTabAction('tab1')
}
]}
selectedTab="tab1" // Currently active tab
@tab-change=${handleTabChange}
></dees-appui-maincontent>DeesAppuiAppbar
Professional application bar component with hierarchical menus, breadcrumb navigation, and user account management.
<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
}
]
},
{
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=${' > '}
.showWindowControls=${true}
.showSearch=${true}
.theme=${'dark'} // Options: 'light' | 'dark'
.user=${{
name: 'John Doe',
avatar: '/path/to/avatar.jpg', // Optional
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
Data Display Components
DeesTable
Advanced table component with sorting, filtering, and action support.
<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>DeesTable (Updated)
Newer features available in dees-table:
- Schema-first columns or
displayFunctionrendering - Sorting via header clicks with
aria-sort+sortChange - Global search with Lucene-like syntax; modes:
table,data,server - Per-column quick filters row;
showColumnFiltersandcolumn.filterable=false - Selection:
none|single|multi, with select-all andselectionChange - 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.
<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.
<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.
<dees-pdf
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'
]}
@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.
<dees-statsgrid
.tiles=${[
{
id: 'revenue',
title: 'Total Revenue',
value: 125420,
unit: '$',
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');
}
}
]
},
{
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: 'storage',
title: 'Storage Used',
value: 65,
type: 'percentage',
icon: 'faHardDrive',
description: '650 GB of 1 TB',
color: '#3b82f6'
},
{
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]
},
{
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
></dees-statsgrid>DeesPagination
Pagination component for navigating through large datasets.
<dees-pagination
totalItems={500}
itemsPerPage={20}
currentPage={1}
maxVisiblePages={7} // Maximum page numbers to display
@page-change=${handlePageChange}
></dees-pagination>Visualization Components
DeesChartArea
Area chart component built on ApexCharts for visualizing time-series data.
<dees-chart-area
label="System Usage" // Chart title
.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 }
]
},
{
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>DeesChartLog
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'
}
]}
.filters=${['info', 'warning', 'error']} // Event types to display
@event-click=${handleEventClick}
></dees-chart-log>Dialogs & Overlays Components
DeesModal
Modal dialog component with customizable content and actions.
// 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 confirmation
modal.destroy();
return null;
}
}
]
});
// Component usage
<dees-modal
heading="Settings"
.content=${settingsContent}
.menuOptions=${actions}
></dees-modal>DeesContextmenu
Context menu component for right-click actions.
<dees-contextmenu
.items=${[
{
label: 'Edit',
icon: 'edit',
action: () => handleEdit()
},
{
label: 'Delete',
icon: 'trash',
action: () => handleDelete()
}
]}
position="right" // Options: right, left, auto
@item-click=${handleMenuItemClick}
></dees-contextmenu>DeesSpeechbubble
Tooltip-style speech bubble component for contextual information.
// Programmatic usage
const bubble = await DeesSpeechbubble.createAndShow(
referenceElement, // Element to attach to
'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.
// Programmatic usage
const layer = await DeesWindowLayer.createAndShow({
blur: true, // Enable backdrop blur
});
// Component usage
<dees-windowlayer
.options=${{
blur: true
}}
@clicked=${handleOverlayClick}
>
<div class="content">
<!-- Overlay content -->
</div>
</dees-windowlayer>Navigation Components
DeesStepper
Multi-step navigation component for guided user flows.
<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>`
}
]}
currentStep="personal"
@step-change=${handleStepChange}
@complete=${handleComplete}
></dees-stepper>DeesProgressbar
Progress indicator component for tracking completion status.
<dees-progressbar
value={75} // Current progress (0-100)
label="Uploading" // Optional label
showPercentage // Display percentage
type="determinate" // Options: determinate, indeterminate
status="normal" // Options: normal, success, warning, error
@progress=${handleProgress}
></dees-progressbar>Development Components
DeesEditor
Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
<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.
<dees-editor-markdown
.value=${markdown}
@change=${handleMarkdownChange}
.options=${{
preview: true,
toolbar: true,
spellcheck: true,
autosave: true
}}
></dees-editor-markdown>DeesEditorMarkdownoutlet
Markdown preview component for rendering markdown content.
<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>DeesTerminal
Terminal emulator component for command-line interface.
<dees-terminal
.commands=${{
'echo': (args) => `Echo: ${args.join(' ')}`,
'help': () => 'Available commands: echo, help'
}}
.prompt=${'$'}
.welcomeMessage=${'Welcome! Type "help" for available commands.'}
.historySize=${100}
.autoFocus={true}
></dees-terminal>DeesUpdater
Component for managing application updates and version control.
<dees-updater
.currentVersion=${'1.5.2'}
.checkInterval=${3600000} // Check every hour
.autoUpdate=${false}
@update-available=${handleUpdateAvailable}
@update-progress=${handleUpdateProgress}
></dees-updater>Auth & Utilities Components
DeesSimpleAppdash
Simple application dashboard component for quick prototyping.
<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.
<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>Shopping Components
DeesShoppingProductcard
Product card component for e-commerce applications.
<dees-shopping-productcard
.productData=${{
name: 'Premium Headphones',
category: 'Electronics',
description: 'High-quality wireless headphones with noise cancellation',
price: 199.99,
originalPrice: 249.99, // Shows strikethrough price
currency: '$',
inStock: true,
stockText: 'In Stock', // Custom stock text
imageUrl: '/images/headphones.jpg',
iconName: 'lucide:headphones' // Fallback icon if no image
}}
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)}
></dees-shopping-productcard>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.
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.
Company Information
Task Venture Capital GmbH 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.
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.