Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1dcaccdb6d | |||
| 35eb410051 | |||
| 10c43ecd59 | |||
| 9df4a09414 | |||
| 7cbc941407 |
@ -1,5 +1,14 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-06-26 - 1.9.8 - fix(deps, windowlayer)
|
||||
Update dependency versions and adjust dees-windowlayer CSS to add pointer-events fix
|
||||
|
||||
- Bump @design.estate/dees-wcctools from ^1.0.98 to ^1.0.101
|
||||
- Bump @tiptap packages from 2.22.3 to 2.23.0
|
||||
- Bump lucide from ^0.522.0 to ^0.523.0
|
||||
- Bump @git.zone/tsbundle from ^2.4.0 to ^2.5.1 and tswatch from ^2.0.37 to ^2.1.2
|
||||
- Add 'pointer-events: none' to dees-windowlayer CSS to improve overlay behavior
|
||||
|
||||
## 2025-06-22 - 1.9.0 - feat(form-inputs)
|
||||
Improve form input consistency and auto spacing across inputs and buttons
|
||||
|
||||
|
||||
24
package.json
24
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.9.6",
|
||||
"version": "1.9.8",
|
||||
"private": false,
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@ -8,7 +8,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "tstest test/ --web --verbose --timeout 30",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
|
||||
"watch": "tswatch element",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
@ -17,7 +17,7 @@
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.3.3",
|
||||
"@design.estate/dees-element": "^2.0.45",
|
||||
"@design.estate/dees-wcctools": "^1.0.98",
|
||||
"@design.estate/dees-wcctools": "^1.0.101",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
@ -25,18 +25,18 @@
|
||||
"@push.rocks/smarti18n": "^1.0.4",
|
||||
"@push.rocks/smartpromise": "^4.2.0",
|
||||
"@push.rocks/smartstring": "^4.0.15",
|
||||
"@tiptap/core": "^2.22.3",
|
||||
"@tiptap/extension-link": "^2.22.3",
|
||||
"@tiptap/extension-text-align": "^2.22.3",
|
||||
"@tiptap/extension-typography": "^2.22.3",
|
||||
"@tiptap/extension-underline": "^2.22.3",
|
||||
"@tiptap/starter-kit": "^2.22.3",
|
||||
"@tiptap/core": "^2.23.0",
|
||||
"@tiptap/extension-link": "^2.23.0",
|
||||
"@tiptap/extension-text-align": "^2.23.0",
|
||||
"@tiptap/extension-typography": "^2.23.0",
|
||||
"@tiptap/extension-underline": "^2.23.0",
|
||||
"@tiptap/starter-kit": "^2.23.0",
|
||||
"@tsclass/tsclass": "^9.2.0",
|
||||
"@webcontainer/api": "1.2.0",
|
||||
"apexcharts": "^4.7.0",
|
||||
"highlight.js": "11.11.1",
|
||||
"ibantools": "^4.5.1",
|
||||
"lucide": "^0.522.0",
|
||||
"lucide": "^0.523.0",
|
||||
"monaco-editor": "^0.52.2",
|
||||
"pdfjs-dist": "^4.10.38",
|
||||
"xterm": "^5.3.0",
|
||||
@ -44,9 +44,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.6.4",
|
||||
"@git.zone/tsbundle": "^2.4.0",
|
||||
"@git.zone/tsbundle": "^2.5.1",
|
||||
"@git.zone/tstest": "^2.3.1",
|
||||
"@git.zone/tswatch": "^2.0.37",
|
||||
"@git.zone/tswatch": "^2.1.2",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^6.0.3",
|
||||
"@types/node": "^22.0.0"
|
||||
|
||||
711
pnpm-lock.yaml
generated
711
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
471
readme.md
471
readme.md
@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog
|
||||
|
||||
| Category | Components |
|
||||
|----------|------------|
|
||||
| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
|
||||
| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
|
||||
| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
|
||||
| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
|
||||
| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
|
||||
| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
|
||||
| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
|
||||
| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
|
||||
| Visualization | `DeesChartArea`, `DeesChartLog` |
|
||||
| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
|
||||
| Navigation | `DeesStepper`, `DeesProgressbar` |
|
||||
| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
|
||||
| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
|
||||
| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
|
||||
| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
|
||||
|
||||
## Detailed Component Documentation
|
||||
|
||||
@ -149,6 +150,93 @@ Key Features:
|
||||
- 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`
|
||||
@ -207,22 +295,6 @@ Dropdown selection component with search and filtering capabilities.
|
||||
></dees-input-dropdown>
|
||||
```
|
||||
|
||||
#### `DeesInputRadio`
|
||||
Radio button group for single-choice selections.
|
||||
|
||||
```typescript
|
||||
<dees-input-radio
|
||||
key="gender"
|
||||
label="Gender"
|
||||
.options=${[
|
||||
{ key: 'male', option: 'Male' },
|
||||
{ key: 'female', option: 'Female' },
|
||||
{ key: 'other', option: 'Other' }
|
||||
]}
|
||||
required
|
||||
></dees-input-radio>
|
||||
```
|
||||
|
||||
#### `DeesInputFileupload`
|
||||
File upload component with drag-and-drop support.
|
||||
|
||||
@ -293,6 +365,121 @@ Multi-state toggle button group.
|
||||
></dees-input-multitoggle>
|
||||
```
|
||||
|
||||
#### `DeesInputRadiogroup`
|
||||
Radio button group for single-choice selections with internal state management.
|
||||
|
||||
```typescript
|
||||
<dees-input-radiogroup
|
||||
key="plan"
|
||||
label="Select Plan"
|
||||
.options=${['Free', 'Pro', 'Enterprise']}
|
||||
selectedOption="Pro"
|
||||
required
|
||||
@change=${handlePlanChange}
|
||||
></dees-input-radiogroup>
|
||||
|
||||
// With custom option objects
|
||||
<dees-input-radiogroup
|
||||
key="priority"
|
||||
label="Priority Level"
|
||||
.options=${[
|
||||
{ key: 'low', label: 'Low Priority' },
|
||||
{ key: 'medium', label: 'Medium Priority' },
|
||||
{ key: 'high', label: 'High Priority' }
|
||||
]}
|
||||
selectedOption="medium"
|
||||
></dees-input-radiogroup>
|
||||
```
|
||||
|
||||
#### `DeesInputTags`
|
||||
Tag input component for managing lists of tags with auto-complete and validation.
|
||||
|
||||
```typescript
|
||||
<dees-input-tags
|
||||
key="skills"
|
||||
label="Skills"
|
||||
.value=${['JavaScript', 'TypeScript', 'CSS']}
|
||||
placeholder="Add a skill..."
|
||||
.suggestions=${[
|
||||
'JavaScript', 'TypeScript', 'Python', 'Go', 'Rust',
|
||||
'React', 'Vue', 'Angular', 'Node.js', 'Docker'
|
||||
]}
|
||||
maxTags={10} // Optional: limit number of tags
|
||||
required
|
||||
@change=${handleTagsChange}
|
||||
></dees-input-tags>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Add tags by pressing Enter or typing comma/semicolon
|
||||
- Remove tags with click or backspace
|
||||
- Auto-complete suggestions with keyboard navigation
|
||||
- Maximum tag limit support
|
||||
- Full theme support
|
||||
- Form validation integration
|
||||
|
||||
#### `DeesInputTypelist`
|
||||
Dynamic list input for managing arrays of typed values.
|
||||
|
||||
```typescript
|
||||
<dees-input-typelist
|
||||
key="features"
|
||||
label="Product Features"
|
||||
placeholder="Add a feature..."
|
||||
.value=${['Feature 1', 'Feature 2']}
|
||||
@change=${handleFeaturesChange}
|
||||
></dees-input-typelist>
|
||||
```
|
||||
|
||||
#### `DeesInputRichtext`
|
||||
Rich text editor with formatting toolbar powered by TipTap.
|
||||
|
||||
```typescript
|
||||
<dees-input-richtext
|
||||
key="content"
|
||||
label="Article Content"
|
||||
.value=${htmlContent}
|
||||
placeholder="Start writing..."
|
||||
minHeight={300} // Minimum editor height
|
||||
showWordCount={true} // Show word/character count
|
||||
@change=${handleContentChange}
|
||||
></dees-input-richtext>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Full formatting toolbar (bold, italic, underline, strike, etc.)
|
||||
- Heading levels (H1-H6)
|
||||
- Lists (bullet, ordered)
|
||||
- Links with URL editing
|
||||
- Code blocks and inline code
|
||||
- Blockquotes
|
||||
- Horizontal rules
|
||||
- Undo/redo support
|
||||
- Word and character count
|
||||
- HTML output
|
||||
|
||||
#### `DeesInputWysiwyg`
|
||||
Advanced block-based editor with slash commands and rich content blocks.
|
||||
|
||||
```typescript
|
||||
<dees-input-wysiwyg
|
||||
key="document"
|
||||
label="Document Editor"
|
||||
.value=${documentContent}
|
||||
outputFormat="html" // Options: html, markdown, json
|
||||
@change=${handleDocumentChange}
|
||||
></dees-input-wysiwyg>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Slash commands for quick formatting
|
||||
- Block-based editing (paragraphs, headings, lists, etc.)
|
||||
- Drag and drop block reordering
|
||||
- Multiple output formats
|
||||
- Keyboard shortcuts
|
||||
- Collaborative editing ready
|
||||
- Extensible block types
|
||||
|
||||
#### `DeesFormSubmit`
|
||||
Submit button component specifically designed for `DeesForm`.
|
||||
|
||||
@ -622,6 +809,91 @@ Best Practices:
|
||||
- Test with screen readers
|
||||
- Maintain focus management
|
||||
|
||||
#### `DeesAppuiActivitylog`
|
||||
Activity log component for displaying system events and user actions.
|
||||
|
||||
```typescript
|
||||
<dees-appui-activitylog
|
||||
.entries=${[
|
||||
{
|
||||
timestamp: new Date(),
|
||||
type: 'info',
|
||||
message: 'User logged in',
|
||||
details: { userId: '123' }
|
||||
},
|
||||
{
|
||||
timestamp: new Date(),
|
||||
type: 'error',
|
||||
message: 'Failed to save document',
|
||||
details: { error: 'Network error' }
|
||||
}
|
||||
]}
|
||||
maxEntries={100} // Maximum entries to display
|
||||
@entry-click=${handleEntryClick}
|
||||
></dees-appui-activitylog>
|
||||
```
|
||||
|
||||
#### `DeesAppuiProfiledropdown`
|
||||
User profile dropdown component with status and menu options.
|
||||
|
||||
```typescript
|
||||
<dees-appui-profiledropdown
|
||||
.user=${{
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
avatar: '/path/to/avatar.jpg',
|
||||
status: 'online' // Options: online, offline, busy, away
|
||||
}}
|
||||
.menuItems=${[
|
||||
{ name: 'Profile', iconName: 'user', action: async () => {} },
|
||||
{ name: 'Settings', iconName: 'settings', action: async () => {} },
|
||||
{ divider: true },
|
||||
{ name: 'Logout', iconName: 'logOut', action: async () => {} }
|
||||
]}
|
||||
@status-change=${handleStatusChange}
|
||||
></dees-appui-profiledropdown>
|
||||
```
|
||||
|
||||
#### `DeesAppuiTabs`
|
||||
Tab navigation component for organizing content sections.
|
||||
|
||||
```typescript
|
||||
<dees-appui-tabs
|
||||
.tabs=${[
|
||||
{
|
||||
key: 'overview',
|
||||
label: 'Overview',
|
||||
icon: 'home',
|
||||
content: html`<div>Overview content</div>`
|
||||
},
|
||||
{
|
||||
key: 'details',
|
||||
label: 'Details',
|
||||
icon: 'info',
|
||||
content: html`<div>Details content</div>`
|
||||
}
|
||||
]}
|
||||
selectedTab="overview"
|
||||
@tab-change=${handleTabChange}
|
||||
></dees-appui-tabs>
|
||||
```
|
||||
|
||||
#### `DeesAppuiView`
|
||||
View container component for consistent page layouts.
|
||||
|
||||
```typescript
|
||||
<dees-appui-view
|
||||
viewTitle="Dashboard"
|
||||
viewSubtitle="System Overview"
|
||||
.headerActions=${[
|
||||
{ icon: 'refresh', action: handleRefresh },
|
||||
{ icon: 'settings', action: handleSettings }
|
||||
]}
|
||||
>
|
||||
<!-- View content -->
|
||||
</dees-appui-view>
|
||||
```
|
||||
|
||||
#### `DeesMobileNavigation`
|
||||
Responsive navigation component for mobile devices.
|
||||
|
||||
@ -982,6 +1254,27 @@ setInterval(() => {
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
#### `DeesPagination`
|
||||
Pagination component for navigating through large datasets.
|
||||
|
||||
```typescript
|
||||
<dees-pagination
|
||||
totalItems={500}
|
||||
itemsPerPage={20}
|
||||
currentPage={1}
|
||||
maxVisiblePages={7} // Maximum page numbers to display
|
||||
@page-change=${handlePageChange}
|
||||
></dees-pagination>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Page number navigation
|
||||
- Previous/next buttons
|
||||
- Jump to first/last page
|
||||
- Configurable items per page
|
||||
- Responsive design
|
||||
- Keyboard navigation support
|
||||
|
||||
### Visualization Components
|
||||
|
||||
#### `DeesChartArea`
|
||||
@ -1306,52 +1599,6 @@ Key Features:
|
||||
- Animation support
|
||||
- Accessibility features
|
||||
|
||||
#### `DeesMobileNavigation`
|
||||
Mobile-optimized navigation component with touch support.
|
||||
|
||||
```typescript
|
||||
// Programmatic usage
|
||||
DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'Home',
|
||||
action: async (nav) => {
|
||||
// Handle navigation
|
||||
return null;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
action: async (nav) => {
|
||||
// Handle navigation
|
||||
return null;
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
// Component usage
|
||||
<dees-mobilenavigation
|
||||
heading="MENU"
|
||||
.menuItems=${[
|
||||
{
|
||||
name: 'Profile',
|
||||
action: (nav) => handleNavigation('profile')
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
action: (nav) => handleNavigation('settings')
|
||||
}
|
||||
]}
|
||||
></dees-mobilenavigation>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Touch-friendly interface
|
||||
- Slide-in animation
|
||||
- Backdrop overlay
|
||||
- Single instance management
|
||||
- Custom menu items
|
||||
- Responsive design
|
||||
|
||||
Best Practices:
|
||||
|
||||
1. Stepper Implementation
|
||||
@ -1368,13 +1615,6 @@ Best Practices:
|
||||
- Performance monitoring
|
||||
- Error state handling
|
||||
|
||||
3. Mobile Navigation
|
||||
- Touch-optimized targets
|
||||
- Clear visual hierarchy
|
||||
- Smooth animations
|
||||
- Gesture support
|
||||
- Responsive behavior
|
||||
|
||||
Common Use Cases:
|
||||
|
||||
1. Stepper
|
||||
@ -1391,13 +1631,6 @@ Common Use Cases:
|
||||
- Task completion
|
||||
- Step progression
|
||||
|
||||
3. Mobile Navigation
|
||||
- Responsive menus
|
||||
- App navigation
|
||||
- Settings access
|
||||
- User actions
|
||||
- Context switching
|
||||
|
||||
Accessibility Considerations:
|
||||
- Keyboard navigation support
|
||||
- ARIA labels and roles
|
||||
@ -1461,6 +1694,26 @@ Key Features:
|
||||
- Spellcheck integration
|
||||
- Auto-save functionality
|
||||
|
||||
#### `DeesEditorMarkdownoutlet`
|
||||
Markdown preview component for rendering markdown content.
|
||||
|
||||
```typescript
|
||||
<dees-editor-markdownoutlet
|
||||
.markdown=${markdownContent}
|
||||
.theme=${'github'} // Options: github, dark, custom
|
||||
.plugins=${['mermaid', 'highlight']} // Optional plugins
|
||||
allowHtml={false} // Security: disable raw HTML
|
||||
></dees-editor-markdownoutlet>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Safe markdown rendering
|
||||
- Multiple themes
|
||||
- Plugin support (mermaid diagrams, syntax highlighting)
|
||||
- XSS protection
|
||||
- Custom CSS injection
|
||||
- Responsive images
|
||||
|
||||
#### `DeesTerminal`
|
||||
Terminal emulator component for command-line interface.
|
||||
|
||||
@ -1606,6 +1859,60 @@ Accessibility Features:
|
||||
- Focus management
|
||||
- ARIA attributes
|
||||
|
||||
### Auth & Utilities Components
|
||||
|
||||
#### `DeesSimpleAppdash`
|
||||
Simple application dashboard component for quick prototyping.
|
||||
|
||||
```typescript
|
||||
<dees-simple-appdash
|
||||
.appTitle=${'My Application'}
|
||||
.menuItems=${[
|
||||
{ name: 'Dashboard', icon: 'home', route: '/dashboard' },
|
||||
{ name: 'Settings', icon: 'settings', route: '/settings' }
|
||||
]}
|
||||
.user=${{
|
||||
name: 'John Doe',
|
||||
role: 'Administrator'
|
||||
}}
|
||||
@menu-select=${handleMenuSelect}
|
||||
>
|
||||
<!-- Dashboard content -->
|
||||
</dees-simple-appdash>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Quick setup dashboard layout
|
||||
- Built-in navigation
|
||||
- User profile section
|
||||
- Responsive design
|
||||
- Minimal configuration
|
||||
|
||||
#### `DeesSimpleLogin`
|
||||
Simple login form component with validation and customization.
|
||||
|
||||
```typescript
|
||||
<dees-simple-login
|
||||
.appName=${'My Application'}
|
||||
.logo=${'./assets/logo.png'}
|
||||
.backgroundImage=${'./assets/background.jpg'}
|
||||
.fields=${['username', 'password']} // Options: username, email, password
|
||||
showForgotPassword
|
||||
showRememberMe
|
||||
@login=${handleLogin}
|
||||
@forgot-password=${handleForgotPassword}
|
||||
></dees-simple-login>
|
||||
```
|
||||
|
||||
Key Features:
|
||||
- Customizable fields
|
||||
- Built-in validation
|
||||
- Remember me option
|
||||
- Forgot password link
|
||||
- Custom branding
|
||||
- Responsive layout
|
||||
- Loading states
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
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.
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.9.0',
|
||||
version: '1.9.8',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import './dees-panel.js';
|
||||
import './dees-form.js';
|
||||
import './dees-form-submit.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper>
|
||||
@ -14,37 +17,12 @@ export const demoFunc = () => html`
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.demo-section {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: #0069f2;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.demo-section p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.demo-section p {
|
||||
color: #999;
|
||||
}
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.horizontal-group {
|
||||
@ -66,10 +44,7 @@ export const demoFunc = () => html`
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h3>Basic Dropdowns</h3>
|
||||
<p>Standard dropdown with search functionality and various options</p>
|
||||
|
||||
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select Country'}
|
||||
.options=${[
|
||||
@ -94,12 +69,9 @@ export const demoFunc = () => html`
|
||||
{ option: 'Guest', key: 'guest' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Without Search</h3>
|
||||
<p>Dropdown with search functionality disabled for simpler selection</p>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Priority Level'}
|
||||
.enableSearch=${false}
|
||||
@ -110,12 +82,9 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
.selectedOption=${{ option: 'Medium', key: 'medium' }}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Horizontal Layout</h3>
|
||||
<p>Multiple dropdowns in a horizontal layout for compact forms</p>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
|
||||
<div class="horizontal-group">
|
||||
<dees-input-dropdown
|
||||
.label=${'Department'}
|
||||
@ -150,12 +119,9 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>States</h3>
|
||||
<p>Different states and configurations</p>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Required Field'}
|
||||
.required=${true}
|
||||
@ -174,16 +140,13 @@ export const demoFunc = () => html`
|
||||
]}
|
||||
.selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<div class="spacer">
|
||||
(Spacer to test dropdown positioning)
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Bottom Positioning</h3>
|
||||
<p>Dropdown that opens upward when near bottom of viewport</p>
|
||||
|
||||
<dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Opens Upward'}
|
||||
.options=${[
|
||||
@ -194,7 +157,65 @@ export const demoFunc = () => html`
|
||||
{ option: 'Fifth Option', key: 'fifth' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select Product'}
|
||||
.options=${[
|
||||
{ option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
|
||||
{ option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
|
||||
{ option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
|
||||
]}
|
||||
@change=${(e: CustomEvent) => {
|
||||
const output = document.querySelector('#selection-output');
|
||||
if (output && e.detail.value) {
|
||||
output.innerHTML = `
|
||||
<strong>Selected:</strong> ${e.detail.value.option}<br>
|
||||
<strong>Key:</strong> ${e.detail.value.key}<br>
|
||||
<strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
|
||||
<strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;">
|
||||
<em>Select a product to see details...</em>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
|
||||
<dees-form>
|
||||
<dees-input-dropdown
|
||||
.label=${'Project Type'}
|
||||
.key=${'projectType'}
|
||||
.required=${true}
|
||||
.options=${[
|
||||
{ option: 'Web Application', key: 'web' },
|
||||
{ option: 'Mobile Application', key: 'mobile' },
|
||||
{ option: 'Desktop Application', key: 'desktop' },
|
||||
{ option: 'API Service', key: 'api' }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
.label=${'Development Framework'}
|
||||
.key=${'framework'}
|
||||
.required=${true}
|
||||
.options=${[
|
||||
{ option: 'React', key: 'react', payload: { type: 'web' } },
|
||||
{ option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
|
||||
{ option: 'Angular', key: 'angular', payload: { type: 'web' } },
|
||||
{ option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
|
||||
{ option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
|
||||
{ option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-form-submit .text=${'Create Project'}></dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`
|
||||
@ -294,6 +294,12 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
|
||||
console.log(elevatedDropdown.selectedOption);
|
||||
console.log(elevatedDropdown.highlightedIndex);
|
||||
this.windowOverlay.appendChild(elevatedDropdown);
|
||||
|
||||
// Prevent clicks on the dropdown from closing it
|
||||
elevatedDropdown.addEventListener('click', (e: Event) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||
elevatedDropdown.toggleSelectionBox();
|
||||
const destroyOverlay = async () => {
|
||||
|
||||
@ -79,6 +79,11 @@ export class DeesWindowLayer extends DeesElement {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: ${this.contentZIndex};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slotContent > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.visible {
|
||||
@ -87,9 +92,9 @@ export class DeesWindowLayer extends DeesElement {
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
</div>
|
||||
<div @click=${this.dispatchClicked} class="slotContent">
|
||||
<div class="slotContent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
css,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { zIndexLayers } from '../00zindex.js';
|
||||
import { zIndexRegistry } from '../00zindex.js';
|
||||
|
||||
import { WysiwygFormatting } from './wysiwyg.formatting.js';
|
||||
|
||||
@ -35,6 +35,9 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
@state()
|
||||
private position: { x: number; y: number } = { x: 0, y: 0 };
|
||||
|
||||
@state()
|
||||
private menuZIndex: number = 1000;
|
||||
|
||||
private callback: ((command: string) => void | Promise<void>) | null = null;
|
||||
|
||||
public static styles = [
|
||||
@ -42,7 +45,6 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
position: fixed;
|
||||
z-index: ${zIndexLayers.wysiwygMenus};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -119,6 +121,9 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
render(): TemplateResult {
|
||||
if (!this.visible) return html``;
|
||||
|
||||
// Apply z-index to host element
|
||||
this.style.zIndex = this.menuZIndex.toString();
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="formatting-menu"
|
||||
@ -153,6 +158,11 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
console.log('FormattingMenu.show called:', { position, visible: this.visible });
|
||||
this.position = position;
|
||||
this.callback = callback;
|
||||
|
||||
// Get z-index from registry
|
||||
this.menuZIndex = zIndexRegistry.getNextZIndex();
|
||||
zIndexRegistry.register(this, this.menuZIndex);
|
||||
|
||||
this.visible = true;
|
||||
console.log('FormattingMenu.show - visible set to:', this.visible);
|
||||
}
|
||||
@ -160,6 +170,9 @@ export class DeesFormattingMenu extends DeesElement {
|
||||
public hide(): void {
|
||||
this.visible = false;
|
||||
this.callback = null;
|
||||
|
||||
// Unregister from z-index registry
|
||||
zIndexRegistry.unregister(this);
|
||||
}
|
||||
|
||||
public updatePosition(position: { x: number; y: number }): void {
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
css,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { zIndexLayers } from '../00zindex.js';
|
||||
import { zIndexRegistry } from '../00zindex.js';
|
||||
|
||||
import { type ISlashMenuItem } from './wysiwyg.types.js';
|
||||
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
|
||||
@ -43,6 +43,9 @@ export class DeesSlashMenu extends DeesElement {
|
||||
@state()
|
||||
private selectedIndex: number = 0;
|
||||
|
||||
@state()
|
||||
private menuZIndex: number = 1000;
|
||||
|
||||
private callback: ((type: string) => void) | null = null;
|
||||
|
||||
public static styles = [
|
||||
@ -50,7 +53,6 @@ export class DeesSlashMenu extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
position: fixed;
|
||||
z-index: ${zIndexLayers.wysiwygMenus};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -119,6 +121,9 @@ export class DeesSlashMenu extends DeesElement {
|
||||
render(): TemplateResult {
|
||||
if (!this.visible) return html``;
|
||||
|
||||
// Apply z-index to host element
|
||||
this.style.zIndex = this.menuZIndex.toString();
|
||||
|
||||
const menuItems = this.getFilteredMenuItems();
|
||||
|
||||
return html`
|
||||
@ -162,6 +167,11 @@ export class DeesSlashMenu extends DeesElement {
|
||||
this.callback = callback;
|
||||
this.filter = '';
|
||||
this.selectedIndex = 0;
|
||||
|
||||
// Get z-index from registry
|
||||
this.menuZIndex = zIndexRegistry.getNextZIndex();
|
||||
zIndexRegistry.register(this, this.menuZIndex);
|
||||
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
@ -170,6 +180,9 @@ export class DeesSlashMenu extends DeesElement {
|
||||
this.callback = null;
|
||||
this.filter = '';
|
||||
this.selectedIndex = 0;
|
||||
|
||||
// Unregister from z-index registry
|
||||
zIndexRegistry.unregister(this);
|
||||
}
|
||||
|
||||
public updateFilter(filter: string): void {
|
||||
|
||||
@ -9,6 +9,7 @@ import '../elements/dees-panel.js';
|
||||
import '../elements/dees-input-text.js';
|
||||
import '../elements/dees-input-radiogroup.js';
|
||||
import '../elements/dees-input-tags.js';
|
||||
import '../elements/dees-input-wysiwyg.js';
|
||||
import '../elements/dees-appui-profiledropdown.js';
|
||||
|
||||
export const showcasePage = () => html`
|
||||
@ -412,8 +413,8 @@ export const showcasePage = () => html`
|
||||
<span class="layer-value">z-index: 2999-3000</span>
|
||||
</div>
|
||||
<div class="layer context">
|
||||
<span class="layer-name">Context Menus & WYSIWYG</span>
|
||||
<span class="layer-value">z-index: 4000-4500</span>
|
||||
<span class="layer-name">Context Menus</span>
|
||||
<span class="layer-value">z-index: 4000</span>
|
||||
</div>
|
||||
<div class="layer toast">
|
||||
<span class="layer-name">Toast Notifications</span>
|
||||
@ -650,6 +651,40 @@ export const showcasePage = () => html`
|
||||
}}>Show Multiple Toasts</dees-button>
|
||||
</div>
|
||||
|
||||
<div class="demo-card">
|
||||
<h4>Modal with WYSIWYG Editor</h4>
|
||||
<dees-button @click=${async () => {
|
||||
await DeesModal.createAndShow({
|
||||
heading: 'WYSIWYG Editor Test',
|
||||
width: 'large',
|
||||
content: html`
|
||||
<p>Test the WYSIWYG editor slash commands and formatting menus in a modal:</p>
|
||||
<dees-form>
|
||||
<dees-input-wysiwyg
|
||||
.label=${'Document Content'}
|
||||
.placeholder=${'Type "/" to see slash commands or select text to format...'}
|
||||
.outputFormat=${'html'}
|
||||
.description=${'The slash menu and formatting menu should appear above this modal'}
|
||||
></dees-input-wysiwyg>
|
||||
</dees-form>
|
||||
<p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
|
||||
<strong>Tips:</strong><br>
|
||||
• Type "/" to open the slash command menu<br>
|
||||
• Select text to see the formatting toolbar<br>
|
||||
• Both menus should appear above this modal
|
||||
</p>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal) => modal.destroy() },
|
||||
{ name: 'Save', action: async (modal) => {
|
||||
DeesToast.createAndShow({ message: 'Document saved!', type: 'success' });
|
||||
modal.destroy();
|
||||
}}
|
||||
]
|
||||
});
|
||||
}}>Test WYSIWYG in Modal</dees-button>
|
||||
</div>
|
||||
|
||||
<div class="demo-card">
|
||||
<h4>Modal with Tags Input</h4>
|
||||
<dees-button @click=${async () => {
|
||||
@ -739,6 +774,7 @@ export const showcasePage = () => html`
|
||||
<li>Unregister on cleanup: <code>zIndexRegistry.unregister(element)</code></li>
|
||||
<li>Elements created later automatically appear on top</li>
|
||||
<li>Test overlay interactions, especially dropdowns in modals</li>
|
||||
<li>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
|
||||
</ul>
|
||||
|
||||
<h4>Import Example:</h4>
|
||||
|
||||
Reference in New Issue
Block a user