1.3.0

changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.1.10",
+  "version": "1.3.0",
   "private": false,
   "description": "A library for building components and other projects",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.1.10',
+  version: '1.3.0',
   description: 'A library for building components and other projects'
 }

ts_web/elements/dees-button.ts

@@ -35,7 +35,8 @@ export class DeesButton extends DeesElement {
   public eventDetailData: string;
 
   @property({
-    type: Boolean
+    type: Boolean,
+    reflect: true,
   })
   public disabled = false;
 
@@ -103,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;
@@ -131,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;
       }

ts_web/elements/dees-simple-appdash.ts

@@ -39,6 +39,9 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public viewTabs: IView[] = [];
 
+  @property()
+  public terminalSetupCommand: string = `pnpm install @serve.zone/cli && clear && servezone info`;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -46,22 +49,25 @@ 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;
+        position: absolute;
+        top: 0px;
+        left: 0px;
         height: calc(100% - 24px);
         width: 200px;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
@@ -115,7 +121,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .appcontent {
         z-index: 1;
-        position: fixed;
+        position: absolute;
         top: 0px;
         right: 0px;
         height: calc(100vh - 24px);
@@ -192,9 +198,12 @@ export class DeesSimpleAppDash extends DeesElement {
     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';
@@ -208,6 +217,7 @@ 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;

ts_web/elements/dees-stepper.ts

@@ -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')};
@@ -175,8 +175,9 @@ export class DeesStepper extends DeesElement {
         text-align: center;
         padding-top: 50px;
         font-family: 'Geist Sans', sans-serif;
-        font-size: 25px;
-        font-weight: 300;
+        font-size: 22px;
+
+        font-weight: 500;
       }
 
       .step .content {

ts_web/index.ts

@@ -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';