@customviews-js/customviews 1.1.9 → 1.1.10

package/dist/custom-views.core.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.8
+ * @customviews-js/customviews v1.1.10
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -348,13 +348,10 @@ class TabManager {
         if (tabs[groupId]) {
             return tabs[groupId];
         }
-        // 2. Check config default
+        // 2. Check config for first tab
         if (cfgGroups) {
             const groupCfg = cfgGroups.find(g => g.id === groupId);
             if (groupCfg) {
-                if (groupCfg.default) {
-                    return groupCfg.default;
-                }
                 // Fallback to first tab in config
                 const firstConfigTab = groupCfg.tabs[0];
                 if (firstConfigTab) {
@@ -1063,7 +1060,7 @@ class CustomViewsCore {
         this.persistenceManager = new PersistenceManager();
         this.visibilityManager = new VisibilityManager();
         this.showUrlEnabled = opt.showUrl ?? false;
-        this.lastAppliedState = this.cloneState(this.config?.defaultState);
+        this.lastAppliedState = this.cloneState(this.getComputedDefaultState());
     }
     getConfig() {
         return this.config;
@@ -1074,6 +1071,36 @@ class CustomViewsCore {
     getTabGroups() {
         return this.config.tabGroups;
     }
+    /**
+     * Generate a computed default state:
+     * - If config.defaultState is defined, use it (even if empty)
+     * - Otherwise, compute a default: enable all toggles and set all tab groups to their first tab
+     */
+    getComputedDefaultState() {
+        const configDefaultState = this.config?.defaultState;
+        // If defaultState is explicitly defined in config, use it as-is
+        if (configDefaultState !== undefined) {
+            return configDefaultState;
+        }
+        // Otherwise, compute a default state: all toggles on, all tabs to first
+        const tabs = {};
+        // Set all tab groups to their first tab
+        if (this.config.tabGroups?.length) {
+            this.config.tabGroups.forEach(group => {
+                if (group.tabs && group.tabs.length > 0) {
+                    const firstTab = group.tabs[0];
+                    if (firstTab?.id) {
+                        tabs[group.id] = firstTab.id;
+                    }
+                }
+            });
+        }
+        const computedState = {
+            toggles: [...(this.config.allToggles || [])],
+            tabs
+        };
+        return computedState;
+    }
     /**
      * Get currently active tabs (from URL > persisted (localStorage) > defaults)
      */
@@ -1085,7 +1112,7 @@ class CustomViewsCore {
         if (persistedState?.tabs) {
             return { ...persistedState.tabs };
         }
-        return this.config?.defaultState?.tabs ? { ...this.config.defaultState.tabs } : {};
+        return this.getComputedDefaultState().tabs || {};
     }
     /**
      * Set active tab for a group and apply state
@@ -1137,7 +1164,7 @@ class CustomViewsCore {
         });
         this.loadAndCallApplyState();
     }
-    // Priority: URL state > persisted state > default
+    // Priority: URL state > persisted state > config default > computed default
     // Also filters using the visibility manager to persist selection
     // across back/forward button clicks
     async loadAndCallApplyState() {
@@ -1153,8 +1180,8 @@ class CustomViewsCore {
             this.applyState(persistedState);
             return;
         }
-        // 3. Local Config Fallback
-        this.renderState(this.config.defaultState);
+        // 3. Computed Default Fallback
+        this.renderState(this.getComputedDefaultState());
     }
     /**
     * Apply a custom state, saves to localStorage and updates the URL
@@ -1173,7 +1200,7 @@ class CustomViewsCore {
     /** Render all toggles for the current state */
     renderState(state) {
         this.lastAppliedState = this.cloneState(state);
-        const toggles = state.toggles || [];
+        const toggles = state?.toggles || [];
         const finalToggles = this.visibilityManager.filterVisibleToggles(toggles);
         // Apply toggle visibility
         ToggleManager.applyToggles(this.rootEl, finalToggles);
@@ -1192,7 +1219,7 @@ class CustomViewsCore {
     resetToDefault() {
         this.persistenceManager.clearAll();
         if (this.config) {
-            this.renderState(this.config.defaultState);
+            this.renderState(this.getComputedDefaultState());
         }
         else {
             console.warn("No configuration loaded, cannot reset to default state");
@@ -1210,7 +1237,7 @@ class CustomViewsCore {
             return this.lastAppliedState.toggles || [];
         }
         if (this.config) {
-            return this.config.defaultState.toggles || [];
+            return this.getComputedDefaultState().toggles || [];
         }
         return [];
     }
@@ -1220,7 +1247,7 @@ class CustomViewsCore {
     clearPersistence() {
         this.persistenceManager.clearAll();
         if (this.config) {
-            this.renderState(this.config.defaultState);
+            this.renderState(this.getComputedDefaultState());
         }
         else {
             console.warn("No configuration loaded, cannot reset to default state");
@@ -1299,7 +1326,7 @@ class CustomViewsCore {
             return this.cloneState(this.lastAppliedState);
         }
         if (this.config) {
-            return this.cloneState(this.config.defaultState);
+            return this.cloneState(this.getComputedDefaultState());
         }
         return {};
     }