@raclettejs/core 0.1.36 → 0.1.38

package/services/frontend/src/orchestrator/components/dataTable/BaseDataTableFilterDrawerShell.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-navigation-drawer
+    v-if="!contained"
+    :model-value="modelValue"
+    location="right"
+    temporary
+    :width="width"
+    :aria-label="ariaLabel"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <slot />
+  </v-navigation-drawer>
+
+  <template v-else>
+    <div
+      v-if="modelValue"
+      class="base-data-table-filter-scrim"
+      aria-hidden="true"
+      @click="emit('update:modelValue', false)"
+    />
+    <aside
+      v-if="modelValue"
+      class="base-data-table-filter-panel"
+      :class="{ 'base-data-table-filter-panel--contained': contained }"
+      :style="contained ? undefined : { width: `${width}px` }"
+      :aria-label="ariaLabel"
+    >
+      <slot />
+    </aside>
+  </template>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  contained: boolean
+  width: number
+  ariaLabel: string
+}>()
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.base-data-table-filter-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.base-data-table-filter-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+.base-data-table-filter-panel--contained {
+  width: min(100%, 360px);
+  max-width: 100%;
+}
+</style>

package/services/frontend/src/orchestrator/components/index.ts

@@ -3,6 +3,7 @@ import DefaultModal from "./modal/DefaultModal.vue"
 import DraggableElement from "./dragAndDrop/DraggableElement.vue"
 import DropzoneElement from "./dragAndDrop/DropzoneElement.vue"
 import ErrorWidgetState from "./ErrorWidgetState.vue"
+import CompositionLoadingState from "./CompositionLoadingState.vue"
 import LoadingWidgetState from "./LoadingWidgetState.vue"
 import LoginForm from "./authentication/LoginForm.vue"
 import PageNavigationSidebar from "./navigation/PageNavigationSidebar.vue"
@@ -18,13 +19,16 @@ import DataExporter from "./dataExport/DataExporter.vue"
 import ImportSelectionDialog from "./dataImport/ImportSelectionDialog.vue"
 import ImportSummaryDialog from "./dataImport/ImportSummaryDialog.vue"
 import BaseDataTable from "./dataTable/BaseDataTable.vue"
+import BaseDataTableConfirmDeleteBtn from "./dataTable/BaseDataTableConfirmDeleteBtn.vue"
 import FileUpload from "./input/FileUpload.vue"
 
 export {
   ImportSelectionDialog,
   ImportSummaryDialog,
   BaseDataTable,
+  BaseDataTableConfirmDeleteBtn,
   FileUpload,
+  CompositionLoadingState,
   CompositionOverlay,
   DataExporter,
   DefaultModal,

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

@@ -5,3 +5,4 @@ export * from "./useWidgets"
 export * from "./useInteractionLinks"
 export * from "./useWidgetLifecycle"
 export * from "./useExport"
+export * from "./useBaseDataTableDeleteConfirm"

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

@@ -0,0 +1,23 @@
+import { inject, type InjectionKey } from "vue"
+
+export type RequestDeleteFn = <T>(
+  item: T,
+  onConfirm: () => void | Promise<void>,
+) => void
+
+export const BASE_DATA_TABLE_REQUEST_DELETE_KEY: InjectionKey<RequestDeleteFn> =
+  Symbol("baseDataTableRequestDelete")
+
+/**
+ * Call from `#row-actions` (or descendants) inside `BaseDataTable` to run delete
+ * through the table's optional confirmation dialog.
+ */
+export const useBaseDataTableDeleteConfirm = () => {
+  const requestDelete = inject(BASE_DATA_TABLE_REQUEST_DELETE_KEY)
+  if (!requestDelete) {
+    throw new Error(
+      "useBaseDataTableDeleteConfirm must be used within BaseDataTable",
+    )
+  }
+  return { requestDelete }
+}

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

@@ -87,10 +87,22 @@ export const useVueWriteOperationHelper = (
       return data.value ? Object.values(data.value) : []
     }),
     response: responseRef,
-    execute: (executeParams?: VueQueryParamsInput) =>
-      executeParams === undefined
-        ? writeOperation.execute()
-        : writeOperation.execute(toQueryParamsSource(executeParams)),
+    execute: (executeParams?: VueQueryParamsInput) => {
+      if (executeParams === undefined) {
+        return writeOperation.execute()
+      }
+      // Bulk POST bodies (e.g. createBulk) must reach core dataApi as arrays.
+      if (Array.isArray(executeParams)) {
+        return writeOperation.execute(executeParams)
+      }
+      if (
+        typeof FormData !== "undefined" &&
+        executeParams instanceof FormData
+      ) {
+        return writeOperation.execute(executeParams)
+      }
+      return writeOperation.execute(toQueryParamsSource(executeParams))
+    },
     remove: writeOperation.remove,
     clear: writeOperation.clear,
     error: computed(() => {

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)
 }

package/services/frontend/src/orchestrator/types/DataApi.ts

@@ -4,10 +4,11 @@ import type {
   CustomStoreActionsPayload,
 } from "@racletteCore/types"
 
-/** Params accepted by Vue plugin `$data` methods (refs/computed/getters allowed). */
+/** Params accepted by Vue plugin `$data` write `execute()` (refs/computed/getters, or bulk body arrays). */
 export type VueQueryParamsInput =
   | MaybeRefOrGetter<CustomStoreActionParams | undefined>
   | CustomStoreActionParams
+  | unknown[]
   | undefined
 
 /** Vue orchestrator payload — extends core with reactive `params`. */