Compare commits
75 Commits
Author | SHA1 | Date | |
---|---|---|---|
3712f6ef90 | |||
d2646cd62c | |||
f29ca0ba0b | |||
0c273a818d | |||
6e8099c6f4 | |||
07c68b82a4 | |||
afd19dc912 | |||
f02572665f | |||
f93082e9b0 | |||
08f3bad5f9 | |||
563958813e | |||
1ae1703133 | |||
d2771dfc31 | |||
dd46d3e2f4 | |||
ae641801e1 | |||
719e63c667 | |||
e26da1bb8f | |||
f5fad07038 | |||
68992301ff | |||
d529c27a68 | |||
56e8d868c9 | |||
14e1d4a9f5 | |||
efe49469aa | |||
39500f802a | |||
a64d38dbb1 | |||
e2d3ae8949 | |||
1c4fd0a2da | |||
d0e85da308 | |||
6a0b0aa741 | |||
4c620f480c | |||
b7ebcc4cef | |||
e6275bfeb3 | |||
d4585654b6 | |||
1a8562dc6f | |||
2148959c35 | |||
28a84f7c1a | |||
e935dc3983 | |||
ab30b51c9e | |||
8377d94f81 | |||
14ebeeaee8 | |||
fdc8cb44ab | |||
f72936d1a7 | |||
04170d4834 | |||
9006e023bd | |||
8c8d5e9329 | |||
f4fee46439 | |||
af2ee9a6a5 | |||
a3012b5ec1 | |||
0f414ae24a | |||
1fa9b410ed | |||
90c7890cbf | |||
55e601b806 | |||
45952914ba | |||
5f83b01f0e | |||
c03563f2fc | |||
edf50d2f8d | |||
d0789ab279 | |||
55bac1bf7b | |||
2957121473 | |||
020a1bfb75 | |||
bb246c4f8e | |||
cf258a8d59 | |||
38b4df1ce3 | |||
2f7fdc16c7 | |||
f4b426bc7f | |||
9577cc9ebf | |||
be5124217a | |||
d029a6c346 | |||
69bb03dcdf | |||
5eb2f4cebc | |||
c021a84788 | |||
321ce99338 | |||
6cfe89645c | |||
11f900beeb | |||
39ca21e57c |
413
changelog.md
Normal file
413
changelog.md
Normal file
@ -0,0 +1,413 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-20 - 1.4.0 - feat(dees-terminal)
|
||||
Enhanced the dees-terminal component to support environment variable settings and improved setup command execution.
|
||||
|
||||
- Added environment property to pass custom environment variables.
|
||||
- Introduced webcontainerDeferred to handle the promise for web container creation.
|
||||
- Enhanced demo to illustrate environment variable usage.
|
||||
- Improved async interaction with the terminal for setting environment variables and executing setup commands.
|
||||
|
||||
## 2025-01-15 - 1.3.4 - fix(chart)
|
||||
Fix chart rendering and appearance issues in the DeesChartArea component.
|
||||
|
||||
- Resolved issues with chart dimensions calculation based on padding.
|
||||
- Adjusted grid and axis lines appearance for better visibility.
|
||||
- Updated tooltip and grid line styling for better accessibility.
|
||||
- Improved series data representation as time-series for more accurate display.
|
||||
|
||||
## 2024-12-17 - 1.3.3 - fix(dees-input-multitoggle)
|
||||
Add missing TypeScript declaration for dees-input-multitoggle
|
||||
|
||||
- Added a missing declaration to the HTMLElementTagNameMap for 'dees-input-multitoggle' element.
|
||||
|
||||
## 2024-12-09 - 1.3.2 - fix(metadata)
|
||||
Updated package metadata and readme for better project description and structure.
|
||||
|
||||
- Updated package.json and npmextra.json with a detailed project description and list of keywords.
|
||||
- Enhanced readme.md with installation instructions, component usage examples, and detailed component descriptions for clarity.
|
||||
|
||||
## 2024-11-07 - 1.3.1 - fix(DeesSimpleAppDash)
|
||||
Fix: add border to controlbar in DeesSimpleAppDash
|
||||
|
||||
- Fixed the missing border at the top of the controlbar in DeesSimpleAppDash.
|
||||
|
||||
## 2024-11-07 - 1.3.0 - feat(dees-simple-appdash)
|
||||
Enhance responsive styling and terminal setup command
|
||||
|
||||
- Added a new property `terminalSetupCommand` for configuring terminal setup commands.
|
||||
- Improved responsive styling and positioning for components to achieve a fluid layout.
|
||||
- Fixed layout shifts by switching positions to `absolute` for `appbar` and `appcontent`.
|
||||
|
||||
## 2024-10-07 - 1.2.0 - feat(index.ts)
|
||||
Add export for colors module in index.ts
|
||||
|
||||
- The index.ts file now exports the colors module, making color utilities available for external use.
|
||||
|
||||
## 2024-10-06 - 1.1.13 - fix(dees-button)
|
||||
Fix styling issue in button component.
|
||||
|
||||
- Moved the .button.disabled styling block to its correct position after the .button.highlighted block.
|
||||
|
||||
## 2024-10-06 - 1.1.12 - fix(dees-button)
|
||||
Fix reflect attribute for disabled property on dees-button component
|
||||
|
||||
- Added reflect: true to the 'disabled' property ensuring changes reflect in the DOM attribute.
|
||||
|
||||
## 2024-10-05 - 1.1.11 - fix(DeesStepper)
|
||||
Adjusted CSS properties in DeesStepper component
|
||||
|
||||
- Increased border-radius from 8px to 16px for step container elements
|
||||
- Adjusted font-size and font-weight for the title in the step container to improve readability
|
||||
|
||||
## 2024-10-04 - 1.1.10 - fix(dependencies)
|
||||
Reverted @webcontainer/api version
|
||||
|
||||
- Changed @webcontainer/api version from ^1.3.0 to 1.2.0 in package.json
|
||||
|
||||
## 2024-10-04 - 1.1.9 - fix(dependencies)
|
||||
Update various dependencies for compatibility and stability.
|
||||
|
||||
- Update @design.estate/dees-domtools to version ^2.0.61
|
||||
- Update @design.estate/dees-element to version ^2.0.39
|
||||
- Update @webcontainer/api to version ^1.3.0
|
||||
- Update apexcharts to version ^3.54.0
|
||||
- Update monaco-editor to version ^0.52.0
|
||||
- Update pdfjs-dist to version ^4.6.82
|
||||
- Update @push.rocks/tapbundle to version ^5.3.0
|
||||
- Update @types/node to version ^22.7.4
|
||||
|
||||
## 2024-09-02 - 1.1.8 - fix(dees-simple-appdash)
|
||||
Corrected viewTab active background color
|
||||
|
||||
- Corrected the background color of the viewTab in active state for better visual consistency.
|
||||
|
||||
## 2024-09-02 - 1.1.7 - fix(dependencies)
|
||||
Update dependencies to their latest versions
|
||||
|
||||
- Update dependency versions in package.json:
|
||||
- - @design.estate/dees-element from ^2.0.34 to ^2.0.36
|
||||
- - @fortawesome/fontawesome-svg-core from ^6.5.2 to ^6.6.0
|
||||
- - @fortawesome/free-brands-svg-icons from ^6.5.2 to ^6.6.0
|
||||
- - @fortawesome/free-regular-svg-icons from ^6.5.2 to ^6.6.0
|
||||
- - @fortawesome/free-solid-svg-icons from ^6.5.2 to ^6.6.0
|
||||
- - @tsclass/tsclass from ^4.0.63 to ^4.1.2
|
||||
- - apexcharts from ^3.49.2 to ^3.53.0
|
||||
- - highlight.js from 11.9.0 to 11.10.0
|
||||
- - monaco-editor from ^0.50.0 to ^0.51.0
|
||||
- - pdfjs-dist from ^4.3.136 to ^4.5.136
|
||||
- - @git.zone/tsbuild from ^2.1.82 to ^2.1.84
|
||||
- - @push.rocks/tapbundle from ^5.0.23 to ^5.0.24
|
||||
- - @types/node from ^20.14.9 to ^22.5.2
|
||||
|
||||
## 2024-07-01 - 1.1.6 - fix(dees-dataview-codebox)
|
||||
Corrected the font-family order for better font rendering.
|
||||
|
||||
- Corrected the font-family order in dees-dataview-codebox.ts to ensure 'Intel One Mono' is prioritized over 'Geist Mono'.
|
||||
|
||||
## 2024-07-01 - 1.1.5 - fix(dees-dataview-codebox)
|
||||
Adjusted line number font weight in codebox
|
||||
|
||||
- Changed the line number font weight from 400 to 200 in the codebox for better visual alignment.
|
||||
|
||||
## 2024-07-01 - 1.1.4 - fix(UI)
|
||||
Fixed font-family order for code and value elements
|
||||
|
||||
- Updated font-family order in dees-dataview-codebox.ts
|
||||
- Updated font-family order in dees-dataview-statusobject.ts
|
||||
|
||||
## 2024-07-01 - 1.1.3 - fix(dees-dataview-codebox)
|
||||
Adjusted codebox font weight and font family.
|
||||
|
||||
- Changed font weight from 200 to 400 for better readability.
|
||||
- Updated font-family to include 'Geist Mono' for uniform appearance.
|
||||
|
||||
## 2024-06-30 - 1.1.2 - fix(elements)
|
||||
Fix various UI components and improve styles
|
||||
|
||||
- Updated styles for multiple components for better appearance in dark mode.
|
||||
- Added missing event handling in `dees-input-fileupload` component.
|
||||
- Implemented tooltip support in `dees-label` component.
|
||||
- Fixed alignment issues in `dees-appui-*` components.
|
||||
- Resolved various accessibility issues in form elements.
|
||||
|
||||
## 2024-06-30 - 1.1.1 - fix(build)
|
||||
Fix build script by updating source folders.
|
||||
|
||||
- Updated build script to correctly reference 'tsfolders' folder.
|
||||
|
||||
## 2024-06-30 - 1.1.0 - feat(project dependencies)
|
||||
Updated various dependencies and internal fonts
|
||||
|
||||
- Updated dependencies in package.json with the latest versions.
|
||||
- Updated font-family references from 'Roboto' and 'Inter' to 'Geist Sans' across multiple components.
|
||||
|
||||
## 2024-04-20 - 1.0.289 - Documentation Update
|
||||
Updated the project documentation.
|
||||
|
||||
## 2024-02-05 to 2024-02-13 - 1.0.277 to 1.0.288 - Core Fixes
|
||||
Series of core updates and patches.
|
||||
|
||||
## 2024-01-22 to 2024-02-05 - 1.0.257 to 1.0.276 - Core Fixes
|
||||
More core updates and patches.
|
||||
|
||||
## 2024-01-21 - 1.0.256 to 1.0.257 - Core Fixes
|
||||
Minor bugfixes for core functionalities.
|
||||
|
||||
## 2024-01-18 - 1.0.246 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2024-01-15 - 1.0.242 to 1.0.245 - Core Fixes
|
||||
Various core bugfixes.
|
||||
|
||||
## 2024-01-11 - 1.0.241 to 1.0.242 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2024-01-10 - 1.0.240 to 1.0.241 - Core Fixes
|
||||
Minor core fixes and improvements.
|
||||
|
||||
## 2024-01-09 - 1.0.239 to 1.0.240 - Core Fixes
|
||||
Core updates and patches.
|
||||
|
||||
## 2023-12-26 - 1.0.238 to 1.0.239 - Core Fixes
|
||||
Updates to core functionalities.
|
||||
|
||||
## 2023-12-20 - 1.0.236 to 1.0.238 - Core Fixes
|
||||
Bugfixes and updates for core functionalities.
|
||||
|
||||
## 2023-12-08 - 1.0.233 to 1.0.236 - Core Fixes
|
||||
Multiple updates to core functionalities.
|
||||
|
||||
## 2023-11-29 - 1.0.231 to 1.0.232 - Core Fixes
|
||||
Minor core patches.
|
||||
|
||||
## 2023-10-31 - 1.0.229 to 1.0.230 - Core Fixes
|
||||
Various updates and fixes for core.
|
||||
|
||||
## 2023-10-24 - 1.0.228 to 1.0.229 - Core Fixes
|
||||
More core updates and patches.
|
||||
|
||||
## 2023-10-23 - 1.0.226 to 1.0.228 - Core Fixes
|
||||
Series of updates and fixes for core functionalities.
|
||||
|
||||
## 2023-10-20 - 1.0.223 to 1.0.225 - Core Fixes
|
||||
Minor updates and fixes for core.
|
||||
|
||||
## 2023-10-18 - 1.0.222 to 1.0.223 - Core Fixes
|
||||
Core patches and bugfixes.
|
||||
|
||||
## 2023-10-17 - 1.0.221 to 1.0.222 - Core Fixes
|
||||
Further updates to core functionalities.
|
||||
|
||||
## 2023-10-12 - 1.0.220 to 1.0.221 - Core Fixes
|
||||
Minor core updates.
|
||||
|
||||
## 2023-10-11 - 1.0.219 to 1.0.220 - Core Fixes
|
||||
Bugfixes and updates for core.
|
||||
|
||||
## 2023-10-07 - 1.0.217 to 1.0.219 - Core Fixes
|
||||
Series of core updates and patches.
|
||||
|
||||
## 2023-10-05 - 1.0.216 to 1.0.217 - Core Fixes
|
||||
Minor updates for core functionalities.
|
||||
|
||||
## 2023-09-22 - 1.0.212 to 1.0.215 - Core Fixes
|
||||
Various updates and fixes for core.
|
||||
|
||||
## 2023-09-20 - 1.0.210 to 1.0.211 - Core Fixes
|
||||
Series of core patches.
|
||||
|
||||
## 2023-09-18 - 1.0.209 to 1.0.210 - Core Fixes
|
||||
Bugfixes and improvements to core.
|
||||
|
||||
## 2023-09-17 - 1.0.207 to 1.0.209 - Core Fixes
|
||||
Minor updates and fixes.
|
||||
|
||||
## 2023-09-15 - 1.0.203 to 1.0.206 - Core Fixes
|
||||
Series of core improvements and fixes.
|
||||
|
||||
## 2023-09-14 - 1.0.199 to 1.0.202 - Core Fixes
|
||||
Patches for core functionalities.
|
||||
|
||||
## 2023-09-13 - 1.0.194 to 1.0.198 - Core Fixes
|
||||
Various bugfixes and updates for core.
|
||||
|
||||
## 2023-09-12 - 1.0.190 to 1.0.193 - Core Fixes
|
||||
Minor core patches.
|
||||
|
||||
## 2023-09-09 - 1.0.188 to 1.0.189 - Core Fixes
|
||||
Updates and bugfixes for core.
|
||||
|
||||
## 2023-09-07 - 1.0.186 to 1.0.187 - Core Fixes
|
||||
Core patches and improvements.
|
||||
|
||||
## 2023-09-04 - 1.0.184 to 1.0.185 - Core Fixes
|
||||
Series of updates and bugfixes for core.
|
||||
|
||||
## 2023-09-01 - 1.0.180 to 1.0.183 - Core Fixes
|
||||
Various core updates and fixes.
|
||||
|
||||
## 2023-08-28 - 1.0.177 to 1.0.179 - Core Fixes
|
||||
Minor bugfixes and updates.
|
||||
|
||||
## 2023-08-26 - 1.0.176 to 1.0.177 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2023-08-20 - 1.0.173 to 1.0.175 - Core Fixes
|
||||
Series of updates and fixes for core.
|
||||
|
||||
## 2023-08-08 - 1.0.172 to 1.0.173 - Core Fixes
|
||||
Minor core updates.
|
||||
|
||||
## 2023-08-07 - 1.0.171 to 1.0.172 - Core Fixes
|
||||
Various updates to core.
|
||||
|
||||
## 2023-04-12 - 1.0.169 to 1.0.170 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2023-04-10 - 1.0.163 to 1.0.168 - Core Fixes
|
||||
Series of core updates and patches.
|
||||
|
||||
## 2023-04-07 - 1.0.160 to 1.0.162 - Core Fixes
|
||||
Various updates for core functionalities.
|
||||
|
||||
## 2023-04-06 - 1.0.155 to 1.0.159 - Core Fixes
|
||||
Bugfixes and improvements to core.
|
||||
|
||||
## 2023-03-27 - 1.0.150 to 1.0.154 - Core Fixes
|
||||
Minor updates and patches for core functionalities.
|
||||
|
||||
## 2023-03-09 - 1.0.149 to 1.0.150 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2023-01-17 - 1.0.146 to 1.0.148 - Core Fixes
|
||||
Updates and fixes for core.
|
||||
|
||||
## 2023-01-16 - 1.0.144 to 1.0.145 - Core Fixes
|
||||
Series of updates and bugfixes for core.
|
||||
|
||||
## 2023-01-13 - 1.0.134 to 1.0.143 - Core Fixes
|
||||
Various core patches and improvements.
|
||||
|
||||
## 2023-01-12 - 1.0.132 to 1.0.133 - Core Fixes
|
||||
Minor fixes for core functionalities.
|
||||
|
||||
## 2023-01-11 - 1.0.126 to 1.0.131 - Core Fixes
|
||||
Series of updates and fixes for core.
|
||||
|
||||
## 2023-01-09 - 1.0.122 to 1.0.123 - Core Fixes
|
||||
Minor core patches and updates.
|
||||
|
||||
## 2023-01-07 - 1.0.113 to 1.0.121 - Core Fixes
|
||||
Updates and bugfixes for core functionalities.
|
||||
|
||||
## 2023-01-03 - 1.0.107 to 1.0.110 - Core Fixes
|
||||
Series of core updates and fixes.
|
||||
|
||||
## 2022-12-12 - 1.0.105 to 1.0.106 - Core Fixes
|
||||
Various core patches.
|
||||
|
||||
## 2022-12-07 - 1.0.104 to 1.0.105 - Core Fixes
|
||||
Bugfixes and improvements to core functionalities.
|
||||
|
||||
## 2022-12-06 - 1.0.103 to 1.0.104 - Core Fixes
|
||||
Series of updates and patches for core.
|
||||
|
||||
## 2022-08-18 - 1.0.98 to 1.0.102 - Core Fixes
|
||||
Updates and bugfixes for core functionalities.
|
||||
|
||||
## 2022-07-14 - 1.0.93 to 1.0.94 - Core Fixes
|
||||
Minor core updates.
|
||||
|
||||
## 2022-06-26 - 1.0.92 to 1.0.93 - Core Fixes
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2022-06-10 - 1.0.91 to 1.0.92 - Core Fixes
|
||||
Updates and patches for core.
|
||||
|
||||
## 2022-05-30 - 1.0.90 to 1.0.91 - Core Fixes
|
||||
Minor updates and bugfixes.
|
||||
|
||||
## 2022-05-26 - 1.0.87 to 1.0.89 - Core Fixes
|
||||
Series of core updates and patches.
|
||||
|
||||
## 2022-05-24 to 2022-05-20 - 1.0.83 to 1.0.86 - Core Fixes
|
||||
Various updates and bugfixes for core functionalities.
|
||||
|
||||
## 2022-05-03 - 1.0.79 to 1.0.80 - Core Fixes
|
||||
Updates and patches for core functionalities.
|
||||
|
||||
## 2022-03-18 - 1.0.74 to 1.0.77 - Core Fixes
|
||||
Bugfixes and updates for core functionalities.
|
||||
|
||||
## 2022-01-24 - 1.0.73 to 1.0.74 - Core Fixes
|
||||
Minor core patches.
|
||||
|
||||
## 2021-12-10 - 1.0.71 to 1.0.72 - Core Fixes
|
||||
Series of updates and fixes for core functionalities.
|
||||
|
||||
## 2021-11-27 - 1.0.70 to 1.0.71 - Core Fixes
|
||||
Bugfixes and improvements to core.
|
||||
|
||||
## 2021-10-08 - 1.0.68 to 1.0.69 - Core Fixes
|
||||
Various core updates and patches.
|
||||
|
||||
## 2021-10-07 - 1.0.67 to 1.0.68 - Core Fixes
|
||||
Minor updates and improvements for core.
|
||||
|
||||
## 2021-09-15 - 1.0.64 to 1.0.66 - Core Fixes
|
||||
Bugfixes and improvements to core functionalities.
|
||||
|
||||
## 2021-09-14 - 1.0.61 to 1.0.62 - Core Fixes
|
||||
Minor patches and updates for core.
|
||||
|
||||
## 2021-09-10 - 1.0.57 to 1.0.60 - Core Fixes
|
||||
Series of updates and fixes for core functionalities.
|
||||
|
||||
## 2021-09-09 - 1.0.54 to 1.0.56 - Core Fixes
|
||||
Various core updates and patches.
|
||||
|
||||
## 2021-09-01 - 1.0.51 to 1.0.53 - Core Fixes
|
||||
Minor updates for core functionalities.
|
||||
|
||||
## 2021-08-29 - 1.0.49 to 1.0.50 - Core Fixes
|
||||
Bugfixes and patches for core.
|
||||
|
||||
## 2021-08-27 - 1.0.44 to 1.0.48 - Core Fixes
|
||||
Series of updates and improvements for core functionalities.
|
||||
|
||||
## 2021-08-26 - 1.0.42 to 1.0.43 - Core Fixes
|
||||
Minor updates and bugfixes for core.
|
||||
|
||||
## 2021-08-25 - 1.0.38 to 1.0.41 - Core Fixes
|
||||
Extracted series of core updates and patches.
|
||||
|
||||
## 2021-08-24 - 1.0.37 - Core Fix
|
||||
Bugfixes for core functionalities.
|
||||
|
||||
## 2021-08-20 - 1.0.34 to 1.0.36 - Core Fixes
|
||||
Core functionalities updates and patches.
|
||||
|
||||
## 2021-05-05 - 1.0.32 to 1.0.33 - Core Fixes
|
||||
Series of core bugfixes.
|
||||
|
||||
## 2021-03-06 - 1.0.29 to 1.0.31 - Core Fixes
|
||||
Updates and improvements for core functionalities.
|
||||
|
||||
## 2021-02-13 - 1.0.27 to 1.0.28 - Core Fixes
|
||||
Bugfixes and patches for core functionalities.
|
||||
|
||||
## 2020-12-10 - 1.0.25 to 1.0.26 - Core Fixes
|
||||
Various core updates and improvements.
|
||||
|
||||
## 2020-12-02 - 1.0.23 to 1.0.24 - Core Fixes
|
||||
Minor updates for core functionalities.
|
||||
|
||||
## 2020-12-01 - 1.0.21 to 1.0.22 - Core Fixes
|
||||
Bugfixes and patches for core.
|
||||
|
||||
## 2020-09-13 - 1.0.19 to 1.0.20 - Core Fixes
|
||||
Updates and bugfixes for core functionalities.
|
||||
|
||||
## 2020-05-11 - 1.0.17 to 1.0.18 - Core Fixes
|
||||
Core functionalities updates.
|
@ -2,17 +2,46 @@
|
||||
"gitzone": {
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "design.estate",
|
||||
"gitrepo": "dees-catalog",
|
||||
"description": "a webcomponents catalog for handling daily stuff on the web",
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"npmPackagename": "@design.estate/dees-catalog",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
"projectDomain": "design.estate",
|
||||
"keywords": [
|
||||
"Web Components",
|
||||
"User Interface",
|
||||
"UI Library",
|
||||
"Component Library",
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"Dynamic Components",
|
||||
"Modular Architecture",
|
||||
"Reusable Components",
|
||||
"Web Development",
|
||||
"Application UI",
|
||||
"Custom Elements",
|
||||
"Shadow DOM",
|
||||
"UI Elements",
|
||||
"Dashboard Interfaces",
|
||||
"Form Handling",
|
||||
"Data Display",
|
||||
"Visualization",
|
||||
"Charting",
|
||||
"Interactive Components",
|
||||
"Responsive Design",
|
||||
"Web Applications",
|
||||
"Modern Web",
|
||||
"Frontend Development"
|
||||
]
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
"npmGlobalTools": [],
|
||||
"npmAccessLevel": "public"
|
||||
},
|
||||
"tsdoc": {
|
||||
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
||||
}
|
||||
}
|
73
package.json
73
package.json
@ -1,47 +1,48 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.0.273",
|
||||
"version": "1.4.0",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"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",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "tstest test/ --web",
|
||||
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.0.57",
|
||||
"@design.estate/dees-element": "^2.0.33",
|
||||
"@design.estate/dees-wcctools": "^1.0.87",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@design.estate/dees-domtools": "^2.1.1",
|
||||
"@design.estate/dees-element": "^2.0.39",
|
||||
"@design.estate/dees-wcctools": "^1.0.90",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@push.rocks/smarti18n": "^1.0.4",
|
||||
"@push.rocks/smartpromise": "^4.0.3",
|
||||
"@push.rocks/smartstring": "^4.0.13",
|
||||
"@tsclass/tsclass": "^4.0.46",
|
||||
"@webcontainer/api": "^1.1.8",
|
||||
"highlight.js": "11.9.0",
|
||||
"ibantools": "^4.3.9",
|
||||
"monaco-editor": "^0.45.0",
|
||||
"pdfjs-dist": "^4.0.379",
|
||||
"@push.rocks/smartpromise": "^4.1.0",
|
||||
"@push.rocks/smartstring": "^4.0.15",
|
||||
"@tsclass/tsclass": "^4.4.0",
|
||||
"@webcontainer/api": "1.5.1-internal.6",
|
||||
"apexcharts": "^4.3.0",
|
||||
"highlight.js": "11.11.1",
|
||||
"ibantools": "^4.5.1",
|
||||
"monaco-editor": "^0.52.2",
|
||||
"pdfjs-dist": "^4.10.38",
|
||||
"xterm": "^5.3.0",
|
||||
"xterm-addon-fit": "^0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.72",
|
||||
"@git.zone/tsbuild": "^2.1.84",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tstest": "^1.0.86",
|
||||
"@git.zone/tswatch": "^2.0.21",
|
||||
"@git.zone/tstest": "^1.0.90",
|
||||
"@git.zone/tswatch": "^2.0.37",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^5.0.15",
|
||||
"@types/node": "^20.11.5"
|
||||
"@push.rocks/tapbundle": "^5.5.4",
|
||||
"@types/node": "^22.10.6"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
@ -57,5 +58,31 @@
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
],
|
||||
"keywords": [
|
||||
"Web Components",
|
||||
"User Interface",
|
||||
"UI Library",
|
||||
"Component Library",
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"Dynamic Components",
|
||||
"Modular Architecture",
|
||||
"Reusable Components",
|
||||
"Web Development",
|
||||
"Application UI",
|
||||
"Custom Elements",
|
||||
"Shadow DOM",
|
||||
"UI Elements",
|
||||
"Dashboard Interfaces",
|
||||
"Form Handling",
|
||||
"Data Display",
|
||||
"Visualization",
|
||||
"Charting",
|
||||
"Interactive Components",
|
||||
"Responsive Design",
|
||||
"Web Applications",
|
||||
"Modern Web",
|
||||
"Frontend Development"
|
||||
]
|
||||
}
|
||||
|
13055
pnpm-lock.yaml
generated
13055
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
4
readme.hints.md
Normal file
4
readme.hints.md
Normal file
@ -0,0 +1,4 @@
|
||||
!!! Please pay attention to the following points when writing the readme: !!!
|
||||
* Give a short rundown of components and a few points abputspecific features on each.
|
||||
* Try to list all components in a summary.
|
||||
* Then list all components with a short description.
|
232
readme.md
232
readme.md
@ -1,39 +1,215 @@
|
||||
# @design.estate/dees-catalog
|
||||
a webcomponents catalog for handling daily stuff on the web
|
||||
An extensive library for building modern web applications with dynamic components using Web Components, JavaScript, and TypeScript.
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/dees-catalog)
|
||||
* [gitlab.com (source)](https://gitlab.com/design.estate/dees-catalog)
|
||||
* [github.com (source mirror)](https://github.com/design.estate/dees-catalog)
|
||||
* [docs (typedoc)](https://design.estate.gitlab.io/dees-catalog/)
|
||||
## Install
|
||||
To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager. Using npm is recommended:
|
||||
|
||||
## Status for master
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
```bash
|
||||
npm install @design.estate/dees-catalog
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribution
|
||||
### Overview
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
The `@design.estate/dees-catalog` is a powerful library that offers a suite of dynamic components designed for building sophisticated web applications. This library leverages modern web standards such as Web Components, and programming languages like JavaScript and TypeScript to provide developers with modular and reusable components. These components enhance the development workflow by offering ready-to-use solutions for UI design and interactivity, enabling developers to create intricate and functional applications efficiently.
|
||||
|
||||
## Contribution
|
||||
Below, we will explore the diverse range of components available, demonstrating their integration and usage thoroughly within real-world scenarios. Each example will be crafted in TypeScript to ensure type safety and maintainable code. Let's navigate through the components by examining their setups, features, and potential applications in a comprehensive manner.
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
### Getting Started with Components
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
To use these components, you first need to import them into your project. Depending on your development environment, you might be using a module bundler that supports ES modules. In such cases, importing components is straightforward as demonstrated below:
|
||||
|
||||
## Legal
|
||||
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
```typescript
|
||||
import {
|
||||
DeesButton,
|
||||
DeesModal,
|
||||
DeesTable,
|
||||
DeesAppuiBase,
|
||||
DeesForm,
|
||||
DeesInputText,
|
||||
DeesAppuiMainmenu,
|
||||
DeesAppuiMainselector
|
||||
} from '@design.estate/dees-catalog';
|
||||
```
|
||||
|
||||
### Button Component: `DeesButton`
|
||||
|
||||
`DeesButton` is a versatile button component that can be configured for various UI needs such as form submissions, navigation actions, or interactive interfaces. It supports multiple styles including normal, highlighted, discreet, and status-based variations (e.g., pending, success, error).
|
||||
|
||||
#### Example Usage
|
||||
|
||||
```typescript
|
||||
import { DeesButton } from '@design.estate/dees-catalog';
|
||||
|
||||
// Create a simple button
|
||||
const submitButton = document.createElement('dees-button');
|
||||
submitButton.text = 'Submit';
|
||||
submitButton.type = 'highlighted';
|
||||
|
||||
// Add functionality
|
||||
submitButton.addEventListener('clicked', () => {
|
||||
console.log('Submit button clicked!');
|
||||
});
|
||||
document.body.appendChild(submitButton);
|
||||
|
||||
// Handling status change
|
||||
async function handleFormSubmission() {
|
||||
submitButton.status = 'pending';
|
||||
try {
|
||||
await simulateNetworkRequest();
|
||||
submitButton.status = 'success';
|
||||
} catch {
|
||||
submitButton.status = 'error';
|
||||
}
|
||||
}
|
||||
|
||||
function simulateNetworkRequest() {
|
||||
return new Promise(resolve => setTimeout(resolve, 2000));
|
||||
}
|
||||
|
||||
submitButton.addEventListener('clicked', handleFormSubmission);
|
||||
```
|
||||
|
||||
### Modal Component: `DeesModal`
|
||||
|
||||
The `DeesModal` component is used to display content in an overlay. It is suitable for scenarios like alerts, dialog boxes, or interactive user forms. The modal can be highly customized with different header, content, and footer components.
|
||||
|
||||
#### Example Usage
|
||||
|
||||
```typescript
|
||||
import { DeesModal } from '@design.estate/dees-catalog';
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
// Creating a modal
|
||||
const modalContent = html`<p>Welcome to our platform</p>`;
|
||||
const modal = DeesModal.createAndShow({
|
||||
heading: 'Welcome',
|
||||
content: modalContent,
|
||||
menuOptions: [
|
||||
{ name: 'Close', action: () => modal.destroy() },
|
||||
{ name: 'Proceed', action: () => console.log('Proceeding') }
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
### Form Handling With `DeesForm`
|
||||
|
||||
The `DeesForm` and its related input elements simplify form creation and handling. The form component integrates validation, submission, and data collection functions.
|
||||
|
||||
#### Creating a Form
|
||||
|
||||
```typescript
|
||||
import {
|
||||
DeesForm,
|
||||
DeesInputText,
|
||||
DeesFormSubmit,
|
||||
DeesInputDropdown
|
||||
} from '@design.estate/dees-catalog';
|
||||
|
||||
const registrationForm = document.createElement('dees-form');
|
||||
|
||||
const nameInput = document.createElement('dees-input-text');
|
||||
nameInput.label = 'Name';
|
||||
nameInput.required = true;
|
||||
|
||||
const roleSelect = document.createElement('dees-input-dropdown');
|
||||
roleSelect.label = 'Role';
|
||||
roleSelect.options = [
|
||||
{ option: 'Admin', key: 'admin' },
|
||||
{ option: 'Editor', key: 'editor' }
|
||||
];
|
||||
|
||||
const submitButton = document.createElement('dees-form-submit');
|
||||
submitButton.text = 'Register';
|
||||
|
||||
registrationForm.appendChild(nameInput);
|
||||
registrationForm.appendChild(roleSelect);
|
||||
registrationForm.appendChild(submitButton);
|
||||
|
||||
registrationForm.addEventListener('formData', event => {
|
||||
console.log('Form Data:', event.detail.data);
|
||||
});
|
||||
|
||||
document.body.appendChild(registrationForm);
|
||||
```
|
||||
|
||||
### Data Presentation with `DeesTable`
|
||||
|
||||
The `DeesTable` component allows for effective data management and presentation through dynamic tables. It supports features such as sorting, selecting, and action-triggering from table items.
|
||||
|
||||
#### Displaying a Data Table
|
||||
|
||||
```typescript
|
||||
import { DeesTable } from '@design.estate/dees-catalog';
|
||||
|
||||
const data = [
|
||||
{ name: 'Alice', status: 'Active' },
|
||||
{ name: 'Bob', status: 'Inactive' }
|
||||
];
|
||||
|
||||
const table = new DeesTable();
|
||||
table.heading1 = 'User Table';
|
||||
table.data = data;
|
||||
|
||||
document.body.appendChild(table);
|
||||
|
||||
// Custom Actions and Row Selection
|
||||
table.addEventListener('rowSelected', (event) => console.log(event.detail));
|
||||
```
|
||||
|
||||
### Structural Components
|
||||
|
||||
`DeesAppuiBase`, along with components such as `DeesAppuiMainmenu` and `DeesAppuiMainselector`, provide the scaffolding needed for application UIs, particularly dashboards.
|
||||
|
||||
#### Setting Up an Application Layout
|
||||
|
||||
```typescript
|
||||
import { DeesAppuiBase } from '@design.estate/dees-catalog';
|
||||
|
||||
const appBase = document.createElement('dees-appui-base');
|
||||
document.body.appendChild(appBase);
|
||||
```
|
||||
|
||||
### Data Visualization with ApexCharts
|
||||
|
||||
`DeesChartArea` provides easy integration with ApexCharts for creating detailed visualizations.
|
||||
|
||||
#### Implementing a Chart
|
||||
|
||||
```typescript
|
||||
import { DeesChartArea } from '@design.estate/dees-catalog';
|
||||
|
||||
// Create and configure a chart
|
||||
const chart = new DeesChartArea();
|
||||
document.body.appendChild(chart);
|
||||
|
||||
chart.chart.updateSeries([
|
||||
{ name: 'Sales', data: [20, 40, 30, 50] }
|
||||
]);
|
||||
```
|
||||
|
||||
### Customization and Extensibility
|
||||
|
||||
The `@design.estate/dees-catalog` is built for extensibility and customization. You can extend components, integrate custom events, and style them as per your requirements. This ensures that your application remains unique and tailored to your audience.
|
||||
|
||||
The library not only saves development time by providing ready-made components but also enhances maintainability through its clean interfaces and TypeScript support, making your code robust and type-safe. With the library's expansive set of features, building modern web applications has never been easier. Enjoy the blend of simplicity and power that `@design.estate/dees-catalog` brings to the table.
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository.
|
||||
|
||||
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
||||
|
||||
### Trademarks
|
||||
|
||||
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
|
||||
|
||||
### Company Information
|
||||
|
||||
Task Venture Capital GmbH
|
||||
Registered at District court Bremen HRB 35230 HB, Germany
|
||||
|
||||
For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
|
||||
|
||||
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||
|
@ -1,8 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
* autocreated commitinfo by @push.rocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.273',
|
||||
description: 'website for lossless.com'
|
||||
version: '1.4.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
239
ts_web/elements/dees-appui-activitylog.ts
Normal file
239
ts_web/elements/dees-appui-activitylog.ts
Normal file
@ -0,0 +1,239 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
@customElement('dees-appui-activitylog')
|
||||
export class DeesAppuiActivitylog extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-appui-activitylog></dees-appui-activitylog>`;
|
||||
|
||||
// INSTANCE
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #111c28;
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
border-left: 1px solid #202020;
|
||||
cursor: default;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding: 0px 12px 0px 12px;
|
||||
background: #0e151f;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
padding-top: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
|
||||
.activityContainer {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
padding: 8px 0px;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
.streamingIndicator {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
color: #888
|
||||
}
|
||||
|
||||
.streamingIndicator.bottom {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.activityentry {
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px dotted #ffffff20;
|
||||
}
|
||||
|
||||
.activityentry:last-of-type {
|
||||
border-bottom: 1px solid #ffffff00;
|
||||
}
|
||||
|
||||
.activityentry:hover {
|
||||
background: #00000080;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #ff8787;
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #0e151f;
|
||||
}
|
||||
.searchbox input {
|
||||
color: #fff;
|
||||
background: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 32px;
|
||||
border: none;
|
||||
padding: 4px 12px;
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
}
|
||||
|
||||
.searchbox input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bottomShadow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
bottom: 40px;
|
||||
background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.topShadow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
top: 32px;
|
||||
background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style></style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="heading">Activity Log</div>
|
||||
</div>
|
||||
<div class="activityContainer">
|
||||
<div class="streamingIndicator">streaming...</div>
|
||||
<div class="activityentry" @contextmenu=${async eventArg => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'app settings',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'account settings',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'logout',
|
||||
action: async () => {},
|
||||
},
|
||||
]);
|
||||
}}>
|
||||
<span class="timestamp">22:01:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:03:</span> Max Mustermann added a new contact
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:04:</span> Max Mustermann updated account settings
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:05:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:06:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:07:</span> Max Mustermann created a new invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:08:</span> Max Mustermann sent an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:09:</span> Max Mustermann viewed reports
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:10:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:11:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:13:</span> Max Mustermann contacted support
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:14:</span> Max Mustermann added a new user
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:15:</span> Max Mustermann changed password
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:16:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:17:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:18:</span> Max Mustermann archived an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:19:</span> Max Mustermann approved a payment
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:20:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="streamingIndicator bottom">loading more...</div>
|
||||
</div>
|
||||
<div class="searchbox">
|
||||
<input type="text" placeholder="Search" />
|
||||
</div>
|
||||
<div class="topShadow"></div>
|
||||
<div class="bottomShadow"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
77
ts_web/elements/dees-appui-appbar.ts
Normal file
77
ts_web/elements/dees-appui-appbar.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('dees-appui-appbar')
|
||||
export class DeesAppuiBar extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-appbar></dees-appui-appbar>`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #202020;
|
||||
background: #000000;
|
||||
color: #ffffff80;
|
||||
font-size: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
padding-left: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
line-height: 24px;
|
||||
padding: 0px 8px;
|
||||
margin: 8px 0px;
|
||||
border-radius: 4px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
background: #ffffff20;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="menus">
|
||||
<dees-windowcontrols></dees-windowcontrols>
|
||||
<div class="menuItem">File</div>
|
||||
<div class="menuItem">View</div>
|
||||
<div class="menuItem">Help</div>
|
||||
<div class="menuItem">Terminal</div>
|
||||
</div>
|
||||
<div class="breadcrumbs">
|
||||
tool:social.io > org:design.estate > prop:lossless.com
|
||||
</div>
|
||||
<div class="account"></div>
|
||||
`;
|
||||
}
|
||||
}
|
47
ts_web/elements/dees-appui-base.ts
Normal file
47
ts_web/elements/dees-appui-base.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('dees-appui-base')
|
||||
export class DeesAppuiBase extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-base></dees-appui-base>`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.maingrid {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 240px auto 240px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<dees-appui-appbar></dees-appui-appbar>
|
||||
<div class="maingrid">
|
||||
<dees-appui-mainmenu></dees-appui-mainmenu>
|
||||
<dees-appui-mainselector></dees-appui-mainselector>
|
||||
<dees-appui-maincontent></dees-appui-maincontent>
|
||||
<dees-appui-activitylog></dees-appui-activitylog>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
161
ts_web/elements/dees-appui-maincontent.ts
Normal file
161
ts_web/elements/dees-appui-maincontent.ts
Normal file
@ -0,0 +1,161 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('dees-appui-maincontent')
|
||||
export class DeesAppuiMaincontent extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-maincontent></dees-appui-maincontent>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public tabs: interfaces.ITab[] = [
|
||||
{ key: 'option 1', action: () => {} },
|
||||
{ key: 'a very long option', action: () => {} },
|
||||
{ key: 'reminder: set your tabs', action: () => {} },
|
||||
{ key: 'option 4', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedTab = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #161616;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
margin-left: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab {
|
||||
color: #a0a0a0;
|
||||
white-space: nowrap;
|
||||
margin-right: 30px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 12px;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab.selectedTab {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.topbar .tabIndicator {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 40px;
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #161616;
|
||||
transition: all 0.1s;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-top: 1px solid #444444;
|
||||
}
|
||||
|
||||
.mainicon {
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
.topbar .tabsContainer {
|
||||
grid-template-columns: repeat(${this.tabs.length}, min-content);
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="tabsContainer">
|
||||
${this.tabs.map((tabArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
|
||||
@click="${() => {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
tabArg.action();
|
||||
}}"
|
||||
>
|
||||
${tabArg.key}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="tabIndicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* updates the indicator
|
||||
*/
|
||||
private updateTabIndicator() {
|
||||
let selectedTab = this.selectedTab;
|
||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||
);
|
||||
const tabsContainer: HTMLElement = this.shadowRoot.querySelector('.tabsContainer');
|
||||
const marginLeft = parseInt(window.getComputedStyle(tabsContainer).getPropertyValue("margin-left"));
|
||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||
tabIndicator.style.width = selectedTabElement.clientWidth + 24 + 'px';
|
||||
tabIndicator.style.left = selectedTabElement.offsetLeft + marginLeft - 12 + 'px';
|
||||
}
|
||||
|
||||
private updateTab(tabArg: interfaces.ITab) {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
this.selectedTab.action();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.updateTab(this.tabs[0]);
|
||||
}
|
||||
}
|
142
ts_web/elements/dees-appui-mainmenu.ts
Normal file
142
ts_web/elements/dees-appui-mainmenu.ts
Normal file
@ -0,0 +1,142 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
/**
|
||||
* the most left menu
|
||||
* usually used as organization selector
|
||||
*/
|
||||
@customElement('dees-appui-mainmenu')
|
||||
export class DeesAppuiMainmenu extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-mainmenu></dees-appui-mainmenu>`;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
// INSTANCE
|
||||
@property()
|
||||
public tabs: interfaces.ITab[] = [
|
||||
{ key: 'option 1', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 2', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 3', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 4', iconName: 'building', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedTab: interfaces.ITab;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainContainer {
|
||||
--menuSize: 60px;
|
||||
color: #ccc;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: var(--menuSize);
|
||||
height: 100%;
|
||||
background: #000000;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
user-select: none;
|
||||
border-right: 1px solid #202020;
|
||||
}
|
||||
|
||||
.tabsContainer {
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding-top: 18px;
|
||||
font-size: 24px;
|
||||
width: var(--menuSize);
|
||||
height: var(--menuSize);
|
||||
text-align: center;
|
||||
transition: color 0.1s, background 0.2s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.tab.selectedTab {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tabIndicator {
|
||||
opacity: 0;
|
||||
background: #4e729a;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: calc((var(--menuSize) / 3) * 2);
|
||||
left: 0px;
|
||||
top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainContainer" @contextmenu=${(eventArg) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [{
|
||||
name: 'app settings',
|
||||
action: async () => {},
|
||||
iconName: 'gear',
|
||||
}])
|
||||
}}>
|
||||
<div class="tabsContainer">
|
||||
${this.tabs.map((tabArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
|
||||
@click="${() => {
|
||||
this.updateTab(tabArg);
|
||||
}}"
|
||||
>
|
||||
<dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="tabIndicator"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async updateTabIndicator() {
|
||||
let selectedTab = this.selectedTab;
|
||||
if (!selectedTab) {
|
||||
selectedTab = this.tabs[0];
|
||||
}
|
||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||
);
|
||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||
const offsetTop = selectedTabElement.offsetTop;
|
||||
tabIndicator.style.opacity = `1`;
|
||||
tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
|
||||
}
|
||||
|
||||
updateTab(tabArg: interfaces.ITab) {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
this.selectedTab.action();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.updateTab(this.tabs[0]);
|
||||
}
|
||||
}
|
160
ts_web/elements/dees-appui-mainselector.ts
Normal file
160
ts_web/elements/dees-appui-mainselector.ts
Normal file
@ -0,0 +1,160 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* the property selector menu
|
||||
* mainly used to select assets within in an organization
|
||||
*/
|
||||
@customElement('dees-appui-mainselector')
|
||||
export class DeesAppuiMainselector extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-mainselector></dees-appui-mainselector>`;
|
||||
|
||||
// INSTANCE
|
||||
@property()
|
||||
public selectionOptions: interfaces.ISelectionOption[] = [
|
||||
{
|
||||
key: 'Overview',
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
key: 'option 1',
|
||||
action: () => {},
|
||||
},
|
||||
{ key: 'option 2', action: () => {} },
|
||||
{ key: 'option 3', action: () => {} },
|
||||
{ key: 'option 4', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedOption: interfaces.ISelectionOption = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #000000;
|
||||
border-right: 1px solid #222222;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selectionOptions {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
padding-top: 8px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption {
|
||||
cursor: default;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: 1px dotted #303030;
|
||||
border-left: 0px solid rgba(0, 0, 0, 0);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:hover {
|
||||
border-left: 2px solid #26a69a50;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:first-child {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption.selectedOption {
|
||||
border-left: 4px solid #26a69a;
|
||||
padding-left: 10px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="heading">Properties</div>
|
||||
</div>
|
||||
<div class="selectionOptions">
|
||||
${this.selectionOptions.map((selectionOptionArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="selectionOption ${this.selectedOption === selectionOptionArg
|
||||
? 'selectedOption'
|
||||
: null}"
|
||||
@click="${() => {
|
||||
this.selectOption(selectionOptionArg);
|
||||
}}"
|
||||
@contextmenu="${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'property settings',
|
||||
action: async () => {},
|
||||
iconName: 'gear',
|
||||
},
|
||||
]);
|
||||
}}"
|
||||
>
|
||||
${selectionOptionArg.key}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private selectOption(optionArg: interfaces.ISelectionOption) {
|
||||
this.selectedOption = optionArg;
|
||||
this.selectedOption.action();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.selectOption(this.selectionOptions[0]);
|
||||
}
|
||||
}
|
@ -35,7 +35,8 @@ export class DeesButton extends DeesElement {
|
||||
public eventDetailData: string;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@ -61,11 +62,10 @@ export class DeesButton extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', 'monospace';
|
||||
font-family: 'Geist Sans', 'monospace';
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
@ -84,7 +84,7 @@ export class DeesButton extends DeesElement {
|
||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||
border-radius: 4px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
padding: 0px 8px;
|
||||
min-width: 100px;
|
||||
user-select: none;
|
||||
@ -104,13 +104,6 @@ export class DeesButton extends DeesElement {
|
||||
border-top: 1px solid #0069f2;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.highlighted {
|
||||
background: #e4002b;
|
||||
border: none;
|
||||
@ -132,6 +125,14 @@ export class DeesButton extends DeesElement {
|
||||
.button.discreet:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
21
ts_web/elements/dees-chart-area.demo.ts
Normal file
21
ts_web/elements/dees-chart-area.demo.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => {
|
||||
return html`
|
||||
<style>
|
||||
.demoBox {
|
||||
position: relative;
|
||||
background: #000000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<div class="demoBox">
|
||||
<dees-chart-area
|
||||
.label=${'System Usage'}
|
||||
></dees-chart-area>
|
||||
</div>
|
||||
`;
|
||||
};
|
266
ts_web/elements/dees-chart-area.ts
Normal file
266
ts_web/elements/dees-chart-area.ts
Normal file
@ -0,0 +1,266 @@
|
||||
import {
|
||||
DeesElement,
|
||||
css,
|
||||
cssManager,
|
||||
customElement,
|
||||
html,
|
||||
property,
|
||||
state,
|
||||
type CSSResult,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { demoFunc } from './dees-chart-area.demo.js';
|
||||
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-chart-area': DeesChartArea;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-chart-area')
|
||||
export class DeesChartArea extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// instance
|
||||
@state()
|
||||
public chart: ApexCharts;
|
||||
|
||||
@property()
|
||||
public label: string = 'Untitled Chart';
|
||||
|
||||
private resizeObserver: ResizeObserver;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
if (entry.target.classList.contains('mainbox')) {
|
||||
this.resizeChart(); // Call resizeChart when the .mainbox size changes
|
||||
}
|
||||
}
|
||||
});
|
||||
this.registerStartupFunction(async () => {
|
||||
this.updateComplete.then(() => {
|
||||
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||
if (mainbox) {
|
||||
this.resizeObserver.observe(mainbox); // Start observing the .mainbox element
|
||||
}
|
||||
});
|
||||
});
|
||||
this.registerGarbageFunction(async () => {
|
||||
this.resizeObserver.disconnect();
|
||||
});
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
color: #ccc;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: #111;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chartTitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.chartContainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
padding: 32px 16px 16px 0px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<div class="chartTitle">${this.label}</div>
|
||||
<div class="chartContainer"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
var options: ApexCharts.ApexOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'cpu',
|
||||
data: [
|
||||
{ x: '2025-01-15T03:00:00', y: 25 },
|
||||
{ x: '2025-01-15T07:00:00', y: 30 },
|
||||
{ x: '2025-01-15T11:00:00', y: 20 },
|
||||
{ x: '2025-01-15T15:00:00', y: 35 },
|
||||
{ x: '2025-01-15T19:00:00', y: 25 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'memory',
|
||||
data: [
|
||||
{ x: '2025-01-15T03:00:00', y: 10 },
|
||||
{ x: '2025-01-15T07:00:00', y: 12 },
|
||||
{ x: '2025-01-15T11:00:00', y: 10 },
|
||||
{ x: '2025-01-15T15:00:00', y: 30 },
|
||||
{ x: '2025-01-15T19:00:00', y: 40 },
|
||||
],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
width: 0, // Adjusted for responsive width
|
||||
height: 0, // Adjusted for responsive height
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false, // This line disables the toolbar
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime', // Time-series data
|
||||
labels: {
|
||||
format: 'hh:mm A', // Time formatting
|
||||
style: {
|
||||
colors: '#9e9e9e', // Label color
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false, // Hide x-axis border
|
||||
},
|
||||
axisTicks: {
|
||||
show: false, // Hide x-axis ticks
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
labels: {
|
||||
formatter: function (val: number) {
|
||||
return `${val} Mbps`; // Format Y-axis labels
|
||||
},
|
||||
style: {
|
||||
colors: '#9e9e9e', // Label color
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false, // Hide y-axis border
|
||||
},
|
||||
axisTicks: {
|
||||
show: false, // Hide y-axis ticks
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: true, // Enables the tooltip to display across series
|
||||
intersect: false, // Allows hovering anywhere on the chart
|
||||
followCursor: true, // Makes tooltip follow mouse even between points
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
|
||||
// Get the x value
|
||||
const xValue = w.globals.labels[dataPointIndex];
|
||||
// Iterate through each series and get its value
|
||||
let tooltipContent = `<div style="padding: 10px; background: #1e1e2f; color: white; border-radius: 5px;">`;
|
||||
tooltipContent += ``; // `<strong>Time:</strong> ${xValue}<br/>`;
|
||||
|
||||
series.forEach((s, index) => {
|
||||
const label = w.globals.seriesNames[index]; // Get series label
|
||||
const value = s[dataPointIndex]; // Get value at data point
|
||||
tooltipContent += `<strong>${label}:</strong> ${value} Mbps<br/>`;
|
||||
});
|
||||
|
||||
tooltipContent += `</div>`;
|
||||
return tooltipContent;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true, // This enables the grid lines along the x-axis
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
borderColor: '#333', // Set the color of the grid lines
|
||||
strokeDashArray: 0, // Solid line
|
||||
row: {
|
||||
colors: [], // This can be used to alternate the shading of the horizontal rows
|
||||
opacity: 0.1,
|
||||
},
|
||||
column: {
|
||||
colors: [], // For vertical column bands, not needed here but available for customization
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient', // Gradient fill for the area
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'vertical',
|
||||
gradientToColors: ['#9c27b0'], // Gradient color ending
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
};
|
||||
this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
|
||||
await this.chart.render();
|
||||
await this.resizeChart();
|
||||
}
|
||||
|
||||
public async resizeChart() {
|
||||
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
|
||||
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
|
||||
|
||||
// Get computed style of the element
|
||||
const styleMainbox = window.getComputedStyle(mainbox);
|
||||
const styleChartContainer = window.getComputedStyle(chartContainer);
|
||||
|
||||
// Extract padding values
|
||||
const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
|
||||
const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
|
||||
const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
|
||||
const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
|
||||
|
||||
// Calculate the actual width and height to use, subtracting padding
|
||||
const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
|
||||
const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
|
||||
|
||||
await this.chart.updateOptions({
|
||||
chart: {
|
||||
width: actualWidth,
|
||||
height: actualHeight,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
20
ts_web/elements/dees-chart-log.demo.ts
Normal file
20
ts_web/elements/dees-chart-log.demo.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => {
|
||||
return html`
|
||||
<style>
|
||||
.demoBox {
|
||||
position: relative;
|
||||
background: #000000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
<div class="demoBox">
|
||||
<dees-chart-log
|
||||
.label=${'Event Log'}
|
||||
></dees-chart-log>
|
||||
</div>
|
||||
`;
|
||||
};
|
89
ts_web/elements/dees-chart-log.ts
Normal file
89
ts_web/elements/dees-chart-log.ts
Normal file
@ -0,0 +1,89 @@
|
||||
import {
|
||||
DeesElement,
|
||||
css,
|
||||
cssManager,
|
||||
customElement,
|
||||
html,
|
||||
property,
|
||||
state,
|
||||
type CSSResult,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { demoFunc } from './dees-chart-log.demo.js';
|
||||
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-chart-log': DeesChartLog;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-chart-log')
|
||||
export class DeesChartLog extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// instance
|
||||
@state()
|
||||
public chart: ApexCharts;
|
||||
|
||||
@property()
|
||||
public label: string = 'Untitled Chart';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
color: #ccc;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: #222;
|
||||
border-radius: 8px;
|
||||
padding: 32px 16px 16px 0px;
|
||||
}
|
||||
|
||||
.chartTitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.chartContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html` <div class="mainbox">
|
||||
<div class="chartTitle">${this.label}</div>
|
||||
<div class="chartContainer"></div>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
|
||||
}
|
||||
|
||||
public async updateLog() {
|
||||
|
||||
}
|
||||
}
|
@ -48,7 +48,7 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
@ -142,7 +142,7 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
.lineNumbers {
|
||||
line-height: 1.4em;
|
||||
font-weight: 200;
|
||||
font-family: 'Intel One Mono', 'monospace';
|
||||
font-family: 'Intel One Mono', 'Geist Mono', 'monospace';
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
|
@ -133,7 +133,7 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
|
||||
.detail .detailsText .value {
|
||||
font-size: 14px;
|
||||
font-family: 'Intel One Mono';
|
||||
font-family: 'Intel One Mono', 'Geist Mono';
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@ -50,7 +50,7 @@ export class DeesEditor extends DeesElement {
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
}
|
||||
|
@ -101,6 +101,10 @@ export class DeesForm extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* collects the form data
|
||||
* @returns
|
||||
*/
|
||||
public async collectFormData() {
|
||||
const children = this.getFormElements();
|
||||
const valueObject: { [key: string]: string | number | boolean | any[] } = {};
|
||||
|
@ -142,7 +142,7 @@ export class DeesInputFileupload extends DeesElement {
|
||||
text-align: left;
|
||||
border-radius: 3px;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
border-top: 1px solid #ffffff10;
|
||||
|
@ -12,6 +12,12 @@ import {
|
||||
|
||||
const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-multitoggle': DeesInputMultitoggle;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-multitoggle')
|
||||
export class DeesInputMultitoggle extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
@ -176,7 +176,7 @@ export class DeesInputText extends DeesElement {
|
||||
return html`
|
||||
<style>
|
||||
input {
|
||||
font-family: ${this.isPasswordBool ? 'monospace' : 'Roboto'};
|
||||
font-family: ${this.isPasswordBool ? 'monospace' : 'Geist Sans'};
|
||||
letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
@ -115,7 +115,7 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
padding: 8px 0px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px dashed #444;
|
||||
margin-top: 16px;
|
||||
|
@ -71,7 +71,7 @@ export class DeesModal extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
will-change: transform;
|
||||
}
|
||||
@ -113,7 +113,7 @@ export class DeesModal extends DeesElement {
|
||||
|
||||
.modal .heading {
|
||||
height: 32px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
|
@ -32,7 +32,7 @@ export class DeesPdf extends DeesElement {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 800px;
|
||||
|
@ -1,5 +1,21 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import type { IView } from './dees-simple-appdash.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-simple-appdash>Hello there</dees-simple-appdash>
|
||||
<dees-simple-appdash
|
||||
.viewTabs=${[
|
||||
{
|
||||
name: 'View 1',
|
||||
element: null,
|
||||
},
|
||||
{
|
||||
name: 'View 2',
|
||||
element: null,
|
||||
},
|
||||
{
|
||||
name: 'View 3',
|
||||
element: null,
|
||||
}
|
||||
] as IView[]}
|
||||
>Hello there</dees-simple-appdash>
|
||||
`;
|
||||
|
@ -22,6 +22,11 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export interface IView {
|
||||
name: string;
|
||||
element: DeesElement['constructor']['prototype'];
|
||||
}
|
||||
|
||||
@customElement('dees-simple-appdash')
|
||||
export class DeesSimpleAppDash extends DeesElement {
|
||||
// STATIC
|
||||
@ -32,8 +37,10 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
public name = 'Dees Simple Login';
|
||||
|
||||
@property()
|
||||
public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
|
||||
[];
|
||||
public viewTabs: IView[] = [];
|
||||
|
||||
@property()
|
||||
public terminalSetupCommand: string = `pnpm install @serve.zone/cli && clear && servezone info`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
@ -42,38 +49,64 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
user-select: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.appbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: calc(100% - 24px);
|
||||
width: 200px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff20')};
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
padding: 0px 16px;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8);
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr auto;
|
||||
grid-template-rows: min-content auto min-content;
|
||||
}
|
||||
|
||||
.appbar .viewTabs {
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: top;
|
||||
}
|
||||
|
||||
.viewTab {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.viewTab:hover {
|
||||
background: ${cssManager.bdTheme('#ccc', '#ffffff10')};
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.viewTab:active {
|
||||
background: ${cssManager.bdTheme('#aaa', '#ffffff20')};
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.appName {
|
||||
white-space: nowrap;
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
}
|
||||
|
||||
.appActions {
|
||||
@ -88,13 +121,15 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
|
||||
.appcontent {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
height: calc(100vh - 32px - 24px);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: calc(100vh - 24px);
|
||||
bottom: 24px;
|
||||
width: 100%;
|
||||
width: calc(100vw - 200px);
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.controlbar {
|
||||
@ -103,6 +138,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #44444480;
|
||||
height: 24px;
|
||||
background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
|
||||
z-index: 2;
|
||||
@ -110,6 +146,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.control {
|
||||
@ -126,13 +163,23 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
<div class="maincontainer">
|
||||
<div class="appbar">
|
||||
<div class="appName">${this.name}</div>
|
||||
<div class="viewTabs"></div>
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
<div class="viewTab" @click=${() => {
|
||||
this.loadView(view);
|
||||
}}>${view.name}</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<div class="appActions">
|
||||
<div class="action">Logout</div>
|
||||
<div class="action" @click=${() => {
|
||||
this.dispatchEvent(new CustomEvent('logout'));
|
||||
}}>Logout</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appcontent">
|
||||
<slot></slot>
|
||||
|
||||
</div>
|
||||
<div class="controlbar">
|
||||
<div class="control">
|
||||
@ -149,16 +196,20 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
public async firstUpdated(_changedProperties): Promise<void> {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
super.firstUpdated(_changedProperties);
|
||||
await this.loadView(this.viewTabs[0]);
|
||||
}
|
||||
|
||||
public currentTerminal: DeesTerminal;
|
||||
public async launchTerminal() {
|
||||
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
|
||||
const terminal = new DeesTerminal();
|
||||
terminal.setupCommand = this.terminalSetupCommand;
|
||||
this.currentTerminal = terminal;
|
||||
maincontainer.appendChild(terminal);
|
||||
terminal.style.position = 'absolute';
|
||||
terminal.style.zIndex = '1';
|
||||
terminal.style.top = '32px';
|
||||
terminal.style.left = '0px';
|
||||
terminal.style.top = '0px';
|
||||
terminal.style.left = '200px';
|
||||
terminal.style.right = '0px';
|
||||
terminal.style.bottom = '24px';
|
||||
terminal.style.opacity = '0';
|
||||
@ -167,5 +218,17 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
await domtools.plugins.smartdelay.delayFor(0);
|
||||
terminal.style.opacity = '1';
|
||||
terminal.style.transform = 'translateY(0px)';
|
||||
return terminal;
|
||||
}
|
||||
|
||||
private currentView: DeesElement;
|
||||
public async loadView(viewArg: IView) {
|
||||
const appcontent = this.shadowRoot.querySelector('.appcontent');
|
||||
const view = new viewArg.element();
|
||||
if (this.currentView) {
|
||||
this.currentView.remove();
|
||||
}
|
||||
appcontent.appendChild(view);
|
||||
this.currentView = view;
|
||||
}
|
||||
}
|
||||
|
@ -103,7 +103,6 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
const submit = this.shadowRoot.querySelector('dees-form-submit');
|
||||
form.addEventListener('formData', (event: CustomEvent) => {
|
||||
this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
|
||||
// this.switchToSlottedContent();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -102,7 +102,7 @@ export class DeesStepper extends DeesElement {
|
||||
transition: all 0.7s ease-in-out;
|
||||
max-width: 500px;
|
||||
min-height: 300px;
|
||||
border-radius: 8px;
|
||||
border-radius: 16px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
@ -174,9 +174,10 @@ export class DeesStepper extends DeesElement {
|
||||
.step .title {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-size: 22px;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step .content {
|
||||
|
@ -171,7 +171,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
css`
|
||||
.mainbox {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
padding: 16px;
|
||||
@ -190,7 +190,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
@ -289,7 +289,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
th,
|
||||
@ -366,7 +366,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#111', '#ffffff90')};
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
|
||||
|
@ -22,11 +22,26 @@ declare global {
|
||||
|
||||
@customElement('dees-terminal')
|
||||
export class DeesTerminal extends DeesElement {
|
||||
public static demo = () => html` <dees-terminal></dees-terminal> `;
|
||||
public static demo = () => html` <dees-terminal
|
||||
.environment=${{
|
||||
NODE_ENV: 'development',
|
||||
PORT: '3000',
|
||||
}}
|
||||
></dees-terminal> `;
|
||||
|
||||
// INSTANCE
|
||||
private resizeObserver: ResizeObserver;
|
||||
|
||||
@property()
|
||||
public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
|
||||
|
||||
@property()
|
||||
environment: {[key: string]: string} = {};
|
||||
|
||||
// exposing webcontainer
|
||||
private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
|
||||
public webcontainerPromise = this.webcontainerDeferred.promise;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
@ -39,7 +54,7 @@ export class DeesTerminal extends DeesElement {
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
padding: 20px;
|
||||
@ -278,8 +293,16 @@ export class DeesTerminal extends DeesElement {
|
||||
term.onData((data) => {
|
||||
input.write(data);
|
||||
});
|
||||
await domtools.convenience.smartdelay.delayFor(5000);
|
||||
input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`);
|
||||
await this.waitForPrompt(term, '~/');
|
||||
// lets set the environment variables
|
||||
await this.setEnvironmentVariables(this.environment, webcontainerInstance);
|
||||
input.write(`source source.env\n`);
|
||||
await this.waitForPrompt(term, '~/');
|
||||
// lets run the setup command
|
||||
input.write(this.setupCommand);
|
||||
await this.waitForPrompt(term, '~/');
|
||||
input.write(`clear && echo 'welcome'\n`);
|
||||
this.webcontainerDeferred.resolve(webcontainerInstance);
|
||||
}
|
||||
|
||||
async connectedCallback(): Promise<void> {
|
||||
@ -295,4 +318,38 @@ export class DeesTerminal extends DeesElement {
|
||||
handleResize() {
|
||||
this.fitAddon.fit();
|
||||
}
|
||||
|
||||
public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
|
||||
return new Promise<void>((resolve) => {
|
||||
const checkPrompt = () => {
|
||||
const lines = term.buffer.active;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines.getLine(i);
|
||||
if (line && line.translateToString().includes(prompt)) {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
}
|
||||
setTimeout(checkPrompt, 100); // check every 100 ms
|
||||
};
|
||||
|
||||
checkPrompt();
|
||||
});
|
||||
}
|
||||
|
||||
public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
|
||||
const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
|
||||
let envFile = ``
|
||||
for (const key in envArg) {
|
||||
envFile += `export ${key}="${envArg[key]}"\n`;
|
||||
}
|
||||
|
||||
await webcontainerInstance.mount({'source.env': {
|
||||
file: {
|
||||
contents: envFile,
|
||||
}
|
||||
}});
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,13 @@
|
||||
export * from './dees-appui-activitylog.js';
|
||||
export * from './dees-appui-appbar.js';
|
||||
export * from './dees-appui-base.js';
|
||||
export * from './dees-appui-maincontent.js';
|
||||
export * from './dees-appui-mainmenu.js';
|
||||
export * from './dees-appui-mainselector.js';
|
||||
export * from './dees-button-exit.js';
|
||||
export * from './dees-button.js';
|
||||
export * from './dees-chart-area.js';
|
||||
export * from './dees-chart-log.js';
|
||||
export * from './dees-chips.js';
|
||||
export * from './dees-contextmenu.js';
|
||||
export * from './dees-dataview-codebox.js';
|
||||
|
2
ts_web/elements/interfaces/index.ts
Normal file
2
ts_web/elements/interfaces/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './tab.js';
|
||||
export * from './selectionoption.js';
|
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface ISelectionOption {
|
||||
key: string;
|
||||
action: () => void;
|
||||
}
|
5
ts_web/elements/interfaces/tab.ts
Normal file
5
ts_web/elements/interfaces/tab.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface ITab {
|
||||
key: string;
|
||||
iconName?: string;
|
||||
action: () => void;
|
||||
}
|
@ -1,2 +1,4 @@
|
||||
export * from './elements/index.js';
|
||||
import * as colors from './elements/00colors.js';
|
||||
export { colors };
|
||||
export { commitinfo } from './00_commitinfo_data.js';
|
||||
|
Reference in New Issue
Block a user