@design.estate/dees-catalog 3.67.1 → 3.68.0

package/dist_watch/bundle.js

@@ -150522,11 +150522,17 @@ var _DeesFormSubmit = class _DeesFormSubmit extends (_a25 = DeesElement, _disabl
         .text=${this.text}
         ?disabled=${this.disabled}
         @clicked=${this.submit}
-      >
-        <slot></slot>
-      </dees-button>
+      ></dees-button>
     `;
   }
+  async firstUpdated() {
+    if (!this.text) {
+      const slotText = this.textContent?.trim();
+      if (slotText) {
+        this.text = slotText;
+      }
+    }
+  }
   async submit() {
     if (this.disabled) {
       return;
@@ -199294,12 +199300,35 @@ var demoFunc57 = /* @__PURE__ */ __name(() => b2`
   {
     name: "Analytics",
     iconName: "lucide:lineChart",
-    element: DemoViewAnalytics
+    element: DemoViewAnalytics,
+    subViews: [
+      {
+        name: "Overview",
+        iconName: "lucide:activity",
+        element: DemoViewAnalytics
+      },
+      {
+        name: "Reports",
+        iconName: "lucide:fileText",
+        element: DemoViewDashboard
+      }
+    ]
   },
   {
     name: "Settings",
     iconName: "lucide:settings",
-    element: DemoViewSettings
+    subViews: [
+      {
+        name: "Profile",
+        iconName: "lucide:user",
+        element: DemoViewSettings
+      },
+      {
+        name: "Billing",
+        iconName: "lucide:creditCard",
+        element: DemoViewSettings
+      }
+    ]
   }
 ]}
       @logout=${() => {
@@ -199344,10 +199373,12 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a97 = DeesElement, _
           <div class="viewTabs-container">
             <div class="section-label">Navigation</div>
             <div class="viewTabs">
-              ${this.viewTabs.map(
-      (view) => b2`
+              ${this.viewTabs.map((view) => {
+      const hasSubs = !!view.subViews?.length;
+      const groupActive = hasSubs && this.isGroupActive(view);
+      return b2`
                   <div
-                    class="viewTab ${this.selectedView === view ? "selected" : ""}"
+                    class="viewTab ${this.selectedView === view ? "selected" : ""} ${hasSubs ? "hasSubs" : ""} ${groupActive ? "groupActive" : ""}"
                     @click=${() => this.loadView(view)}
                   >
                     ${view.iconName ? b2`
@@ -199356,9 +199387,34 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a97 = DeesElement, _
                       <dees-icon .icon="${"lucide:file"}"></dees-icon>
                     `}
                     <span>${view.name}</span>
+                    ${hasSubs ? b2`
+                      <dees-icon class="chevron" .icon="${"lucide:chevronDown"}"></dees-icon>
+                    ` : ""}
                   </div>
-                `
-    )}
+                  ${hasSubs && groupActive ? b2`
+                    <div class="subViews">
+                      ${view.subViews.map(
+        (sub2) => b2`
+                          <div
+                            class="viewTab sub ${this.selectedView === sub2 ? "selected" : ""}"
+                            @click=${(e11) => {
+          e11.stopPropagation();
+          this.loadView(sub2);
+        }}
+                          >
+                            ${sub2.iconName ? b2`
+                              <dees-icon .icon="${sub2.iconName.includes(":") ? sub2.iconName : `lucide:${sub2.iconName}`}"></dees-icon>
+                            ` : b2`
+                              <dees-icon .icon="${"lucide:dot"}"></dees-icon>
+                            `}
+                            <span>${sub2.name}</span>
+                          </div>
+                        `
+      )}
+                    </div>
+                  ` : ""}
+                `;
+    })}
             </div>
           </div>
           <div class="appActions">
@@ -199526,7 +199582,19 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a97 = DeesElement, _
       this.currentTerminal = null;
     }
   }
+  isGroupActive(view) {
+    if (this.selectedView === view) return true;
+    return view.subViews?.some((sv) => sv === this.selectedView) ?? false;
+  }
   async loadView(viewArg) {
+    if (!viewArg.element && viewArg.subViews?.length) {
+      const firstNavigable = viewArg.subViews.find((sv) => sv.element);
+      if (firstNavigable) {
+        return this.loadView(firstNavigable);
+      }
+      return;
+    }
+    if (!viewArg.element) return;
     const appcontent = this.shadowRoot.querySelector(".appcontent");
     const view = new viewArg.element();
     if (this.currentView) {
@@ -199738,6 +199806,55 @@ __publicField(_DeesSimpleAppDash, "styles", [
         white-space: nowrap;
       }
 
+      .viewTab .chevron {
+        flex: 0 0 auto;
+        font-size: 14px;
+        opacity: 0.5;
+        transform: rotate(-90deg);
+        transition: transform 0.2s ease, opacity 0.15s ease;
+      }
+
+      .viewTab.hasSubs:hover .chevron {
+        opacity: 0.75;
+      }
+
+      .viewTab.hasSubs.groupActive .chevron {
+        transform: rotate(0deg);
+        opacity: 0.9;
+      }
+
+      .subViews {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 2px 0 4px 12px;
+        padding-left: 12px;
+        position: relative;
+      }
+
+      .subViews::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        width: 1px;
+        background: var(--dees-color-border-default);
+      }
+
+      .viewTab.sub {
+        padding: 8px 12px;
+        font-size: 12px;
+      }
+
+      .viewTab.sub dees-icon {
+        font-size: 14px;
+      }
+
+      .viewTab.sub.selected::before {
+        left: -12px;
+      }
+
       .appActions {
         padding: 12px 8px;
         border-top: 1px solid var(--dees-color-border-default);