viur-ui 0.0.1

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

@@ -0,0 +1,125 @@
+<template>
+  <wa-input
+    ref="numericBone"
+    class="bone-widget bone-widget-numeric bone-widget-numeric-default"
+    :class="[`bone-widget-numeric-${name}`]"
+    type="number"
+    :disabled="boneState.readonly"
+    :value="value"
+    :min="state.minAmount"
+    :max="state.maxAmount"
+    :step="state.precision"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :placeholder="state.placeholder"
+    :data-data-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+    @keyup="changeEvent"
+  ></wa-input>
+  <ul class="bone-widget-info">
+    <li v-if="state.minAmount !== -9223372036854776000 && state.minAmount">
+      {{ $t("bones.numeric.min", { val: state.minAmount }) }}
+    </li>
+    <li v-if="state.maxAmount !== 9223372036854776000 && state.maxAmount">
+      {{ $t("bones.numeric.max", { val: state.maxAmount }) }}
+    </li>
+    <li v-if="state.precision">{{ $t("bones.numeric.precision", { val: boneState.bonestructure["precision"] }) }}</li>
+  </ul>
+</template>
+
+<script setup>
+import { reactive, onMounted, computed, inject, ref, watchEffect } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+/**
+ * Numerisches Eingabefeld für Ganzzahlen und Dezimalwerte.
+ *
+ * Rendert ein `<wa-input type="number">` und zeigt optional Hinweise zu
+ * Mindest-/Höchstwert und Präzision an. Unterstützt Mehrsprachigkeit
+ * (`languages`) und mehrfache Werte (`multiple`). Der Schritt (`step`) wird
+ * aus `boneState.bonestructure.precision` berechnet.
+ *
+ * @displayName NumericBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-numeric - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-numeric-default - Standard-Variante
+ * @cssClass bone-widget-numeric-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-numeric-amount`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert. */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach 600 ms auf das Input-Element. */
+  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 (als String)
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   * @arg {boolean} [valid] - Validierungsstatus; fehlt beim Init-Event
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  minAmount: computed(() => {
+    return boneState.bonestructure["minAmount"]
+  }),
+  maxAmount: computed(() => {
+    return boneState.bonestructure["maxAmount"]
+  }),
+  precision: computed(() => {
+    if (boneState.bonestructure["precision"] > 0) {
+      return parseFloat(`0.${"0".repeat(boneState.bonestructure["precision"] - 1)}1`)
+    }
+    return undefined
+  }),
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+const numericBone = ref(null)
+
+function changeEvent(event) {
+  let valid = numericBone.value.reportValidity()
+  emit("change", props.name, event.target.value, props.lang, props.index, valid)
+}
+
+watchEffect(() => {
+  if (props.autofocus) {
+    if (numericBone.value && numericBone.value !== null && numericBone.value !== null) {
+      const { start } = useTimeoutFn(() => {
+        numericBone.value.focus()
+      }, 600)
+
+      start()
+    }
+  }
+})
+
+onMounted(() => {
+  emit("change", props.name, "" + props.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,215 @@
+<template>
+  <div class="wa-stack wa-gap-2xs">
+    <wa-input
+      ref="passwordBone"
+      v-model="state.value1"
+      class="bone-widget bone-widget-password bone-widget-password-default"
+      :class="([`bone-widget-password-${name}`], { 'has-check': state.needsConfirm })"
+      :disabled="boneState.readonly"
+      type="password"
+      with-clear
+      password-toggle="true"
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+      @wa-clear="state.value1 = ''"
+      @keyup="changeEvent"
+    >
+      <wa-icon
+        v-if="state.needsConfirm"
+        slot="end"
+        :name="state.equal && state.value1.length ? 'check' : 'xmark'"
+      ></wa-icon>
+    </wa-input>
+    <wa-input
+      v-if="state.needsConfirm"
+      v-model="state.value2"
+      class="bone-widget bone-widget-boolean bone-widget-boolean-default bone-widget-boolean-repeat bone-widget-password-check"
+      :class="[`bone-widget-boolean-${name}`]"
+      type="password"
+      with-clear
+      password-toggle="true"
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+      @wa-clear="state.value2 = ''"
+      @keyup="changeEvent"
+    >
+      <wa-icon
+        slot="end"
+        :name="state.equal && state.value1.length ? 'check' : 'xmark'"
+      ></wa-icon>
+    </wa-input>
+  </div>
+  <ul class="bone-widget-errors">
+    <li
+      v-for="(error, index) in state.passwordInfo"
+      :key="index"
+    >
+      {{ error }}
+    </li>
+    <li
+      v-for="(error, index) in state.requiredPasswordInfo"
+      :key="index"
+      class="bone-widget-required-info"
+    >
+      {{ error }}
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { reactive, onMounted, computed, inject, watch, ref, watchEffect } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+/**
+ * Passwort-Eingabefeld mit Wiederholung und Stärke-Validierung.
+ *
+ * Rendert `<wa-input type="password">` — mit Wiederholungs-Feld, WENN der Bone
+ * überhaupt Passwort-Tests mitbringt (`bonestructure.tests`). Ein Login-Formular
+ * liefert serverseitig einen rohen Passwort-Bone ohne Tests
+ * (`PasswordBone(raw=True, tests=(), test_threshold=0)`); dort wäre eine
+ * Wiederholung falsch — man tippt ein bestehendes Passwort ein, man setzt keins.
+ * Im Readonly-Modus entfällt die Wiederholung ebenfalls. Passwort-Tests
+ * werden über `boneState.bonestructure.tests` (Array aus `[regex, message, required]`
+ * Tupeln) konfiguriert. `boneState.bonestructure.test_threshold` legt fest,
+ * wie viele optionale Tests fehlschlagen dürfen.
+ *
+ * @displayName PasswordBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-password - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-password-default - Standard-Variante
+ * @cssClass bone-widget-password-{name} - Dynamisch gesetzt auf den Bone-Namen
+ * @cssClass has-check - Gesetzt wenn nicht readonly; entfernt border-bottom-right-radius für nahtlosen Übergang zum Wiederholungs-Feld
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert (wird in `state.value1` gespiegelt). */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach 600 ms auf das erste Passwort-Feld. */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {string} value - Aktueller Passwortwert (nur wenn beide Felder übereinstimmen und Tests bestanden)
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   * @arg {boolean} valid - `true` wenn Passwort gültig (Tests bestanden + Felder gleich)
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value1: "",
+  value2: null,
+  equal: false,
+  // Wiederholung nur, wenn der Bone Tests mitbringt (= ein Passwort wird
+  // GESETZT). Beim Login liefert der Server einen rohen Bone ohne Tests.
+  needsConfirm: computed(() => !boneState.readonly && (boneState?.bonestructure?.["tests"]?.length ?? 0) > 0),
+  passwordInfo: [],
+  requiredPasswordInfo: [],
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+const passwordBone = ref(null)
+
+function changeEvent(event) {
+  testPassword(state.value1)
+
+  if (!state.needsConfirm || state.value1 === state.value2) {
+    state.equal = true
+  } else {
+    state.equal = false
+    // dont try to update if not equal
+  }
+
+  // boneState.bonestructure["test_threshold"] = 2  *needs to be removed by the look cuz overridees server settings
+  if (
+    state.requiredPasswordInfo.length === 0 &&
+    state.passwordInfo.length - state.requiredPasswordInfo.length <= boneState.bonestructure["test_threshold"]
+  ) {
+    emit("change", props.name, state.value1, props.lang, props.index, true)
+  } else {
+    emit("change", props.name, state.value1, props.lang, props.index, false)
+  }
+}
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+
+function testPassword(password) {
+  state.passwordInfo = []
+  state.requiredPasswordInfo = []
+  for (const test of boneState.bonestructure["tests"]) {
+    if (!new RegExp(test[0]).test(password)) {
+      if (test[2]) {
+        state.requiredPasswordInfo.push(test[1])
+      } else {
+        state.passwordInfo.push(test[1])
+      }
+    }
+  }
+  if (state.needsConfirm && !state.equal) {
+    state.requiredPasswordInfo.push("Die eingegebenen Passwörter stimmen nicht überein.")
+  }
+  if (!state.value1) {
+    state.requiredPasswordInfo.push("Das eingegebene Passwort ist leer.")
+  }
+}
+
+watchEffect(() => {
+  if (props.autofocus) {
+    if (passwordBone.value && passwordBone.value !== null && passwordBone.value !== null) {
+      const { start } = useTimeoutFn(() => {
+        passwordBone.value.focus()
+      }, 600)
+
+      start()
+    }
+  }
+})
+
+watch(
+  () => props.value,
+  (newVal, oldVal) => {
+    state.value1 = newVal
+  }
+)
+</script>
+
+<style scoped>
+.bone-widget-errors {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-gap: 2px 7px;
+  margin-top: var(--wa-space-xs);
+  font-size: 0.7em;
+  font-weight: bold;
+}
+
+.bone-widget-required-info {
+  color: var(--wa-color-danger-50);
+}
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+  <wa-spinner v-if="state.loading"></wa-spinner>
+  <div
+    v-else
+    class="wa-flank wa-gap-xs bone-widget-input-wrapper"
+  >
+    <wa-select
+      :value="state.dialCode"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="handleSelect"
+    >
+      <wa-option
+        v-for="country in state.countryInfo"
+        :key="country.currentCode"
+        :value="country.dialCode"
+      >
+        {{ country.emoji }}
+      </wa-option>
+    </wa-select>
+    <wa-input
+      ref="phoneBone"
+      type="tel"
+      :disabled="boneState.readonly"
+      :value="Utils.unescape(state.value)"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+    ></wa-input>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed, watchEffect, ref } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+import Utils from "../utils"
+import jsonData from "../country_information.json"
+import parsePhoneNumber from "libphonenumber-js/min"
+import { AsYouType, validatePhoneNumberLength } from "libphonenumber-js/min"
+/**
+ * Telefonnummer-Eingabefeld mit Ländervorwahl-Auswahl.
+ *
+ * Rendert ein `<wa-select>` für die Ländervorwahl (Flaggen-Emoji) und ein
+ * `<wa-input type="tel">` für die eigentliche Nummer. Die Nummer wird beim
+ * Tippen über `libphonenumber-js` formatiert und normalisiert. Der
+ * Standard-Ländercode kann über `boneState.bonestructure.default_country_code`
+ * gesteuert werden (Standard: `+49`).
+ *
+ * @displayName PhoneBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets (auf dem inneren `<wa-input>`)
+ * @cssClass bone-widget-phone - Kennzeichnet den Bone-Typ (auf dem inneren `<wa-input>`, via Wrapper-Klasse)
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert als internationale Telefonnummer, z.B. `"+49 89 12345678"`. */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach 600 ms auf das Tel-Input-Element. */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {string} value - Formatierte internationale Telefonnummer
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() =>
+    props.value
+      ? parsePhoneNumber(state.reference, getCountry(state.dialCode)).formatInternational()
+      : state.dialCode + ""
+  ),
+  loading: false,
+  reference: computed(() => parsePhoneNumber(props.value, getCountry(state.dialCode)).formatNational()),
+  country: computed(() => getCountry(state.dialCode)),
+  dialCode: "",
+  countryInfo: [],
+})
+
+const countryInformation = ref(jsonData)
+const phoneBone = ref(null)
+
+function changeEvent(event) {
+  if (!event.target.value) {
+    emit("change", props.name, "", props.lang, props.index)
+    return
+  }
+  if (event.target.value.length > 4) {
+    const number = parsePhoneNumber(event.target.value, state.country)
+    const valueFormatter = new AsYouType()
+
+    let value = valueFormatter.input(number ? number.number : event.target.value)
+    state.dialCode = "+" + number?.countryCallingCode
+    emit("change", props.name, value, props.lang, props.index)
+    return
+  } else return
+}
+
+watchEffect(() => {
+  if (phoneBone.value && phoneBone.value !== null && phoneBone.value !== null) {
+    if (props.autofocus) {
+      const { start } = useTimeoutFn(() => {
+        phoneBone.value.focus()
+      }, 600)
+
+      start()
+    }
+  }
+})
+
+function handleSelect(e) {
+  state.dialCode = e.target.value
+  changeEvent({ target: { value: state.value } })
+}
+
+function getCountry(dialCode) {
+  let result = state.countryInfo.filter((country) => country.dialCode === dialCode)
+  result = result[0] ? result[0].code : "DE"
+  return result
+}
+
+function getDefaultCode() {
+  let defaultDialCode = boneState.bonestructure.default_country_code
+    ? boneState.bonestructure.default_country_code
+    : "+49"
+
+  state.dialCode = defaultDialCode
+}
+
+function getCode(value) {
+  if (!value) return boneState.bonestructure.default_country_code ? boneState.bonestructure.default_country_code : "+49"
+  return "+" + parsePhoneNumber(value).countryCallingCode
+}
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+  state.loading = true
+  countryInformation.value.forEach((country) => {
+    let temp = {}
+    temp.name = country.name
+    temp.code = country.code
+    temp.emoji = country.emoji
+    temp.dialCode = country.dialCodes ? country.dialCodes[0] : ""
+    state.countryInfo.push(temp)
+  })
+  state.loading = false
+  state.dialCode = getCode(props.value)
+  // let available_countries = []
+})
+</script>
+<style scoped>
+wa-select {
+  width: 6rem;
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <wa-textarea
+    v-if="boneState.bonestructure.type === 'raw.json'"
+    class="bone-widget bone-widget-raw bone-widget-raw-default"
+    :class="[`bone-widget-raw-${name}`]"
+    :disabled="boneState?.readonly"
+    :value="typeof value === 'object' ? JSON.stringify(value) : value"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :placeholder="state.placeholder"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @input="changeEvent"
+  ></wa-textarea>
+  <wa-textarea
+    v-else
+    class="bone-widget bone-widget-raw bone-widget-raw-default"
+    :class="[`bone-widget-raw-${name}`]"
+    :disabled="boneState?.readonly"
+    :value="value"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :placeholder="state.placeholder"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @input="changeEvent"
+  ></wa-textarea>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+/**
+ * Mehrzeiliges Freitext- oder JSON-Eingabefeld für Rohdaten.
+ *
+ * Rendert ein `<wa-textarea>`. Wenn `boneState.bonestructure.type === 'raw.json'`
+ * wird der Wert beim Anzeigen per `JSON.stringify` serialisiert. Unterstützt
+ * Mehrsprachigkeit (`languages`) und Mehrfachwerte (`multiple`).
+ *
+ * @displayName RawBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-raw - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-raw-default - Standard-Variante
+ * @cssClass bone-widget-raw-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-raw-content`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert. Bei `raw.json` wird ein Objekt per `JSON.stringify` dargestellt. */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach dem Mount auf das Textarea-Element. */
+  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
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <Wrapper_nested
+    :value="value"
+    :name="name"
+    :index="index"
+    :lang="lang"
+    :bone="bone"
+    :disabled="bone['readonly']"
+    @change="changeEvent"
+  ></Wrapper_nested>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed, getCurrentInstance } from "vue"
+import Wrapper_nested from "../BoneNestedWrapper.vue"
+/**
+ * Record-Widget für Bones vom Typ `record`.
+ *
+ * Delegiert die gesamte Darstellung an `Wrapper_nested`, der die Sub-Bones
+ * aus `bone.using` rendert. Der Record-Wert ist ein Objekt dessen Schlüssel
+ * den Sub-Bone-Namen entsprechen. Bei `multiple: true` ist der Wert ein Array
+ * dieser Objekte.
+ *
+ * @displayName RecordBone
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird weitergeleitet wenn `Wrapper_nested` einen Wert ändert oder beim Mount (Initialisierung).
+   * @arg {string} name - Bone-Name
+   * @arg {object} value - Aktueller Record-Wert (Objekt mit Sub-Bone-Werten)
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Record-Wert; Objekt mit Sub-Bone-Werten oder Array davon bei `multiple`. */
+  value: null,
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur; `using` enthält die Sub-Bone-Definitionen. */
+  bone: Object,
+  /** Aktuell nicht genutzt. */
+  autofocus: Boolean,
+})
+
+const state = reactive({})
+
+function changeEvent(data) {
+  emit("change", data["name"], data["value"], data["lang"], data["index"])
+}
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>