viur-ui 0.0.1

package/src/forms/bones/view/boneLogic.js

@@ -0,0 +1,202 @@
+import Utils from "../utils"
+import { computed, reactive } from "vue"
+
+export const languageMap = [
+  { lang: "en", country: "US", label: "English", flag: "\uD83C\uDDEC\uD83C\uDDE7" },
+  { lang: "de", country: "DE", label: "Deutsch", flag: "\ud83c\udde9\ud83c\uddea" },
+  { lang: "ch", country: "CH", label: "Schweiz", flag: "\ud83c\udde8\ud83c\udded" },
+  { lang: "fr", country: "FR", label: "Français", flag: "\ud83c\uddeb\ud83c\uddf7" },
+  { lang: "es", country: "ES", label: "Español", flag: "\ud83c\uddea\ud83c\uddf8" },
+  { lang: "pt", country: "BR", label: "Português", flag: "\ud83c\udde7\ud83c\uddf7" },
+  { lang: "it", country: "IT", label: "Italiano", flag: "\ud83c\uddee\ud83c\uddf9" },
+  { lang: "nl", country: "NL", label: "Nederlands", flag: "\ud83c\uddf3\ud83c\uddf1" },
+  { lang: "pl", country: "PL", label: "Polski", flag: "\ud83c\uddf5\ud83c\uddf1" },
+  { lang: "ru", country: "RU", label: "Русский", flag: "\ud83c\uddf7\ud83c\uddfa" },
+  { lang: "tr", country: "TR", label: "Türkçe", flag: "\ud83c\uddf9\ud83c\uddf7" },
+  { lang: "zh", country: "CN", label: "中文", flag: "\ud83c\udde8\ud83c\uddf3" },
+  { lang: "ja", country: "JP", label: "日本語", flag: "\ud83c\uddef\ud83c\uddf5" },
+  { lang: "ko", country: "KR", label: "한국어", flag: "\ud83c\uddf0\ud83c\uddf7" },
+  { lang: "ar", country: "SA", label: "العربية", flag: "\ud83c\uddf8\ud83c\udde6" },
+  { lang: "hi", country: "IN", label: "हिन्दी", flag: "\ud83c\uddee\ud83c\uddf3" },
+  { lang: "sv", country: "SE", label: "Svenska", flag: "\ud83c\uddf8\ud83c\uddea" },
+  { lang: "no", country: "NO", label: "Norsk", flag: "\ud83c\uddf3\ud83c\uddf4" },
+  { lang: "da", country: "DK", label: "Dansk", flag: "\ud83c\udde9\ud83c\uddf0" },
+  { lang: "fi", country: "FI", label: "Suomi", flag: "\ud83c\uddeb\ud83c\uddee" },
+  { lang: "cs", country: "CZ", label: "Čeština", flag: "\ud83c\udde8\ud83c\uddff" },
+]
+
+const boneLogic = (skel, structure, showflags = false, selectedLang = null, t = null) => {
+  let bones_state = reactive({
+    skel: computed(() => {
+      if (skel && skel.constructor.name === "RefImpl") {
+        return skel.value
+      }
+      return skel
+    }),
+    structure: computed(() => {
+      if (structure.constructor.name === "RefImpl") {
+        return structure.value
+      }
+      return structure
+    }),
+  })
+
+  function getBoneValue(boneName, options = null, skel = null) {
+    if (skel === null) {
+      skel = bones_state.skel
+    }
+    if (skel === null) {
+      return "-"
+    }
+    if (Utils.objectEmpty(skel) || Utils.objectEmpty(bones_state.structure)) {
+      return "-"
+    }
+    let languages = hasLanguages(boneName)
+    if (languages) {
+      let values = []
+
+      for (let lang of languages) {
+        if (isMultiple(boneName)) {
+          if (selectedLang) {
+            if (selectedLang === lang) {
+              values.push(langPrefix(lang, renderMultipleValue(boneName, options, skel, lang)))
+            }
+          } else {
+            values.push(langPrefix(lang, renderMultipleValue(boneName, options, skel, lang)))
+          }
+        } else {
+          if (selectedLang) {
+            if (selectedLang === lang) {
+              values.push(langPrefix(lang, renderSingleValue(boneName, options, null, skel, lang)))
+            }
+          } else {
+            values.push(langPrefix(lang, renderSingleValue(boneName, options, null, skel, lang)))
+          }
+        }
+      }
+      return values.join(", ")
+    } else {
+      if (isMultiple(boneName)) {
+        return renderMultipleValue(boneName, options, skel, null)
+      } else {
+        return renderSingleValue(boneName, options, null, skel, null)
+      }
+    }
+  }
+
+  function hasLanguages(boneName) {
+    return bones_state.structure[boneName] && bones_state.structure[boneName]["languages"]
+      ? bones_state.structure[boneName]["languages"]
+      : false
+  }
+
+  function isMultiple(boneName) {
+    return bones_state.structure[boneName] && bones_state.structure[boneName]["multiple"]
+      ? !!bones_state.structure[boneName]["multiple"]
+      : false
+  }
+
+  function langPrefix(lang, value) {
+    if (showflags) {
+      const entry = languageMap.find(({ lang: l }) => l === lang)
+      if (entry) {
+        value = `${entry.flag} ${value}`
+      }
+    }
+    return value
+  }
+
+  function renderSingleValue(boneName, options, value = null, skel = null, lang = null) {
+    let boneStructure = bones_state.structure[boneName]
+    if (boneStructure == null) {
+      return "-"
+    }
+    if (!boneStructure["multiple"]) {
+      if (skel === null) {
+        skel = bones_state.skel
+      }
+      value = skel[boneName]
+      if (lang) {
+        value = skel[boneName][lang]
+      }
+    }
+
+    if (value === "" || value === null || value === undefined || !boneStructure) {
+      return "-"
+    } else if (boneStructure["type"] === "select" || boneStructure["type"].startsWith("select.")) {
+      // extract description from tuple
+      if (boneStructure["values"].length > 0) {
+        let returnValue = boneStructure["values"]?.filter((x) => x[0].toString() === value.toString())?.[0]?.[1]
+        return returnValue ? returnValue : "-"
+      }
+      if (Object.keys(boneStructure["values"]).length > 0) {
+        let returnValue = Object.entries(boneStructure["values"])?.filter(
+          (x) => x[0].toString() === value.toString()
+        )?.[0]?.[1]
+        return returnValue ? returnValue : "-"
+      }
+
+      return "-"
+    } else if (boneStructure["type"] === "date" || boneStructure["type"].startsWith("date.")) {
+      if (options && options === "time") {
+        return new Date(value).toLocaleTimeString()
+      } else if (options && options === "date") {
+        return new Date(value).toLocaleDateString()
+      }
+      return new Date(value).toLocaleString()
+    } else if (boneStructure["type"] === "relational" || boneStructure["type"].startsWith("relational.")) {
+      return Utils.formatString(boneStructure["format"], { ...value, lang: lang })
+    } else if (boneStructure["type"] === "hierarchy" || boneStructure["type"].startsWith("hierarchy.")) {
+      return Utils.formatString(boneStructure["format"], { ...value, lang: lang })
+    } else if (boneStructure["type"] === "record" || boneStructure["type"].startsWith("record.")) {
+      if (boneStructure["format"]?.includes("$(dest.")) {
+        return Utils.formatString(boneStructure["format"], { dest: value, lang: lang })
+      }
+      return Utils.formatString(boneStructure["format"], { ...value, lang: lang })
+    } else if (boneStructure["type"] === "bool") {
+      if (typeof t === "function") {
+        return value ? t("bones.bool.true") : t("bones.bool.false")
+      }
+      return value ? "Ja" : "Nein"
+    } else if (boneStructure["type"] === "raw.json") {
+      return JSON.stringify(value)
+    } else {
+      value = Utils.unescape(value)
+      return value.toString()
+    }
+  }
+
+  function renderMultipleValue(boneName, options, skel = null, lang = null) {
+    if (skel === null) {
+      skel = bones_state.skel
+    }
+
+    let value = skel[boneName]
+
+    if (lang) {
+      value = skel[boneName][lang]
+    }
+
+    if (value && value.length > 0) {
+      return value
+        .map((x) => {
+          if (selectedLang) {
+            if (selectedLang === lang) {
+              return renderSingleValue(boneName, options, x, skel, lang)
+            }
+          } else {
+            return renderSingleValue(boneName, options, x, skel, lang)
+          }
+        })
+        .join(", ")
+    }
+    return "-"
+  }
+
+  return {
+    getBoneValue,
+    bones_state,
+  }
+}
+
+export default boneLogic

package/src/forms/bones/view/index.js

@@ -0,0 +1,5 @@
+import base_item from "./base_item.vue"
+
+export default {
+  base_item,
+}

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

@@ -0,0 +1,83 @@
+<template>
+  <wa-switch
+    class="bone-widget bone-widget-boolean bone-widget-boolean-default"
+    :class="[`bone-widget-boolean-${name}`]"
+    :disabled="boneState.readonly"
+    :checked="state.value"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+  ></wa-switch>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+/**
+ * Schalter für boolesche Werte (true/false).
+ *
+ * Verfügbar in drei Varianten: `bool` (Switch), `bool.choose` (Ja/Nein-Buttons),
+ * `bool.select` (Dropdown). Der Wert `null`, `undefined`, `false` und `""` wird
+ * einheitlich als `false` behandelt.
+ *
+ * @displayName BooleanBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-boolean - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-boolean-default - Standard-Variante
+ * @cssClass bone-widget-boolean-{name} - Dynamisch gesetzt auf den Bone-Namen
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert. `null`, `undefined`, `false` und `""` gelten als `false`. */
+  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,
+  /** Autofocus (aktuell nicht aktiv genutzt). */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {boolean} value - Aktueller Wert
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    return ![false, null, undefined, ""].includes(props.value)
+  }),
+})
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.checked, props.lang, props.index)
+}
+
+onMounted(() => {
+  let val = props.value
+  if (!val) {
+    val = false
+  }
+  emit("change", props.name, val, props.lang, props.index) //init
+})
+</script>
+
+<style scoped>
+wa-switch {
+  padding: calc(var(--wa-form-control-height) / 2 - var(--wa-form-control-toggle-size) / 2 - 1px);
+  border: 1px solid var(--wa-color-border-quiet);
+  border-radius: var(--wa-border-radius-m);
+  background-color: var(--wa-color-neutral-on-loud);
+}
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <!-- readonly an der Gruppe: wa-radio-group markiert nur Radios, die selbst
+       nicht disabled sind — sonst wäre bei readonly keine Auswahl sichtbar -->
+  <wa-radio-group
+    :value="state.value"
+    :disabled="boneState.readonly"
+    class="bone-widget bone-widget-boolean bone-widget-boolean-choose"
+    :class="[`bone-widget-boolean-${name}`]"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+  >
+    <wa-radio :value="'true'">
+      {{ $t("bones.bool.true") }}
+    </wa-radio>
+    <wa-radio :value="'false'">
+      {{ $t("bones.bool.false") }}
+    </wa-radio>
+  </wa-radio-group>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  bone: Object,
+  autofocus: Boolean,
+})
+
+const emit = defineEmits(["change"])
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    return "" + ![false, null, undefined, "", "false"].includes(props.value)
+  }),
+})
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+onMounted(() => {
+  let val = props.value
+  if (!val) {
+    val = false
+  }
+  emit("change", props.name, val, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <wa-select
+    :disabled="boneState.readonly"
+    :value="state.value"
+    max-options-visible="0"
+    class="bone-widget bone-widget-boolean bone-widget-boolean-select"
+    :class="[`bone-widget-boolean-${name}`]"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+  >
+    <!-- String-Werte: wa-select gleicht seinen Wert beim Setzen mit den
+         Options-Werten ab; boolesche werden erst später zu Strings, der
+         gespeicherte Wert erschiene dann nicht -->
+    <wa-option
+      v-for="val in ['true', 'false']"
+      :key="val"
+      :value="val"
+    >
+      {{ $t(`bones.bool.${val}`) }}
+    </wa-option>
+  </wa-select>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  bone: Object,
+  autofocus: Boolean,
+})
+
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    return "" + ![false, null, undefined, "", "false"].includes(props.value)
+  }),
+})
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+onMounted(() => {
+  let val = props.value
+  if (!val) {
+    val = false
+  }
+  emit("change", props.name, val, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,214 @@
+<template>
+  <div
+    class="bone-widget-wrapper bone-widget bone-widget-raw bone-widget-raw-default"
+    :class="{ 'is-max-size': state.max }"
+  >
+    <textarea
+      ref="element"
+      :disabled="boneState?.readonly"
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    ></textarea>
+    <wa-button
+      appearance="plain"
+      class="bone-expand-button"
+      @click="state.max = !state.max"
+    >
+      <wa-icon :name="state.max ? 'compress' : 'expand'"></wa-icon>
+    </wa-button>
+  </div>
+
+  <input
+    type="text"
+    class="bone-widget-raw-hidden"
+    :value="state.value"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+  />
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed, ref } from "vue"
+import { basicSetup } from "codemirror"
+import { EditorView, keymap, drawSelection } from "@codemirror/view"
+import { syntaxHighlighting, defaultHighlightStyle, LanguageDescription } from "@codemirror/language"
+import { indentLess, indentMore, indentWithTab, indentSelection, insertTab } from "@codemirror/commands"
+import { indentString, indentUnit } from "@codemirror/language"
+import { EditorState } from "@codemirror/state"
+import { languages } from "@codemirror/language-data"
+
+/**
+ * Code-Editor auf Basis von CodeMirror für syntaxhervorgehobene Quelltext-Eingabe.
+ *
+ * Erkennt die Programmiersprache anhand von `boneState.bonestructure.type`
+ * (z.B. `raw.code.python`, `raw.code.html`, `raw.code.javascript`) und lädt
+ * das passende CodeMirror-Language-Plugin dynamisch nach. Unterstützt
+ * Mehrfachwerte (`multiple`). Ein Expand-Button ermöglicht das Aufklappen
+ * auf volle Höhe.
+ *
+ * @displayName CodeBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-raw - Kennzeichnet den übergeordneten Bone-Typ
+ * @cssClass bone-widget-raw-default - Standard-Variante
+ * @cssClass bone-widget-wrapper - Umschließt Editor und Expand-Button
+ * @cssClass is-max-size - Wird per Expand-Button umgeschaltet; hebt die maximale Höhe auf
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+
+const element = ref(null)
+const view = ref(null)
+
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert (Quelltext als String). */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones (CodeBone unterstützt kein multilang). */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach dem Mount auf den CodeMirror-Editor. */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {string} value - Aktueller Quelltext
+   * @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
+  }),
+  value: "",
+  max: false,
+})
+
+function editorFromTextArea(textarea, extensions) {
+  let _view = new EditorView({ doc: textarea.value, extensions })
+
+  textarea.parentNode.insertBefore(_view.dom, textarea)
+  textarea.style.display = "none"
+
+  if (textarea.form) {
+    textarea.form.addEventListener("submit", () => {
+      textarea.value = _view.state.doc.toString()
+    })
+  }
+
+  indentString(_view.state, 4)
+
+  let listener = () => {
+    let lines = ""
+    for (let i = 0; i < _view.state.doc.lines; ++i) {
+      let line = _view.state.doc.line(i + 1).text
+      lines += line + "\n"
+    }
+    state.value = lines
+    emit("change", props.name, state.value, props.lang, props.index)
+  }
+
+  _view.dom.addEventListener("input", listener)
+  _view.dom.addEventListener("keyup", listener)
+  _view.dom.addEventListener("paste", listener)
+  _view.dom.addEventListener("cut", listener)
+  return _view
+}
+
+async function build() {
+  const exts = [
+    basicSetup,
+    syntaxHighlighting(defaultHighlightStyle),
+    keymap.of([indentWithTab]),
+    indentUnit.of("    "),
+    EditorState.tabSize.of(4),
+    EditorView.lineWrapping,
+    drawSelection(),
+  ]
+
+  let langDesc = LanguageDescription.matchLanguageName(
+    languages,
+    boneState?.bonestructure?.type.replace("raw.code.", "")
+  )
+
+  if (langDesc) {
+    const support = await langDesc.load()
+    exts.push(support)
+  }
+
+  if (boneState?.readonly) {
+    exts.push(EditorView.editable.of(false))
+  }
+
+  return exts
+}
+
+onMounted(async () => {
+  if (props.value !== null) {
+    state.value = props.value
+  }
+  const exts = await build()
+  view.value = editorFromTextArea(element.value, exts)
+
+  //init editor
+  view.value.dispatch({
+    changes: { from: 0, to: view.value.state.doc.length, insert: state.value },
+  })
+
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>
+<style scoped>
+.bone-widget-raw-hidden {
+  max-height: 0;
+  display: block;
+  visibility: hidden;
+  width: 100%;
+  pointer-events: none;
+}
+
+.bone-expand-button {
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+  z-index: 1;
+}
+
+.bone-widget-wrapper {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+:deep(.cm-editor) {
+  width: 100%;
+
+  & .cm-scroller {
+    min-height: 3em;
+    max-height: 28em;
+    overflow-y: auto;
+  }
+}
+
+.bone-widget-wrapper.is-max-size :deep(.cm-editor) .cm-scroller {
+  max-height: none;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="wa-flank wa-align-item-center">
+    <wa-color-picker
+      class="bone-widget bone-widget-color bone-widget-color-default"
+      :class="[`bone-widget-color-${name}`]"
+      :disabled="boneState.readonly"
+      :value="value"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+    ></wa-color-picker>
+    <span>{{ value || "-" }}</span>
+    <wa-copy-button
+      :disabled="!value"
+      :value="value"
+    ></wa-copy-button>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject } from "vue"
+/**
+ * Farbauswahl-Feld über ein natives `<wa-color-picker>`-Element.
+ *
+ * Speichert den gewählten Farbwert als Hex-String, z.B. `"#e74c3c"`.
+ * Unterstützt mehrfache Werte (`multiple`), aber keine Mehrsprachigkeit.
+ *
+ * @displayName ColorBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-color - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-color-default - Standard-Variante
+ * @cssClass bone-widget-color-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-color-color`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert als Hex-String, z.B. `"#e74c3c"`, oder `null`. */
+  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|null} value - Gewählter Farbwert als Hex-String oder `null`
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+const boneState = inject("boneState")
+const state = reactive({})
+
+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>