viur-ui 0.0.1

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

@@ -0,0 +1,164 @@
+<template>
+  <div
+    class="bone-widget-record bone-widget bone-widget-relational bone-widget-relational-default"
+    :class="[`bone-widget-relational-${name}`]"
+  >
+    <div class="bone-widget-single-entry">
+      <wa-input
+        v-if="state.selection?.['dest']?.['key']"
+        :disabled="true"
+        :value="value ? formatString(state.format, state.selection) : ''"
+      ></wa-input>
+      <wa-combobox
+        v-else
+        :disabled="boneState.readonly"
+        :source="getList"
+        :placeholder="state.placeholder"
+        :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+        @change="changeEvent"
+      ></wa-combobox>
+    </div>
+    <Wrapper_nested
+      v-if="bone['using']"
+      :value="value?.['rel']"
+      :name="name"
+      :index="index"
+      :lang="lang"
+      :bone="bone"
+      :disabled="bone['readonly']"
+      @change="changeEventNested"
+    ></Wrapper_nested>
+  </div>
+</template>
+
+<script setup>
+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`.
+ *
+ * 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.
+ *
+ * @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
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert; Objekt mit `dest`- und `rel`-Schlüsseln 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; `using` steuert ob ein Nested-Wrapper angezeigt wird. */
+  bone: Object,
+  /** Aktuell nicht genutzt. */
+  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
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const formatString = inject("formatString")
+const state = reactive({
+  format: computed(() => {
+    return boneState?.bonestructure["format"]
+  }),
+  skellistdata: null,
+  selection: null,
+  relationalData: null,
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+async function getList(search) {
+  let params = { limit: 99 }
+  if (boneState.bonestructure["type"] === "relational.tree.leaf.file") {
+    params.skelType = "leaf"
+  } else if (boneState.bonestructure["type"] === "relational.tree.node.file") {
+    params.skelType = "node"
+  }
+
+  const listFetch = useListFetch(boneState.bonestructure["module"], {
+    immediate: false,
+    params,
+    renderer: import.meta.env.VITE_DEFAULT_RENDERER || "vi",
+  })
+
+  await listFetch.execute()
+
+  //?viurTags$lk=${search.toLowerCase()
+  const data = { skellist: listFetch.data.value }
+
+  state.skellistdata = {}
+  for (let e of data["skellist"]) {
+    state.skellistdata[e["key"]] = e
+  }
+
+  return data["skellist"]?.map((d) => {
+    return { text: formatString(boneState.bonestructure["format"], { dest: d }), value: d.key, data: d }
+  })
+}
+
+function changeEvent(event) {
+  state.selection = { dest: state.skellistdata[event.target.value] }
+  if (props.bone["using"] && state.relationalData) {
+    state.selection = { ...state.selection, rel: state.relationalData }
+  }
+  emit("change", props.name, state.selection, props.lang, props.index)
+}
+
+function changeEventNested(data) {
+  state.relationalData = data["value"]
+  if (state.selection?.dest) {
+    // only send a change if we have a valid target
+    state.selection = { ...props.value, rel: data["value"] }
+    emit("change", data["name"], state.selection, data["lang"], data["index"])
+  }
+}
+
+// Halte state.selection synchron mit props.value — wichtig, wenn der Wert
+// von außen geleert wird (z.B. via Delete-Action).
+watch(
+  () => props.value,
+  (newVal) => {
+    state.selection = newVal || null
+  }
+)
+
+onMounted(() => {
+  state.selection = props.value
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="bone-widget-record bone-widget bone-widget-relational bone-widget-relational-select"
+    :class="[`bone-widget-relational-${name}`]"
+  >
+    <div class="bone-widget-single-entry">
+      <wa-select
+        :disabled="boneState.readonly"
+        :value="state.selection?.['dest']['key']"
+        max-options-visible="0"
+        with-clear
+        :required="
+          boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+        "
+        :placeholder="state.placeholder"
+        :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+        @change="changeEvent"
+      >
+        <wa-option
+          v-for="(obj, key) in state.skellistdata"
+          :key="key"
+          :value="key"
+        >
+          {{ formatString(state.format, obj) }}
+        </wa-option>
+      </wa-select>
+    </div>
+    <Wrapper_nested
+      v-if="bone['using']"
+      :value="value"
+      :name="name"
+      :index="index"
+      :bone="bone"
+      :disabled="bone['readonly']"
+      @change="changeEventNested"
+    ></Wrapper_nested>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+import { useListFetch } from "../../../request/index.js"
+import Wrapper_nested from "../BoneNestedWrapper.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 formatString = inject("formatString")
+const state = reactive({
+  format: computed(() => {
+    return boneState?.bonestructure["format"]
+  }),
+  skellistdata: null,
+  selection: null,
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+async function getList(search) {
+  let params = { limit: 99 }
+  if (boneState.bonestructure["type"] === "relational.tree.leaf.file") {
+    params.skelType = "leaf"
+  } else if (boneState.bonestructure["type"] === "relational.tree.node.file") {
+    params.skelType = "node"
+  }
+
+  const listFetch = useListFetch(boneState.bonestructure["module"], {
+    immediate: false,
+    params,
+    renderer: import.meta.env.VITE_DEFAULT_RENDERER || "vi",
+  })
+
+  await listFetch.execute()
+
+  //?viurTags$lk=${search.toLowerCase()
+  const data = { skellist: listFetch.data.value }
+
+  state.skellistdata = {}
+  for (let e of data["skellist"]) {
+    state.skellistdata[e["key"]] = e
+  }
+
+  return data["skellist"]?.map((d) => {
+    return { text: formatString(boneState.bonestructure["format"], { dest: d }), value: d.key, data: d }
+  })
+}
+
+function changeEvent(event) {
+  state.selection = { dest: state.skellistdata[event.target.value] }
+  emit("change", props.name, state.selection, props.lang, props.index)
+}
+
+function changeEventNested(data) {
+  state.selection = { ...state.selection, rel: data["value"] }
+  emit("change", data["name"], state.selection, data["lang"], data["index"])
+}
+
+onMounted(() => {
+  state.selection = props.value
+  getList()
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,122 @@
+<template>
+  <wa-select
+    class="bone-widget bone-widget-select bone-widget-select-default"
+    :class="[`bone-widget-select-${name}`]"
+    :name="name"
+    :disabled="boneState.readonly"
+    :value="state.value"
+    :multiple="boneState['bonestructure']['multiple']"
+    max-options-visible="0"
+    :required="boneState.bonestructure.required"
+    with-clear
+    :placeholder="state.placeholder"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+  >
+    <wa-option
+      v-for="value in convertObjToList()"
+      :key="value[0]"
+      :value="value[0]"
+    >
+      {{ value[1] }}
+    </wa-option>
+  </wa-select>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+/**
+ * Dropdown-Auswahlfeld für vordefinierte Werte (Typ `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.
+ *
+ * @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`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert (String, Array 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 (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus auf das Select-Element (aktuell nicht implementiert). */
+  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
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    let val = props.value
+    if (Array.isArray(props.value)) {
+      if (boneState["bonestructure"]["values"] instanceof Array) {
+        val = val.filter((i) => boneState["bonestructure"]["values"].map((i) => i[0].toString()).includes(i))
+      } else
+        val = val.filter((i) =>
+          Object.keys(boneState["bonestructure"]["values"])
+            .map((i) => i.toString())
+            .includes(i)
+        )
+
+      return val.map((i) => i.toString())
+    }
+    return props.value ? props.value.toString() : ""
+  }),
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+function convertObjToList() {
+  if (Array.isArray(boneState["bonestructure"]["values"])) {
+    return boneState["bonestructure"]["values"]
+  } else {
+    let objToList = []
+    for (const [key, value] of Object.entries(boneState["bonestructure"]["values"])) {
+      objToList.push([key, value])
+    }
+    return objToList
+  }
+}
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+onMounted(() => {
+  emit("change", props.name, state.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <div
+    v-if="boneState['bonestructure']['multiple']"
+    class="bone-widget-multiple-wrapper bone-widget bone-widget-select bone-widget-select-choose"
+    :class="[`bone-widget-select-${name}`]"
+  >
+    <wa-checkbox
+      v-for="value in convertObjToList()"
+      :data-value="value[0]"
+      :checked="state.value.includes(value[0])"
+      :disabled="boneState.readonly"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEventMultiple"
+    >
+      {{ value[1] }}
+    </wa-checkbox>
+  </div>
+
+  <!-- readonly an der Gruppe (siehe booleanBoneChoose): disabled Radios
+       zeigten keine Auswahl -->
+  <wa-radio-group
+    v-else
+    :value="state.value"
+    :disabled="boneState.readonly"
+    class="bone-widget bone-widget-select bone-widget-select-choose"
+    :class="[`bone-widget-select-${name}`]"
+    @change="changeEvent"
+  >
+    <wa-radio
+      v-for="value in convertObjToList()"
+      :value="value[0]"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    >
+      {{ value[1] }}
+    </wa-radio>
+  </wa-radio-group>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  name: String,
+  value: null,
+  index: Number,
+  lang: String,
+  bone: Object,
+  autofocus: Boolean,
+})
+
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    let val = props.value
+    if (Array.isArray(props.value)) {
+      if (boneState["bonestructure"]["values"] instanceof Array) {
+        val = val.filter((i) => boneState["bonestructure"]["values"].map((i) => i[0].toString()).includes(i))
+      } else
+        val = val.filter((i) =>
+          Object.keys(boneState["bonestructure"]["values"])
+            .map((i) => i.toString())
+            .includes(i)
+        )
+
+      return val.map((i) => i.toString())
+    }
+    return props.value ? props.value.toString() : ""
+  }),
+})
+
+function convertObjToList() {
+  if (Array.isArray(boneState["bonestructure"]["values"])) {
+    return boneState["bonestructure"]["values"]
+  } else {
+    let objToList = []
+    for (const [key, value] of Object.entries(boneState["bonestructure"]["values"])) {
+      objToList.push([key, value])
+    }
+    return objToList
+  }
+}
+
+function changeEventMultiple(event) {
+  let currentValue = [...state.value]
+  if (event.target.checked) {
+    currentValue.push(event.target.dataset["value"])
+  } else {
+    currentValue = currentValue.filter((x) => x !== event.target.dataset["value"])
+  }
+  emit("change", props.name, currentValue, props.lang, props.index)
+}
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+onMounted(() => {
+  emit("change", props.name, state.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="wa-stack wa-gap-xs">
+    <wa-input
+      v-model="state.valueLat"
+      class="bone-widget bone-widget-spatial bone-widget-spatial-default"
+      :class="([`bone-widget-spatial-${name}`], [`bone-widget-spatial-${name}-lat`])"
+      index="lat"
+      type="number"
+      :name="name"
+      :min="boneState.bonestructure.boundslat[0]"
+      :max="boneState.bonestructure.boundslat[1]"
+      :disabled="boneState.readonly"
+      value-as-number
+      step="0.000001"
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+    ></wa-input>
+
+    <wa-input
+      v-model="state.valueLng"
+      class="bone-widget bone-widget-spatial bone-widget-spatial-default"
+      :class="([`bone-widget-spatial-${name}`], [`bone-widget-spatial-${name}-long`])"
+      index="lng"
+      type="number"
+      :name="name"
+      :min="boneState.bonestructure.boundslng[0]"
+      :max="boneState.bonestructure.boundslng[1]"
+      :disabled="boneState.readonly"
+      value-as-number
+      step="0.000001"
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @change="changeEvent"
+    ></wa-input>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+/**
+ * Koordinaten-Eingabe für geografische Punkte (Breitengrad / Längengrad).
+ *
+ * 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.
+ *
+ * @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
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert als Array `[lat, lng]` oder Objekt `{ lat, lng }`. */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key (SpatialBone unterstützt kein multilang). */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus nach dem Mount auf das erste Input-Element. */
+  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
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  valueLat: null,
+  valueLng: null,
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+function changeEvent() {
+  emit("change", props.name, [state.valueLat, state.valueLng], props.lang, props.index)
+}
+
+onMounted(() => {
+  try {
+    state.valueLat = props.value[0]
+    state.valueLng = props.value[1]
+  } catch (e) {}
+  emit("change", props.name, [state.valueLat, state.valueLng], props.lang, props.index) //init
+})
+</script>