@forcecalendar/interface 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -68,9 +68,31 @@ export class ForceCalendar extends BaseComponent {
             this.emit('calendar-view-change', data);
         }));
 
-        // Event management events
-        this._busUnsubscribers.push(eventBus.on('event:*', (data, event) => {
-            this.emit(`calendar-event-${event.split(':')[1]}`, data);
+        const forwardEventAction = (action, data) => {
+            this.emit(`calendar-event-${action}`, data);
+        };
+
+        // Event management events (canonical + backward-compatible aliases)
+        this._busUnsubscribers.push(eventBus.on('event:add', (data) => {
+            forwardEventAction('add', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:update', (data) => {
+            forwardEventAction('update', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:remove', (data) => {
+            forwardEventAction('remove', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:added', (data) => {
+            forwardEventAction('add', data);
+            this.emit('calendar-event-added', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:updated', (data) => {
+            forwardEventAction('update', data);
+            this.emit('calendar-event-updated', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:deleted', (data) => {
+            forwardEventAction('remove', data);
+            this.emit('calendar-event-deleted', data);
         }));
 
         // Date selection events
@@ -93,10 +115,14 @@ export class ForceCalendar extends BaseComponent {
         const errorChanged = newState.error !== oldState?.error;
 
         // For loading/error state changes, do full re-render (rare)
-        if (loadingChanged || errorChanged) {
+        if (errorChanged) {
             this.render();
             return;
         }
+        if (loadingChanged) {
+            this._updateLoadingState(newState.loading);
+            return;
+        }
 
         // Update local view reference if needed
         if (viewChanged) {
@@ -184,15 +210,31 @@ export class ForceCalendar extends BaseComponent {
         }
     }
 
+    /**
+     * Toggle loading overlay without rebuilding the component tree.
+     */
+    _updateLoadingState(isLoading) {
+        const loadingEl = this.$('.fc-loading');
+        const viewContainer = this.$('.fc-view-container');
+        if (loadingEl) {
+            loadingEl.style.display = isLoading ? 'flex' : 'none';
+        }
+        if (viewContainer) {
+            viewContainer.style.display = isLoading ? 'none' : 'flex';
+        }
+    }
+
     mount() {
+        this.currentView = this.stateManager.getView();
         super.mount();
-        this.loadView(this.stateManager.getView());
     }
 
     loadView(viewType) {
-        // Views are already registered at the top of the file
+        if (!viewType || this.currentView === viewType) return;
         this.currentView = viewType;
-        this.render();
+        this._switchView();
+        this._updateViewButtons();
+        this._updateTitle();
     }
 
     getStyles() {
@@ -637,16 +679,13 @@ export class ForceCalendar extends BaseComponent {
                 </header>
 
                 <div class="fc-body">
-                    ${loading ? `
-                        <div class="fc-loading">
-                            <div class="fc-spinner"></div>
-                            <span>Loading...</span>
-                        </div>
-                    ` : `
-                        <div class="fc-view-container">
-                            ${this.renderView()}
-                        </div>
-                    `}
+                    <div class="fc-loading" style="display: ${loading ? 'flex' : 'none'};">
+                        <div class="fc-spinner"></div>
+                        <span>Loading...</span>
+                    </div>
+                    <div class="fc-view-container" style="display: ${loading ? 'none' : 'flex'};">
+                        ${this.renderView()}
+                    </div>
                 </div>
                 
                 <forcecal-event-form id="event-modal"></forcecal-event-form>

package/src/core/StateManager.js

@@ -215,6 +215,7 @@ class StateManager {
         }
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:add', { event: addedEvent });
         eventBus.emit('event:added', { event: addedEvent });
         return addedEvent;
     }
@@ -232,6 +233,7 @@ class StateManager {
 
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:update', { event });
         eventBus.emit('event:updated', { event });
         return event;
     }
@@ -248,6 +250,7 @@ class StateManager {
         }
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:remove', { eventId });
         eventBus.emit('event:deleted', { eventId });
         return true;
     }
@@ -409,4 +412,4 @@ class StateManager {
 }
 
 // Export StateManager
-export default StateManager;
+export default StateManager;