viur-ui 0.0.1 → 0.0.2

package/src/forms/bones/widgets/relationalBone.vue

@@ -36,49 +36,49 @@ import { reactive, onMounted, inject, computed, watch } from "vue"
 import { useListFetch } from "../../../request/index.js"
 import Wrapper_nested from "../BoneNestedWrapper.vue"
 /**
- * Relational-Auswahl-Widget für Bones vom Typ `relational` und `relational.select`.
+ * Relational selection widget for bones of type `relational` and `relational.select`.
  *
- * Beim Typ `relational` wird eine `<wa-combobox>` angezeigt, die via `getList`
- * Einträge aus dem konfigurierten `module` lädt und filtert. Ist ein Wert gesetzt,
- * wird stattdessen ein gesperrtes `<wa-input>` mit dem formatierten Eintrag angezeigt.
- * Beim Typ `relational.select` wird ein Dropdown-Widget gerendert.
- * Falls die Struktur ein `using`-Objekt enthält, wird zusätzlich ein `Wrapper_nested`
- * für die relationalen Zusatz-Felder (`rel`) eingeblendet.
+ * For type `relational`, a `<wa-combobox>` is shown that loads and filters
+ * entries from the configured `module` via `getList`. If a value is set,
+ * a locked `<wa-input>` with the formatted entry is shown instead.
+ * For type `relational.select`, a dropdown widget is rendered.
+ * If the structure contains a `using` object, a `Wrapper_nested`
+ * is additionally shown for the relational extra fields (`rel`).
  *
  * @displayName RelationalBone
  *
- * @cssClass bone-widget-record - Äußerer Container des Widgets
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-relational - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-relational-default - Standard-Variante
- * @cssClass bone-widget-relational-{name} - Dynamisch gesetzt auf den Bone-Namen
- * @cssClass bone-widget-single-entry - Zeile mit Combobox/Input
+ * @cssClass bone-widget-record - Outer container of the widget
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-relational - Identifies the bone type
+ * @cssClass bone-widget-relational-default - Default variant
+ * @cssClass bone-widget-relational-{name} - Dynamically set to the bone name
+ * @cssClass bone-widget-single-entry - Row with combobox/input
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert; Objekt mit `dest`- und `rel`-Schlüsseln oder `null`. */
+  /** Current bone value; object with `dest` and `rel` keys, or `null`. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur; `using` steuert ob ein Nested-Wrapper angezeigt wird. */
+  /** Bone structure; `using` controls whether a nested wrapper is shown. */
   bone: Object,
-  /** Aktuell nicht genutzt. */
+  /** Currently not used. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei Auswahl eines Eintrags, beim Löschen und beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {{ dest: object, rel: object|null }|string} value - Ausgewähltes Relational-Objekt oder `""` beim Löschen
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired when an entry is selected, when cleared, and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {{ dest: object, rel: object|null }|string} value - Selected relational object, or `""` when cleared
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])
@@ -148,8 +148,8 @@ function changeEventNested(data) {
   }
 }
 
-// Halte state.selection synchron mit props.value — wichtig, wenn der Wert
-// von außen geleert wird (z.B. via Delete-Action).
+// Keep state.selection in sync with props.value — important when the value
+// is cleared from outside (e.g. via the delete action).
 watch(
   () => props.value,
   (newVal) => {

package/src/forms/bones/widgets/selectBone.vue

@@ -26,48 +26,48 @@
 <script setup>
 import { reactive, onMounted, inject, computed } from "vue"
 /**
- * Dropdown-Auswahlfeld für vordefinierte Werte (Typ `select`).
+ * Dropdown select field for predefined values (type `select`).
  *
- * Rendert ein `<wa-select>` mit `<wa-option>`-Einträgen, die aus
- * `boneState.bonestructure.values` generiert werden. `values` kann ein Array
- * von `[key, label]`-Tupeln oder ein Objekt `{ key: label }` sein.
- * Bei aktiviertem `multiple` können mehrere Optionen gleichzeitig gewählt werden.
- * Der Bone-Typ `select.choose` wird durch die separate Komponente `SelectBoneChoose`
- * abgehandelt und rendert Radio-Buttons bzw. Checkboxen.
- * Bei `boneState.label === "placeholder"` wird der Bone-Name als Placeholder angezeigt.
+ * Renders a `<wa-select>` with `<wa-option>` entries generated from
+ * `boneState.bonestructure.values`. `values` can be an array
+ * of `[key, label]` tuples or an object `{ key: label }`.
+ * With `multiple` enabled, several options can be selected at once.
+ * The bone type `select.choose` is handled by the separate component `SelectBoneChoose`
+ * and renders radio buttons or checkboxes.
+ * With `boneState.label === "placeholder"`, the bone name is shown as a placeholder.
  *
  * @displayName SelectBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-select - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-select-default - Standard-Variante (Dropdown)
- * @cssClass bone-widget-select-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-select-status`
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-select - Identifies the bone type
+ * @cssClass bone-widget-select-default - Default variant (dropdown)
+ * @cssClass bone-widget-select-{name} - Dynamically set to the bone name, e.g. `bone-widget-select-status`
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert (String, Array bei multiple). */
+  /** Current bone value (string, array with multiple). */
   value: null,
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus auf das Select-Element (aktuell nicht implementiert). */
+  /** Focuses the select element (currently not implemented). */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string|string[]} value - Gewählter Wert oder Array bei multiple
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string|string[]} value - Selected value, or array with multiple
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/selectBoneChoose.vue

@@ -16,8 +16,8 @@
     </wa-checkbox>
   </div>
 
-  <!-- readonly an der Gruppe (siehe booleanBoneChoose): disabled Radios
-       zeigten keine Auswahl -->
+  <!-- readonly on the group (see booleanBoneChoose): disabled radios
+       would show no selection -->
   <wa-radio-group
     v-else
     :value="state.value"

package/src/forms/bones/widgets/spatialBone.vue

@@ -39,46 +39,46 @@
 <script setup>
 import { reactive, onMounted, inject, computed } from "vue"
 /**
- * Koordinaten-Eingabe für geografische Punkte (Breitengrad / Längengrad).
+ * Coordinate input for geographic points (latitude / longitude).
  *
- * Rendert zwei `<wa-input type="number">` Felder für Latitude und Longitude.
- * Die erlaubten Wertebereiche werden über `boneState.bonestructure.boundslat`
- * und `boneState.bonestructure.boundslng` gesteuert. Unterstützt weder
- * Mehrsprachigkeit noch Mehrfachwerte.
+ * Renders two `<wa-input type="number">` fields for latitude and longitude.
+ * The allowed value ranges are controlled via `boneState.bonestructure.boundslat`
+ * and `boneState.bonestructure.boundslng`. Supports neither
+ * multiple languages nor multiple values.
  *
  * @displayName SpatialBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-spatial - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-spatial-default - Standard-Variante
- * @cssClass bone-widget-spatial-{name}-lat - Dynamisch gesetzt für das Breiten­grad-Feld
- * @cssClass bone-widget-spatial-{name}-long - Dynamisch gesetzt für das Längen­grad-Feld
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-spatial - Identifies the bone type
+ * @cssClass bone-widget-spatial-default - Default variant
+ * @cssClass bone-widget-spatial-{name}-lat - Dynamically set for the latitude field
+ * @cssClass bone-widget-spatial-{name}-long - Dynamically set for the longitude field
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert als Array `[lat, lng]` oder Objekt `{ lat, lng }`. */
+  /** Current bone value as an array `[lat, lng]` or an object `{ lat, lng }`. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key (SpatialBone unterstützt kein multilang). */
+  /** Language key (SpatialBone does not support multilang). */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach dem Mount auf das erste Input-Element. */
+  /** Focuses the first input element after mount. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {[number, number]} value - Koordinaten als `[lat, lng]`
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {[number, number]} value - Coordinates as `[lat, lng]`
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/stringBone.vue

@@ -22,49 +22,49 @@
 <script setup>
 import { reactive, onMounted, inject, computed, watchEffect, ref } from "vue"
 import { useTimeoutFn } from "@vueuse/core"
-import Utils from "../utils"
+import Utils from "../utils.js"
 /**
- * Einzeiliges Textfeld für einfache Zeichenketten.
+ * Single-line text field for simple strings.
  *
- * Rendert ein `<wa-input>` und delegiert Validierung an das native
- * Constraint Validation API. Unterstützt optionale Regex-Validierung
- * via `boneState.params.pattern` sowie eine eigene Fehlermeldung via
- * `boneState.params.pattern_error`. Bei `boneState.label === "placeholder"`
- * wird der Bone-Name als Placeholder angezeigt statt als Label darüber.
+ * Renders a `<wa-input>` and delegates validation to the native
+ * Constraint Validation API. Supports optional regex validation
+ * via `boneState.params.pattern` as well as a custom error message via
+ * `boneState.params.pattern_error`. With `boneState.label === "placeholder"`,
+ * the bone name is shown as a placeholder instead of as a label above.
  *
  * @displayName StringBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-string - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-string-default - Standard-Variante
- * @cssClass bone-widget-string-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-string-title`
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-string - Identifies the bone type
+ * @cssClass bone-widget-string-default - Default variant
+ * @cssClass bone-widget-string-{name} - Dynamically set to the bone name, e.g. `bone-widget-string-title`
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert. */
+  /** Current bone value. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach 600 ms auf das Input-Element. */
+  /** Focuses the input element after 600 ms. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string} value - Aktueller Eingabewert
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
-   * @arg {boolean} [valid] - Validierungsstatus; fehlt beim Init-Event
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string} value - Current input value
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
+   * @arg {boolean} [valid] - Validation status; missing on the init event
    */
   "change",
 ])
@@ -104,11 +104,11 @@ const state = reactive({
 const stringBone = ref(null)
 
 /**
- * Verarbeitet `change`- und `keyup`-Events des `<wa-input>`.
- * Prüft die native Validität, setzt bei `patternMismatch` eine eigene
- * Fehlermeldung und emittiert den `change`-Event mit Validierungsstatus.
+ * Handles `change` and `keyup` events of the `<wa-input>`.
+ * Checks the native validity, sets a custom error message on
+ * `patternMismatch` and emits the `change` event with the validation status.
  *
- * @param {Event} event - Das DOM-Event vom Input-Element
+ * @param {Event} event - The DOM event from the input element
  */
 function changeEvent(event) {
   let valid = stringBone.value.reportValidity()

package/src/forms/bones/widgets/textBone.vue

@@ -43,6 +43,7 @@
 <script setup>
 import { reactive, onMounted, inject, computed, watch, onBeforeMount } from "vue"
 import { Ckeditor } from "@ckeditor/ckeditor5-vue"
+import { useI18n } from "vue-i18n"
 import {
   ClassicEditor,
   Essentials,
@@ -72,56 +73,57 @@ import {
   RemoveFormat,
   GeneralHtmlSupport,
 } from "ckeditor5"
-import coreTranslations from "ckeditor5/dist/translations/de.js"
-import "ckeditor5/dist/ckeditor5.css"
-import { ViURUploadAdapterPlugin } from "../uploadAdapter"
+import coreTranslations from "ckeditor5/translations/de.js"
+import "ckeditor5/ckeditor5.css"
+import { ViURUploadAdapterPlugin } from "../uploadAdapter.js"
 
 /**
- * Mehrzeiliges Textfeld für längere Inhalte, wahlweise als Textarea oder Rich-Text-Editor (CKEditor 5).
+ * Multi-line text field for longer content, either as a textarea or a rich-text editor (CKEditor 5).
  *
- * Wenn `boneState.bonestructure.valid_html` oder `boneState.bonestructure.validHtml` gesetzt ist,
- * wird ein CKEditor 5 (ClassicEditor) gerendert. Die sichtbaren Toolbar-Aktionen werden anhand
- * der erlaubten HTML-Tags (`validTags`) gefiltert. Ohne HTML-Konfiguration erscheint ein
- * einfaches `<wa-textarea>`. Bei `boneState.label === "placeholder"` wird der Bone-Name als
- * Placeholder angezeigt statt als Label.
+ * If `boneState.bonestructure.valid_html` or `boneState.bonestructure.validHtml` is set,
+ * a CKEditor 5 (ClassicEditor) is rendered. The visible toolbar actions are filtered based on
+ * the allowed HTML tags (`validTags`). Without an HTML configuration, a simple
+ * `<wa-textarea>` is shown. With `boneState.label === "placeholder"`, the bone name is
+ * shown as a placeholder instead of as a label.
  *
  * @displayName TextBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-text - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-text-default - Standard-Variante (Textarea oder CKEditor)
- * @cssClass bone-widget-text-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-text-content`
- * @cssClass bone-widget-text-{name}-html - Gesetzt wenn der Bone HTML-Inhalt enthält
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-text - Identifies the bone type
+ * @cssClass bone-widget-text-default - Default variant (textarea or CKEditor)
+ * @cssClass bone-widget-text-{name} - Dynamically set to the bone name, e.g. `bone-widget-text-content`
+ * @cssClass bone-widget-text-{name}-html - Set when the bone contains HTML content
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert als Klartext oder HTML-String. */
+  /** Current bone value as plain text or an HTML string. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus auf das Eingabefeld (aktuell nicht implementiert). */
+  /** Focuses the input field (currently not implemented). */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string} value - Aktueller Textwert oder HTML-String
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string} value - Current text value or HTML string
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])
 
+const { t } = useI18n()
 const boneState = inject("boneState")
 const state = reactive({
   value: "",
@@ -235,7 +237,7 @@ onBeforeMount(() => {
       decorators: [
         {
           mode: "manual",
-          label: "Link in neuem Fester öffnen",
+          label: t("bones.text.openInNewWindow"),
           attributes: {
             target: "_blank",
             rel: "noopener noreferrer",

package/src/forms/install.d.ts

@@ -1,4 +1,4 @@
 import type { App } from "vue"
 
-/** Registriert die global per Namen genutzten Formular-Wrapper (`<bone>` usw.). */
+/** Registers the form wrappers used globally by name (`<bone>` etc.) and the `safeHtml` plugin (`v-safe-html`, `$sanitizeHtml`). */
 export declare function installViurForms(app: App): void

package/src/forms/install.js

@@ -1,4 +1,5 @@
 import { defineAsyncComponent } from "vue"
+import safeHtml from "../vite/safeHtml.js"
 
 // --------------------------------------------------------------------------- //
 // Global registration of the form wrappers                                    //
@@ -18,6 +19,11 @@ import { defineAsyncComponent } from "vue"
 // Keeping the list here instead of in every consumer means a rename inside the
 // package cannot silently break the apps that embed the forms.
 //
+// Also installs `safeHtml` (v-safe-html + $sanitizeHtml). Importing this module
+// sets `window.__sanitizeHtml`, which an app-side v-html compiler transform can
+// call. v-html itself is compiled into an innerHTML prop at build time and can't
+// be replaced at runtime — that override belongs in the app's vite.config.js.
+//
 //   import { installViurForms } from "viur-ui/src/forms/install.js"
 //   installViurForms(app)
 //
@@ -40,4 +46,5 @@ export function installViurForms(app) {
   for (const [name, loader] of Object.entries(components)) {
     if (!app.component(name)) app.component(name, defineAsyncComponent(loader))
   }
+  if (!app.directive("safe-html")) app.use(safeHtml)
 }

package/src/forms/layouts/LayloutList2Columns.vue

@@ -36,7 +36,7 @@
 
 <script setup>
 import { inject } from "vue"
-import { getBoneWidget } from "../bones"
+import { getBoneWidget } from "../bones/index.js"
 const formState = inject("formState")
 const formUpdate = inject("formUpdate")
 </script>

package/src/forms/layouts/LayoutCategory.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { inject } from "vue"
-import { getBoneWidget } from "../bones"
+import { getBoneWidget } from "../bones/index.js"
 import ViFormCategory from "../ViFormCategory.vue"
 const formState = inject("formState")
 const formUpdate = inject("formUpdate")

package/src/forms/layouts/LayoutList.vue

@@ -19,7 +19,7 @@
 
 <script setup>
 import { inject } from "vue"
-import { getBoneWidget } from "../bones"
+import { getBoneWidget } from "../bones/index.js"
 const formState = inject("formState")
 const formUpdate = inject("formUpdate")
 </script>

package/src/forms/utils.js

@@ -1,13 +1,13 @@
 import { createControllerFetch, normalizeEnvelope, normalizeStructure } from "../request/index.js"
 import Logics from "logics-js"
 import { inject, toRaw, reactive, markRaw } from "vue"
-import Utils from "./bones/utils"
+import Utils from "./bones/utils.js"
 
 /**
- * Tiefe Kopie reiner Daten (Skel-Werte), die Vue-Proxies auf JEDER Ebene
- * auflöst. structuredClone allein scheitert daran: ein Record-/using-Formular
- * bekommt den reaktiven Wert des Eltern-Bones, und `{ ...proxy }` behält die
- * verschachtelten Werte als Proxies. Andere Objekte (Date, File) bleiben geteilt.
+ * Deep copy of plain data (skel values) that resolves Vue proxies on EVERY
+ * level. structuredClone alone fails at this: a record/using form
+ * receives the reactive value of the parent bone, and `{ ...proxy }` keeps the
+ * nested values as proxies. Other objects (Date, File) remain shared.
  */
 function rawCopy(value) {
   const raw = toRaw(value)
@@ -33,8 +33,8 @@ export function useFormUtils(props, state) {
         path += `/${props.skeltype}`
       }
 
-      // Nur mit Key anhängen: ein SINGLETON hat genau einen Datensatz, sein
-      // `edit` kennt keinen Key. Ohne diese Prüfung entstand `/edit/undefined`.
+      // Only append with a key: a SINGLETON has exactly one entry, its
+      // `edit` takes no key. Without this check `/edit/undefined` resulted.
       if (["edit", "clone"].includes(props.action) || (isTree && props.action === "add")) {
         if (props.skelkey) {
           path += `/${props.skelkey}`
@@ -93,12 +93,12 @@ export function useFormUtils(props, state) {
       // normalizeEnvelope; accept `values` too for a raw body).
       const values = data["data"] !== undefined ? data["data"] : data["values"]
       if (updateStructure && data["structure"] != null) {
-        // Der `values`-Prop belegt ein frisch GERENDERTES Formular vor. Die
-        // Antwort auf ein Absenden spiegelt, was gesendet wurde — darüber darf
-        // er nicht erneut schreiben.
+        // The `values` prop prefills a freshly RENDERED form. The
+        // response to a submit mirrors what was sent — it must not
+        // overwrite that again.
         initForm(values, data["structure"], presetValues ? state.values : null)
-        // Neue Struktur = Server-Flags: visibleIf/readonlyIf/requiredIf/evaluate
-        // gleich wieder anwenden, nicht erst bei der nächsten Eingabe.
+        // New structure = server flags: apply visibleIf/readonlyIf/requiredIf/evaluate
+        // right away, not only on the next input.
         logics()
       } else if (values !== undefined) {
         state.skel = values
@@ -147,10 +147,10 @@ export function useFormUtils(props, state) {
     try {
       await fetchResult.execute()
       applyResponseState(fetchResult.data.value, { updateStructure: true, presetValues: true })
-      // Ein v1-Schritt bringt kein Ziel mit (kein `follow`, kein next_url, kein
-      // params.action_url) — dort wird der Schritt an DIESELBE URL
-      // zurückgeschickt, aus der er gerendert wurde. Ohne das stünde postUrl
-      // nach dem Rendern auf null und der Absenden-Knopf liefe ins Leere.
+      // A v1 step carries no target (no `follow`, no next_url, no
+      // params.action_url) — there the step is sent back to the SAME URL
+      // it was rendered from. Without this, postUrl would be
+      // null after rendering and the submit button would do nothing.
       if (!state.postUrl && url) {
         state.postUrl = url
       }
@@ -562,18 +562,18 @@ export function useFormUtils(props, state) {
     }
 
     state.skel = { ...skeldata, ...formvalues }
-    // Stand festhalten, wie er hereinkam: `state.skel` ist die Arbeitskopie und
-    // wird beim Tippen verändert. resetForm() stellt daraus wieder her, ohne
-    // erneut zu laden ("Änderungen verwerfen").
-    // markRaw: reine Lesedaten, kein reaktiver Proxy.
+    // Keep the state as it came in: `state.skel` is the working copy and
+    // changes while typing. resetForm() restores from this without
+    // reloading ("discard changes").
+    // markRaw: read-only data, no reactive proxy.
     state.pristine = markRaw(rawCopy(state.skel))
 
     state.categories = updateCategories()
   }
 
   /**
-   * Änderungen verwerfen: die Werte des letzten Server-Stands wieder einsetzen,
-   * OHNE neuen Request (dafür ist reload() da). Struktur und Kategorien bleiben.
+   * Discard changes: restore the values of the last server state,
+   * WITHOUT a new request (that's what reload() is for). Structure and categories remain.
    */
   function resetForm() {
     if (state.pristine === undefined || state.pristine === null) return

package/src/request/configStore.js

@@ -32,7 +32,7 @@ import { reactive, computed, markRaw } from "vue"
 //     its dotted vi path ("user", "shop.order"). adminInfo carries `name`,
 //     `handler`, `icon`, `display`, `sortIndex`, `moduleGroup`, `views`, … (see
 //     viur-core `Module.adminInfo`).
-//   • `groups`: `configuration["admin.module.groups"]` (so rendert viur-core
+//   • `groups`: `configuration["admin.module.groups"]` (this is how viur-core renders
 //     `conf.admin.module_groups`) —
 //     `{ [groupKey]: { name, icon, sortIndex, moduleGroup? } }`. A group may
 //     itself name a parent group via `moduleGroup` (nested groups).
@@ -366,9 +366,9 @@ export const useConfigStore = defineStore("viurConfig", () => {
   const languages = computed(() => state.configuration["admin.languages"] ?? [])
   const moduleNames = computed(() => Object.keys(state.modules ?? {}))
   /**
-   * Gruppen der Modul-Navigation. viur-core rendert `conf.admin.module_groups`
-   * als PUNKT-Schlüssel `admin.module.groups` (Singular). Der Plural bleibt als
-   * Rückfallebene stehen, falls ein Projekt/eine Version ihn so ausliefert.
+   * Groups of the module navigation. viur-core renders `conf.admin.module_groups`
+   * as the DOTTED key `admin.module.groups` (singular). The plural stays as a
+   * fallback in case a project/version delivers it that way.
    */
   const groups = computed(
     () => state.configuration["admin.module.groups"] ?? state.configuration["admin.modules.groups"] ?? {}