@raclettejs/core 0.1.32 → 0.1.33-canary.0

package/services/frontend/src/orchestrator/components/input/FileUpload.vue

@@ -0,0 +1,83 @@
+<template>
+  <!-- Visually hidden; opened via openPicker() from a separate toolbar button -->
+  <input
+    ref="nativeInput"
+    type="file"
+    class="raclette-file-upload-input"
+    :accept="accept"
+    @change="handleNativeChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue"
+
+const props = defineProps({
+  onFileLoaded: {
+    type: Function,
+    required: true,
+  },
+  accept: {
+    type: String,
+    default: "*/*",
+  },
+  readAs: {
+    type: String,
+    default: "text",
+    validator: (value: string) => ["text", "arrayBuffer"].includes(value),
+  },
+})
+
+const nativeInput = useTemplateRef<HTMLInputElement>("nativeInput")
+
+const handleNativeChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) {
+    input.value = ""
+    return
+  }
+
+  const reader = new FileReader()
+
+  reader.onload = () => {
+    ;(props.onFileLoaded as (c: string | ArrayBuffer, f: File) => void)(
+      reader.result as string | ArrayBuffer,
+      file,
+    )
+    input.value = ""
+  }
+
+  reader.onerror = () => {
+    input.value = ""
+  }
+
+  if (props.readAs === "arrayBuffer") {
+    reader.readAsArrayBuffer(file)
+  } else {
+    reader.readAsText(file)
+  }
+}
+
+/** Programmatically open the file picker (toolbar button should call this). */
+const openPicker = () => {
+  nativeInput.value?.click()
+}
+
+defineExpose({ openPicker, trigger: openPicker })
+</script>
+
+<style scoped>
+.raclette-file-upload-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
+

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

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

package/services/frontend/src/orchestrator/composables/useExport/formats/builtins.ts

@@ -0,0 +1,124 @@
+import type { ExportFormat } from "../types"
+
+// ─── Optional peer dep: js-yaml ───────────────────────────────────────────────
+// Vite/ESM environments don't support require(). We attempt a static import at
+// module initialisation time. If js-yaml is not installed the import will throw
+// and jsYamlDump stays undefined — the serializer then shows a clear error.
+
+type JsYamlDump = (data: unknown, options?: object) => string
+
+let jsYamlDump: JsYamlDump | undefined
+
+const jsonReplacer = (_key: string, value: unknown) => {
+  // JSON doesn't support bigint values; preserve intent as a tagged string.
+  if (typeof value === "bigint") {
+    return `${value}n`
+  }
+
+  return value
+}
+
+try {
+  // Static import string must be a literal so bundlers can analyse it.
+  // The `@vite-ignore` comment suppresses the "dynamic import" warning.
+  const mod = await import(/* @vite-ignore */ "js-yaml")
+  jsYamlDump = (mod.dump ?? mod.default?.dump) as JsYamlDump | undefined
+} catch {
+  // js-yaml not installed — yamlFormat.serialize() will throw a helpful message
+}
+
+// ─── XML ──────────────────────────────────────────────────────────────────────
+
+/**
+ * Recursively converts a plain JS object / array to XML element strings.
+ * - Object keys become element names (invalid XML chars are stripped).
+ * - Arrays emit repeated elements using the parent key name (singularised naively).
+ * - Primitive values become text content.
+ */
+function toXmlElements(value: unknown, tag: string, indent: string): string {
+  const pad = indent + "  "
+
+  if (value === null || value === undefined) {
+    return `${indent}<${tag}/>`
+  }
+
+  if (Array.isArray(value)) {
+    // Emit each item wrapped in a singular version of the tag.
+    const child = tag.replace(/s$/, "") || "item"
+    return value
+      .map((item) => toXmlElements(item, child, indent))
+      .join("\n")
+  }
+
+  if (typeof value === "object") {
+    const children = Object.entries(value as Record<string, unknown>)
+      .map(([k, v]) => toXmlElements(v, sanitiseTag(k), pad))
+      .join("\n")
+    return `${indent}<${tag}>\n${children}\n${indent}</${tag}>`
+  }
+
+  // Primitive — escape XML special chars.
+  const escaped = String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;")
+  return `${indent}<${tag}>${escaped}</${tag}>`
+}
+
+function sanitiseTag(key: string): string {
+  // XML element names must start with a letter or underscore.
+  const cleaned = key.replace(/[^a-zA-Z0-9_.-]/g, "_")
+  return /^[^a-zA-Z_]/.test(cleaned) ? `_${cleaned}` : cleaned
+}
+
+export const xmlFormat: ExportFormat = {
+  id: "xml",
+  label: "XML",
+  extension: "xml",
+  mimeType: "application/xml",
+  serialize(data) {
+    const body = toXmlElements(data, "root", "")
+    return `<?xml version="1.0" encoding="UTF-8"?>\n${body}`
+  },
+}
+
+// ─── JSON ─────────────────────────────────────────────────────────────────────
+
+export const jsonFormat: ExportFormat = {
+  id: "json",
+  label: "JSON",
+  extension: "json",
+  mimeType: "application/json",
+  serialize(data) {
+    return JSON.stringify(data, jsonReplacer, 2)
+  },
+}
+
+// ─── YAML ─────────────────────────────────────────────────────────────────────
+
+export const yamlFormat: ExportFormat = {
+  id: "yaml",
+  label: "YAML",
+  extension: "yaml",
+  mimeType: "application/yaml",
+  serialize(data) {
+    if (typeof jsYamlDump !== "function") {
+      throw new Error(
+        'The "js-yaml" package is required for YAML export.\n' +
+          "Install it with:  npm install js-yaml\n" +
+          "Types (optional): npm install -D @types/js-yaml",
+      )
+    }
+    return jsYamlDump(data, { indent: 2, lineWidth: 120, noRefs: true })
+  },
+}
+
+// ─── Registry ─────────────────────────────────────────────────────────────────
+
+export const BUILTIN_FORMATS: Record<string, ExportFormat> = {
+  json: jsonFormat,
+  yaml: yamlFormat,
+  xml: xmlFormat,
+}

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

@@ -0,0 +1,176 @@
+import { computed, ref, watch } from "vue"
+import { useClipboard } from "@vueuse/core"
+import { BUILTIN_FORMATS } from "./formats/builtins"
+import type {
+  ExportFormat,
+  FormatEntry,
+  SerializeResult,
+  ExportSuccessPayload,
+  ExportErrorPayload,
+} from "./types"
+
+export * from "./types"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface UseExportOptions {
+  data: () => unknown
+  formats: () => FormatEntry[]
+  defaultFormat: () => string | undefined
+  filename: () => string
+  enabled?: () => boolean
+  onSuccess: (payload: ExportSuccessPayload) => void
+  onError: (payload: ExportErrorPayload) => void
+}
+
+// ─── Composable ───────────────────────────────────────────────────────────────
+
+export function useExport(options: UseExportOptions) {
+  const {
+    data,
+    formats,
+    defaultFormat,
+    filename,
+    enabled,
+    onSuccess,
+    onError,
+  } = options
+
+  // ── Resolve format list ────────────────────────────────────────────────────
+
+  const resolvedFormats = computed<ExportFormat[]>(() => {
+    return formats()
+      .map((entry): ExportFormat | null => {
+        if (typeof entry === "string") {
+          return BUILTIN_FORMATS[entry] ?? null
+        }
+        // Custom format — validate minimum required fields
+        if (
+          entry &&
+          typeof entry.id === "string" &&
+          typeof entry.serialize === "function"
+        ) {
+          return entry as ExportFormat
+        }
+        console.warn("[RacletteExport] Invalid format entry, skipping:", entry)
+        return null
+      })
+      .filter((f): f is ExportFormat => f !== null)
+  })
+
+  // ── Active format ──────────────────────────────────────────────────────────
+
+  const activeFormatId = ref<string>("")
+
+  // Initialize / sync when formats or defaultFormat changes
+  watch(
+    [resolvedFormats, defaultFormat],
+    ([fmts, dflt]) => {
+      if (!fmts.length) {
+        activeFormatId.value = ""
+        return
+      }
+      const preferred = dflt ?? ""
+      const found = fmts.find((f) => f.id === preferred)
+      // Keep current selection if still valid, otherwise fall back to first
+      const currentStillValid = fmts.some((f) => f.id === activeFormatId.value)
+      if (!currentStillValid) {
+        activeFormatId.value = found?.id ?? fmts[0].id
+      }
+    },
+    { immediate: true },
+  )
+
+  const activeFormat = computed<ExportFormat | undefined>(() =>
+    resolvedFormats.value.find((f) => f.id === activeFormatId.value),
+  )
+
+  // ── Serialization ──────────────────────────────────────────────────────────
+
+  const serializeResult = computed<SerializeResult>(() => {
+    if (enabled && !enabled()) {
+      // Defer serialization until explicitly enabled by the caller.
+      return { ok: true, value: "" }
+    }
+
+    const fmt = activeFormat.value
+    if (!fmt) return { ok: false, error: "No format selected." }
+
+    try {
+      const value = fmt.serialize(data())
+      if (typeof value !== "string") {
+        throw new TypeError(
+          `serialize() must return a string, got ${typeof value}`,
+        )
+      }
+      return { ok: true, value }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      onError({ formatId: fmt.id, action: "serialize", error: err })
+      return { ok: false, error: message }
+    }
+  })
+
+  // ── Clipboard ──────────────────────────────────────────────────────────────
+
+  const { copy, isSupported: clipboardSupported } = useClipboard()
+  const copyState = ref<"idle" | "success" | "error">("idle")
+  let copyResetTimer: ReturnType<typeof setTimeout> | null = null
+
+  async function copyToClipboard() {
+    const fmt = activeFormat.value
+    if (!fmt) return
+    if (serializeResult.value.ok === false) return
+
+    try {
+      await copy(serializeResult.value.value)
+      copyState.value = "success"
+      onSuccess({ formatId: fmt.id, action: "copy" })
+    } catch (err) {
+      copyState.value = "error"
+      onError({ formatId: fmt.id, action: "copy", error: err })
+    } finally {
+      if (copyResetTimer) clearTimeout(copyResetTimer)
+      copyResetTimer = setTimeout(() => {
+        copyState.value = "idle"
+      }, 2000)
+    }
+  }
+
+  // ── Download ───────────────────────────────────────────────────────────────
+
+  function downloadFile() {
+    const fmt = activeFormat.value
+    if (!fmt) return
+    if (serializeResult.value.ok === false) return
+
+    try {
+      const blob = new Blob([serializeResult.value.value], {
+        type: `${fmt.mimeType};charset=utf-8`,
+      })
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement("a")
+      anchor.href = url
+      anchor.download = `${filename() || "export"}.${fmt.extension}`
+      anchor.style.display = "none"
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
+      URL.revokeObjectURL(url)
+      onSuccess({ formatId: fmt.id, action: "download" })
+    } catch (err) {
+      onError({ formatId: fmt.id, action: "download", error: err })
+    }
+  }
+
+  return {
+    resolvedFormats,
+    activeFormatId,
+    activeFormat,
+    serializeResult,
+    copyToClipboard,
+    downloadFile,
+    copyState,
+    clipboardSupported,
+  }
+}

package/services/frontend/src/orchestrator/composables/useExport/types.ts

@@ -0,0 +1,141 @@
+// ─── Core Export Format Interface ────────────────────────────────────────────
+
+/**
+ * Defines a data export format. Implement this to add custom formats.
+ *
+ * @template T - The expected shape of the data (defaults to unknown for safety)
+ *
+ * @example
+ * const xmlFormat: ExportFormat<Record<string, unknown>> = {
+ *   id: 'xml',
+ *   label: 'XML',
+ *   extension: 'xml',
+ *   mimeType: 'application/xml',
+ *   serialize: (data) => toXml(data),
+ * }
+ */
+export interface ExportFormat<T = unknown> {
+  /** Unique identifier used to reference this format in the `formats` prop */
+  id: string
+  /** Display label shown in the format selector tabs */
+  label: string
+  /** File extension appended to the filename on download (without leading dot) */
+  extension: string
+  /** MIME type used for the downloaded Blob */
+  mimeType: string
+  /**
+   * Transform `data` into a string for clipboard copy or file download.
+   * May throw — the component catches all errors and shows them inline.
+   */
+  serialize: (data: T) => string
+}
+
+export interface ExportPayload<TItem = unknown, TMeta = unknown> {
+  items: TItem[]
+  meta?: TMeta
+}
+
+export type ExportDataScope = "combined" | "items" | "meta"
+
+// ─── Built-in Format IDs ──────────────────────────────────────────────────────
+
+export type BuiltinFormatId = "json" | "yaml"
+
+/** A format entry in the `formats` prop: either a builtin ID or a custom format object */
+export type FormatEntry = BuiltinFormatId | ExportFormat
+
+// ─── Component Props ──────────────────────────────────────────────────────────
+
+export interface RacletteExportProps {
+  /**
+   * The data to export. Accepts any value: object, array, string, number, etc.
+   * Each serializer handles edge cases gracefully.
+   */
+  data: ExportPayload
+
+  /**
+   * Base filename for downloads (no extension). Extension is appended automatically.
+   * @default 'export'
+   */
+  filename?: string
+
+  /**
+   * Ordered list of formats to offer. Mix builtin IDs and custom ExportFormat objects.
+   * This single prop controls both inclusion and order.
+   * @default ['json', 'yaml']
+   */
+  formats?: FormatEntry[]
+
+  /**
+   * ID of the format that should be active when the popover opens.
+   * Falls back to the first format in the list if not found.
+   */
+  defaultFormat?: string
+
+  /**
+   * Label for the default trigger button (only used when no default slot is provided).
+   * @default 'Export'
+   */
+  buttonLabel?: string
+
+  /**
+   * Disables the trigger button and prevents the popover from opening.
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Whether the preview pane starts collapsed.
+   * @default true
+   */
+  previewCollapsed?: boolean
+
+  /**
+   * Shows a scope switch inside the popover to choose whether to export:
+   * - the combined payload object
+   * - only items
+   * - only meta
+   * @default true
+   */
+  showDataScopeSwitch?: boolean
+}
+
+// ─── Component Emits ──────────────────────────────────────────────────────────
+
+export interface ExportSuccessPayload {
+  /** ID of the format that was used */
+  formatId: string
+  /** Whether the user copied or downloaded */
+  action: "copy" | "download"
+}
+
+export interface ExportErrorPayload {
+  /** ID of the format that failed */
+  formatId: string
+  /** Whether the copy or download was attempted */
+  action: "copy" | "download" | "serialize"
+  /** The caught error */
+  error: unknown
+}
+
+export interface RacletteExportEmits {
+  (e: "export-success", payload: ExportSuccessPayload): void
+  (e: "export-error", payload: ExportErrorPayload): void
+}
+
+// ─── Slot Props ───────────────────────────────────────────────────────────────
+
+export interface TriggerSlotProps {
+  /** Opens the export popover */
+  open: () => void
+  /** Whether the popover is currently open */
+  isOpen: boolean
+  /** Mirrors the `disabled` prop */
+  disabled: boolean
+}
+
+// ─── Serialization Result ─────────────────────────────────────────────────────
+
+export type SerializeResult =
+  | { ok: true; value: string }
+  | { ok: false; error: string }

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

@@ -33,6 +33,30 @@
       "more_soonDescription": "Wir befinden uns noch in der Beta-Phase, aber liefern bereits! Schau dir unsere Roadmap an",
       "roadmap": "Roadmap auf Gitlab"
     },
+    "baseDataTable": {
+      "searchPlaceholder": "{dataName} durchsuchen",
+      "createDataButton": "{dataName} erstellen",
+      "deleteDataTitle": "{dataName} löschen",
+      "restoreDataTitle": "{dataName} widerherstellen",
+      "deleteDataConfirmMessage": "Bist du sicher, dass du {article} {dataName} <strong>{value}</strong> löschen willst?",
+      "deleteDataConfirmButton": "Löschen",
+      "deleteDataConfirmCancel": "Abbrechen"
+    },
+    "dataExporter": {
+      "lines": "Zeilen",
+      "title": "Daten exportieren",
+      "scopeLabel": "Daten",
+      "scopeCombined": "Kombiniert",
+      "scopeItems": "Elemente",
+      "scopeMeta": "Metadaten",
+      "noValidFormats": "Keine gueltigen Formate konfiguriert.",
+      "preview": "Vorschau",
+      "previewTruncatedAt": "Vorschau bei {count} Zeilen abgeschnitten",
+      "copied": "Kopiert!",
+      "copyFailed": "Fehlgeschlagen",
+      "copy": "Kopieren",
+      "download": "Herunterladen"
+    },
     "dataSync": {
       "update": {
         "$docCountOf$docTypeHaveBeenHandled": "{docCount} Dokumente vom Typ {docType} wurden erfolgreich geupdated",
@@ -219,4 +243,5 @@
       "sl-SL": "Slowenisch (Slowenien)"
     }
   }
-}
+}
+

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

@@ -33,6 +33,30 @@
       "more_soonDescription": "We are still in Beta but on our way to deliver! Checkout our Roadmap",
       "roadmap": "Roadmap on Gitlab"
     },
+    "baseDataTable": {
+      "searchPlaceholder": "Search {dataName}",
+      "createDataButton": "Create {dataName}",
+      "deleteDataTitle": "Delete {dataName}",
+      "restoreDataTitle": "Restore {dataName}",
+      "deleteDataConfirmMessage": "Are you sure you want to delete {article} {dataName} <strong>{value}</strong>?",
+      "deleteDataConfirmButton": "Delete",
+      "deleteDataConfirmCancel": "Cancel"
+    },
+    "dataExporter": {
+      "lines": "Lines",
+      "title": "Export Data",
+      "scopeLabel": "Data",
+      "scopeCombined": "Combined",
+      "scopeItems": "Items",
+      "scopeMeta": "Meta",
+      "noValidFormats": "No valid formats configured.",
+      "preview": "Preview",
+      "previewTruncatedAt": "Preview truncated at {count} lines",
+      "copied": "Copied!",
+      "copyFailed": "Failed",
+      "copy": "Copy",
+      "download": "Download"
+    },
     "dataSync": {
       "update": {
         "$docCountOf$docTypeHaveBeenHandled": "{docCount} documents of type {docType} were successfully updated",
@@ -219,4 +243,5 @@
       "sl-SL": "Slovenian (Slovenia)"
     }
   }
-}
+}
+

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

@@ -33,6 +33,30 @@
       "more_soonDescription": "Stále sme v beta verzii, ale pracujeme na tom, aby sme doručili! Pozrite si našu cestovnú mapu",
       "roadmap": "Cestovná mapa na Gitlabe"
     },
+    "baseDataTable": {
+      "searchPlaceholder": "Hľadať {dataName}",
+      "createDataButton": "Vytvoriť {dataName}",
+      "deleteDataTitle": "Odstrániť {dataName}",
+      "restoreDataTitle": "Obnoviť {dataName}",
+      "deleteDataConfirmMessage": "Naozaj chcete odstrániť {article} {dataName} <strong>{value}</strong>?",
+      "deleteDataConfirmButton": "Odstrániť",
+      "deleteDataConfirmCancel": "Zrušiť"
+    },
+    "dataExporter": {
+      "lines": "riadky",
+      "title": "Export údajov",
+      "scopeLabel": "Údaje",
+      "scopeCombined": "Kombinované",
+      "scopeItems": "Položky",
+      "scopeMeta": "Meta",
+      "noValidFormats": "Nie sú nakonfigurované žiadne platné formáty.",
+      "preview": "Náhľad",
+      "previewTruncatedAt": "Náhľad je skrátený na {count} riadkov",
+      "copied": "Skopírované!",
+      "copyFailed": "Zlyhalo",
+      "copy": "Kopírovať",
+      "download": "Stiahnuť"
+    },
     "dataSync": {
       "update": {
         "$docCountOf$docTypeHaveBeenHandled": "{docCount} dokumentov typu {docType} bolo úspešne aktualizovaných",
@@ -219,4 +243,5 @@
       "sl-SL": "Slovinčina (Slovinsko)"
     }
   }
-}
+}
+

package/services/frontend/src/orchestrator/i18n/tl-TL.json

@@ -33,6 +33,20 @@
       "more_soonDescription": "Beta wItaH 'ach wIghoS – Roadmap yIlegh!",
       "roadmap": "GitlabDaq Roadmap"
     },
+    "dataExporter": {
+      "title": "Export Data",
+      "scopeLabel": "Data",
+      "scopeCombined": "Combined",
+      "scopeItems": "Items",
+      "scopeMeta": "Meta",
+      "noValidFormats": "No valid formats configured.",
+      "preview": "Preview",
+      "previewTruncatedAt": "Preview truncated at {count} lines",
+      "copied": "Copied!",
+      "copyFailed": "Failed",
+      "copy": "Copy",
+      "download": "Download"
+    },
     "dataSync": {
       "update": {
         "$docCountOf$docTypeHaveBeenHandled": "{docCount} {docType} puS ghItlhmey Qapla’ vI’taH",

package/services/frontend/src/orchestrator/setup/vuetify.ts

@@ -34,7 +34,6 @@ const initVuetify = (instanceAdapter, dateLocale) => {
     components,
     directives,
     theme: {
-      defaultTheme: "dark",
       themes: {
         dark,
         light,