Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 59a870c3bc | |||
| 13fa654c0f | |||
| 3616bbb9a7 | |||
| 27c071f7dc | |||
| ac1ef4e497 | |||
| 9c61c0542b |
29
changelog.md
29
changelog.md
@@ -1,5 +1,34 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-09 - 3.3.0 - feat(dees-appui-base)
|
||||
Add unified App UI API to dees-appui-base with ViewRegistry, AppRouter and StateManager
|
||||
|
||||
- Introduce ViewRegistry for declarative view registration and rendering (supports tag names, element classes and template functions).
|
||||
- Add AppRouter with hash/history/external/none modes, URL synchronization, navigate/back/forward and onRouteChange listener support.
|
||||
- Add StateManager to persist UI state (localStorage, sessionStorage or in-memory) with save/load/update/clear APIs.
|
||||
- Extend interfaces (interfaces/appconfig.ts) with IAppConfig, IViewDefinition, IRoutingConfig, IStatePersistenceConfig and IAppUIState.
|
||||
- Expose new public DeesAppuiBase methods: configure, navigateToView, getCurrentView, getUIState, restoreUIState, saveState, loadState, getViewRegistry, getRouter.
|
||||
- Maintain backward compatibility with existing property-based API and slot usage.
|
||||
- Export new modules (view.registry, app.router, state.manager) from dees-appui-base index and update element exports.
|
||||
|
||||
## 2025-12-08 - 3.2.0 - feat(dees-simple-appdash,dees-simple-login,dees-terminal)
|
||||
Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config
|
||||
|
||||
- Standardize icon usage to Lucide prefixes in dees-simple-appdash; add fallback handling for legacy icon names
|
||||
- Revamped dees-simple-appdash sidebar: updated spacing, typography, header icon wrapper, scrollbar styling, section labels, hover/selected states, and visual indicators
|
||||
- Change 'Logout' label to 'Sign out' in dees-simple-appdash and add explicit status classes for controlbar (connected, terminal)
|
||||
- Improve terminal UX: smoother launch/close animations, updated shadow and sizing logic in dees-simple-appdash
|
||||
- Add background property to dees-terminal, sync it to a CSS variable and apply it to xterm theme for configurable terminal background
|
||||
- Redesign dees-simple-login: new header/subheader, card layout, spacing, and updated submit text to 'Sign in'
|
||||
- Bump devDependency @git.zone/tswatch to ^2.3.5
|
||||
|
||||
## 2025-12-08 - 3.1.2 - fix(DeesAppuiMainmenu, DeesAppuiSecondarymenu)
|
||||
Add position: relative to main and secondary app UI menus to fix positioning of overlays and tooltips
|
||||
|
||||
- ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts: add `position: relative` to host styles
|
||||
- ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts: add `position: relative` to host styles
|
||||
- Fixes incorrect positioning for absolutely positioned children (tooltips, overlays, badges) inside the main and secondary menus
|
||||
|
||||
## 2025-12-08 - 3.1.1 - fix(dees-appui)
|
||||
Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.1.1",
|
||||
"version": "3.3.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",
|
||||
@@ -48,7 +48,7 @@
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tstest": "^3.1.3",
|
||||
"@git.zone/tswatch": "^2.3.2",
|
||||
"@git.zone/tswatch": "^2.3.5",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^6.0.3",
|
||||
"@types/node": "^24.10.1"
|
||||
|
||||
75
pnpm-lock.yaml
generated
75
pnpm-lock.yaml
generated
@@ -98,10 +98,10 @@ importers:
|
||||
version: 2.6.3
|
||||
'@git.zone/tstest':
|
||||
specifier: ^3.1.3
|
||||
version: 3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)
|
||||
version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
|
||||
'@git.zone/tswatch':
|
||||
specifier: ^2.3.2
|
||||
version: 2.3.2(@tiptap/pm@2.27.1)
|
||||
specifier: ^2.3.5
|
||||
version: 2.3.5(@tiptap/pm@2.27.1)
|
||||
'@push.rocks/projectinfo':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
@@ -126,8 +126,8 @@ packages:
|
||||
'@api.global/typedserver@3.0.80':
|
||||
resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
|
||||
|
||||
'@api.global/typedserver@7.11.0':
|
||||
resolution: {integrity: sha512-DHB3oGRgiLbAeRRFAlXIbjvNACw9YqsfOtLVCPq0nUcGMGSsUQ4SNrJ5OGk9GhVF8bl/jn8SF8w08rnApmZ0uw==}
|
||||
'@api.global/typedserver@7.11.1':
|
||||
resolution: {integrity: sha512-1vQUJ2/DszDFHVkCmqqBy/qNiIP/jltFN3KxHtoNLxjbdBZYfw1Zd1Odjs6YSPalAD0p8wQ/alJblJEAewNQVg==}
|
||||
|
||||
'@api.global/typedsocket@3.1.1':
|
||||
resolution: {integrity: sha512-Wkz3NlhmfdZMKqXXI2c2dMtGGmSmhdOegZiziL+9b2mqPYdc7Gd8AZRdEOKvbSoIvc9G22/5BEadIWHrfq66TA==}
|
||||
@@ -316,6 +316,9 @@ packages:
|
||||
'@borewit/text-codec@0.1.1':
|
||||
resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
|
||||
|
||||
'@cfworker/json-schema@4.1.1':
|
||||
resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
|
||||
|
||||
'@cloudflare/workers-types@4.20251205.0':
|
||||
resolution: {integrity: sha512-7pup7fYkuQW5XD8RUS/vkxF9SXlrGyCXuZ4ro3uVQvca/GTeSa+8bZ8T4wbq1Aea5lmLIGSlKbhl2msME7bRBA==}
|
||||
|
||||
@@ -329,8 +332,8 @@ packages:
|
||||
'@dabh/diagnostics@2.0.8':
|
||||
resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
|
||||
|
||||
'@design.estate/dees-catalog@2.0.7':
|
||||
resolution: {integrity: sha512-rshv71LqA2PXaEEf6C1/hv6Yu2ovRuWaZhdnUznCDpjdYgxBq7PHkiHCNvg/m6wJ9Ue/03HcuuPqtj2bksgAag==}
|
||||
'@design.estate/dees-catalog@3.1.2':
|
||||
resolution: {integrity: sha512-T4ZhoZzl6NAWGhrz00MDFla5syeMz53euZ+QcBftRMmHuqPHDU/JlBi+K2SmILtnRfWH/lGYWBKugYop6q0chg==}
|
||||
|
||||
'@design.estate/dees-comms@1.0.30':
|
||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||
@@ -552,8 +555,8 @@ packages:
|
||||
resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tswatch@2.3.2':
|
||||
resolution: {integrity: sha512-M4B4D7BlfGb3ssgMHFMHc+hhEmxY6WzNd87ihuLReXMD+twjMA99u2hyAvAnboa3lERlixvHz/nN+rdbGH5VlA==}
|
||||
'@git.zone/tswatch@2.3.5':
|
||||
resolution: {integrity: sha512-wYekG7Q/wg5uptXHPHhVi7dHq19QnLoevQpcpAzF6hMiNbOozN3+4zxOktyJBl6EHUYcFvHXA4fZ4bkJpo5TcA==}
|
||||
hasBin: true
|
||||
|
||||
'@hapi/bourne@3.0.0':
|
||||
@@ -981,8 +984,8 @@ packages:
|
||||
'@push.rocks/smarts3@3.0.3':
|
||||
resolution: {integrity: sha512-Y9nXMwurthJ9Z7yi0RwjhPFUC58aY8Mhia8kFo6Xj1tBM4LE8Oxg/ydejF7otHqQGr3QyqV5C4YrDEG17rUuzg==}
|
||||
|
||||
'@push.rocks/smartserve@1.3.0':
|
||||
resolution: {integrity: sha512-4ZR9uKVWXVAPzU5wtCQ1mA9jNmOlUl3oGr50EceLT6803UwbNcst7Ek/BhzSaZ0qb2pz0jO5T/V+icgvZ1/5ww==}
|
||||
'@push.rocks/smartserve@1.4.0':
|
||||
resolution: {integrity: sha512-cEoXZQSBX3pOv9AyhxRPkrMAWzs2XQhTBmW95BFtTSNzZdji0XgqUu92p7iuF+NVuTFX1QZ8+dbCClLCoRRW7g==}
|
||||
|
||||
'@push.rocks/smartshell@3.3.0':
|
||||
resolution: {integrity: sha512-m0w618H6YBs+vXGz1CgS4nPi5CUAnqRtckcS9/koGwfcIx1IpjqmiP47BoCTbdgcv0IPUxQVBG1IXTHPuZ8Z5g==}
|
||||
@@ -1020,8 +1023,8 @@ packages:
|
||||
'@push.rocks/smartversion@3.0.5':
|
||||
resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
|
||||
|
||||
'@push.rocks/smartwatch@5.1.0':
|
||||
resolution: {integrity: sha512-vf4yT8F8V+vstnrr0sh64rGF/8Z8dZlLR4T95KcVtm7F0H3dKxLcvZ3HT0xayw0gQow8+CCtDdts9Wgq5ipJTw==}
|
||||
'@push.rocks/smartwatch@6.1.1':
|
||||
resolution: {integrity: sha512-wmhLKu9bdpvRcjOfitJOi4jsNKD7S2hVlVq6fAv3IhB2ZbRlSB+Hai4DwOlrdUZaWrg+dFIZU+/ifTOozOPiMg==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@push.rocks/smartxml@2.0.0':
|
||||
@@ -4656,11 +4659,11 @@ snapshots:
|
||||
'@push.rocks/webrequest': 3.0.37
|
||||
'@push.rocks/webstream': 1.0.10
|
||||
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.4.0)
|
||||
'@cloudflare/workers-types': 4.20251205.0
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -4704,13 +4707,13 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedserver@7.11.0(@tiptap/pm@2.27.1)':
|
||||
'@api.global/typedserver@7.11.1(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.4.0)
|
||||
'@cloudflare/workers-types': 4.20251205.0
|
||||
'@design.estate/dees-catalog': 2.0.7(@tiptap/pm@2.27.1)
|
||||
'@design.estate/dees-catalog': 3.1.2(@tiptap/pm@2.27.1)
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -4731,11 +4734,11 @@ snapshots:
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrequest': 5.0.1
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
'@push.rocks/smartsitemap': 2.0.4
|
||||
'@push.rocks/smartstream': 3.2.5
|
||||
'@push.rocks/smarttime': 4.1.1
|
||||
'@push.rocks/smartwatch': 5.1.0
|
||||
'@push.rocks/smartwatch': 6.1.1
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@push.rocks/webrequest': 4.0.1
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
@@ -4750,7 +4753,7 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
@@ -4761,7 +4764,7 @@ snapshots:
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
optionalDependencies:
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- bufferutil
|
||||
@@ -4770,7 +4773,7 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
@@ -4779,7 +4782,7 @@ snapshots:
|
||||
'@push.rocks/smartjson': 5.2.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
|
||||
@@ -5274,6 +5277,8 @@ snapshots:
|
||||
|
||||
'@borewit/text-codec@0.1.1': {}
|
||||
|
||||
'@cfworker/json-schema@4.1.1': {}
|
||||
|
||||
'@cloudflare/workers-types@4.20251205.0': {}
|
||||
|
||||
'@colors/colors@1.6.0': {}
|
||||
@@ -5288,7 +5293,7 @@ snapshots:
|
||||
enabled: 2.0.0
|
||||
kuler: 2.0.0
|
||||
|
||||
'@design.estate/dees-catalog@2.0.7(@tiptap/pm@2.27.1)':
|
||||
'@design.estate/dees-catalog@3.1.2(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
@@ -5564,9 +5569,9 @@ snapshots:
|
||||
'@push.rocks/smartshell': 3.3.0
|
||||
tsx: 4.21.0
|
||||
|
||||
'@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)':
|
||||
'@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
|
||||
'@git.zone/tsbundle': 2.6.3
|
||||
'@git.zone/tsrun': 2.0.0
|
||||
'@push.rocks/consolecolor': 2.0.3
|
||||
@@ -5613,9 +5618,9 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@git.zone/tswatch@2.3.2(@tiptap/pm@2.27.1)':
|
||||
'@git.zone/tswatch@2.3.5(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 7.11.0(@tiptap/pm@2.27.1)
|
||||
'@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
|
||||
'@git.zone/tsbundle': 2.6.3
|
||||
'@git.zone/tsrun': 2.0.0
|
||||
'@push.rocks/early': 4.0.4
|
||||
@@ -5626,7 +5631,7 @@ snapshots:
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
'@push.rocks/smartlog-destination-local': 9.0.2
|
||||
'@push.rocks/smartshell': 3.3.0
|
||||
'@push.rocks/smartwatch': 5.1.0
|
||||
'@push.rocks/smartwatch': 6.1.1
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
@@ -6555,9 +6560,10 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- aws-crt
|
||||
|
||||
'@push.rocks/smartserve@1.3.0':
|
||||
'@push.rocks/smartserve@1.4.0':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@cfworker/json-schema': 4.1.1
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
@@ -6588,7 +6594,7 @@ snapshots:
|
||||
'@push.rocks/smartsocket@2.1.0':
|
||||
dependencies:
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
|
||||
'@push.rocks/isohash': 2.0.1
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -6672,7 +6678,7 @@ snapshots:
|
||||
'@types/semver': 7.7.1
|
||||
semver: 7.7.3
|
||||
|
||||
'@push.rocks/smartwatch@5.1.0':
|
||||
'@push.rocks/smartwatch@6.1.1':
|
||||
dependencies:
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
@@ -6715,20 +6721,17 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- '@aws-sdk/credential-providers'
|
||||
- '@mongodb-js/zstd'
|
||||
- '@nuxt/kit'
|
||||
- aws-crt
|
||||
- bare-abort-controller
|
||||
- bufferutil
|
||||
- gcp-metadata
|
||||
- kerberos
|
||||
- mongodb-client-encryption
|
||||
- react
|
||||
- react-native-b4a
|
||||
- snappy
|
||||
- socks
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@push.rocks/taskbuffer@3.5.0':
|
||||
dependencies:
|
||||
|
||||
122
readme.hints.md
122
readme.hints.md
@@ -680,4 +680,124 @@ According to Lit's documentation (https://lit.dev/docs/components/decorators/#de
|
||||
- All unit tests passing
|
||||
- Manual testing of key components verified
|
||||
- No regressions detected
|
||||
- Focus management and interactions working correctly
|
||||
- Focus management and interactions working correctly
|
||||
|
||||
## Enhanced AppUI API (2025-12-08)
|
||||
|
||||
The `dees-appui-base` component has been enhanced with a unified configuration API for building real-world applications.
|
||||
|
||||
### New Modules:
|
||||
|
||||
1. **ViewRegistry** (`view.registry.ts`)
|
||||
- Manages view definitions and their lifecycle
|
||||
- Supports tag names, element classes, and template functions as view content
|
||||
- Methods: register, get, renderView, findByRoute
|
||||
|
||||
2. **AppRouter** (`app.router.ts`)
|
||||
- Built-in routing with hash or history mode
|
||||
- External router support for framework integration
|
||||
- Methods: navigate, back, forward, onRouteChange
|
||||
|
||||
3. **StateManager** (`state.manager.ts`)
|
||||
- Persists UI state (collapsed menus, selections, current view)
|
||||
- Supports localStorage, sessionStorage, or memory storage
|
||||
- Methods: save, load, update, clear
|
||||
|
||||
### New Interfaces (in `interfaces/appconfig.ts`):
|
||||
|
||||
```typescript
|
||||
interface IAppConfig {
|
||||
branding?: { logoIcon?: string; logoText?: string };
|
||||
appBar?: IAppBarConfig;
|
||||
views: IViewDefinition[];
|
||||
mainMenu?: IMainMenuConfig;
|
||||
routing?: IRoutingConfig;
|
||||
statePersistence?: IStatePersistenceConfig;
|
||||
onViewChange?: (viewId: string, view: IViewDefinition) => void;
|
||||
}
|
||||
|
||||
interface IViewDefinition {
|
||||
id: string;
|
||||
name: string;
|
||||
iconName?: string;
|
||||
content: string | (new () => HTMLElement) | (() => TemplateResult);
|
||||
secondaryMenu?: ISecondaryMenuGroup[];
|
||||
contentTabs?: ITab[];
|
||||
route?: string;
|
||||
}
|
||||
|
||||
interface IRoutingConfig {
|
||||
mode: 'hash' | 'history' | 'external' | 'none';
|
||||
basePath?: string;
|
||||
defaultView?: string;
|
||||
syncUrl?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
### New Public Methods on DeesAppuiBase:
|
||||
|
||||
```typescript
|
||||
// Configure with unified config
|
||||
configure(config: IAppConfig): void
|
||||
|
||||
// Navigation
|
||||
navigateToView(viewId: string): boolean
|
||||
getCurrentView(): IViewDefinition | undefined
|
||||
|
||||
// State management
|
||||
getUIState(): IAppUIState
|
||||
restoreUIState(state: IAppUIState): void
|
||||
saveState(): void
|
||||
loadState(): boolean
|
||||
|
||||
// Access internals
|
||||
getViewRegistry(): ViewRegistry
|
||||
getRouter(): AppRouter | null
|
||||
```
|
||||
|
||||
### Usage Example (New Unified Config API):
|
||||
|
||||
```typescript
|
||||
import type { IAppConfig } from '@design.estate/dees-catalog';
|
||||
|
||||
const config: IAppConfig = {
|
||||
branding: { logoIcon: 'lucide:box', logoText: 'My App' },
|
||||
views: [
|
||||
{ id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
|
||||
{ id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
|
||||
],
|
||||
mainMenu: {
|
||||
sections: [{ views: ['dashboard'] }],
|
||||
bottomItems: ['settings'],
|
||||
},
|
||||
routing: { mode: 'hash', defaultView: 'dashboard' },
|
||||
statePersistence: { enabled: true, storage: 'localStorage' },
|
||||
};
|
||||
|
||||
html`<dees-appui-base .config=${config}></dees-appui-base>`;
|
||||
```
|
||||
|
||||
### Backward Compatibility:
|
||||
|
||||
The existing property-based API still works:
|
||||
|
||||
```typescript
|
||||
html`
|
||||
<dees-appui-base
|
||||
.mainmenuGroups=${groups}
|
||||
.secondarymenuGroups=${secondaryGroups}
|
||||
@mainmenu-tab-select=${handler}
|
||||
>
|
||||
<div slot="maincontent">...</div>
|
||||
</dees-appui-base>
|
||||
`;
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
|
||||
- **Declarative View Registry**: Map menu items to view components
|
||||
- **Built-in Routing**: Hash or history mode with URL synchronization
|
||||
- **External Router Support**: Integrate with Angular Router or other frameworks
|
||||
- **State Persistence**: Save/restore collapsed menus, selections, and current view
|
||||
- **View-specific Menus**: Each view can define its own secondary menu and tabs
|
||||
- **Full Backward Compatibility**: Existing code continues to work
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.1.1',
|
||||
version: '3.3.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
271
ts_web/elements/00group-appui/dees-appui-base/app.router.ts
Normal file
271
ts_web/elements/00group-appui/dees-appui-base/app.router.ts
Normal file
@@ -0,0 +1,271 @@
|
||||
import type { IRoutingConfig, IViewDefinition } from '../../interfaces/appconfig.js';
|
||||
import type { ViewRegistry } from './view.registry.js';
|
||||
|
||||
export type TRouteChangeCallback = (viewId: string, params?: Record<string, string>) => void;
|
||||
|
||||
/**
|
||||
* Router for managing view navigation and URL synchronization
|
||||
*/
|
||||
export class AppRouter {
|
||||
private config: Required<Omit<IRoutingConfig, 'notFound'>> & Pick<IRoutingConfig, 'notFound'>;
|
||||
private viewRegistry: ViewRegistry;
|
||||
private listeners: Set<TRouteChangeCallback> = new Set();
|
||||
private currentViewId: string | null = null;
|
||||
private isInitialized: boolean = false;
|
||||
|
||||
constructor(config: IRoutingConfig, viewRegistry: ViewRegistry) {
|
||||
this.config = {
|
||||
mode: config.mode,
|
||||
basePath: config.basePath || '',
|
||||
defaultView: config.defaultView || '',
|
||||
syncUrl: config.syncUrl ?? true,
|
||||
notFound: config.notFound,
|
||||
};
|
||||
this.viewRegistry = viewRegistry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the router
|
||||
*/
|
||||
public init(): void {
|
||||
if (this.isInitialized) return;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
window.addEventListener('hashchange', this.handleHashChange);
|
||||
// Check initial hash
|
||||
const initialView = this.getViewFromHash();
|
||||
if (initialView) {
|
||||
this.navigate(initialView, { source: 'initial' });
|
||||
} else if (this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
} else if (this.config.mode === 'history') {
|
||||
window.addEventListener('popstate', this.handlePopState);
|
||||
// Check initial path
|
||||
const initialView = this.getViewFromPath();
|
||||
if (initialView) {
|
||||
this.navigate(initialView, { source: 'initial' });
|
||||
} else if (this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
} else if (this.config.mode === 'none' && this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
// For 'external' mode, we don't set up listeners - the external router handles it
|
||||
|
||||
this.isInitialized = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to a view by ID
|
||||
*/
|
||||
public navigate(
|
||||
viewId: string,
|
||||
options: {
|
||||
source?: 'navigation' | 'popstate' | 'initial' | 'programmatic';
|
||||
replace?: boolean;
|
||||
params?: Record<string, string>;
|
||||
} = {}
|
||||
): boolean {
|
||||
const { source = 'programmatic', replace = false, params } = options;
|
||||
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (!view) {
|
||||
console.warn(`Cannot navigate to unknown view: ${viewId}`);
|
||||
if (this.config.notFound) {
|
||||
if (typeof this.config.notFound === 'function') {
|
||||
this.config.notFound();
|
||||
} else {
|
||||
return this.navigate(this.config.notFound, { source, replace: true });
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const previousViewId = this.currentViewId;
|
||||
this.currentViewId = viewId;
|
||||
|
||||
// Update URL if configured
|
||||
if (this.config.syncUrl && this.config.mode !== 'none' && this.config.mode !== 'external') {
|
||||
this.updateUrl(view, replace);
|
||||
}
|
||||
|
||||
// Notify listeners
|
||||
this.notifyListeners(viewId, params);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate back in history
|
||||
*/
|
||||
public back(): void {
|
||||
if (this.config.mode === 'hash' || this.config.mode === 'history') {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate forward in history
|
||||
*/
|
||||
public forward(): void {
|
||||
if (this.config.mode === 'hash' || this.config.mode === 'history') {
|
||||
window.history.forward();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current view ID
|
||||
*/
|
||||
public getCurrentViewId(): string | null {
|
||||
return this.currentViewId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a route change listener
|
||||
*/
|
||||
public onRouteChange(callback: TRouteChangeCallback): () => void {
|
||||
this.listeners.add(callback);
|
||||
return () => this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle external navigation (for external router mode)
|
||||
*/
|
||||
public handleExternalNavigation(viewId: string, params?: Record<string, string>): void {
|
||||
if (this.config.mode !== 'external') {
|
||||
console.warn('handleExternalNavigation should only be used in external mode');
|
||||
}
|
||||
|
||||
const previousViewId = this.currentViewId;
|
||||
this.currentViewId = viewId;
|
||||
this.notifyListeners(viewId, params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync state with URL (for external router integration)
|
||||
*/
|
||||
public syncWithUrl(): string | null {
|
||||
if (this.config.mode === 'hash') {
|
||||
return this.getViewFromHash();
|
||||
} else if (this.config.mode === 'history') {
|
||||
return this.getViewFromPath();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current route from the URL
|
||||
*/
|
||||
public getCurrentRoute(): string {
|
||||
if (this.config.mode === 'hash') {
|
||||
return window.location.hash.slice(1) || '';
|
||||
} else if (this.config.mode === 'history') {
|
||||
let path = window.location.pathname;
|
||||
if (this.config.basePath && path.startsWith(this.config.basePath)) {
|
||||
path = path.slice(this.config.basePath.length);
|
||||
}
|
||||
return path.replace(/^\//, '');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a URL for a view
|
||||
*/
|
||||
public buildUrl(viewId: string): string {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
const route = view?.route || viewId;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
return `#${route}`;
|
||||
} else if (this.config.mode === 'history') {
|
||||
return `${this.config.basePath}/${route}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy the router
|
||||
*/
|
||||
public destroy(): void {
|
||||
if (this.config.mode === 'hash') {
|
||||
window.removeEventListener('hashchange', this.handleHashChange);
|
||||
} else if (this.config.mode === 'history') {
|
||||
window.removeEventListener('popstate', this.handlePopState);
|
||||
}
|
||||
this.listeners.clear();
|
||||
this.isInitialized = false;
|
||||
}
|
||||
|
||||
// Private methods
|
||||
|
||||
private handleHashChange = (): void => {
|
||||
const viewId = this.getViewFromHash();
|
||||
if (viewId && viewId !== this.currentViewId) {
|
||||
this.navigate(viewId, { source: 'popstate' });
|
||||
}
|
||||
};
|
||||
|
||||
private handlePopState = (): void => {
|
||||
const viewId = this.getViewFromPath();
|
||||
if (viewId && viewId !== this.currentViewId) {
|
||||
this.navigate(viewId, { source: 'popstate' });
|
||||
}
|
||||
};
|
||||
|
||||
private getViewFromHash(): string | null {
|
||||
const hash = window.location.hash.slice(1); // Remove #
|
||||
if (!hash) return null;
|
||||
|
||||
// Try to find view by route
|
||||
const view = this.viewRegistry.findByRoute(hash);
|
||||
return view?.id || null;
|
||||
}
|
||||
|
||||
private getViewFromPath(): string | null {
|
||||
let path = window.location.pathname;
|
||||
|
||||
// Remove base path if configured
|
||||
if (this.config.basePath) {
|
||||
if (path.startsWith(this.config.basePath)) {
|
||||
path = path.slice(this.config.basePath.length);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove leading slash
|
||||
path = path.replace(/^\//, '');
|
||||
|
||||
if (!path) return null;
|
||||
|
||||
const view = this.viewRegistry.findByRoute(path);
|
||||
return view?.id || null;
|
||||
}
|
||||
|
||||
private updateUrl(view: IViewDefinition, replace: boolean): void {
|
||||
const route = view.route || view.id;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
const newHash = `#${route}`;
|
||||
if (replace) {
|
||||
window.history.replaceState(null, '', newHash);
|
||||
} else {
|
||||
window.history.pushState(null, '', newHash);
|
||||
}
|
||||
} else if (this.config.mode === 'history') {
|
||||
const basePath = this.config.basePath || '';
|
||||
const newPath = `${basePath}/${route}`;
|
||||
if (replace) {
|
||||
window.history.replaceState({ viewId: view.id }, '', newPath);
|
||||
} else {
|
||||
window.history.pushState({ viewId: view.id }, '', newPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private notifyListeners(viewId: string, params?: Record<string, string>): void {
|
||||
for (const listener of this.listeners) {
|
||||
listener(viewId, params);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -17,6 +17,11 @@ import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-
|
||||
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
|
||||
import { demoFunc } from './dees-appui-base.demo.js';
|
||||
|
||||
// New module imports
|
||||
import { ViewRegistry } from './view.registry.js';
|
||||
import { AppRouter } from './app.router.js';
|
||||
import { StateManager } from './state.manager.js';
|
||||
|
||||
// Import child components
|
||||
import '../dees-appui-appbar/index.js';
|
||||
import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
|
||||
@@ -116,6 +121,19 @@ export class DeesAppuiBase extends DeesElement {
|
||||
@state()
|
||||
accessor activitylog: DeesAppuiActivitylog | undefined = undefined;
|
||||
|
||||
// NEW: Unified config property
|
||||
@property({ type: Object })
|
||||
accessor config: interfaces.IAppConfig | undefined = undefined;
|
||||
|
||||
// NEW: Current view state
|
||||
@state()
|
||||
accessor currentView: interfaces.IViewDefinition | undefined = undefined;
|
||||
|
||||
// NEW: Internal services (not reactive, managed internally)
|
||||
private viewRegistry: ViewRegistry = new ViewRegistry();
|
||||
private router: AppRouter | null = null;
|
||||
private stateManager: StateManager | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@@ -155,6 +173,15 @@ export class DeesAppuiBase extends DeesElement {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* View container for dynamically loaded views */
|
||||
.view-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.view-container:empty {
|
||||
display: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -200,6 +227,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
<dees-appui-maincontent
|
||||
.tabs=${this.maincontentTabs}
|
||||
>
|
||||
<div class="view-container"></div>
|
||||
<slot name="maincontent"></slot>
|
||||
</dees-appui-maincontent>
|
||||
<dees-appui-activitylog></dees-appui-activitylog>
|
||||
@@ -214,6 +242,24 @@ export class DeesAppuiBase extends DeesElement {
|
||||
this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
|
||||
this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
|
||||
this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
|
||||
|
||||
// Initialize from config if provided
|
||||
if (this.config) {
|
||||
this.applyConfig(this.config);
|
||||
|
||||
// Restore state if enabled
|
||||
if (this.config.statePersistence?.enabled) {
|
||||
this.loadState();
|
||||
}
|
||||
|
||||
// Initialize router after state restore
|
||||
this.router?.init();
|
||||
}
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
await super.disconnectedCallback();
|
||||
this.router?.destroy();
|
||||
}
|
||||
|
||||
// Event handlers for appbar
|
||||
@@ -295,4 +341,242 @@ export class DeesAppuiBase extends DeesElement {
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// NEW: Public methods for unified config API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Configure the app shell with a unified config object
|
||||
*/
|
||||
public configure(config: interfaces.IAppConfig): void {
|
||||
this.config = config;
|
||||
this.applyConfig(config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to a view by ID
|
||||
*/
|
||||
public navigateToView(viewId: string): boolean {
|
||||
if (this.router) {
|
||||
return this.router.navigate(viewId);
|
||||
}
|
||||
|
||||
// Fallback for non-routed mode
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (view) {
|
||||
this.loadView(view);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current view
|
||||
*/
|
||||
public getCurrentView(): interfaces.IViewDefinition | undefined {
|
||||
return this.currentView;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get UI state for serialization
|
||||
*/
|
||||
public getUIState(): interfaces.IAppUIState {
|
||||
return {
|
||||
currentViewId: this.currentView?.id,
|
||||
mainMenuCollapsed: this.mainmenuCollapsed,
|
||||
secondaryMenuCollapsed: this.secondarymenuCollapsed,
|
||||
secondaryMenuSelectedKey: this.secondarymenuSelectedItem?.key,
|
||||
collapsedGroups: [], // TODO: Get from secondarymenu if needed
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore UI state from a state object
|
||||
*/
|
||||
public restoreUIState(state: interfaces.IAppUIState): void {
|
||||
if (state.mainMenuCollapsed !== undefined) {
|
||||
this.mainmenuCollapsed = state.mainMenuCollapsed;
|
||||
}
|
||||
if (state.secondaryMenuCollapsed !== undefined) {
|
||||
this.secondarymenuCollapsed = state.secondaryMenuCollapsed;
|
||||
}
|
||||
if (state.currentViewId) {
|
||||
this.navigateToView(state.currentViewId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current UI state
|
||||
*/
|
||||
public saveState(): void {
|
||||
this.stateManager?.save(this.getUIState());
|
||||
}
|
||||
|
||||
/**
|
||||
* Load and restore saved UI state
|
||||
*/
|
||||
public loadState(): boolean {
|
||||
const state = this.stateManager?.load();
|
||||
if (state) {
|
||||
this.restoreUIState(state);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get access to the view registry
|
||||
*/
|
||||
public getViewRegistry(): ViewRegistry {
|
||||
return this.viewRegistry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get access to the router
|
||||
*/
|
||||
public getRouter(): AppRouter | null {
|
||||
return this.router;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// NEW: Private helper methods
|
||||
// ==========================================
|
||||
|
||||
private applyConfig(config: interfaces.IAppConfig): void {
|
||||
// Register views
|
||||
if (config.views) {
|
||||
this.viewRegistry.clear();
|
||||
this.viewRegistry.registerAll(config.views);
|
||||
}
|
||||
|
||||
// Apply branding
|
||||
if (config.branding) {
|
||||
this.mainmenuLogoIcon = config.branding.logoIcon || '';
|
||||
this.mainmenuLogoText = config.branding.logoText || '';
|
||||
}
|
||||
|
||||
// Apply app bar config
|
||||
if (config.appBar) {
|
||||
this.appbarMenuItems = config.appBar.menuItems || [];
|
||||
this.appbarBreadcrumbs = config.appBar.breadcrumbs || '';
|
||||
this.appbarBreadcrumbSeparator = config.appBar.breadcrumbSeparator || ' > ';
|
||||
this.appbarShowWindowControls = config.appBar.showWindowControls ?? true;
|
||||
this.appbarShowSearch = config.appBar.showSearch ?? false;
|
||||
this.appbarUser = config.appBar.user;
|
||||
this.appbarProfileMenuItems = config.appBar.profileMenuItems || [];
|
||||
}
|
||||
|
||||
// Build main menu from view references
|
||||
if (config.mainMenu) {
|
||||
this.mainmenuGroups = this.buildMainMenuGroups(config);
|
||||
this.mainmenuBottomTabs = this.buildBottomTabs(config);
|
||||
}
|
||||
|
||||
// Initialize state manager
|
||||
if (config.statePersistence) {
|
||||
this.stateManager = new StateManager(config.statePersistence);
|
||||
}
|
||||
|
||||
// Initialize router
|
||||
if (config.routing && config.routing.mode !== 'none') {
|
||||
this.router = new AppRouter(config.routing, this.viewRegistry);
|
||||
this.router.onRouteChange((viewId) => {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (view) {
|
||||
this.loadView(view);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Bind event callbacks
|
||||
if (config.onViewChange) {
|
||||
this.addEventListener('view-change', ((e: CustomEvent) => {
|
||||
config.onViewChange!(e.detail.viewId, e.detail.view);
|
||||
}) as EventListener);
|
||||
}
|
||||
|
||||
if (config.onSearch) {
|
||||
this.addEventListener('appbar-search-click', () => {
|
||||
config.onSearch!();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private buildMainMenuGroups(config: interfaces.IAppConfig): interfaces.IMenuGroup[] {
|
||||
if (!config.mainMenu?.sections) return [];
|
||||
|
||||
return config.mainMenu.sections.map((section) => ({
|
||||
name: section.name,
|
||||
tabs: section.views
|
||||
.map((viewId) => {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (!view) {
|
||||
console.warn(`View "${viewId}" not found in registry`);
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
key: view.name,
|
||||
iconName: view.iconName,
|
||||
action: () => this.navigateToView(viewId),
|
||||
};
|
||||
})
|
||||
.filter(Boolean) as interfaces.ITab[],
|
||||
}));
|
||||
}
|
||||
|
||||
private buildBottomTabs(config: interfaces.IAppConfig): interfaces.ITab[] {
|
||||
if (!config.mainMenu?.bottomItems) return [];
|
||||
|
||||
return config.mainMenu.bottomItems
|
||||
.map((viewId) => {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (!view) {
|
||||
console.warn(`View "${viewId}" not found in registry`);
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
key: view.name,
|
||||
iconName: view.iconName,
|
||||
action: () => this.navigateToView(viewId),
|
||||
};
|
||||
})
|
||||
.filter(Boolean) as interfaces.ITab[];
|
||||
}
|
||||
|
||||
private loadView(view: interfaces.IViewDefinition): void {
|
||||
const previousView = this.currentView;
|
||||
this.currentView = view;
|
||||
|
||||
// Update secondary menu
|
||||
if (view.secondaryMenu) {
|
||||
this.secondarymenuGroups = view.secondaryMenu;
|
||||
this.secondarymenuHeading = view.name;
|
||||
}
|
||||
|
||||
// Update content tabs
|
||||
if (view.contentTabs) {
|
||||
this.maincontentTabs = view.contentTabs;
|
||||
}
|
||||
|
||||
// Render view content into the view container
|
||||
const viewContainer = this.maincontent?.shadowRoot?.querySelector('.view-container')
|
||||
|| this.shadowRoot?.querySelector('.view-container');
|
||||
if (viewContainer) {
|
||||
this.viewRegistry.renderView(view.id, viewContainer as HTMLElement);
|
||||
}
|
||||
|
||||
// Save state if configured
|
||||
this.stateManager?.update({ currentViewId: view.id });
|
||||
|
||||
// Dispatch event
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('view-change', {
|
||||
detail: { viewId: view.id, view, previousView },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,4 @@
|
||||
export * from './dees-appui-base.js';
|
||||
export * from './view.registry.js';
|
||||
export * from './app.router.js';
|
||||
export * from './state.manager.js';
|
||||
|
||||
185
ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
Normal file
185
ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
import type { IStatePersistenceConfig, IAppUIState } from '../../interfaces/appconfig.js';
|
||||
|
||||
/**
|
||||
* Manager for persisting and restoring UI state
|
||||
*/
|
||||
export class StateManager {
|
||||
private config: Required<IStatePersistenceConfig>;
|
||||
private memoryStorage: Map<string, string> = new Map();
|
||||
|
||||
constructor(config: IStatePersistenceConfig = { enabled: false }) {
|
||||
this.config = {
|
||||
enabled: config.enabled,
|
||||
storageKey: config.storageKey || 'dees-appui-state',
|
||||
storage: config.storage || 'localStorage',
|
||||
persist: {
|
||||
mainMenuCollapsed: true,
|
||||
secondaryMenuCollapsed: true,
|
||||
selectedView: true,
|
||||
secondaryMenuSelection: true,
|
||||
collapsedGroups: true,
|
||||
...config.persist,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if state persistence is enabled
|
||||
*/
|
||||
public isEnabled(): boolean {
|
||||
return this.config.enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current UI state
|
||||
*/
|
||||
public save(state: Partial<IAppUIState>): void {
|
||||
if (!this.config.enabled) return;
|
||||
|
||||
const existingState = this.load() || {};
|
||||
const newState: IAppUIState = {
|
||||
...existingState,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
// Only save what's configured
|
||||
if (this.config.persist.selectedView && state.currentViewId !== undefined) {
|
||||
newState.currentViewId = state.currentViewId;
|
||||
}
|
||||
if (this.config.persist.mainMenuCollapsed && state.mainMenuCollapsed !== undefined) {
|
||||
newState.mainMenuCollapsed = state.mainMenuCollapsed;
|
||||
}
|
||||
if (this.config.persist.secondaryMenuCollapsed && state.secondaryMenuCollapsed !== undefined) {
|
||||
newState.secondaryMenuCollapsed = state.secondaryMenuCollapsed;
|
||||
}
|
||||
if (this.config.persist.secondaryMenuSelection && state.secondaryMenuSelectedKey !== undefined) {
|
||||
newState.secondaryMenuSelectedKey = state.secondaryMenuSelectedKey;
|
||||
}
|
||||
if (this.config.persist.collapsedGroups && state.collapsedGroups !== undefined) {
|
||||
newState.collapsedGroups = state.collapsedGroups;
|
||||
}
|
||||
|
||||
this.setItem(this.config.storageKey, JSON.stringify(newState));
|
||||
}
|
||||
|
||||
/**
|
||||
* Load persisted UI state
|
||||
*/
|
||||
public load(): IAppUIState | null {
|
||||
if (!this.config.enabled) return null;
|
||||
|
||||
try {
|
||||
const data = this.getItem(this.config.storageKey);
|
||||
if (!data) return null;
|
||||
return JSON.parse(data) as IAppUIState;
|
||||
} catch (e) {
|
||||
console.warn('Failed to load UI state:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear persisted state
|
||||
*/
|
||||
public clear(): void {
|
||||
this.removeItem(this.config.storageKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if state exists
|
||||
*/
|
||||
public hasState(): boolean {
|
||||
return this.getItem(this.config.storageKey) !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get state age in milliseconds
|
||||
*/
|
||||
public getStateAge(): number | null {
|
||||
const state = this.load();
|
||||
if (!state?.timestamp) return null;
|
||||
return Date.now() - state.timestamp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update specific state properties
|
||||
*/
|
||||
public update(updates: Partial<IAppUIState>): void {
|
||||
const currentState = this.load() || {};
|
||||
this.save({ ...currentState, ...updates });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the storage key being used
|
||||
*/
|
||||
public getStorageKey(): string {
|
||||
return this.config.storageKey;
|
||||
}
|
||||
|
||||
// Storage abstraction methods
|
||||
|
||||
private getItem(key: string): string | null {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
return localStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
return sessionStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
case 'memory':
|
||||
return this.memoryStorage.get(key) || null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
private setItem(key: string, value: string): void {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
localStorage.setItem(key, value);
|
||||
} catch (e) {
|
||||
console.warn('Failed to save to localStorage:', e);
|
||||
}
|
||||
break;
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
sessionStorage.setItem(key, value);
|
||||
} catch (e) {
|
||||
console.warn('Failed to save to sessionStorage:', e);
|
||||
}
|
||||
break;
|
||||
case 'memory':
|
||||
this.memoryStorage.set(key, value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private removeItem(key: string): void {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
break;
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
sessionStorage.removeItem(key);
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
break;
|
||||
case 'memory':
|
||||
this.memoryStorage.delete(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
167
ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
Normal file
167
ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
import { html, render, type TemplateResult } from '@design.estate/dees-element';
|
||||
import type { IViewDefinition } from '../../interfaces/appconfig.js';
|
||||
|
||||
/**
|
||||
* Registry for managing views and their lifecycle
|
||||
*/
|
||||
export class ViewRegistry {
|
||||
private views: Map<string, IViewDefinition> = new Map();
|
||||
private instances: Map<string, HTMLElement> = new Map();
|
||||
private currentViewId: string | null = null;
|
||||
|
||||
/**
|
||||
* Register a single view
|
||||
*/
|
||||
public register(view: IViewDefinition): void {
|
||||
if (this.views.has(view.id)) {
|
||||
console.warn(`View with id "${view.id}" already registered. Overwriting.`);
|
||||
}
|
||||
this.views.set(view.id, view);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register multiple views
|
||||
*/
|
||||
public registerAll(views: IViewDefinition[]): void {
|
||||
views.forEach((view) => this.register(view));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a view definition by ID
|
||||
*/
|
||||
public get(viewId: string): IViewDefinition | undefined {
|
||||
return this.views.get(viewId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all registered view IDs
|
||||
*/
|
||||
public getViewIds(): string[] {
|
||||
return Array.from(this.views.keys());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all views
|
||||
*/
|
||||
public getAll(): IViewDefinition[] {
|
||||
return Array.from(this.views.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get route for a view
|
||||
*/
|
||||
public getRoute(viewId: string): string {
|
||||
const view = this.views.get(viewId);
|
||||
return view?.route || view?.id || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Find view by route
|
||||
*/
|
||||
public findByRoute(route: string): IViewDefinition | undefined {
|
||||
for (const view of this.views.values()) {
|
||||
const viewRoute = view.route || view.id;
|
||||
if (viewRoute === route) {
|
||||
return view;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a view's content into a container
|
||||
*/
|
||||
public renderView(viewId: string, container: HTMLElement): HTMLElement | null {
|
||||
const view = this.views.get(viewId);
|
||||
if (!view) {
|
||||
console.error(`View "${viewId}" not found in registry`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Clear container
|
||||
container.innerHTML = '';
|
||||
|
||||
let element: HTMLElement;
|
||||
|
||||
if (typeof view.content === 'string') {
|
||||
// Tag name string
|
||||
element = document.createElement(view.content);
|
||||
} else if (typeof view.content === 'function') {
|
||||
// Check if it's a class constructor or template function
|
||||
if (view.content.prototype instanceof HTMLElement) {
|
||||
// Element class constructor
|
||||
element = new (view.content as new () => HTMLElement)();
|
||||
} else {
|
||||
// Template function - wrap in a container and use Lit's render
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'view-content-wrapper';
|
||||
wrapper.style.cssText = 'display: contents;';
|
||||
const template = (view.content as () => TemplateResult)();
|
||||
render(template, wrapper);
|
||||
element = wrapper;
|
||||
}
|
||||
} else {
|
||||
console.error(`Invalid content type for view "${viewId}"`);
|
||||
return null;
|
||||
}
|
||||
|
||||
container.appendChild(element);
|
||||
this.instances.set(viewId, element);
|
||||
this.currentViewId = viewId;
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get currently active view ID
|
||||
*/
|
||||
public getCurrentViewId(): string | null {
|
||||
return this.currentViewId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cached instance of a view
|
||||
*/
|
||||
public getInstance(viewId: string): HTMLElement | undefined {
|
||||
return this.instances.get(viewId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all instances
|
||||
*/
|
||||
public clearInstances(): void {
|
||||
this.instances.clear();
|
||||
this.currentViewId = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister a view
|
||||
*/
|
||||
public unregister(viewId: string): boolean {
|
||||
this.instances.delete(viewId);
|
||||
return this.views.delete(viewId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the registry
|
||||
*/
|
||||
public clear(): void {
|
||||
this.views.clear();
|
||||
this.instances.clear();
|
||||
this.currentViewId = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a view is registered
|
||||
*/
|
||||
public has(viewId: string): boolean {
|
||||
return this.views.has(viewId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the number of registered views
|
||||
*/
|
||||
public get size(): number {
|
||||
return this.views.size;
|
||||
}
|
||||
}
|
||||
@@ -57,6 +57,7 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
--menu-width-collapsed: 56px;
|
||||
--tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
--tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -77,6 +77,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
--badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
|
||||
--badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--sidebar-width-expanded);
|
||||
|
||||
@@ -266,17 +266,17 @@ export const demoFunc = () => html`
|
||||
.viewTabs=${[
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'home',
|
||||
iconName: 'lucide:home',
|
||||
element: DemoViewDashboard,
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
iconName: 'lineChart',
|
||||
iconName: 'lucide:lineChart',
|
||||
element: DemoViewAnalytics,
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'settings',
|
||||
iconName: 'lucide:settings',
|
||||
element: DemoViewSettings,
|
||||
}
|
||||
] as IView[]}
|
||||
|
||||
@@ -51,7 +51,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
user-select: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@@ -75,109 +75,188 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
left: 0px;
|
||||
height: calc(100% - 24px);
|
||||
width: 240px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#000')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
font-size: 12px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
font-size: 13px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-rows: auto min-content;
|
||||
grid-template-rows: auto 1fr min-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
|
||||
'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
|
||||
)};
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
|
||||
'0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
|
||||
)};
|
||||
}
|
||||
|
||||
.header-icon-wrapper dees-icon {
|
||||
font-size: 18px;
|
||||
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
|
||||
}
|
||||
|
||||
.appName {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
|
||||
.viewTabs-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
padding: 12px 8px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
padding: 8px 12px 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.viewTabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.viewTab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: default;
|
||||
transition: background 0.1s;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.viewTab:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
.viewTab:active {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
|
||||
.viewTab.selected {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.viewTab.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
|
||||
}
|
||||
|
||||
.viewTab dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
|
||||
}
|
||||
|
||||
.viewTab dees-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.55;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.viewTab:hover dees-icon {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.viewTab.selected dees-icon {
|
||||
opacity: 0.9;
|
||||
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
|
||||
}
|
||||
|
||||
.viewTab span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.appActions {
|
||||
padding: 12px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: default;
|
||||
transition: background 0.1s;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
}
|
||||
|
||||
|
||||
.action:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 84% 60% / 0.08)', 'hsl(0 84% 60% / 0.12)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
||||
}
|
||||
|
||||
|
||||
.action dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.action:hover dees-icon {
|
||||
opacity: 0.9;
|
||||
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
||||
}
|
||||
|
||||
.appcontent {
|
||||
@@ -189,46 +268,61 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
bottom: 24px;
|
||||
width: calc(100% - 240px);
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#000')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
|
||||
.controlbar {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#00000020', '#ffffff20')};
|
||||
height: 24px;
|
||||
background: ${cssManager.bdTheme('#2196f3', '#1565c0')};
|
||||
background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-right: 16px;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
font-size: 14px;
|
||||
color: hsl(0 0% 70%);
|
||||
transition: all 0.15s ease;
|
||||
border-left: 1px solid hsl(0 0% 100% / 0.08);
|
||||
}
|
||||
|
||||
.control:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: hsl(0 0% 100% / 0.06);
|
||||
color: hsl(0 0% 95%);
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.control.status-connected dees-icon {
|
||||
color: hsl(142 70% 50%);
|
||||
}
|
||||
|
||||
.control.status-terminal dees-icon {
|
||||
color: hsl(45 90% 55%);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -236,27 +330,30 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<div class="appbar">
|
||||
<div>
|
||||
<div class="sidebar-header">
|
||||
<dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
|
||||
<div class="appName">${this.name}</div>
|
||||
<div class="sidebar-header">
|
||||
<div class="header-icon-wrapper">
|
||||
<dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
|
||||
</div>
|
||||
<div class="viewTabs-container">
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
<div
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
||||
@click=${() => this.loadView(view)}
|
||||
>
|
||||
${view.iconName ? html`
|
||||
<dees-icon .icon="${`${view.iconName}`}"></dees-icon>
|
||||
` : ''}
|
||||
<span style="flex: 1;">${view.name}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<div class="appName">${this.name}</div>
|
||||
</div>
|
||||
<div class="viewTabs-container">
|
||||
<div class="section-label">Navigation</div>
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
<div
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
||||
@click=${() => this.loadView(view)}
|
||||
>
|
||||
${view.iconName ? html`
|
||||
<dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
|
||||
` : html`
|
||||
<dees-icon .icon="${'lucide:file'}"></dees-icon>
|
||||
`}
|
||||
<span>${view.name}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="appActions">
|
||||
@@ -264,7 +361,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
|
||||
}}>
|
||||
<dees-icon .icon="${'lucide:logOut'}"></dees-icon>
|
||||
<span>Logout</span>
|
||||
<span>Sign out</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
<!-- Content goes here -->
|
||||
</div>
|
||||
<div class="controlbar">
|
||||
<div class="control">
|
||||
<div class="control status-connected">
|
||||
<dees-icon .icon="${'lucide:wifi'}"></dees-icon>
|
||||
<span>Connected</span>
|
||||
</div>
|
||||
<div class="control" @click=${this.launchTerminal}>
|
||||
<div class="control status-terminal" @click=${this.launchTerminal}>
|
||||
<dees-icon .icon="${'lucide:terminal'}"></dees-icon>
|
||||
<span>Terminal</span>
|
||||
</div>
|
||||
@@ -315,10 +412,10 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.style.right = '0px';
|
||||
terminal.style.bottom = '24px';
|
||||
terminal.style.opacity = '0';
|
||||
terminal.style.transform = 'translateY(20px)';
|
||||
terminal.style.transition = 'all 0.2s';
|
||||
terminal.style.background = '#000';
|
||||
terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
terminal.style.transform = 'translateY(8px) scale(0.99)';
|
||||
terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
terminal.background = 'hsl(220 13% 8%)';
|
||||
terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
|
||||
terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
|
||||
terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
|
||||
|
||||
@@ -327,7 +424,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
terminal.style.opacity = '1';
|
||||
terminal.style.transform = 'translateY(0px)';
|
||||
terminal.style.transform = 'translateY(0) scale(1)';
|
||||
return terminal;
|
||||
}
|
||||
|
||||
@@ -335,8 +432,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
if (this.currentTerminal) {
|
||||
this.currentTerminal.style.opacity = '0';
|
||||
this.currentTerminal.style.transform = 'translateY(20px)';
|
||||
await domtools.convenience.smartdelay.delayFor(200);
|
||||
this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
|
||||
await domtools.convenience.smartdelay.delayFor(250);
|
||||
this.currentTerminal.remove();
|
||||
this.currentTerminal = null;
|
||||
}
|
||||
|
||||
@@ -29,14 +29,14 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
|
||||
user-select: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.loginContainer {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@@ -46,7 +46,7 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#000')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
}
|
||||
|
||||
.slotContainer {
|
||||
@@ -56,43 +56,56 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login {
|
||||
min-width: 320px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#111')};
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
'0 4px 12px rgba(0, 0, 0, 0.3)'
|
||||
)};
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 24px;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
letter-spacing: -0.025em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
}
|
||||
|
||||
.login dees-form {
|
||||
|
||||
.subheader {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card dees-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.login dees-input-text {
|
||||
|
||||
.login-card dees-input-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login dees-form-submit {
|
||||
margin-top: 4px;
|
||||
|
||||
.login-card dees-form-submit {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
@@ -102,12 +115,17 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
return html`
|
||||
<div class="loginContainer">
|
||||
<div class="login">
|
||||
<div class="header">Login to ${this.name}</div>
|
||||
<dees-form>
|
||||
<dees-input-text key="username" label="Username" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
|
||||
<dees-form-submit>Login</dees-form-submit>
|
||||
</dees-form>
|
||||
<div class="login-header">
|
||||
<div class="header">Sign in</div>
|
||||
<div class="subheader">Enter your credentials to access ${this.name}</div>
|
||||
</div>
|
||||
<div class="login-card">
|
||||
<dees-form>
|
||||
<dees-input-text key="username" label="Username" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
|
||||
<dees-form-submit>Sign in</dees-form-submit>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slotContainer">
|
||||
|
||||
@@ -38,6 +38,9 @@ export class DeesTerminal extends DeesElement {
|
||||
@property()
|
||||
accessor environment: {[key: string]: string} = {};
|
||||
|
||||
@property()
|
||||
accessor background: string = '#000000';
|
||||
|
||||
// exposing webcontainer
|
||||
private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
|
||||
public webcontainerPromise = this.webcontainerDeferred.promise;
|
||||
@@ -58,7 +61,7 @@ export class DeesTerminal extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
padding: 20px;
|
||||
background: #000;
|
||||
background: var(--dees-terminal-background, #000000);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -153,7 +156,7 @@ export class DeesTerminal extends DeesElement {
|
||||
|
||||
.xterm .composition-view {
|
||||
/* TODO: Composition position got messed up somewhere */
|
||||
background: #000;
|
||||
background: var(--dees-terminal-background, #000000);
|
||||
color: #fff;
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -167,7 +170,7 @@ export class DeesTerminal extends DeesElement {
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
/* On OS X this is required in order for the scroll bar to appear fully opaque */
|
||||
background-color: #000;
|
||||
background-color: var(--dees-terminal-background, #000000);
|
||||
overflow-y: scroll;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
@@ -261,11 +264,18 @@ export class DeesTerminal extends DeesElement {
|
||||
): Promise<void> {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
super.firstUpdated(_changedProperties);
|
||||
|
||||
// Sync CSS variable with background property
|
||||
this.style.setProperty('--dees-terminal-background', this.background);
|
||||
|
||||
const container = this.shadowRoot.getElementById('container');
|
||||
|
||||
const term = new Terminal({
|
||||
convertEol: true,
|
||||
cursorBlink: true,
|
||||
theme: {
|
||||
background: this.background,
|
||||
},
|
||||
});
|
||||
this.fitAddon = new FitAddon();
|
||||
term.loadAddon(this.fitAddon);
|
||||
|
||||
189
ts_web/elements/interfaces/appconfig.ts
Normal file
189
ts_web/elements/interfaces/appconfig.ts
Normal file
@@ -0,0 +1,189 @@
|
||||
import type { TemplateResult } from '@design.estate/dees-element';
|
||||
import type { IAppBarMenuItem } from './appbarmenuitem.js';
|
||||
import type { ITab } from './tab.js';
|
||||
import type { ISecondaryMenuGroup } from './secondarymenu.js';
|
||||
|
||||
/**
|
||||
* User configuration for the app bar
|
||||
*/
|
||||
export interface IAppUser {
|
||||
name: string;
|
||||
email?: string;
|
||||
avatar?: string;
|
||||
status?: 'online' | 'offline' | 'busy' | 'away';
|
||||
}
|
||||
|
||||
/**
|
||||
* View definition for the view registry
|
||||
*/
|
||||
export interface IViewDefinition {
|
||||
/** Unique identifier for routing */
|
||||
id: string;
|
||||
/** Display name */
|
||||
name: string;
|
||||
/** Optional icon */
|
||||
iconName?: string;
|
||||
/** The view content - can be a tag name, element class, or template function */
|
||||
content: string | (new () => HTMLElement) | (() => TemplateResult);
|
||||
/** Secondary menu items specific to this view */
|
||||
secondaryMenu?: ISecondaryMenuGroup[];
|
||||
/** Content tabs specific to this view */
|
||||
contentTabs?: ITab[];
|
||||
/** Optional route path (defaults to id) */
|
||||
route?: string;
|
||||
/** Badge to show on menu item */
|
||||
badge?: string | number;
|
||||
badgeVariant?: 'default' | 'success' | 'warning' | 'error';
|
||||
}
|
||||
|
||||
/**
|
||||
* Main menu section with view references
|
||||
*/
|
||||
export interface IMainMenuSection {
|
||||
/** Section name (optional for ungrouped) */
|
||||
name?: string;
|
||||
/** Views in this section (by ID reference) */
|
||||
views: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Main menu configuration
|
||||
*/
|
||||
export interface IMainMenuConfig {
|
||||
/** Menu sections with view references */
|
||||
sections?: IMainMenuSection[];
|
||||
/** Bottom pinned items (view IDs) */
|
||||
bottomItems?: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* App bar configuration
|
||||
*/
|
||||
export interface IAppBarConfig {
|
||||
menuItems?: IAppBarMenuItem[];
|
||||
breadcrumbs?: string;
|
||||
breadcrumbSeparator?: string;
|
||||
showWindowControls?: boolean;
|
||||
showSearch?: boolean;
|
||||
user?: IAppUser;
|
||||
profileMenuItems?: IAppBarMenuItem[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Branding configuration
|
||||
*/
|
||||
export interface IBrandingConfig {
|
||||
logoIcon?: string;
|
||||
logoText?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Routing configuration
|
||||
*/
|
||||
export interface IRoutingConfig {
|
||||
/** Routing mode */
|
||||
mode: 'hash' | 'history' | 'external' | 'none';
|
||||
/** Base path for history mode */
|
||||
basePath?: string;
|
||||
/** Default view ID to show on startup */
|
||||
defaultView?: string;
|
||||
/** Sync URL on view change */
|
||||
syncUrl?: boolean;
|
||||
/** Handle 404s - show view ID or callback */
|
||||
notFound?: string | (() => void);
|
||||
}
|
||||
|
||||
/**
|
||||
* State persistence configuration
|
||||
*/
|
||||
export interface IStatePersistenceConfig {
|
||||
/** Enable state persistence */
|
||||
enabled: boolean;
|
||||
/** Storage key prefix */
|
||||
storageKey?: string;
|
||||
/** Storage type */
|
||||
storage?: 'localStorage' | 'sessionStorage' | 'memory';
|
||||
/** What to persist */
|
||||
persist?: {
|
||||
mainMenuCollapsed?: boolean;
|
||||
secondaryMenuCollapsed?: boolean;
|
||||
selectedView?: boolean;
|
||||
secondaryMenuSelection?: boolean;
|
||||
collapsedGroups?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Activity log configuration
|
||||
*/
|
||||
export interface IActivityLogConfig {
|
||||
enabled?: boolean;
|
||||
width?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main unified configuration interface for dees-appui-base
|
||||
*/
|
||||
export interface IAppConfig {
|
||||
/** Application branding */
|
||||
branding?: IBrandingConfig;
|
||||
|
||||
/** App bar configuration */
|
||||
appBar?: IAppBarConfig;
|
||||
|
||||
/** View definitions (the registry) */
|
||||
views: IViewDefinition[];
|
||||
|
||||
/** Main menu structure */
|
||||
mainMenu?: IMainMenuConfig;
|
||||
|
||||
/** Routing configuration */
|
||||
routing?: IRoutingConfig;
|
||||
|
||||
/** State persistence configuration */
|
||||
statePersistence?: IStatePersistenceConfig;
|
||||
|
||||
/** Activity log configuration */
|
||||
activityLog?: IActivityLogConfig;
|
||||
|
||||
/** Event callbacks (optional shorthand) */
|
||||
onViewChange?: (viewId: string, view: IViewDefinition) => void;
|
||||
onSearch?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialized UI state for persistence
|
||||
*/
|
||||
export interface IAppUIState {
|
||||
/** Current view ID */
|
||||
currentViewId?: string;
|
||||
/** Main menu collapsed state */
|
||||
mainMenuCollapsed?: boolean;
|
||||
/** Secondary menu collapsed state */
|
||||
secondaryMenuCollapsed?: boolean;
|
||||
/** Selected secondary menu item key */
|
||||
secondaryMenuSelectedKey?: string;
|
||||
/** Collapsed group names in secondary menu */
|
||||
collapsedGroups?: string[];
|
||||
/** Timestamp of last save */
|
||||
timestamp?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Route change event detail
|
||||
*/
|
||||
export interface IRouteChangeEvent {
|
||||
viewId: string;
|
||||
previousViewId: string | null;
|
||||
params?: Record<string, string>;
|
||||
source: 'navigation' | 'popstate' | 'initial' | 'programmatic';
|
||||
}
|
||||
|
||||
/**
|
||||
* View change event detail
|
||||
*/
|
||||
export interface IViewChangeEvent {
|
||||
viewId: string;
|
||||
view: IViewDefinition;
|
||||
previousView?: IViewDefinition;
|
||||
}
|
||||
@@ -3,3 +3,4 @@ export * from './selectionoption.js';
|
||||
export * from './appbarmenuitem.js';
|
||||
export * from './menugroup.js';
|
||||
export * from './secondarymenu.js';
|
||||
export * from './appconfig.js';
|
||||
|
||||
Reference in New Issue
Block a user