@raclettejs/core 0.1.31 → 0.1.32-nightly

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

@@ -0,0 +1,169 @@
+<template>
+  <v-dialog v-model="dialog" max-width="760" scrollable>
+    <v-card>
+      <v-card-title class="tw:flex tw:justify-between tw:items-center tw:gap-2">
+        <span class="tw:text-lg tw:font-semibold">{{ title }}</span>
+        <v-btn icon="mdi-close" size="small" variant="text" @click="close" />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="tw:py-4">
+        <div class="tw:flex tw:justify-between tw:items-center tw:mb-4 tw:gap-2">
+          <v-checkbox
+            :model-value="selectAll"
+            @update:model-value="toggleSelectAll"
+            :label="$t('core.selectAll')"
+            hide-details
+            density="compact"
+          />
+
+          <v-chip color="primary" variant="flat" size="small">
+            {{ selectedCount }} / {{ items.length }} {{ $t("core.selected") }}
+          </v-chip>
+        </div>
+
+        <v-list class="tw:max-h-96 tw:overflow-y-auto tw:border tw:rounded-md tw:py-0">
+          <v-list-item
+            v-for="item in items"
+            :key="item._id"
+            @click="toggleSelection(String(item._id))"
+            class="tw:cursor-pointer"
+          >
+            <template #prepend>
+              <v-checkbox-btn
+                :model-value="selected.includes(String(item._id))"
+                @update:model-value="(checked) => setSelection(String(item._id), checked)"
+                @click.stop
+              />
+            </template>
+
+            <v-list-item-title class="tw:text-sm">
+              {{ getDisplayValue(item) }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <v-alert
+          v-if="selectedCount === 0"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="tw:mt-4"
+        >
+          {{ $t("core.noItemsSelected") }}
+        </v-alert>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="tw:px-4 tw:py-3">
+        <v-spacer />
+        <v-btn variant="text" @click="close">
+          {{ $t("core.cancel") }}
+        </v-btn>
+
+        <v-btn
+          v-if="selectedCount"
+          @click="confirm"
+          :disabled="selectedCount === 0"
+          color="primary"
+          variant="flat"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+
+interface Props {
+  modelValue: boolean
+  items: any[]
+  displayAttribute: string
+  title: string
+  confirmText: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  confirm: [selectedIds: string[]]
+}>()
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const selected = ref<string[]>([])
+const selectAll = ref(false)
+
+const selectedCount = computed(() => selected.value.length)
+
+const getDisplayValue = (item: any) => {
+  return item[props.displayAttribute] || item._id
+}
+
+const toggleSelection = (id: string) => {
+  const index = selected.value.indexOf(id)
+  if (index > -1) {
+    selected.value.splice(index, 1)
+  } else {
+    selected.value.push(id)
+  }
+  updateSelectAllState()
+}
+
+const setSelection = (id: string, checked: boolean | null) => {
+  const isChecked = Boolean(checked)
+  const exists = selected.value.includes(id)
+  if (isChecked && !exists) {
+    selected.value.push(id)
+  } else if (!isChecked && exists) {
+    selected.value = selected.value.filter((selectedId) => selectedId !== id)
+  }
+  updateSelectAllState()
+}
+
+const toggleSelectAll = (value: boolean | null) => {
+  const enabled = Boolean(value)
+  if (enabled) {
+    selected.value = props.items.map((item) => String(item._id))
+  } else {
+    selected.value = []
+  }
+  selectAll.value = enabled
+}
+
+const updateSelectAllState = () => {
+  selectAll.value =
+    selected.value.length === props.items.length && props.items.length > 0
+}
+
+const close = () => {
+  dialog.value = false
+  selected.value = []
+  selectAll.value = false
+}
+
+const confirm = () => {
+  if (selectedCount.value > 0) {
+    emit("confirm", selected.value)
+    close()
+  }
+}
+
+// Initialize selectAll state when items change
+watch(
+  () => props.items,
+  () => {
+    updateSelectAllState()
+  },
+  { immediate: true },
+)
+</script>

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

@@ -0,0 +1,211 @@
+<template>
+  <v-dialog v-model="dialog" max-width="800" scrollable>
+    <v-card class="tw:overflow-hidden">
+      <v-card-title class="tw:flex tw:items-center tw:justify-between tw:gap-2">
+        <span class="tw:text-lg tw:font-semibold">{{ title }}</span>
+        <v-btn icon="mdi-close" size="small" variant="text" @click="close" />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="tw:py-4">
+        <v-alert :type="type" variant="tonal" class="tw:mb-4">
+          <div class="tw:text-base tw:font-medium tw:mb-2">
+            {{ message }}
+          </div>
+          <div class="tw:text-sm">
+            {{ $t("core.itemsCount") }}:
+            <strong>{{ itemCount }}</strong>
+          </div>
+        </v-alert>
+
+        <div v-if="showItems && renderedItems.length > 0">
+          <div class="tw:text-xs tw:uppercase tw:font-semibold tw:opacity-60 tw:mb-2">
+            {{ $t("core.selectedItems") }}
+          </div>
+
+          <v-list density="compact" class="tw:border tw:rounded-md tw:py-0">
+            <v-list-item
+              v-for="item in renderedItems"
+              :key="item.key"
+              class="tw:py-2"
+            >
+              <template #title>
+                <span class="tw:text-sm tw:font-medium">{{ item.title }}</span>
+              </template>
+
+              <template #subtitle>
+                <pre
+                  v-if="item.kind === 'pre'"
+                  class="tw:mt-1 tw:text-xs tw:font-mono tw:p-2 tw:max-h-44 tw:overflow-auto tw:rounded tw:bg-black/5 dark:tw:bg-white/5 tw:whitespace-pre-wrap tw:break-all"
+                >{{ item.text }}</pre>
+                <div v-else class="tw:mt-1 tw:text-sm tw:opacity-80 tw:break-all">
+                  {{ item.text }}
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="tw:px-4 tw:py-3">
+        <v-spacer />
+        <v-btn variant="text" @click="close">
+          {{ cancelText || $t("core.close") }}
+        </v-btn>
+        <v-btn
+          v-if="showConfirm"
+          :color="type === 'warning' ? 'warning' : type === 'error' ? 'error' : 'primary'"
+          variant="flat"
+          @click="confirm"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+interface Props {
+  modelValue: boolean
+  items: any[]
+  title: string
+  message: string
+  type?: "info" | "success" | "warning" | "error"
+  showItems?: boolean
+  showConfirm?: boolean
+  displayAttribute: string
+  confirmText?: string
+  cancelText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "info",
+  showItems: true,
+  showConfirm: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  confirm: []
+}>()
+const { t } = useI18n()
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const itemCount = computed(() => props.items.length)
+
+const close = () => {
+  dialog.value = false
+}
+
+type SummaryRenderKind = "text" | "pre"
+
+interface SummaryRenderItem {
+  key: string
+  title: string
+  kind: SummaryRenderKind
+  text: string
+}
+
+interface SummaryFormatter {
+  kind: SummaryRenderKind
+  canHandle: (value: unknown) => boolean
+  format: (value: unknown) => string
+}
+
+const formatAsText = (value: unknown): string => {
+  if (value === null || value === undefined) return "-"
+  return String(value)
+}
+
+const objectJsonFormatter: SummaryFormatter = {
+  kind: "pre",
+  canHandle: (value) =>
+    value !== null && typeof value === "object" && !Array.isArray(value),
+  format: (value) => JSON.stringify(value, null, 2),
+}
+
+const arrayJsonFormatter: SummaryFormatter = {
+  kind: "pre",
+  canHandle: (value) => Array.isArray(value),
+  format: (value) => JSON.stringify(value, null, 2),
+}
+
+const primitiveFormatter: SummaryFormatter = {
+  kind: "text",
+  canHandle: () => true,
+  format: (value) => formatAsText(value),
+}
+
+// TODO(summary-formatters): Add XML formatter when import/export surfaces XML payloads.
+// TODO(summary-formatters): Add CSV formatter with row/column-aware preview rendering.
+// TODO(summary-formatters): Add image formatter for URL/blob metadata and thumbnail previews.
+const summaryFormatters: SummaryFormatter[] = [
+  objectJsonFormatter,
+  arrayJsonFormatter,
+  primitiveFormatter,
+]
+
+const resolveFormatter = (value: unknown): SummaryFormatter => {
+  return (
+    summaryFormatters.find((formatter) => formatter.canHandle(value)) ??
+    primitiveFormatter
+  )
+}
+
+const formatDisplayTitle = (item: unknown, index: number): string => {
+  if (!item || typeof item !== "object" || Array.isArray(item)) {
+    return `${t("core.selectedItems")} #${index + 1}`
+  }
+
+  const record = item as Record<string, unknown>
+  const attributeValue = record[props.displayAttribute]
+  if (attributeValue !== undefined && attributeValue !== null) {
+    return formatAsText(attributeValue)
+  }
+  if (record._id !== undefined && record._id !== null) {
+    return formatAsText(record._id)
+  }
+  return `${t("core.selectedItems")} #${index + 1}`
+}
+
+const getDisplayPayload = (item: unknown): unknown => {
+  if (!item || typeof item !== "object" || Array.isArray(item)) {
+    return item
+  }
+
+  const record = item as Record<string, unknown>
+  const payload = { ...record }
+  delete payload[props.displayAttribute]
+  return payload
+}
+
+const renderedItems = computed<SummaryRenderItem[]>(() =>
+  props.items.map((item, index) => {
+    const payload = getDisplayPayload(item)
+    const formatter = resolveFormatter(payload)
+
+    return {
+      key: `${index}-${formatDisplayTitle(item, index)}`,
+      title: formatDisplayTitle(item, index),
+      kind: formatter.kind,
+      text: formatter.format(payload),
+    }
+  }),
+)
+
+const confirm = () => {
+  emit("confirm")
+  close()
+}
+</script>

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

@@ -14,9 +14,11 @@ import UserChip from "./chip/UserChip.vue"
 import UserMenu from "./menu/UserMenu.vue"
 import UserNotifications from "./menu/UserNotifications.vue"
 import WidgetsLayoutLoader from "./composition/WidgetsLayoutLoader.vue"
+import DataExporter from "./dataExport/DataExporter.vue"
 
 export {
   CompositionOverlay,
+  DataExporter,
   DefaultModal,
   DraggableElement,
   DropzoneElement,

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,
+  }
+}