@raclettejs/core 0.1.37 → 0.1.38

package/services/frontend/src/orchestrator/composables/useWidgetLifecycle.ts

@@ -1,6 +1,7 @@
 import { ref, type Ref } from "vue"
 import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
 import log from "@racletteCore/lib/logger"
+import { scheduleAfterPaint } from "@racletteCore/lib/scheduleTask"
 
 export type OnAllWidgetsReady = (callback: () => void) => void
 
@@ -26,6 +27,12 @@ export function createWidgetLifecycleManager(
 
   const DEV_MODE = isDevelopmentMode()
 
+  const markReadyIfNoWidgets = () => {
+    if (totalWidgets === 0) {
+      allWidgetsReady.value = true
+    }
+  }
+
   const checkAllReady = () => {
     if (renderedWidgets.value.size === totalWidgets && !allWidgetsReady.value) {
       allWidgetsReady.value = true
@@ -43,22 +50,46 @@ export function createWidgetLifecycleManager(
   }
 
   const hasVisibleContent = (element: HTMLElement): boolean => {
-    // Check if element has any child nodes
     if (element.childNodes.length === 0) {
       return false
     }
 
-    // Check if element has visible dimensions
-    const rect = element.getBoundingClientRect()
-    if (rect.width === 0 && rect.height === 0) {
-      return false
+    const text = element.textContent?.trim()
+    if (text?.length) {
+      return true
+    }
+
+    // DOM-only checks — avoid getBoundingClientRect / offset* (forced reflow).
+    return (
+      element.children.length > 0 ||
+      element.querySelector(
+        "table, img, canvas, svg, video, iframe, input, button, select, textarea, [role='row']",
+      ) !== null
+    )
+  }
+
+  const scheduleContentCheck = (
+    element: HTMLElement,
+    onReady: () => void,
+  ): (() => void) => {
+    let scheduled = false
+
+    const runCheck = () => {
+      scheduled = false
+      if (hasVisibleContent(element)) {
+        onReady()
+      }
     }
 
-    // Check for text content or child elements
-    const hasTextContent = element.textContent?.trim().length > 0
-    const hasChildElements = element.children.length > 0
+    const scheduleCheck = () => {
+      if (scheduled) {
+        return
+      }
+      scheduled = true
+      scheduleAfterPaint(runCheck)
+    }
 
-    return hasTextContent || hasChildElements
+    return scheduleCheck
   }
 
   const registerWidgetAsRendered = (id: string) => {
@@ -96,30 +127,25 @@ export function createWidgetLifecycleManager(
   }
 
   const observeWidgetRendering = (id: string, element: HTMLElement) => {
-    // Check immediately if content is already rendered
-    if (hasVisibleContent(element)) {
+    let observer: MutationObserver | null = null
+
+    const markReady = () => {
+      observer?.disconnect()
+      observer = null
+      observers.delete(id)
       registerWidgetAsRendered(id)
-      return
     }
 
-    // Otherwise, observe for changes
-    const observer = new MutationObserver(() => {
-      if (hasVisibleContent(element)) {
-        registerWidgetAsRendered(id)
-        observer.disconnect()
-        observers.delete(id)
-      }
-    })
+    const scheduleCheck = scheduleContentCheck(element, markReady)
 
+    observer = new MutationObserver(scheduleCheck)
     observer.observe(element, {
       childList: true,
       subtree: true,
       characterData: true,
-      attributes: true,
-      attributeFilter: ["style", "class"],
     })
-
     observers.set(id, observer)
+    scheduleCheck()
 
     if (DEV_MODE) {
       log.widgets(
@@ -151,11 +177,15 @@ export function createWidgetLifecycleManager(
     allWidgetsReady.value = false
     readyCallbacks.clear()
 
+    markReadyIfNoWidgets()
+
     if (DEV_MODE) {
       log.widgets("useWidgetLifecycle", "🔄 Widget lifecycle manager reset")
     }
   }
 
+  markReadyIfNoWidgets()
+
   return {
     createLifecycleHooks,
     allWidgetsReady,

package/services/frontend/src/orchestrator/constants/widgetSlotType.ts

@@ -0,0 +1,4 @@
+/** Composition slot type from `WidgetsLayoutLoader` (`page` | `modal` | `inline`). */
+export const WIDGET_SLOT_TYPE_KEY = Symbol("widgetSlotType")
+
+export type WidgetSlotType = "page" | "modal" | "inline"

package/services/frontend/src/orchestrator/i18n/de-DE.json

@@ -42,8 +42,14 @@
       "resetFilters": "Filter zurücksetzen",
       "applyFilters": "Filter anwenden",
       "actionsMenu": "Tabellenaktionen",
+      "actions": "Aktionen",
       "enableExportMode": "Exportmodus aktivieren",
-      "disableExportMode": "Exportmodus deaktivieren"
+      "disableExportMode": "Exportmodus deaktivieren",
+      "confirmDeleteTitle": "Löschung bestätigen",
+      "confirmDeleteMessage": "Möchten Sie {name} wirklich löschen?",
+      "confirmHardDeleteMessage": "Möchten Sie {name} wirklich endgültig löschen?",
+      "delete": "Löschen",
+      "activeModesTooltip": "Aktiv: {modes}"
     },
     "dataExporter": {
       "lines": "Zeilen",

package/services/frontend/src/orchestrator/i18n/en-EU.json

@@ -42,8 +42,14 @@
       "resetFilters": "Reset filters",
       "applyFilters": "Apply filters",
       "actionsMenu": "Table actions",
+      "actions": "Actions",
       "enableExportMode": "Enable export mode",
-      "disableExportMode": "Disable export mode"
+      "disableExportMode": "Disable export mode",
+      "confirmDeleteTitle": "Confirm deletion",
+      "confirmDeleteMessage": "Are you sure you want to delete {name}?",
+      "confirmHardDeleteMessage": "Are you sure you want to permanently delete {name}?",
+      "delete": "Delete",
+      "activeModesTooltip": "Active: {modes}"
     },
     "dataExporter": {
       "lines": "Lines",

package/services/frontend/src/orchestrator/i18n/sk.json

@@ -42,8 +42,14 @@
       "resetFilters": "Obnoviť filtre",
       "applyFilters": "Použiť filtre",
       "actionsMenu": "Akcie tabuľky",
+      "actions": "Akcie",
       "enableExportMode": "Zapnúť režim exportu",
-      "disableExportMode": "Vypnúť režim exportu"
+      "disableExportMode": "Vypnúť režim exportu",
+      "confirmDeleteTitle": "Potvrdiť vymazanie",
+      "confirmDeleteMessage": "Naozaj chcete vymazať {name}?",
+      "confirmHardDeleteMessage": "Naozaj chcete natrvalo vymazať {name}?",
+      "delete": "Vymazať",
+      "activeModesTooltip": "Aktívne: {modes}"
     },
     "dataExporter": {
       "lines": "riadky",

package/services/frontend/src/orchestrator/router/routerHooks/afterEach.ts

@@ -1,5 +1,6 @@
 import { loadingHold } from "@racletteCore/store/state"
 import { $store } from "@racletteCore"
+import { scheduleAfterPaint } from "@racletteCore/lib/scheduleTask"
 import type { RouteLocationNormalized } from "vue-router"
 import { handleRouteChange } from "../routeStore"
 
@@ -10,16 +11,21 @@ import { handleRouteChange } from "../routeStore"
  * removeLoading Animation
  */
 export default (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
+  scheduleAfterPaint(() => {
+    handleRouteChange(to, from)
+  })
+
   const loading = $store.getState(["ui", "loading"])
   if (loading) {
-    setTimeout(
-      () =>
-        $store.dispatch({
-          type: "ui/update",
-          payload: { loading: false },
-        }),
-      loadingHold,
-    )
+    setTimeout(() => {
+      scheduleAfterPaint(() => {
+        if ($store.getState(["ui", "loading"])) {
+          $store.dispatch({
+            type: "ui/update",
+            payload: { loading: false },
+          })
+        }
+      })
+    }, loadingHold)
   }
-  handleRouteChange(to, from)
 }