nuxt-ui-basekit 0.1.1 → 0.2.1

package/app/composables/useChartWidth.ts

@@ -1,16 +1,16 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
 
 /**
- * Misst die Breite eines Containers, damit ein SVG in echten Pixeln zeichnen
- * kann statt über eine skalierte `viewBox`.
+ * Measures a container so an SVG can draw in real pixels instead of going
+ * through a scaled `viewBox`.
  *
- * Der Unterschied ist die Schrift: eine `viewBox`, die auf Containerbreite
- * hochgerechnet wird, zieht Achsenbeschriftung und Werte mit hoch — auf einer
- * breiten Karte steht dann 15-px-Text, wo 11 gemeint waren. Mit gemessener
- * Breite bleibt Text Text und nur die Geometrie wächst.
+ * The difference is the type: a `viewBox` scaled up to container width drags
+ * axis labels and values up with it — a wide card then shows 15px text where
+ * 11 was meant. With a measured width, text stays text and only the geometry
+ * grows.
  *
- * Vor dem Mounten (SSR, erster Frame) gilt `fallback`. Das Diagramm ist damit
- * sofort da und rückt einmal zurecht, statt zu flackern.
+ * Before mount (SSR, first frame) `fallback` applies. The chart is therefore
+ * there straight away and settles once, rather than flickering.
  */
 export function useChartWidth(fallback = 640): {
   el: Ref<HTMLElement | null>
@@ -25,8 +25,8 @@ export function useChartWidth(fallback = 640): {
 
     observer = new ResizeObserver((entries) => {
       const measured = entries[0]?.contentRect.width ?? 0
-      // Unter 240 px wird die Geometrie unbrauchbar; dann lieber schmal
-      // zeichnen und den Container scrollen lassen.
+      // Below 240px the geometry becomes useless; draw narrow and let the
+      // container scroll instead.
       if (measured > 0) width.value = Math.max(240, Math.round(measured))
     })
     observer.observe(el.value)

package/app/composables/useConfirm.ts

@@ -2,10 +2,10 @@ import { useConfirmStore } from '../stores/confirm'
 import type { BaseKitConfirmOptions } from '../stores/confirm'
 
 /**
- * Bestätigungsabfrage als Ersatz für natives `window.confirm`.
+ * A confirmation prompt in place of the native `window.confirm`.
  *
- * Öffnet das global gemountete `BaseKitConfirmModal` und liefert ein Promise,
- * das mit `true`/`false` auflöst.
+ * Opens the globally mounted `BaseKitConfirmModal` and returns a promise that
+ * resolves to `true` or `false`.
  *
  *   const confirm = useConfirm()
  *   if (!(await confirm({ description: t('…'), color: 'error', confirmLabel: t('common.delete') }))) return

package/app/stores/confirm.ts

@@ -1,32 +1,32 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-/** Optionen für eine Bestätigungsabfrage. */
+/** Options for one confirmation prompt. */
 export interface BaseKitConfirmOptions {
-  /** Titel des Dialogs (Default: `common.confirm.title`). */
+  /** Dialog title. Falls back to the `confirmTitle` label. */
   title?: string
-  /** Erklärtext / Konsequenz — bei Destruktivem ausformulieren. */
+  /** Explanation or consequence — spell it out for anything destructive. */
   description?: string
-  /** Beschriftung des Bestätigen-Buttons (Default: `common.confirm.confirm`). */
+  /** Label of the confirm button. Falls back to the `confirm` label. */
   confirmLabel?: string
-  /** Beschriftung des Abbrechen-Buttons (Default: `common.cancel`). */
+  /** Label of the cancel button. Falls back to the `cancel` label. */
   cancelLabel?: string
-  /** Farbe des Bestätigen-Buttons — `error` für destruktive Aktionen. */
+  /** Colour of the confirm button — `error` for destructive actions. */
   color?: 'error' | 'primary'
-  /** Optionales Icon am Bestätigen-Button. */
+  /** Optional icon on the confirm button. */
   icon?: string
 }
 
 /**
- * Zentraler Bestätigungs-Store — ersetzt native `window.confirm`-Dialoge durch
- * eine gethemte, dark-mode-fähige Abfrage.
+ * The confirmation store — replaces native `window.confirm` dialogs with a
+ * themed, dark-mode-capable prompt.
  *
- * `ask()` öffnet das global gemountete `BaseKitConfirmModal` und liefert ein
- * Promise, das mit `true` (bestätigt) oder `false` (abgebrochen/geschlossen)
- * auflöst. Der Resolver lebt außerhalb der Reaktivität, damit genau eine
- * Antwort pro Abfrage zurückgeht.
+ * `ask()` opens the globally mounted `BaseKitConfirmModal` and returns a
+ * promise resolving to `true` (confirmed) or `false` (cancelled or closed).
+ * The resolver lives outside reactivity so exactly one answer goes back per
+ * prompt.
  *
- * Genutzt über das Composable `useConfirm()`:
+ * Used through the `useConfirm()` composable:
  *   const confirm = useConfirm()
  *   if (!(await confirm({ description: t('…'), color: 'error' }))) return
  */
@@ -36,7 +36,7 @@ export const useConfirmStore = defineStore('basekit:confirm', () => {
   let resolver: ((value: boolean) => void) | null = null
 
   function ask(opts: BaseKitConfirmOptions = {}): Promise<boolean> {
-    // Läuft noch eine Abfrage, wird sie als abgebrochen aufgelöst.
+    // A prompt still running is resolved as cancelled.
     resolver?.(false)
     options.value = opts
     open.value = true
@@ -45,7 +45,7 @@ export const useConfirmStore = defineStore('basekit:confirm', () => {
     })
   }
 
-  /** Abfrage beantworten und Dialog schließen. */
+  /** Answer the prompt and close the dialog. */
   function settle(value: boolean): void {
     open.value = false
     resolver?.(value)

package/app/utils/html-to-markdown.ts

@@ -1,14 +1,12 @@
 /**
- * HTML → Markdown (turndown). Zwei Einsätze, beide nur im Admin/Editor — daher
- * bewusst getrennt von `markdown.ts` (das im öffentlichen Widget-Bundle steckt
- * und turndown nicht mitziehen soll):
- *   - Tiptap speichert HTML → hier nach Markdown serialisieren.
- *   - Legacy-Text-Blöcke mit rohem `config.html` einmalig nach Markdown wandeln.
+ * HTML to Markdown, through turndown. Kept apart from `markdown.ts` on
+ * purpose: that one may end up in a public bundle and should not drag turndown
+ * along, while this one is only ever needed where something is edited.
  *
- * **turndown wird bewusst erst beim ersten Aufruf geladen.** Das Paket ist
- * CommonJS; ein Import auf Modulebene landet im Server-Bundle und wirft dort
- * beim Rendern „require is not defined in ES module scope". Der Editor läuft
- * ohnehin nur im Browser — auf dem Server wird die Funktion nie aufgerufen.
+ * **turndown is loaded lazily, and that is deliberate.** The package is
+ * CommonJS; an import at module level lands in the server bundle and throws
+ * "require is not defined in ES module scope" while rendering. The editor runs
+ * in the browser anyway — on the server this function is never called.
  */
 type Turndown = { turndown: (html: string) => string }
 
@@ -18,14 +16,14 @@ function service(): Turndown | null {
   if (instance) return instance
   if (import.meta.server) return null
 
-  // Synchroner Zugriff auf ein bereits geladenes Modul: der Editor ruft
-  // `prepare()` beim Einhängen auf, bevor gespeichert werden kann.
+  // Synchronous access to an already loaded module: the editor calls
+  // `prepare()` on mount, well before anything can be saved.
   return instance
 }
 
 /**
- * Lädt turndown im Browser vor. Die Editor-Komponenten rufen das beim
- * Einhängen auf, damit {@link htmlToMarkdown} danach synchron bleiben kann.
+ * Preloads turndown in the browser. The editor components call this on mount
+ * so {@link htmlToMarkdown} can stay synchronous afterwards.
  */
 export async function prepareHtmlToMarkdown(): Promise<void> {
   if (instance || import.meta.server) return
@@ -40,8 +38,8 @@ export async function prepareHtmlToMarkdown(): Promise<void> {
 export function htmlToMarkdown(html?: string | null): string {
   if (!html) return ''
   const td = service()
-  // Ohne geladenes turndown (Server, oder prepare() vergessen) lieber das
-  // Original zurückgeben als eine Ausnahme zu werfen — der Text ginge sonst
-  // beim Speichern verloren.
+  // Without turndown loaded — on the server, or when prepare() was forgotten
+  // — return the original rather than throwing: the text would otherwise be
+  // lost on save.
   return td ? td.turndown(String(html)).trim() : String(html)
 }

package/app/utils/markdown.ts

@@ -1,15 +1,16 @@
 import MarkdownIt from 'markdown-it'
 
 /**
- * Markdown → HTML für den Text-Block (`richtext`-Widget, jetzt Markdown).
+ * Markdown to HTML.
  *
- * Bewusst `html: false`: roher HTML im Markdown wird NICHT durchgereicht — das
- * schließt die wichtigste XSS-Lücke ohne separaten Sanitizer (markdown-it
- * blockt zudem `javascript:`-Links per Default-`validateLink`). `linkify` macht
- * nackte URLs klickbar, `typographer` glättet Anführungszeichen/Bindestriche.
+ * `html: false` on purpose: raw HTML inside the Markdown is NOT passed
+ * through. That closes the biggest XSS hole without a separate sanitizer —
+ * markdown-it also blocks `javascript:` links through its default
+ * `validateLink`. `linkify` makes bare URLs clickable, `typographer` smooths
+ * quotes and dashes.
  *
- * Geteilt zwischen Anzeige und Editor-Vorschau, damit
- * Bearbeiten und Ausgabe identisch aussehen.
+ * Shared between display and editor preview, so that editing and output look
+ * the same.
  */
 const md: MarkdownIt = new MarkdownIt({
   html: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-basekit",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Markenfreie Basis-Komponenten für Nuxt 4 auf Nuxt UI — Tabellen, Reiter, Diagramme, Auswahl und Leerzustände als Nuxt-Layer.",
   "keywords": [
     "nuxt",