Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b97601a876 | |||
| 5ddeb8fe7c | |||
| 25f46162c5 | |||
| b84b0e7ce6 | |||
| 69840de3a6 | |||
| 85badfbd21 |
24
changelog.md
24
changelog.md
@@ -1,5 +1,29 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer)
|
||||
account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays
|
||||
|
||||
- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size
|
||||
- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged
|
||||
- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation
|
||||
- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout
|
||||
|
||||
## 2026-01-27 - 3.41.1 - fix(dataview-codebox)
|
||||
fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies
|
||||
|
||||
- Updated CSS in ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts: added height:100%, box-sizing, display:flex and flex-direction:column on container, set flex-shrink on header elements, made code grid overflow:auto with flex:1 and min-height:0 to prevent overflow issues.
|
||||
- Bumped dependencies in package.json: @design.estate/dees-domtools from ^2.3.7 to ^2.3.8 and @design.estate/dees-element from ^2.1.5 to ^2.1.6.
|
||||
- Non-breaking visual/layout fix — suitable for a patch release.
|
||||
|
||||
## 2026-01-27 - 3.41.0 - feat(docs)
|
||||
document new media & tile components and expand Workspace/IDE component docs; update component count to 90+
|
||||
|
||||
- Updated README component count from 70+ to 90+.
|
||||
- Added Media & Tile components documentation (DeesTilePdf, DeesTileImage, DeesTileAudio, DeesTileVideo, DeesTileNote, DeesTileFolder, DeesPreview, DeesPdfViewer, DeesImageViewer, DeesAudioViewer, DeesVideoViewer).
|
||||
- Expanded Workspace/IDE documentation and introduced workspace subcomponents (DeesWorkspace, DeesWorkspaceMonaco, DeesWorkspaceDiffEditor, DeesWorkspaceFiletree, DeesWorkspaceTerminal, DeesWorkspaceTerminalPreview, DeesWorkspaceMarkdown, DeesWorkspaceMarkdownoutlet, DeesWorkspaceBottombar).
|
||||
- Enhanced Contextmenu docs to demonstrate nested submenus and programmatic API usage.
|
||||
- Added ITileFolderItem interface example for tile folder items.
|
||||
|
||||
## 2026-01-27 - 3.40.0 - feat(dees-tile)
|
||||
unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.40.0",
|
||||
"version": "3.41.2",
|
||||
"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",
|
||||
@@ -16,8 +16,8 @@
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.3.7",
|
||||
"@design.estate/dees-element": "^2.1.5",
|
||||
"@design.estate/dees-domtools": "^2.3.8",
|
||||
"@design.estate/dees-element": "^2.1.6",
|
||||
"@design.estate/dees-wcctools": "^3.8.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^7.1.0",
|
||||
|
||||
34
pnpm-lock.yaml
generated
34
pnpm-lock.yaml
generated
@@ -9,11 +9,11 @@ importers:
|
||||
.:
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools':
|
||||
specifier: ^2.3.7
|
||||
version: 2.3.7
|
||||
specifier: ^2.3.8
|
||||
version: 2.3.8
|
||||
'@design.estate/dees-element':
|
||||
specifier: ^2.1.5
|
||||
version: 2.1.5
|
||||
specifier: ^2.1.6
|
||||
version: 2.1.6
|
||||
'@design.estate/dees-wcctools':
|
||||
specifier: ^3.8.0
|
||||
version: 3.8.0
|
||||
@@ -352,11 +352,11 @@ packages:
|
||||
'@design.estate/dees-comms@1.0.30':
|
||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||
|
||||
'@design.estate/dees-domtools@2.3.7':
|
||||
resolution: {integrity: sha512-MXoDBrP7JTOpni8b12aFXHJKnKBoQppM8cYBuL9cesRmCVGdB7p39XMRQ7dRyMhmmyr66L3cOczhiCV6febCwg==}
|
||||
'@design.estate/dees-domtools@2.3.8':
|
||||
resolution: {integrity: sha512-jUG9GMvPxKMwmRIZ9oLTL3c8hHvHuiwIk8cTrYnuZzGO/uJJ5/czk9o6LRXUuCOOG7TRLtqgOpK8EEQgaadfZA==}
|
||||
|
||||
'@design.estate/dees-element@2.1.5':
|
||||
resolution: {integrity: sha512-czUOFvBiUKi34I+/keDRDc71fuORZS0NfbSuD2jJ4D1ODiTPjaZ6A6SkdQ2QqCEzVsx73XF99Pu8pxPnaOLnHg==}
|
||||
'@design.estate/dees-element@2.1.6':
|
||||
resolution: {integrity: sha512-7zyHkUjB8UEQgT9VbB2IJtc/yuPt9CI5JGel3b6BxA1kecY64ceIjFvof1uIkc0QP8q2fMLLY45r1c+9zDTjzg==}
|
||||
|
||||
'@design.estate/dees-wcctools@3.8.0':
|
||||
resolution: {integrity: sha512-CC14iVKUrguzD9jIrdPBd9fZ4egVJEZMxl5y8iy0l7WLumeoYvGsoXj5INVkRPLRVLqziIdi4Je1hXqHt2NU+g==}
|
||||
@@ -4730,8 +4730,8 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-catalog@3.37.0(@tiptap/pm@2.27.2)':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@design.estate/dees-domtools': 2.3.8
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
'@design.estate/dees-wcctools': 3.8.0
|
||||
'@fortawesome/fontawesome-svg-core': 7.1.0
|
||||
'@fortawesome/free-brands-svg-icons': 7.1.0
|
||||
@@ -4770,7 +4770,7 @@ snapshots:
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
broadcast-channel: 7.3.0
|
||||
|
||||
'@design.estate/dees-domtools@2.3.7':
|
||||
'@design.estate/dees-domtools@2.3.8':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
@@ -4796,9 +4796,9 @@ snapshots:
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@design.estate/dees-element@2.1.5':
|
||||
'@design.estate/dees-element@2.1.6':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-domtools': 2.3.8
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
lit: 3.3.2
|
||||
@@ -4810,8 +4810,8 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-wcctools@3.8.0':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@design.estate/dees-domtools': 2.3.8
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
@@ -5921,7 +5921,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/smartntml@2.0.8':
|
||||
dependencies:
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
'@happy-dom/global-registrator': 15.11.7
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
fake-indexeddb: 6.2.5
|
||||
@@ -6178,7 +6178,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/taskbuffer@3.5.0':
|
||||
dependencies:
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@design.estate/dees-element': 2.1.6
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
|
||||
274
readme.md
274
readme.md
@@ -1,6 +1,6 @@
|
||||
# @design.estate/dees-catalog
|
||||
|
||||
A comprehensive web components library built with TypeScript and LitElement, providing **70+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
|
||||
A comprehensive web components library built with TypeScript and LitElement, providing **90+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
|
||||
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://lit.dev/)
|
||||
@@ -18,6 +18,8 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
|
||||
- 🔧 **TypeScript-First** — Fully typed APIs with excellent IDE support
|
||||
- 🧩 **Modular** — Use only what you need, tree-shakeable architecture
|
||||
- 🏗️ **Full App Shell** — `dees-appui` provides a complete application framework with menus, routing, activity log, and bottom bar
|
||||
- 🎬 **Media Components** — Rich tile-based previews for PDFs, images, audio, video, notes, and folders
|
||||
- 💻 **IDE Workspace** — Full workspace component with Monaco editor, file tree, terminal, and diff viewer
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
@@ -55,12 +57,13 @@ For developers working on this library, please refer to the [UI Components Playb
|
||||
|----------|------------|
|
||||
| **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), [`DeesActionbar`](#deesactionbar) |
|
||||
| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
|
||||
| **App Shell (Layout)** | [`DeesAppui`](#deesappui-), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
|
||||
| **App Shell (Layout)** | [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
|
||||
| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
|
||||
| **Media & Tiles** | [`DeesTilePdf`](#deestilepdf), [`DeesTileImage`](#deestileimage), [`DeesTileAudio`](#deestileaudio), [`DeesTileVideo`](#deestilevideo), [`DeesTileNote`](#deestilenote), [`DeesTileFolder`](#deestilefolder), [`DeesPreview`](#deespreview), [`DeesPdfViewer`](#deespdfviewer), [`DeesPdfPreview`](#deespdfpreview), [`DeesImageViewer`](#deesimageviewer), [`DeesAudioViewer`](#deesaudioviewer), [`DeesVideoViewer`](#deesvideoviewer) |
|
||||
| **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
|
||||
| **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
|
||||
| **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
|
||||
| **Workspace / IDE** | [`DeesEditor`](#deeseditor), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
|
||||
| **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
|
||||
| **Theming** | [`DeesTheme`](#deestheme) |
|
||||
| **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
|
||||
| **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
|
||||
@@ -1234,6 +1237,146 @@ Pagination component for navigating through large datasets.
|
||||
|
||||
---
|
||||
|
||||
### Media & Tile Components 🎬
|
||||
|
||||
A rich collection of tile-based preview components for displaying media files in grids. All tiles share a consistent base class (`DeesTileBase`) with lazy loading via `IntersectionObserver`, hover interactions, click events, context menus, and three size variants (`small`, `default`, `large`).
|
||||
|
||||
All tile badges use a unified styling system with label-awareness — when a `label` is set, bottom badges automatically shift up to avoid overlapping.
|
||||
|
||||
#### `DeesTilePdf`
|
||||
PDF document tile with live page preview on hover.
|
||||
|
||||
```typescript
|
||||
<dees-tile-pdf
|
||||
pdfUrl="/documents/report.pdf"
|
||||
label="Annual Report"
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-pdf>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Renders first page as canvas preview
|
||||
- Hover to scrub through pages (mouse X position maps to page number)
|
||||
- Shows page count badge, hover page indicator
|
||||
- Detects A4/Letter vs non-standard aspect ratios
|
||||
|
||||
#### `DeesTileImage`
|
||||
Image tile with lazy loading and dimension display.
|
||||
|
||||
```typescript
|
||||
<dees-tile-image
|
||||
src="/photos/landscape.jpg"
|
||||
alt="Mountain landscape"
|
||||
label="landscape.jpg"
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-image>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Lazy loads image on scroll into view
|
||||
- Shows image dimensions on hover (e.g. "1920 × 1080")
|
||||
- Checkerboard background for transparent images
|
||||
|
||||
#### `DeesTileAudio`
|
||||
Audio file tile with waveform visualization.
|
||||
|
||||
```typescript
|
||||
<dees-tile-audio
|
||||
src="/music/track.mp3"
|
||||
title="Summer Vibes"
|
||||
artist="DJ Example"
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-audio>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Generates waveform visualization from audio data
|
||||
- Shows duration badge (e.g. "3:42")
|
||||
- Displays title and artist metadata
|
||||
- Play overlay on hover
|
||||
|
||||
#### `DeesTileVideo`
|
||||
Video tile with thumbnail capture and hover preview.
|
||||
|
||||
```typescript
|
||||
<dees-tile-video
|
||||
src="/videos/intro.mp4"
|
||||
poster="/thumbs/intro.jpg"
|
||||
label="Introduction"
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-video>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Auto-captures first frame as thumbnail (or uses provided `poster`)
|
||||
- Plays video preview on hover
|
||||
- Shows duration badge
|
||||
- Play button overlay
|
||||
|
||||
#### `DeesTileNote`
|
||||
Code/text snippet tile with syntax-aware display.
|
||||
|
||||
```typescript
|
||||
<dees-tile-note
|
||||
title="config.ts"
|
||||
language="TypeScript"
|
||||
.content=${codeString}
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-note>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Monospace font with line numbers
|
||||
- Language badge (top-right)
|
||||
- Scrollable content on hover (mouse X position controls scroll)
|
||||
- Line indicator badge while scrolling
|
||||
- Gradient fade at bottom
|
||||
|
||||
#### `DeesTileFolder`
|
||||
Folder tile with 2×2 content preview grid.
|
||||
|
||||
```typescript
|
||||
<dees-tile-folder
|
||||
name="Project Assets"
|
||||
.items=${[
|
||||
{ type: 'image', name: 'logo.png', thumbnailSrc: '/thumbs/logo.png' },
|
||||
{ type: 'pdf', name: 'spec.pdf' },
|
||||
{ type: 'audio', name: 'jingle.mp3' },
|
||||
{ type: 'video', name: 'demo.mp4' },
|
||||
]}
|
||||
clickable
|
||||
@tile-click=${handleClick}
|
||||
></dees-tile-folder>
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- 2×2 preview grid showing first 4 items (thumbnails or type icons)
|
||||
- Item count badge (e.g. "12 items")
|
||||
- Folder icon header with name
|
||||
- Supports: `pdf`, `image`, `audio`, `video`, `note`, `folder`, `unknown` types
|
||||
|
||||
#### `DeesPreview`
|
||||
Unified preview component that auto-selects the right tile type based on content.
|
||||
|
||||
#### `DeesPdfViewer` / `DeesPdfPreview`
|
||||
Full PDF viewing components with navigation controls.
|
||||
|
||||
#### `DeesImageViewer`
|
||||
Full-screen image viewer with zoom and pan.
|
||||
|
||||
#### `DeesAudioViewer`
|
||||
Audio playback component with waveform and controls.
|
||||
|
||||
#### `DeesVideoViewer`
|
||||
Video playback component with standard controls.
|
||||
|
||||
---
|
||||
|
||||
### Visualization Components
|
||||
|
||||
#### `DeesChartArea`
|
||||
@@ -1294,16 +1437,41 @@ DeesModal.createAndShow({
|
||||
```
|
||||
|
||||
#### `DeesContextmenu`
|
||||
Context menu component for right-click actions.
|
||||
Context menu component for right-click actions with nested submenu support.
|
||||
|
||||
```typescript
|
||||
<dees-contextmenu
|
||||
.items=${[
|
||||
{ label: 'Edit', icon: 'edit', action: () => handleEdit() },
|
||||
{ label: 'Delete', icon: 'trash', action: () => handleDelete() }
|
||||
]}
|
||||
position="right"
|
||||
></dees-contextmenu>
|
||||
// Programmatic usage
|
||||
DeesContextmenu.openContextMenuWithOptions(mouseEvent, [
|
||||
{
|
||||
name: 'Edit',
|
||||
iconName: 'lucide:edit',
|
||||
action: async () => handleEdit()
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'More Options',
|
||||
iconName: 'lucide:moreHorizontal',
|
||||
submenu: [
|
||||
{ name: 'Duplicate', iconName: 'lucide:copy', action: async () => handleDuplicate() },
|
||||
{ name: 'Archive', iconName: 'lucide:archive', action: async () => handleArchive() },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
action: async () => handleDelete()
|
||||
}
|
||||
]);
|
||||
|
||||
// Component-based (implement getContextMenuItems on any element)
|
||||
class MyComponent extends DeesElement {
|
||||
getContextMenuItems() {
|
||||
return [
|
||||
{ name: 'View Details', iconName: 'lucide:eye', action: async () => { ... } },
|
||||
{ name: 'Edit', iconName: 'lucide:edit', action: async () => { ... } },
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### `DeesSpeechbubble`
|
||||
@@ -1395,51 +1563,68 @@ Theme provider component that wraps children and provides CSS custom properties
|
||||
|
||||
---
|
||||
|
||||
### Workspace / IDE Components
|
||||
### Workspace / IDE Components 💻
|
||||
|
||||
#### `DeesEditor`
|
||||
Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
|
||||
A full-featured IDE workspace component suite for building browser-based code editors, terminal interfaces, and documentation viewers.
|
||||
|
||||
#### `DeesWorkspace`
|
||||
Top-level workspace shell that composes editor, file tree, terminal, and bottom bar into an IDE-like layout.
|
||||
|
||||
```typescript
|
||||
<dees-editor
|
||||
<dees-workspace></dees-workspace>
|
||||
```
|
||||
|
||||
#### `DeesWorkspaceMonaco`
|
||||
Monaco Editor integration for code editing with full IntelliSense, syntax highlighting, and language support.
|
||||
|
||||
```typescript
|
||||
<dees-workspace-monaco
|
||||
.value=${code}
|
||||
@change=${handleCodeChange}
|
||||
.language=${'typescript'}
|
||||
.theme=${'vs-dark'}
|
||||
.options=${{
|
||||
lineNumbers: true,
|
||||
minimap: { enabled: true },
|
||||
autoClosingBrackets: 'always'
|
||||
}}
|
||||
></dees-editor>
|
||||
@change=${handleCodeChange}
|
||||
></dees-workspace-monaco>
|
||||
```
|
||||
|
||||
#### `DeesTerminal`
|
||||
Terminal emulator component for command-line interface.
|
||||
#### `DeesWorkspaceDiffEditor`
|
||||
Side-by-side diff editor powered by Monaco for comparing file versions.
|
||||
|
||||
```typescript
|
||||
<dees-terminal
|
||||
.commands=${{
|
||||
'echo': (args) => `Echo: ${args.join(' ')}`,
|
||||
'help': () => 'Available commands: echo, help'
|
||||
}}
|
||||
.prompt=${'$'}
|
||||
.welcomeMessage=${'Welcome! Type "help" for available commands.'}
|
||||
></dees-terminal>
|
||||
<dees-workspace-diff-editor
|
||||
.originalValue=${originalCode}
|
||||
.modifiedValue=${modifiedCode}
|
||||
.language=${'typescript'}
|
||||
></dees-workspace-diff-editor>
|
||||
```
|
||||
|
||||
#### `DeesUpdater`
|
||||
Component for managing application updates and version control.
|
||||
#### `DeesWorkspaceFiletree`
|
||||
File tree navigation component with expand/collapse, file icons, and selection.
|
||||
|
||||
```typescript
|
||||
<dees-updater
|
||||
.currentVersion=${'1.5.2'}
|
||||
.checkInterval=${3600000}
|
||||
.autoUpdate=${false}
|
||||
@update-available=${handleUpdateAvailable}
|
||||
></dees-updater>
|
||||
<dees-workspace-filetree
|
||||
.files=${fileTreeData}
|
||||
@file-select=${handleFileSelect}
|
||||
></dees-workspace-filetree>
|
||||
```
|
||||
|
||||
#### `DeesWorkspaceTerminal`
|
||||
Terminal emulator component powered by xterm.js.
|
||||
|
||||
```typescript
|
||||
<dees-workspace-terminal></dees-workspace-terminal>
|
||||
```
|
||||
|
||||
#### `DeesWorkspaceTerminalPreview`
|
||||
Terminal with integrated preview pane for output visualization.
|
||||
|
||||
#### `DeesWorkspaceMarkdown`
|
||||
Markdown editor with live preview.
|
||||
|
||||
#### `DeesWorkspaceMarkdownoutlet`
|
||||
Read-only markdown renderer for documentation display.
|
||||
|
||||
#### `DeesWorkspaceBottombar`
|
||||
IDE-style bottom status bar for the workspace.
|
||||
|
||||
---
|
||||
|
||||
### Pre-built Templates
|
||||
@@ -1582,6 +1767,13 @@ interface IViewActivationContext {
|
||||
viewId: string;
|
||||
params?: Record<string, string>;
|
||||
}
|
||||
|
||||
// Tile folder item (for DeesTileFolder)
|
||||
interface ITileFolderItem {
|
||||
type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
|
||||
thumbnailSrc?: string;
|
||||
name: string;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.40.0',
|
||||
version: '3.41.2',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -52,6 +52,8 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
@@ -61,6 +63,10 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.appbar {
|
||||
@@ -74,6 +80,7 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
line-height: 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.appbar .fileName {
|
||||
@@ -95,6 +102,7 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spacesLabel {
|
||||
@@ -121,7 +129,9 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
.codegrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50px auto;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.lineNumbers {
|
||||
|
||||
@@ -444,9 +444,10 @@ export class DeesPdfViewer extends DeesElement {
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
const viewport = this.computeViewport(page);
|
||||
|
||||
// Set canvas dimensions
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
// Set canvas dimensions with device pixel ratio for sharp rendering
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.floor(viewport.width * dpr);
|
||||
canvas.height = Math.floor(viewport.height * dpr);
|
||||
canvas.style.width = `${viewport.width}px`;
|
||||
canvas.style.height = `${viewport.height}px`;
|
||||
|
||||
@@ -457,6 +458,9 @@ export class DeesPdfViewer extends DeesElement {
|
||||
return;
|
||||
}
|
||||
|
||||
// Scale context for high-DPI displays
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport,
|
||||
@@ -652,9 +656,10 @@ export class DeesPdfViewer extends DeesElement {
|
||||
const scale = maxThumbnailWidth / initialViewport.width;
|
||||
const viewport = page.getViewport({ scale });
|
||||
|
||||
// Set canvas dimensions to actual render size
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
// Set canvas dimensions with device pixel ratio for sharp thumbnails
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.floor(viewport.width * dpr);
|
||||
canvas.height = Math.floor(viewport.height * dpr);
|
||||
|
||||
// Set the display size via style to ensure proper display
|
||||
canvas.style.width = `${viewport.width}px`;
|
||||
@@ -670,6 +675,9 @@ export class DeesPdfViewer extends DeesElement {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Scale context for high-DPI displays
|
||||
context.scale(dpr, dpr);
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
|
||||
Reference in New Issue
Block a user