viur-ui 0.0.1

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

@@ -0,0 +1,114 @@
+<template>
+  <wa-input
+    class="bone-widget bone-widget-date bone-widget-date-default"
+    :class="[`bone-widget-date-${name}`]"
+    :disabled="boneState.readonly"
+    :type="state.typeString"
+    :name="name"
+    :value="state.value"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :placeholder="state.placeholder"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    step="1"
+    @change="changeEvent"
+  ></wa-input>
+</template>
+
+<script setup>
+import { reactive, onMounted, computed, inject } from "vue"
+/**
+ * Datums- und/oder Zeitfeld, gesteuert durch `bonestructure.date` und `bonestructure.time`.
+ *
+ * Rendert ein `<wa-input>` mit dem passenden `type`-Attribut:
+ * - `date` wenn nur `date: true`
+ * - `time` wenn nur `time: true`
+ * - `datetime-local` wenn beide gesetzt sind
+ *
+ * Bereinigt Zeitzonendaten aus dem Wert, bevor er ans Input weitergegeben wird.
+ * Unterstützt mehrfache Werte (`multiple`), aber keine Mehrsprachigkeit.
+ *
+ * @displayName DateBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-date - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-date-default - Standard-Variante
+ * @cssClass bone-widget-date-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-date-publishedAt`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert als ISO-String, z.B. `"2026-03-28"` oder `"10:30:00"`. */
+  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 ISO-String
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: computed(() => {
+    // remove timezone data if timed
+
+    let boneValue = props.value
+    if (props.value && boneState.bonestructure["time"] && boneState.bonestructure["date"]) {
+      boneValue = props.value?.split("+")[0]
+    } else if (props.value && boneState.bonestructure["time"] && props.value.includes("T")) {
+      boneValue = props.value?.split("+")[0]?.split("T")[1]
+    } else if (props.value && props.value.includes("T")) {
+      //convert to readable value
+      boneValue = new Date(props.value).toISOString().substr(0, 10)
+    }
+
+    return boneValue
+  }),
+  typeString: computed(() => {
+    // Calculate the correct datetype String
+    let typeString = "datetime-local"
+    if (!boneState.bonestructure["time"]) {
+      typeString = "date"
+    }
+
+    if (!boneState.bonestructure["date"]) {
+      typeString = "time"
+    }
+    return typeString
+  }),
+  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, state.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <wa-input
+    ref="emailBone"
+    class="bone-widget bone-widget-email bone-widget-email-default"
+    :class="[`bone-widget-email-${name}`]"
+    :name="name"
+    :disabled="boneState.readonly"
+    type="email"
+    :value="value"
+    :required="
+      boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+    "
+    :placeholder="state.placeholder"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+    @keyup="changeEvent"
+  ></wa-input>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, ref, watchEffect, computed } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+/**
+ * Einzeiliges E-Mail-Eingabefeld mit nativer Browser-Validierung.
+ *
+ * Rendert ein `<wa-input type="email">` und nutzt die native Constraint
+ * Validation API des Browsers zur Format-Prüfung. Bei
+ * `boneState.label === "placeholder"` wird die Bone-Beschreibung als
+ * Placeholder angezeigt statt als Label darüber.
+ *
+ * @displayName EmailBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-email - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-email-default - Standard-Variante
+ * @cssClass bone-widget-email-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-email-email`
+ */
+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
+   * @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
+  }),
+})
+
+const emailBone = ref(null)
+
+function changeEvent(event) {
+  emit("change", props.name, event.target.value, props.lang, props.index)
+}
+
+watchEffect(() => {
+  if (props.autofocus) {
+    if (emailBone.value && emailBone.value !== null && emailBone.value !== null) {
+      const { start } = useTimeoutFn(() => {
+        emailBone.value.focus()
+      }, 600)
+
+      start()
+    }
+  }
+})
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+</script>

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

@@ -0,0 +1,273 @@
+<template>
+  <div
+    class="bone-widget-file-area"
+    :class="{
+      'is-dragover': state.droparea,
+      'has-value': !!value,
+      'is-loading': state.loading,
+      'is-readonly': boneState.readonly,
+    }"
+    :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @click="openPicker"
+    @dragover.prevent="state.droparea = true"
+    @dragleave.prevent="state.droparea = false"
+    @drop.prevent="handleDrop"
+  >
+    <input
+      ref="uploadinput"
+      style="display: none"
+      type="file"
+      :multiple="boneState.multiple"
+      @change="handleUpload"
+    />
+
+    <div
+      v-if="!value"
+      class="wa-cluster wa-gap-s wa-align-items-center bone-widget-prompt"
+    >
+      <wa-icon name="upload"></wa-icon>
+      <span>{{ $t("bone.dropzone") }}</span>
+    </div>
+
+    <div
+      v-else
+      class="wa-flank wa-gap-xs wa-align-items-center"
+    >
+      <div
+        v-if="value?.['dest']?.['mimetype']?.includes('image')"
+        class="bone-widget-preview has-preview"
+        @click.stop="state.previewopen = !state.previewopen"
+      >
+        <wa-avatar
+          style="--size: round(calc(var(--wa-form-control-height) - 0.09em), 1px)"
+          class="bone-widget-preview-img"
+          shape="rounded"
+          :image="createBackgroundImage()"
+          alt=""
+        ></wa-avatar>
+        <wa-dialog
+          :label="decodeURIComponent(value?.['dest']?.['name'])"
+          class="bone-widget-preview-overlay"
+          :open="state.previewopen"
+        >
+          <img
+            :src="createBackgroundImage()"
+            alt=""
+          />
+        </wa-dialog>
+      </div>
+      <div
+        v-else
+        class="bone-widget-preview"
+      >
+        <wa-avatar
+          v-if="value?.['dest']?.['name']"
+          shape="rounded"
+          style="--size: round(calc(var(--wa-form-control-height) - 0.09em), 1px)"
+        >
+          <wa-icon
+            slot="icon"
+            name="file"
+          ></wa-icon>
+        </wa-avatar>
+      </div>
+      <div class="wa-flank:end wa-gap-xs wa-align-items-center bone-widget-file-row">
+        <div
+          v-if="value?.['dest']?.['name']"
+          class="bone-widget-filename"
+          :title="decodeURIComponent(value?.['dest']?.['name'])"
+        >
+          {{ decodeURIComponent(value?.["dest"]?.["name"]) }}
+        </div>
+        <div @click.stop>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="state.loading"
+      class="wa-cluster wa-align-items-center bone-widget-loader"
+    >
+      <wa-spinner></wa-spinner>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, ref } from "vue"
+import { downloadUrlFor, uploadFile } from "../../../request/index.js"
+/**
+ * Datei-Upload-Widget für Bones vom Typ `relational.tree.leaf.file.file`.
+ *
+ * Stellt eine kombinierte Klick-/Drop-Fläche bereit: ein Klick öffnet den File-Picker,
+ * ein Drop lädt die fallengelassene Datei hoch. Bei Bilddateien wird eine klickbare
+ * Vorschau angezeigt, die einen Dialog öffnet. Action-Buttons (Download, Delete)
+ * werden über `<bone-actions>` per Default-Slot eingebracht.
+ *
+ * @displayName FileBone
+ *
+ * @cssClass bone-widget-file-area - Äußerer klickbarer Container (Drop-Zone)
+ * @cssClass bone-widget-prompt - Empty-State (Icon + Text)
+ * @cssClass bone-widget-loader - Während des Uploads sichtbar
+ * @cssClass bone-widget-preview - Container für das Vorschaubild oder das Datei-Icon
+ * @cssClass has-preview - Zusatzklasse wenn ein Bild-Vorschau vorliegt
+ * @cssClass is-dragover - Wenn eine Datei über die Fläche gezogen wird
+ * @cssClass has-value - Wenn ein Wert gesetzt ist
+ * @cssClass is-loading - Während ein Upload läuft
+ * @cssClass is-readonly - Wenn der Bone readonly ist
+ */
+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; `public`-Flag steuert ob der Upload öffentlich ist. */
+  bone: Object,
+  /** Aktuell nicht genutzt. */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei Datei-Upload, Datei-Drop, Löschen und beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {{ dest: object, rel: null }|string} value - Hochgeladenes Datei-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 uploadinput = ref()
+const state = reactive({
+  loading: false,
+  droparea: false,
+  previewopen: false,
+})
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+
+/**
+ * Triggert den nativen File-Picker des hidden Inputs.
+ * Nur im Empty-State aktiv — ist bereits ein Wert gesetzt, muss zuerst per
+ * Delete-Action geleert oder per Drag-and-Drop ersetzt werden.
+ */
+function openPicker() {
+  if (state.loading || boneState.readonly || props.value) return
+  uploadinput.value?.click()
+}
+
+function createBackgroundImage() {
+  console.log(props.value)
+  return downloadUrlFor(props.value, false)
+}
+
+async function handleUpload(event) {
+  state.loading = true
+  try {
+    for (let file of event.target.files) {
+      let fileresult = await uploadFile(file, { publicUpload: !!boneState?.bonestructure["public"] })
+      console.log(fileresult)
+      uploadinput.value.value = ""
+      emit("change", props.name, { dest: fileresult, rel: null }, props.lang, props.index)
+    }
+  } finally {
+    state.loading = false
+  }
+}
+
+async function handleDrop(event) {
+  state.loading = true
+  state.droparea = false
+  try {
+    for (let file of event.dataTransfer.files) {
+      let fileresult = await uploadFile(file, { publicUpload: !!boneState?.bonestructure["public"] })
+      uploadinput.value.value = ""
+      emit("change", props.name, { dest: fileresult, rel: null }, props.lang, props.index)
+      break
+    }
+  } finally {
+    state.loading = false
+  }
+}
+</script>
+
+<style scoped>
+.bone-widget-file-area {
+  position: relative;
+  padding: calc(var(--wa-space-xs) - 1px);
+  border: 2px dashed var(--wa-color-surface-border);
+  border-radius: var(--wa-border-radius-m);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &.has-value {
+    border-style: none;
+    padding: 0;
+    background-color: var(--wa-color-neutral-95);
+  }
+
+  &.is-dragover {
+    border-color: var(--wa-color-brand-50);
+    background-color: var(--wa-color-brand-95);
+  }
+
+  &.is-readonly,
+  &.is-loading,
+  &.has-value {
+    cursor: default;
+  }
+
+  &:hover:not(.is-readonly):not(.is-loading):not(.has-value) {
+    border-color: var(--wa-color-brand-60);
+  }
+}
+
+.bone-widget-prompt {
+  justify-content: center;
+  color: var(--wa-color-on-quiet);
+  /* Klicks fallen auf die outer Drop-Zone durch */
+  pointer-events: none;
+}
+
+/* Dateiname-Zeile darf schrumpfen; lange Namen werden mit Ellipsis abgekürzt */
+.bone-widget-file-row {
+  min-width: 0;
+}
+
+.bone-widget-filename {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bone-widget-loader {
+  position: absolute;
+  inset: 0;
+  justify-content: center;
+  border-radius: inherit;
+  background-color: color-mix(in srgb, var(--wa-color-surface-default) 70%, transparent);
+}
+
+/* Klickbare Bildvorschau: Zoom-Cursor + leichte Skalierung beim Hover */
+.bone-widget-preview.has-preview {
+  cursor: zoom-in;
+  transition: transform 0.15s ease;
+
+  &:hover {
+    transform: scale(1.08);
+  }
+}
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <JsonEditorVue
+    ref="editorRef"
+    v-model="value_ref"
+    :on-change="changeEvent"
+    :read-only="boneState.readonly"
+  />
+</template>
+
+<script setup>
+import JsonEditorVue from "json-editor-vue"
+import { onMounted, inject, ref, watch } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+const value_ref = ref()
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+  bone: Object,
+  autofocus: Boolean,
+})
+
+const editorRef = ref(null)
+const emit = defineEmits(["change"])
+const boneState = inject("boneState")
+function changeEvent(newVal) {
+  emit("change", props.name, newVal.json, props.lang, props.index)
+}
+
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+  value_ref.value = props.value
+})
+watch(value_ref, (newVal, oldVal) => {
+  if (!oldVal && newVal) {
+    useTimeoutFn(() => {
+      editorRef.value.jsonEditor.collapse([], true)
+    }, 300)
+  }
+})
+</script>
+
+<style scoped>
+.bone-widget-box {
+  width: 100%;
+  border: 1px solid var(--wa-color-neutral-60);
+  border-radius: 5px;
+  min-height: 40px;
+}
+</style>
+<style>
+:root {
+  --jse-theme-color: var(--wa-color-surface-default);
+  --jse-menu-color: var(--wa-color-neutral-30);
+  --jse-theme-color-highlight: var(--wa-color-neutral-90);
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <wa-input
+    class="bone-widget bone-widget-key bone-widget-key-default"
+    :class="[`bone-widget-key-${name}`]"
+    disabled
+    :value="value"
+    :data-data-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    @change="changeEvent"
+  ></wa-input>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject } from "vue"
+/**
+ * Anzeige-Widget für den internen Datenbankschlüssel eines Eintrags (Typ `key`).
+ *
+ * Rendert ein immer deaktiviertes `<wa-input>`, da der Schlüssel nicht manuell
+ * editiert werden kann. Der Wert wird direkt aus dem Skel übernommen und dient
+ * ausschließlich zur Information. Unterstützt kein multiple und kein multilang.
+ *
+ * @displayName KeyBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-key - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-key-default - Standard-Variante
+ * @cssClass bone-widget-key-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-key-key`
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Schlüsselwert (URL-safe Base64-String). */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; nicht genutzt, da multiple nicht unterstützt wird. */
+  index: Number,
+  /** Sprach-Key; nicht genutzt, da multilang nicht unterstützt wird. */
+  lang: String,
+  /** Readonly-Flag (wird nicht ausgewertet – der Bone ist immer disabled). */
+  readonly: Boolean,
+  /** Zusätzliche Bone-Parameter. */
+  params: Object,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus (ohne Effekt, da das Element immer disabled ist). */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird beim Mount (Initialisierung) und bei change gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {string} value - Aktueller Schlüsselwert
+   * @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>