Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 74c39482de | |||
| 51611d76dd | |||
| 496084f870 | |||
| c7bff04ae5 | |||
| e71efd409b | |||
| 43db777f2c | |||
| 9bd1734d09 |
25
changelog.md
25
changelog.md
@@ -1,5 +1,30 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-01-07 - 3.34.0 - feat(dees-input-toggle)
|
||||
Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
|
||||
|
||||
- New UI input component: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts — toggle switch with pointer drag, keyboard support, value syncing and DeesInputBase integration.
|
||||
- Interactive demo added: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts demonstrating usage, batch operations and event handling.
|
||||
- Module exports updated: added ts_web/elements/00group-input/dees-input-toggle/index.ts and exported from ts_web/elements/00group-input/index.ts.
|
||||
- DeesForm integration: imported DeesInputToggle and added it to the form components array and input union types in ts_web/elements/00group-form/dees-form/dees-form.ts
|
||||
|
||||
## 2026-01-06 - 3.33.0 - feat(dees-statsgrid)
|
||||
add multiPercentage tile type to stats grid
|
||||
|
||||
- Add new 'multiPercentage' type to IStatsTile (percentages: [{label, value, color?}])
|
||||
- Implement renderMultiPercentage() to render up to 3 percentage items with label, value and colored progress bars
|
||||
- Add CSS styles for multi-percentage layout, bars, labels and values
|
||||
- Update demo to replace 'Error Rate' tile with a 'Resource Usage' multiPercentage example (CPU, Memory, Disk)
|
||||
- Change is additive and backward-compatible with existing tile types
|
||||
|
||||
## 2026-01-04 - 3.32.0 - feat(demo)
|
||||
add demoGroup metadata to components and update related dependencies
|
||||
|
||||
- Add public static demoGroup properties to many components to categorize demos (groups added: App UI, Button, Chart, Data View, Form, Input, PDF, Simple, Workspace).
|
||||
- Bump package deps/devDeps: @design.estate/dees-domtools -> ^2.3.7, @design.estate/dees-element -> ^2.1.5, @design.estate/dees-wcctools -> ^3.7.1.
|
||||
- Clean up package.json deps (removed duplicate entries and removed 'lit' dependency).
|
||||
- Refactor dees-pdf-viewer to use consolidated directives import (directives.keyed and directives.repeat) instead of separate keyed/repeat imports.
|
||||
|
||||
## 2026-01-04 - 3.31.0 - feat(dees-input-list)
|
||||
enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner
|
||||
|
||||
|
||||
11
package.json
11
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.31.0",
|
||||
"version": "3.34.0",
|
||||
"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.6",
|
||||
"@design.estate/dees-element": "^2.1.3",
|
||||
"@design.estate/dees-domtools": "^2.3.7",
|
||||
"@design.estate/dees-element": "^2.1.5",
|
||||
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^7.1.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^7.1.0",
|
||||
@@ -25,6 +25,7 @@
|
||||
"@push.rocks/smarti18n": "^1.0.4",
|
||||
"@push.rocks/smartpromise": "^4.2.0",
|
||||
"@push.rocks/smartstring": "^4.1.0",
|
||||
"@tempfix/webcontainer__api": "1.6.1",
|
||||
"@tiptap/core": "^2.23.0",
|
||||
"@tiptap/extension-link": "^2.23.0",
|
||||
"@tiptap/extension-text-align": "^2.23.0",
|
||||
@@ -32,11 +33,9 @@
|
||||
"@tiptap/extension-underline": "^2.23.0",
|
||||
"@tiptap/starter-kit": "^2.23.0",
|
||||
"@tsclass/tsclass": "^9.3.0",
|
||||
"@tempfix/webcontainer__api": "1.6.1",
|
||||
"apexcharts": "^5.3.6",
|
||||
"highlight.js": "11.11.1",
|
||||
"ibantools": "^4.5.1",
|
||||
"lit": "^3.3.1",
|
||||
"lucide": "^0.562.0",
|
||||
"monaco-editor": "0.55.1",
|
||||
"pdfjs-dist": "^4.10.38",
|
||||
@@ -44,7 +43,7 @@
|
||||
"xterm-addon-fit": "^0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@design.estate/dees-wcctools": "^3.4.0",
|
||||
"@design.estate/dees-wcctools": "^3.7.1",
|
||||
"@git.zone/tsbuild": "^4.0.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tstest": "^3.1.4",
|
||||
|
||||
143
pnpm-lock.yaml
generated
143
pnpm-lock.yaml
generated
@@ -9,11 +9,11 @@ importers:
|
||||
.:
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools':
|
||||
specifier: ^2.3.6
|
||||
version: 2.3.6
|
||||
specifier: ^2.3.7
|
||||
version: 2.3.7
|
||||
'@design.estate/dees-element':
|
||||
specifier: ^2.1.3
|
||||
version: 2.1.3
|
||||
specifier: ^2.1.5
|
||||
version: 2.1.5
|
||||
'@fortawesome/fontawesome-svg-core':
|
||||
specifier: ^7.1.0
|
||||
version: 7.1.0
|
||||
@@ -68,9 +68,6 @@ importers:
|
||||
ibantools:
|
||||
specifier: ^4.5.1
|
||||
version: 4.5.1
|
||||
lit:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
lucide:
|
||||
specifier: ^0.562.0
|
||||
version: 0.562.0
|
||||
@@ -88,8 +85,8 @@ importers:
|
||||
version: 0.8.0(xterm@5.3.0)
|
||||
devDependencies:
|
||||
'@design.estate/dees-wcctools':
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0
|
||||
specifier: ^3.7.1
|
||||
version: 3.7.1
|
||||
'@git.zone/tsbuild':
|
||||
specifier: ^4.0.2
|
||||
version: 4.0.2
|
||||
@@ -328,17 +325,17 @@ packages:
|
||||
'@design.estate/dees-comms@1.0.30':
|
||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||
|
||||
'@design.estate/dees-domtools@2.3.6':
|
||||
resolution: {integrity: sha512-cKaPNtSpp/ZuuXVx2dXO3K2FU3/HjC4ZkqtXb8Kl6yy9rNDbgtjcI4PuOk9Ux1SJzw7FgcxqVh7OSEV60htbmg==}
|
||||
'@design.estate/dees-domtools@2.3.7':
|
||||
resolution: {integrity: sha512-MXoDBrP7JTOpni8b12aFXHJKnKBoQppM8cYBuL9cesRmCVGdB7p39XMRQ7dRyMhmmyr66L3cOczhiCV6febCwg==}
|
||||
|
||||
'@design.estate/dees-element@2.1.3':
|
||||
resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==}
|
||||
'@design.estate/dees-element@2.1.5':
|
||||
resolution: {integrity: sha512-czUOFvBiUKi34I+/keDRDc71fuORZS0NfbSuD2jJ4D1ODiTPjaZ6A6SkdQ2QqCEzVsx73XF99Pu8pxPnaOLnHg==}
|
||||
|
||||
'@design.estate/dees-wcctools@1.3.0':
|
||||
resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==}
|
||||
|
||||
'@design.estate/dees-wcctools@3.4.0':
|
||||
resolution: {integrity: sha512-B263qJxK1Ob5ZmC+qj/utiuKZvdewIO6WwTfrTKF3X0Y24pcxoJVwJsDDcJID4kRd44EcNU9CP0FfWD2uYX9GQ==}
|
||||
'@design.estate/dees-wcctools@3.7.1':
|
||||
resolution: {integrity: sha512-BiNWghUoC05RTQOGVCTK+wis6d18LyLY+2p8vHC0q2OBw9hrPoY8k9EplpQgY40MvP0sTXWUwaa7VPXra8ASjA==}
|
||||
|
||||
'@emnapi/core@1.7.1':
|
||||
resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
|
||||
@@ -568,11 +565,11 @@ packages:
|
||||
'@leichtgewicht/ip-codec@2.0.5':
|
||||
resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0':
|
||||
resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
|
||||
'@lit-labs/ssr-dom-shim@1.5.0':
|
||||
resolution: {integrity: sha512-HLomZXMmrCFHSRKESF5vklAKsDY7/fsT/ZhqCu3V0UoW/Qbv8wxmO4W9bx4KnCCF2Zak4yuk+AGraK/bPmI4kA==}
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
|
||||
'@lit/reactive-element@2.1.2':
|
||||
resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
|
||||
|
||||
'@mixmark-io/domino@2.2.0':
|
||||
resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
|
||||
@@ -1450,6 +1447,20 @@ packages:
|
||||
'@tempfix/idb@8.0.3':
|
||||
resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}
|
||||
|
||||
'@tempfix/lenis@1.3.17':
|
||||
resolution: {integrity: sha512-IqbEB2jLGd0CZrr6TQgjPlhIJJwjDD/53e60KmEr2MEMxwRFUn6pg/H2EvxtoeS7ItmQdhWkJwPgtvVRUCctNw==}
|
||||
peerDependencies:
|
||||
'@nuxt/kit': '>=3.0.0'
|
||||
react: '>=17.0.0'
|
||||
vue: '>=3.0.0'
|
||||
peerDependenciesMeta:
|
||||
'@nuxt/kit':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
|
||||
'@tempfix/webcontainer__api@1.6.1':
|
||||
resolution: {integrity: sha512-Hgn3cwy0vPzjrVBqeVnY0jNZLaOCW7d+dxBe7Jv9YGHAjJ8udUMS+KbTywSv5paAfld3A/RN/iolmMzOwZxLTA==}
|
||||
|
||||
@@ -2661,20 +2672,6 @@ packages:
|
||||
resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
lenis@1.3.15:
|
||||
resolution: {integrity: sha512-zSYOFs0ydafX70uygFoipaHHQouPeE4DpZZhdOUyLJxVf2ZVvBCBBaolDDaQztTRsa6+stBlxq2GmFGJPAVryQ==}
|
||||
peerDependencies:
|
||||
'@nuxt/kit': '>=3.0.0'
|
||||
react: '>=17.0.0'
|
||||
vue: '>=3.0.0'
|
||||
peerDependenciesMeta:
|
||||
'@nuxt/kit':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
|
||||
lines-and-columns@1.2.4:
|
||||
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
|
||||
|
||||
@@ -2684,14 +2681,14 @@ packages:
|
||||
linkifyjs@4.3.2:
|
||||
resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
|
||||
|
||||
lit-element@4.2.1:
|
||||
resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
|
||||
lit-element@4.2.2:
|
||||
resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}
|
||||
|
||||
lit-html@3.3.1:
|
||||
resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
|
||||
lit-html@3.3.2:
|
||||
resolution: {integrity: sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==}
|
||||
|
||||
lit@3.3.1:
|
||||
resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
|
||||
lit@3.3.2:
|
||||
resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}
|
||||
|
||||
locate-path@5.0.0:
|
||||
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
|
||||
@@ -3938,7 +3935,7 @@ snapshots:
|
||||
cors: 2.8.5
|
||||
express: 5.2.1
|
||||
express-force-ssl: 0.3.2
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- '@push.rocks/smartserve'
|
||||
@@ -3984,7 +3981,7 @@ snapshots:
|
||||
'@push.rocks/webrequest': 4.0.1
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- '@tiptap/pm'
|
||||
@@ -4528,8 +4525,8 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-catalog@3.3.0(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@design.estate/dees-wcctools': 1.3.0
|
||||
'@fortawesome/fontawesome-svg-core': 7.1.0
|
||||
'@fortawesome/free-brands-svg-icons': 7.1.0
|
||||
@@ -4549,7 +4546,7 @@ snapshots:
|
||||
apexcharts: 5.3.6
|
||||
highlight.js: 11.11.1
|
||||
ibantools: 4.5.1
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
lucide: 0.555.0
|
||||
monaco-editor: 0.52.2
|
||||
pdfjs-dist: 4.10.38
|
||||
@@ -4569,7 +4566,7 @@ snapshots:
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
broadcast-channel: 7.2.0
|
||||
|
||||
'@design.estate/dees-domtools@2.3.6':
|
||||
'@design.estate/dees-domtools@2.3.7':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
@@ -4586,8 +4583,8 @@ snapshots:
|
||||
'@push.rocks/webrequest': 3.0.37
|
||||
'@push.rocks/websetup': 3.0.19
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
lenis: 1.3.15
|
||||
lit: 3.3.1
|
||||
'@tempfix/lenis': 1.3.17
|
||||
lit: 3.3.2
|
||||
sweet-scroll: 4.0.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
@@ -4595,12 +4592,12 @@ snapshots:
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@design.estate/dees-element@2.1.3':
|
||||
'@design.estate/dees-element@2.1.5':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- react
|
||||
@@ -4609,22 +4606,22 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-wcctools@1.3.0':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- react
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@design.estate/dees-wcctools@3.4.0':
|
||||
'@design.estate/dees-wcctools@3.7.1':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
'@design.estate/dees-domtools': 2.3.7
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
lit: 3.3.1
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- react
|
||||
@@ -4908,11 +4905,11 @@ snapshots:
|
||||
|
||||
'@leichtgewicht/ip-codec@2.0.5': {}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0': {}
|
||||
'@lit-labs/ssr-dom-shim@1.5.0': {}
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
'@lit/reactive-element@2.1.2':
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
'@lit-labs/ssr-dom-shim': 1.5.0
|
||||
|
||||
'@mixmark-io/domino@2.2.0': {}
|
||||
|
||||
@@ -5646,7 +5643,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/smartntml@2.0.8':
|
||||
dependencies:
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@happy-dom/global-registrator': 15.11.7
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
fake-indexeddb: 6.2.5
|
||||
@@ -5903,7 +5900,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/taskbuffer@3.5.0':
|
||||
dependencies:
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
'@design.estate/dees-element': 2.1.5
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
@@ -6466,6 +6463,8 @@ snapshots:
|
||||
|
||||
'@tempfix/idb@8.0.3': {}
|
||||
|
||||
'@tempfix/lenis@1.3.17': {}
|
||||
|
||||
'@tempfix/webcontainer__api@1.6.1': {}
|
||||
|
||||
'@tiptap/core@2.27.1(@tiptap/pm@2.27.1)':
|
||||
@@ -7801,8 +7800,6 @@ snapshots:
|
||||
|
||||
kind-of@6.0.3: {}
|
||||
|
||||
lenis@1.3.15: {}
|
||||
|
||||
lines-and-columns@1.2.4: {}
|
||||
|
||||
linkify-it@5.0.0:
|
||||
@@ -7811,21 +7808,21 @@ snapshots:
|
||||
|
||||
linkifyjs@4.3.2: {}
|
||||
|
||||
lit-element@4.2.1:
|
||||
lit-element@4.2.2:
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
'@lit/reactive-element': 2.1.1
|
||||
lit-html: 3.3.1
|
||||
'@lit-labs/ssr-dom-shim': 1.5.0
|
||||
'@lit/reactive-element': 2.1.2
|
||||
lit-html: 3.3.2
|
||||
|
||||
lit-html@3.3.1:
|
||||
lit-html@3.3.2:
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.7
|
||||
|
||||
lit@3.3.1:
|
||||
lit@3.3.2:
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.1.1
|
||||
lit-element: 4.2.1
|
||||
lit-html: 3.3.1
|
||||
'@lit/reactive-element': 2.1.2
|
||||
lit-element: 4.2.2
|
||||
lit-html: 3.3.2
|
||||
|
||||
locate-path@5.0.0:
|
||||
dependencies:
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.31.0',
|
||||
version: '3.34.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE PROPERTIES
|
||||
@state()
|
||||
|
||||
@@ -28,6 +28,7 @@ declare global {
|
||||
@customElement('dees-appui-appbar')
|
||||
export class DeesAppuiBar extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE PROPERTIES
|
||||
@property({ type: Array })
|
||||
|
||||
@@ -26,6 +26,7 @@ declare global {
|
||||
@customElement('dees-appui-bottombar')
|
||||
export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE PROPERTIES
|
||||
@state()
|
||||
|
||||
@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
|
||||
</div>
|
||||
</dees-appui-maincontent>
|
||||
`;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
@customElement('dees-appui-mainmenu')
|
||||
export class DeesAppuiMainmenu extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
||||
.isOpen=${true}
|
||||
></dees-appui-profiledropdown>
|
||||
`;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
@property({ type: Object })
|
||||
accessor user: {
|
||||
|
||||
@@ -33,6 +33,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
@customElement('dees-appui-secondarymenu')
|
||||
export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
@customElement('dees-appui-tabs')
|
||||
export class DeesAppuiTabs extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { DeesAppui } from './dees-appui.js';
|
||||
import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
|
||||
import type * as interfaces from '../../interfaces/index.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import '../../dees-statsgrid/dees-statsgrid.js';
|
||||
import type { IStatsTile } from '../../dees-statsgrid/dees-statsgrid.js';
|
||||
|
||||
// Demo view component with lifecycle hooks
|
||||
@customElement('demo-dashboard-view')
|
||||
@@ -12,6 +14,79 @@ class DemoDashboardView extends DeesElement {
|
||||
|
||||
private ctx: IViewActivationContext;
|
||||
|
||||
private statsTiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'users',
|
||||
title: 'Active Users',
|
||||
value: 1234,
|
||||
type: 'number',
|
||||
icon: 'lucide:users',
|
||||
description: 'Online now',
|
||||
color: '#22c55e'
|
||||
},
|
||||
{
|
||||
id: 'api-calls',
|
||||
title: 'API Calls',
|
||||
value: 45200,
|
||||
type: 'trend',
|
||||
icon: 'lucide:activity',
|
||||
description: '+12% from last hour',
|
||||
color: '#3b82f6',
|
||||
trendData: [32000, 35000, 38000, 41000, 39000, 42000, 45200]
|
||||
},
|
||||
{
|
||||
id: 'health',
|
||||
title: 'System Health',
|
||||
value: 99.9,
|
||||
unit: '%',
|
||||
type: 'gauge',
|
||||
icon: 'lucide:heart-pulse',
|
||||
description: 'All systems operational',
|
||||
color: '#10b981',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 80, color: '#ef4444' },
|
||||
{ value: 95, color: '#f59e0b' },
|
||||
{ value: 100, color: '#10b981' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'response',
|
||||
title: 'Avg Response',
|
||||
value: 127,
|
||||
unit: 'ms',
|
||||
type: 'number',
|
||||
icon: 'lucide:timer',
|
||||
description: '-15ms from yesterday',
|
||||
color: '#8b5cf6'
|
||||
},
|
||||
{
|
||||
id: 'resources',
|
||||
title: 'Resource Usage',
|
||||
value: '',
|
||||
type: 'multiPercentage',
|
||||
icon: 'lucide:server',
|
||||
percentages: [
|
||||
{ label: 'CPU', value: 67, color: '#3b82f6' },
|
||||
{ label: 'Memory', value: 84, color: '#8b5cf6' },
|
||||
{ label: 'Disk', value: 45, color: '#10b981' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'requests',
|
||||
title: 'Requests/sec',
|
||||
value: 1850,
|
||||
type: 'trend',
|
||||
icon: 'lucide:zap',
|
||||
description: 'Current throughput',
|
||||
color: '#06b6d4',
|
||||
trendData: [1200, 1400, 1350, 1600, 1750, 1680, 1850]
|
||||
}
|
||||
];
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.ctx = context;
|
||||
this.activated = true;
|
||||
@@ -83,21 +158,9 @@ class DemoDashboardView extends DeesElement {
|
||||
}
|
||||
h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
|
||||
p { color: #737373; margin-bottom: 32px; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
dees-statsgrid {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
.card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
|
||||
.metric { font-size: 32px; font-weight: 700; color: #fafafa; }
|
||||
.status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
|
||||
.status.active { background: #14532d; color: #4ade80; }
|
||||
|
||||
.ctx-actions {
|
||||
margin-top: 32px;
|
||||
@@ -147,23 +210,10 @@ class DemoDashboardView extends DeesElement {
|
||||
</style>
|
||||
<h1>Dashboard</h1>
|
||||
<p>Welcome back! Here's an overview of your system.</p>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h3>Active Users</h3>
|
||||
<div class="metric">1,234</div>
|
||||
<span class="status active">Online</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>API Calls</h3>
|
||||
<div class="metric">45.2K</div>
|
||||
<p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>System Health</h3>
|
||||
<div class="metric">99.9%</div>
|
||||
<p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
|
||||
</div>
|
||||
</div>
|
||||
<dees-statsgrid
|
||||
.tiles=${this.statsTiles}
|
||||
@tile-action=${(e: CustomEvent) => console.log('Tile action:', e.detail)}
|
||||
></dees-statsgrid>
|
||||
|
||||
<div class="ctx-actions">
|
||||
<h2>Context Actions (ctx.appui)</h2>
|
||||
|
||||
@@ -39,6 +39,7 @@ declare global {
|
||||
@customElement('dees-appui')
|
||||
export class DeesAppui extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// ==========================================
|
||||
// REACTIVE OBSERVABLES (RxJS Subjects)
|
||||
|
||||
@@ -16,6 +16,7 @@ export class DeesButtonExit extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-button-exit></dees-button-exit>
|
||||
`;
|
||||
public static demoGroup = 'Button';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -21,6 +21,7 @@ declare global {
|
||||
@customElement('dees-button-group')
|
||||
export class DeesButtonGroup extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Button';
|
||||
|
||||
@property()
|
||||
accessor label: string = '';
|
||||
|
||||
@@ -23,6 +23,7 @@ declare global {
|
||||
@customElement('dees-button')
|
||||
export class DeesButton extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Button';
|
||||
|
||||
@property({
|
||||
reflect: true,
|
||||
|
||||
@@ -23,6 +23,7 @@ declare global {
|
||||
@customElement('dees-chart-area')
|
||||
export class DeesChartArea extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Chart';
|
||||
|
||||
// instance
|
||||
@state()
|
||||
|
||||
@@ -29,6 +29,7 @@ export interface ILogEntry {
|
||||
@customElement('dees-chart-log')
|
||||
export class DeesChartLog extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Chart';
|
||||
|
||||
@property()
|
||||
accessor label: string = 'Server Logs';
|
||||
|
||||
@@ -27,6 +27,7 @@ declare global {
|
||||
@customElement('dees-dataview-codebox')
|
||||
export class DeesDataviewCodebox extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Data View';
|
||||
|
||||
@property()
|
||||
accessor progLang: string = 'typescript';
|
||||
|
||||
@@ -27,6 +27,7 @@ declare global {
|
||||
@customElement('dees-dataview-statusobject')
|
||||
export class DeesDataviewStatusobject extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Data View';
|
||||
|
||||
@property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@ declare global {
|
||||
@customElement('dees-form-submit')
|
||||
export class DeesFormSubmit extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Form';
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
|
||||
@@ -19,6 +19,7 @@ import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/i
|
||||
import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
|
||||
import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
|
||||
import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
|
||||
import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
|
||||
import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
|
||||
import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
|
||||
import { DeesTable } from '../../dees-table/index.js';
|
||||
@@ -37,6 +38,7 @@ const FORM_INPUT_TYPES = [
|
||||
DeesInputQuantitySelector,
|
||||
DeesInputRadiogroup,
|
||||
DeesInputText,
|
||||
DeesInputToggle,
|
||||
DeesInputTypelist,
|
||||
DeesTable,
|
||||
];
|
||||
@@ -53,6 +55,7 @@ export type TFormInputElement =
|
||||
| DeesInputQuantitySelector
|
||||
| DeesInputRadiogroup
|
||||
| DeesInputText
|
||||
| DeesInputToggle
|
||||
| DeesInputTypelist
|
||||
| DeesTable<any>;
|
||||
|
||||
@@ -65,6 +68,7 @@ declare global {
|
||||
@customElement('dees-form')
|
||||
export class DeesForm extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Form';
|
||||
|
||||
public name: string = 'myform';
|
||||
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
|
||||
|
||||
@@ -21,6 +21,7 @@ declare global {
|
||||
export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -54,6 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
|
||||
.value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
|
||||
></dees-input-code>
|
||||
`;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: String })
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
@customElement('dees-input-datepicker')
|
||||
export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
@property({ type: String })
|
||||
accessor value: string = '';
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
@customElement('dees-input-dropdown')
|
||||
export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ declare global {
|
||||
@customElement('dees-input-fileupload')
|
||||
export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor value: File[] = [];
|
||||
|
||||
@@ -17,6 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
export class DeesInputIban extends DeesInputBase<DeesInputIban> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@state()
|
||||
|
||||
@@ -23,6 +23,7 @@ declare global {
|
||||
export class DeesInputList extends DeesInputBase<DeesInputList> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Array })
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
@customElement('dees-input-multitoggle')
|
||||
export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
|
||||
@property()
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@state()
|
||||
|
||||
@@ -13,6 +13,7 @@ declare global {
|
||||
@customElement('dees-input-quantityselector')
|
||||
export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
|
||||
@customElement('dees-input-radiogroup')
|
||||
export class DeesInputRadiogroup extends DeesInputBase<string | object> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -28,6 +28,7 @@ declare global {
|
||||
@customElement('dees-input-richtext')
|
||||
export class DeesInputRichtext extends DeesInputBase<string> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
export class DeesInputTags extends DeesInputBase<DeesInputTags> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Array })
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
@customElement('dees-input-text')
|
||||
export class DeesInputText extends DeesInputBase {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import '../../dees-panel/dees-panel.js';
|
||||
import type { DeesInputToggle } from './dees-input-toggle.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
// Example of programmatic interaction
|
||||
const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
|
||||
const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
|
||||
const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
|
||||
|
||||
if (toggleAllOnBtn && toggleAllOffBtn) {
|
||||
toggleAllOnBtn.addEventListener('click', () => {
|
||||
featureToggles.forEach((toggle: DeesInputToggle) => {
|
||||
if (!toggle.disabled && !toggle.required) {
|
||||
toggle.value = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
toggleAllOffBtn.addEventListener('click', () => {
|
||||
featureToggles.forEach((toggle: DeesInputToggle) => {
|
||||
if (!toggle.disabled && !toggle.required) {
|
||||
toggle.value = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.horizontal-toggles {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.interactive-section {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.output-text {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
|
||||
padding: 8px;
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border-radius: 4px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-toggles {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
margin-top: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Enable feature'}
|
||||
.value=${false}
|
||||
.key=${'basic'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Active toggle'}
|
||||
.value=${true}
|
||||
.key=${'active'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'With description'}
|
||||
.value=${false}
|
||||
.description=${'This toggle has additional helper text explaining its purpose'}
|
||||
.key=${'withDesc'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Default (off)'}
|
||||
.value=${false}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Enabled (on)'}
|
||||
.value=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Disabled (off)'}
|
||||
.value=${false}
|
||||
.disabled=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Disabled (on)'}
|
||||
.value=${true}
|
||||
.disabled=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Required (always on)'}
|
||||
.value=${true}
|
||||
.required=${true}
|
||||
.description=${'This toggle cannot be turned off'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
||||
<div class="horizontal-toggles">
|
||||
<dees-input-toggle
|
||||
.label=${'WiFi'}
|
||||
.value=${true}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Bluetooth'}
|
||||
.value=${false}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'GPS'}
|
||||
.value=${true}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'NFC'}
|
||||
.value=${false}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
||||
<div class="settings-section">
|
||||
<h4 class="section-title">Notification Settings</h4>
|
||||
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Push notifications'}
|
||||
.value=${true}
|
||||
.description=${'Receive push notifications on your device'}
|
||||
.key=${'push'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Email notifications'}
|
||||
.value=${true}
|
||||
.description=${'Get important updates via email'}
|
||||
.key=${'email'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Sound'}
|
||||
.value=${false}
|
||||
.description=${'Play a sound for notifications'}
|
||||
.key=${'sound'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Vibration'}
|
||||
.value=${true}
|
||||
.description=${'Vibrate for notifications'}
|
||||
.key=${'vibration'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
|
||||
<div class="button-group">
|
||||
<dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
|
||||
<dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
|
||||
</div>
|
||||
|
||||
<div class="feature-toggles">
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Dark Mode'}
|
||||
.value=${true}
|
||||
.key=${'darkMode'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Auto-save'}
|
||||
.value=${true}
|
||||
.key=${'autoSave'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Spell check'}
|
||||
.value=${false}
|
||||
.key=${'spellCheck'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Developer mode'}
|
||||
.value=${false}
|
||||
.key=${'devMode'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Beta features'}
|
||||
.value=${false}
|
||||
.key=${'beta'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Airplane mode'}
|
||||
.value=${false}
|
||||
@newValue=${(event: CustomEvent) => {
|
||||
const output = document.querySelector('#airplane-output');
|
||||
if (output) {
|
||||
output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
|
||||
}
|
||||
}}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Do not disturb'}
|
||||
.value=${false}
|
||||
@newValue=${(event: CustomEvent) => {
|
||||
const output = document.querySelector('#dnd-output');
|
||||
if (output) {
|
||||
output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
|
||||
}
|
||||
}}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
|
||||
<div class="interactive-section">
|
||||
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
||||
<div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
@@ -0,0 +1,372 @@
|
||||
import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
|
||||
import { demoFunc } from './dees-input-toggle.demo.js';
|
||||
import { cssGeistFontFamily } from '../../00fonts.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-toggle': DeesInputToggle;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-toggle')
|
||||
export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property({ type: Boolean, reflect: true })
|
||||
accessor value: boolean = false;
|
||||
|
||||
/**
|
||||
* Knob position tracking (0 = off, maxTravel = on)
|
||||
*/
|
||||
private currentX = 0;
|
||||
|
||||
/**
|
||||
* Drag state
|
||||
*/
|
||||
private isDragging = false;
|
||||
private hasDragged = false;
|
||||
private startX = 0;
|
||||
|
||||
// Toggle dimensions
|
||||
private readonly trackWidth = 36;
|
||||
private readonly trackHeight = 20;
|
||||
private readonly knobSize = 14;
|
||||
private readonly padding = 2;
|
||||
private readonly maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.labelPosition = 'right'; // Toggle defaults to label on the right
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
...DeesInputBase.baseStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
width: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.maincontainer:hover .toggle-track {
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
||||
}
|
||||
|
||||
:host([value]) .toggle-track {
|
||||
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
|
||||
}
|
||||
|
||||
.toggle-track:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
|
||||
}
|
||||
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
|
||||
transition: left 0.15s ease, background 0.15s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.toggle-knob.dragging {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
:host([value]) .toggle-knob {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.maincontainer.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.toggle-track.disabled {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
}
|
||||
|
||||
/* Required state (locked on) */
|
||||
:host([required][value]) .toggle-track {
|
||||
background: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:host([required][value]) .toggle-knob {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 70%)')};
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
transition: color 0.15s ease;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.maincontainer:hover .toggle-label {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
||||
}
|
||||
|
||||
.maincontainer.disabled:hover .toggle-label {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.description-text {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
line-height: 1.5;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="input-wrapper">
|
||||
<div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.handleClick}">
|
||||
<div
|
||||
class="toggle-track ${this.disabled ? 'disabled' : ''}"
|
||||
tabindex="${this.disabled ? '-1' : '0'}"
|
||||
@keydown="${this.handleKeydown}"
|
||||
>
|
||||
<div
|
||||
class="toggle-knob"
|
||||
style="left: ${this.padding + this.currentX}px;"
|
||||
@pointerdown="${this.onPointerDown}"
|
||||
@pointermove="${this.onPointerMove}"
|
||||
@pointerup="${this.onPointerUp}"
|
||||
@pointercancel="${this.onPointerUp}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="label-container">
|
||||
${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
|
||||
${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
|
||||
await super.firstUpdated(_changedProperties);
|
||||
// Initialize knob position based on initial value
|
||||
if (this.required && !this.value) {
|
||||
this.value = true;
|
||||
}
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Click handler - toggles the value
|
||||
*/
|
||||
private async handleClick(event: MouseEvent) {
|
||||
if (this.isDragging || this.hasDragged) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.required) {
|
||||
// Bounce animation for required toggles
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
await new Promise((r) => setTimeout(r, 10));
|
||||
this.currentX = this.maxTravel - 3;
|
||||
this.requestUpdate();
|
||||
await domtools.plugins.smartdelay.delayFor(150);
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.value = !this.value;
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
|
||||
domtools.plugins.smartdelay.delayFor(0).then(() => {
|
||||
this.hasDragged = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer down - start dragging
|
||||
*/
|
||||
private onPointerDown(event: PointerEvent) {
|
||||
if (this.required || this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isDragging = true;
|
||||
this.startX = event.clientX - this.currentX;
|
||||
(event.target as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer move - track drag position
|
||||
*/
|
||||
private onPointerMove(event: PointerEvent) {
|
||||
if (!this.isDragging) return;
|
||||
const newX = event.clientX - this.startX;
|
||||
this.hasDragged = true;
|
||||
|
||||
const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
|
||||
if (toggleKnob) {
|
||||
toggleKnob.classList.add('dragging');
|
||||
}
|
||||
|
||||
this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer up - complete drag and snap to nearest side
|
||||
*/
|
||||
private onPointerUp(event: PointerEvent) {
|
||||
if (!this.isDragging) return;
|
||||
(event.target as HTMLElement).releasePointerCapture(event.pointerId);
|
||||
this.isDragging = false;
|
||||
|
||||
if (!this.hasDragged) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
|
||||
if (toggleKnob) {
|
||||
toggleKnob.classList.remove('dragging');
|
||||
}
|
||||
|
||||
// Snap to nearest side based on midpoint
|
||||
const midpoint = this.maxTravel / 2;
|
||||
this.value = this.currentX > midpoint;
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
|
||||
domtools.plugins.smartdelay.delayFor(0).then(() => {
|
||||
this.hasDragged = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync knob position when value is changed externally
|
||||
*/
|
||||
updated(changedProperties: Map<string, any>): void {
|
||||
super.updated(changedProperties);
|
||||
if (
|
||||
changedProperties.has('value') &&
|
||||
!this.isDragging &&
|
||||
!this.hasDragged
|
||||
) {
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Keyboard support
|
||||
*/
|
||||
private handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
this.handleClick(event as unknown as MouseEvent);
|
||||
}
|
||||
}
|
||||
|
||||
// DeesInputBase interface implementation
|
||||
public getValue(): boolean {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
public setValue(valueArg: boolean): void {
|
||||
this.value = valueArg;
|
||||
}
|
||||
|
||||
public focus(): void {
|
||||
const track = this.shadowRoot?.querySelector('.toggle-track');
|
||||
if (track) {
|
||||
(track as HTMLElement).focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
1
ts_web/elements/00group-input/dees-input-toggle/index.ts
Normal file
1
ts_web/elements/00group-input/dees-input-toggle/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './dees-input-toggle.js';
|
||||
@@ -16,6 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
|
||||
@customElement('dees-input-typelist')
|
||||
export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@@ -39,6 +39,7 @@ declare global {
|
||||
@customElement('dees-input-wysiwyg')
|
||||
export class DeesInputWysiwyg extends DeesInputBase<string> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
@property({ type: String })
|
||||
accessor value: string = '';
|
||||
|
||||
@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
|
||||
export * from './dees-input-searchselect/index.js';
|
||||
export * from './dees-input-tags/index.js';
|
||||
export * from './dees-input-text/index.js';
|
||||
export * from './dees-input-toggle/index.js';
|
||||
export * from './dees-input-typelist/index.js';
|
||||
export * from './dees-input-wysiwyg.js';
|
||||
export * from './profilepicture/dees-input-profilepicture.js';
|
||||
|
||||
@@ -25,6 +25,7 @@ export type ProfileShape = 'square' | 'round';
|
||||
@customElement('dees-input-profilepicture')
|
||||
export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
@property({ type: String })
|
||||
accessor value: string = ''; // Base64 encoded image or URL
|
||||
|
||||
@@ -15,6 +15,7 @@ declare global {
|
||||
@customElement('dees-pdf-preview')
|
||||
export class DeesPdfPreview extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'PDF';
|
||||
public static styles = previewStyles;
|
||||
|
||||
@property({ type: String })
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||||
import { keyed } from 'lit/directives/keyed.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
|
||||
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
||||
import { viewerStyles } from './styles.js';
|
||||
import { demo as demoFunc } from './demo.js';
|
||||
@@ -17,6 +15,7 @@ type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' |
|
||||
@customElement('dees-pdf-viewer')
|
||||
export class DeesPdfViewer extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'PDF';
|
||||
public static styles = viewerStyles;
|
||||
|
||||
@property({ type: String })
|
||||
@@ -196,8 +195,8 @@ export class DeesPdfViewer extends DeesElement {
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
${keyed(this.documentId, html`
|
||||
${repeat(
|
||||
${directives.keyed(this.documentId, html`
|
||||
${directives.repeat(
|
||||
this.thumbnailData,
|
||||
(item) => item.page,
|
||||
(item) => html`
|
||||
@@ -224,7 +223,7 @@ export class DeesPdfViewer extends DeesElement {
|
||||
</div>
|
||||
` : html`
|
||||
<div class="pages-container">
|
||||
${repeat(
|
||||
${directives.repeat(
|
||||
this.pageData,
|
||||
(item) => item.page,
|
||||
(item) => html`
|
||||
|
||||
@@ -21,6 +21,7 @@ declare global {
|
||||
export class DeesPdf extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html` <dees-pdf></dees-pdf> `;
|
||||
public static demoGroup = 'PDF';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -33,6 +33,7 @@ export interface IView {
|
||||
export class DeesSimpleAppDash extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Simple';
|
||||
// INSTANCE
|
||||
|
||||
@property()
|
||||
|
||||
@@ -20,7 +20,8 @@ declare global {
|
||||
@customElement('dees-simple-login')
|
||||
export class DeesSimpleLogin extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = demoFunc
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Simple';
|
||||
// INSTANCE
|
||||
|
||||
@property()
|
||||
|
||||
@@ -31,6 +31,7 @@ export class DeesWorkspaceDiffEditor extends DeesElement {
|
||||
.filePath=${'/demo/example.ts'}
|
||||
></dees-workspace-diff-editor>
|
||||
`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();
|
||||
|
||||
@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
|
||||
<dees-workspace-filetree></dees-workspace-filetree>
|
||||
</div>
|
||||
`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
|
||||
@@ -23,6 +23,7 @@ declare global {
|
||||
@customElement('dees-workspace-markdown')
|
||||
export class DeesWorkspaceMarkdown extends DeesElement {
|
||||
public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
|
||||
@@ -19,6 +19,7 @@ declare global {
|
||||
export class DeesWorkspaceMarkdownoutlet extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
|
||||
@@ -23,6 +23,7 @@ declare global {
|
||||
export class DeesWorkspaceMonaco extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// STATIC
|
||||
public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
|
||||
|
||||
@@ -39,6 +39,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
|
||||
]}
|
||||
></dees-workspace-terminal-preview>
|
||||
`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
/**
|
||||
* The command being displayed (shown in header)
|
||||
|
||||
@@ -37,6 +37,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
|
||||
const env = new WebContainerEnvironment();
|
||||
return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
|
||||
};
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
private resizeObserver: ResizeObserver;
|
||||
|
||||
@@ -197,6 +197,7 @@ testSmartPromise();
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
|
||||
@@ -29,23 +29,30 @@ export interface IStatsTile {
|
||||
title: string;
|
||||
value: number | string;
|
||||
unit?: string;
|
||||
type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text';
|
||||
|
||||
type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage';
|
||||
|
||||
// For gauge type
|
||||
gaugeOptions?: {
|
||||
min: number;
|
||||
max: number;
|
||||
thresholds?: Array<{value: number; color: string}>;
|
||||
};
|
||||
|
||||
|
||||
// For trend type
|
||||
trendData?: number[];
|
||||
|
||||
|
||||
// For multiPercentage type
|
||||
percentages?: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
color?: string;
|
||||
}>;
|
||||
|
||||
// Visual customization
|
||||
color?: string;
|
||||
icon?: string;
|
||||
description?: string;
|
||||
|
||||
|
||||
// Tile-specific actions
|
||||
actions?: plugins.tsclass.website.IMenuItem[];
|
||||
}
|
||||
@@ -191,7 +198,6 @@ export class DeesStatsGrid extends DeesElement {
|
||||
min-height: var(--content-min-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -274,6 +280,9 @@ export class DeesStatsGrid extends DeesElement {
|
||||
.percentage-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.percentage-value {
|
||||
@@ -291,6 +300,7 @@ export class DeesStatsGrid extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.percentage-fill {
|
||||
@@ -300,12 +310,69 @@ export class DeesStatsGrid extends DeesElement {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Multi Percentage Styles */
|
||||
.multi-percentage-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.multi-percentage-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.multi-percentage-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.multi-percentage-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.multi-percentage-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.multi-percentage-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.multi-percentage-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.multi-percentage-fill {
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Trend Styles */
|
||||
.trend-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trend-header {
|
||||
@@ -341,6 +408,7 @@ export class DeesStatsGrid extends DeesElement {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.trend-svg {
|
||||
@@ -464,6 +532,9 @@ export class DeesStatsGrid extends DeesElement {
|
||||
case 'trend':
|
||||
return this.renderTrend(tile);
|
||||
|
||||
case 'multiPercentage':
|
||||
return this.renderMultiPercentage(tile);
|
||||
|
||||
case 'text':
|
||||
return html`
|
||||
<div class="text-value" style="${tile.color ? `color: ${tile.color}` : ''}">
|
||||
@@ -595,6 +666,39 @@ export class DeesStatsGrid extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMultiPercentage(tile: IStatsTile): TemplateResult {
|
||||
if (!tile.percentages || tile.percentages.length === 0) {
|
||||
return html`<div class="tile-value">${tile.value}</div>`;
|
||||
}
|
||||
|
||||
// Limit to 3 percentages
|
||||
const items = tile.percentages.slice(0, 3);
|
||||
|
||||
return html`
|
||||
<div class="multi-percentage-wrapper">
|
||||
<div class="multi-percentage-items">
|
||||
${items.map(item => {
|
||||
const percentage = Math.min(100, Math.max(0, item.value));
|
||||
return html`
|
||||
<div class="multi-percentage-item">
|
||||
<div class="multi-percentage-header">
|
||||
<span class="multi-percentage-label">${item.label}</span>
|
||||
<span class="multi-percentage-value">${percentage}%</span>
|
||||
</div>
|
||||
<div class="multi-percentage-bar">
|
||||
<div
|
||||
class="multi-percentage-fill"
|
||||
style="width: ${percentage}%; ${item.color ? `background: ${item.color}` : ''}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async handleGridAction(action: plugins.tsclass.website.IMenuItem) {
|
||||
if (action.action) {
|
||||
await action.action();
|
||||
|
||||
Reference in New Issue
Block a user