viur-ui 0.0.1

package/src/forms/bones/index.js

@@ -0,0 +1,225 @@
+import rawBone from "./widgets/rawBone.vue"
+import keyBone from "./widgets/keyBone.vue"
+import stringBone from "./widgets/stringBone.vue"
+import emailBone from "./widgets/emailBone.vue"
+import dateBone from "./widgets/dateBone.vue"
+import selectBone from "./widgets/selectBone.vue"
+import booleanBone from "./widgets/booleanBone.vue"
+import passwordBone from "./widgets/passwordBone.vue"
+import recordBone from "./widgets/recordBone.vue"
+import colorBone from "./widgets/colorBone.vue"
+import numericBone from "./widgets/numericBone.vue"
+import relationalBone from "./widgets/relationalBone.vue"
+import fileBone from "./widgets/fileBone.vue"
+import spatialBone from "./widgets/spatialBone.vue"
+
+import booleanBoneSelect from "./widgets/booleanBoneSelect.vue"
+import booleanBoneChoose from "./widgets/booleanBoneChoose.vue"
+import selectBoneChoose from "./widgets/selectBoneChoose.vue"
+import relationalBoneSelect from "./widgets/relationalBoneSelect.vue"
+
+import defaultBar from "./actionbar/defaultBar.vue"
+import relationalBar from "./actionbar/relationalBar.vue"
+import fileBar from "./actionbar/fileBar.vue"
+
+import { reactive, shallowRef, defineAsyncComponent } from "vue"
+import { defineStore } from "pinia"
+
+// Heavy bones — lazy loaded so consumers don't pay for their deps unless used.
+// json-editor-vue (~60KB+), libphonenumber-js (~150KB), CodeMirror suite (~200KB+),
+// CKEditor5 suite (~400KB+) only land in the bundle when a form actually renders
+// the corresponding bone type.
+const jsonBone = defineAsyncComponent(() => import("./widgets/jsonBone.vue"))
+const phoneBone = defineAsyncComponent(() => import("./widgets/phoneBone.vue"))
+const codeBone = defineAsyncComponent(() => import("./widgets/codeBone.vue"))
+const textBone = defineAsyncComponent(() => import("./widgets/textBone.vue"))
+
+export const useBoneStore = defineStore("boneStore", () => {
+  const state = reactive({
+    additionalBones: shallowRef({}),
+    defaultBones: shallowRef({
+      rawBone,
+      keyBone,
+      stringBone,
+      emailBone,
+      dateBone,
+      booleanBone,
+      selectBone,
+      passwordBone,
+      recordBone,
+      numericBone,
+      colorBone,
+      relationalBone,
+      jsonBone,
+      fileBone,
+      textBone,
+      spatialBone,
+      phoneBone,
+      booleanBoneSelect,
+      booleanBoneChoose,
+      selectBoneChoose,
+      relationalBoneSelect,
+      codeBone,
+    }),
+    actionbars: shallowRef({
+      "relational.tree.leaf.file.file": fileBar,
+      "relational.": relationalBar,
+    }),
+    multibones: shallowRef(["select", "select."]),
+  })
+
+  function addBoneWidget(boneType, widget) {
+    state.additionalBones[boneType] = widget
+  }
+
+  function importWidgets() {
+    let bones = state.defaultBones
+    for (const [k, v] of Object.entries(state.additionalBones)) {
+      bones.add(v)
+    }
+    return bones
+  }
+
+  function getBoneWidget(boneType) {
+    if (Object.keys(state.additionalBones).includes(boneType)) {
+      //exact match
+      return state.additionalBones[boneType]
+    } else {
+      let typeParts = boneType.split(".") //prefix match
+      let matchingPrefixes = Object.entries(state.additionalBones).filter((prefix) =>
+        prefix[0].startsWith(typeParts[0] + ".")
+      )
+      if (matchingPrefixes.length > 0) {
+        matchingPrefixes.sort((a, b) => b.length - a.length)
+        for (let prefix of matchingPrefixes) {
+          if (boneType.startsWith(prefix[0])) {
+            return state.additionalBones[prefix[0]]
+          }
+        }
+      }
+    }
+
+    if (boneType === "date" || boneType.startsWith("date.")) {
+      return dateBone
+    } else if (boneType === "key") {
+      return keyBone
+    } else if (boneType === "str.email") {
+      return emailBone
+    } else if (boneType === "str.phone") {
+      return phoneBone
+    } else if (boneType === "str" || boneType.startsWith("str.")) {
+      return stringBone
+    } else if (boneType === "select.choose") {
+      return selectBoneChoose
+    } else if (boneType === "select" || boneType.startsWith("select.")) {
+      return selectBone
+    } else if (boneType === "bool.choose") {
+      return booleanBoneChoose
+    } else if (boneType === "bool.select") {
+      return booleanBoneSelect
+    } else if (boneType === "bool" || boneType.startsWith("bool.")) {
+      return booleanBone
+    } else if (boneType === "password" || boneType.startsWith("password.")) {
+      return passwordBone
+    } else if (boneType === "record" || boneType.startsWith("record.")) {
+      return recordBone
+    } else if (boneType === "numeric" || boneType.startsWith("numeric.")) {
+      return numericBone
+    } else if (boneType === "relational.tree.leaf.file.file" || boneType.startsWith("relational.tree.leaf.file.")) {
+      return fileBone
+    } else if (boneType === "relational.select" || boneType.startsWith("relational.select.")) {
+      return relationalBoneSelect
+    } else if (boneType === "relational" || boneType.startsWith("relational.")) {
+      return relationalBone
+    } else if (boneType === "raw.json") {
+      return jsonBone
+    } else if (boneType.startsWith("raw.code.")) {
+      return codeBone
+    } else if (boneType === "color" || boneType.startsWith("color.")) {
+      return colorBone
+    } else if (boneType === "text" || boneType.startsWith("text.")) {
+      return textBone
+    } else if (boneType === "spatial" || boneType.startsWith("spatial.")) {
+      return spatialBone
+    }
+
+    return rawBone
+  }
+
+  function addBoneActionbar(boneType, widget) {
+    state.actionbars[boneType] = widget
+  }
+
+  function getBoneActionbar(boneType) {
+    if (Object.keys(state.actionbars).includes(boneType)) {
+      //exact match
+      return state.actionbars[boneType]
+    } else {
+      let typeParts = boneType.split(".") //prefix match
+      let matchingPrefixes = Object.entries(state.actionbars).filter((prefix) =>
+        prefix[0].startsWith(typeParts[0] + ".")
+      )
+      if (matchingPrefixes.length > 0) {
+        matchingPrefixes.sort((a, b) => b.length - a.length)
+        for (let prefix of matchingPrefixes) {
+          if (boneType.startsWith(prefix[0])) {
+            return state.actionbars[prefix[0]]
+          }
+        }
+      }
+    }
+
+    return defaultBar
+  }
+
+  return {
+    state,
+    addBoneWidget,
+    getBoneWidget,
+    importWidgets,
+
+    addBoneActionbar,
+    getBoneActionbar,
+  }
+})
+
+export function addBoneActionbar(boneType, widget) {
+  const boneStore = useBoneStore()
+  return boneStore.addBoneActionbar(boneType, widget)
+}
+
+export function getBoneActionbar(boneType) {
+  const boneStore = useBoneStore()
+  return boneStore.getBoneActionbar(boneType)
+}
+
+export function getBoneWidget(boneType) {
+  const boneStore = useBoneStore()
+  return boneStore.getBoneWidget(boneType)
+}
+
+export function addBoneWidget(boneType, widget) {
+  const boneStore = useBoneStore()
+  boneStore.addBoneWidget(boneType, widget)
+}
+
+export function BoneHasMultipleHandling(boneType) {
+  const boneStore = useBoneStore()
+  if (boneStore.state.multibones.includes(boneType)) {
+    return true
+  } else {
+    let typeParts = boneType.split(".") //prefix match
+    let matchingPrefixes = Object.entries(boneStore.state.multibones).filter((prefix) =>
+      prefix[1].startsWith(typeParts[0] + ".")
+    )
+    if (matchingPrefixes.length > 0) {
+      matchingPrefixes.sort((a, b) => b.length - a.length)
+      for (let prefix of matchingPrefixes) {
+        if (boneType.startsWith(prefix[1])) {
+          return true
+        }
+      }
+    }
+  }
+  return false
+}

package/src/forms/bones/uploadAdapter.js

@@ -0,0 +1,46 @@
+import { downloadUrlFor, uploadFile } from "../../request/index.js"
+
+class ViURUploadAdapter {
+  constructor(loader, api_url) {
+    this.loader = loader
+    this.api_url = api_url
+  }
+
+  async upload() {
+    this.loader.uploadTotal = 100
+    this.loader.uploaded = 0
+    return this.loader.file.then(
+      async (file) =>
+        new Promise((resolve, reject) => {
+          this.loader.uploaded = 10
+          uploadFile(file, { renderer: "vi" })
+            .then((uploadedData) => {
+              this.loader.uploaded = 75
+              this.loader.uploaded = 100
+              resolve({
+                // Die URL landet im HTML des Text-Bones: als /file/download/…
+                // (nur absolut gemacht) — die erkennt viur-core wieder
+                // (Blob-Referenz, srcset) und sie liegt nicht hinter /vi.
+                default: downloadUrlFor(uploadedData["downloadUrl"]),
+              })
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        })
+    )
+  }
+
+  // Aborts the upload process.
+  abort() {
+    if (this.xhr) {
+      this.xhr.abort()
+    }
+  }
+}
+
+export function ViURUploadAdapterPlugin(editor) {
+  editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
+    return new ViURUploadAdapter(loader, editor.config.get("viur_api_url"))
+  }
+}

package/src/forms/bones/utils.js

@@ -0,0 +1,284 @@
+export default class Utils {
+  static objectEmpty(obj) {
+    return Object.keys(obj).length === 0 && obj.constructor === Object
+  }
+
+  static getDescr(bone, value) {
+    try {
+      return bone["values"].filter((option) => option[0] === value)[0][1]
+    } catch (e) {
+      return "-"
+    }
+  }
+
+  static stripHtml(html) {
+    const div = document.createElement("div")
+    div.innerHTML = html
+    return div.textContent || div.innerText || ""
+  }
+
+  static unescape(value) {
+    if (!value) value = ""
+    return String(value)
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+      .replace(/&#40;/g, "(")
+      .replace(/&#41;/g, ")")
+      .replace(/&#61;/g, "=")
+      .replace(/&#039;/g, "'")
+      .replace(/&#040;/g, "(")
+      .replace(/&#041;/g, ")")
+      .replace(/&#061;/g, "=")
+  }
+
+  static formatString(formatstr, boneValue, fallback = "-") {
+    function getpathListFromFormatstring(formatstr) {
+      let output = []
+      let formatList = []
+      let regstr = /\$\((.*?)\)/g
+
+      while (formatList) {
+        formatList = regstr.exec(formatstr)
+        if (!formatList) {
+          formatList = false
+          continue
+        }
+
+        output.push(formatList[1])
+      }
+
+      return output
+    }
+
+    function readValue(pathstr, avalue) {
+      let path = pathstr.split(".")
+      let restPath = pathstr.split(".")
+      let aval = avalue
+      for (let entry of path) {
+        restPath.shift()
+        if (aval && aval !== "-" && Object.keys(aval).includes(entry)) {
+          if (Array.isArray(aval[entry])) {
+            let resVal = []
+            for (let val of aval[entry]) {
+              resVal.push(readValue(restPath.join("."), val))
+            }
+            aval = resVal.join(", ")
+          } else {
+            aval = readValue(restPath.join("."), aval[entry])
+          }
+
+          if (typeof aval === "object" && !Array.isArray(aval) && aval !== null) {
+            aval = Object.entries(aval)
+              .map((x) => x[1])
+              .join(", ")
+          }
+        } else if (!aval || (typeof aval[entry] === "object" && !aval[entry])) {
+          aval = "-"
+        }
+      }
+      return aval
+    }
+
+    let pathlist = getpathListFromFormatstring(formatstr)
+
+    let finalStrList = []
+
+    if (!Array.isArray(boneValue)) {
+      boneValue = [boneValue]
+    }
+
+    for (let avalue of boneValue) {
+      let finalstr = formatstr
+      for (let pathstr of pathlist) {
+        let aval = readValue(pathstr, avalue)
+        // Auch Zahlen und Wahrheitswerte gehören in den Text: vorher wurde
+        // JEDER Nicht-String durch den Fallback ersetzt, `$(dest.kdnr)` mit 42
+        // verschwand also. Leeres, Objekte und der Platzhalter "-" bleiben der
+        // Fallback.
+        if (aval === null || aval === undefined || aval === "-" || typeof aval === "object") {
+          aval = fallback
+        } else {
+          aval = String(aval)
+        }
+        aval = Utils.unescape(aval)
+        finalstr = finalstr.replace("$(" + pathstr + ")", aval)
+      }
+      finalStrList.push(finalstr)
+    }
+    return finalStrList.join(", ")
+  }
+
+  // ── ViUR-Werte als Text ───────────────────────────────────────────────
+  //
+  // EINE Stelle, die jeden Bone-Wert in eine Zeichenkette übersetzt — für
+  // Tabellen, Detailansichten, Export. Denn ein Bone-Wert ist selten ein
+  // Skalar: mehrsprachige Bones sind ein Objekt je Sprache, `multiple` eine
+  // Liste, relationale Bones tragen `{dest, rel}` und ihren eigenen
+  // Formatstring, `text` enthält HTML.
+
+  /** Typfamilie eines Bones: "str.email" → "str". */
+  static boneFamily(type) {
+    return String(type ?? "").split(".")[0]
+  }
+
+  /** select-Wert → Beschriftung. Akzeptiert Objekt- UND Paar-Schreibweise. */
+  static optionLabel(bone, value) {
+    const values = bone?.["values"]
+    if (Array.isArray(values)) {
+      const hit = values.find((entry) => String(entry?.[0]) === String(value))
+      return hit ? String(hit[1]) : String(value)
+    }
+    if (values && typeof values === "object") {
+      const hit = values[String(value)]
+      return hit === undefined ? String(value) : String(hit)
+    }
+    return String(value)
+  }
+
+  /** Ein EINZELNER Wert (ohne Sprachen/multiple — das macht boneToString). */
+  static singleValueToString(value, bone = {}, options = {}) {
+    if (value === null || value === undefined || value === "") return ""
+    switch (Utils.boneFamily(bone["type"])) {
+      case "bool": {
+        const [yes, no] = options.boolTexts ?? ["Ja", "Nein"]
+        return value ? yes : no
+      }
+      case "select":
+        return Utils.optionLabel(bone, value)
+      case "numeric": {
+        const numeric = Number(value)
+        if (!Number.isFinite(numeric)) return String(value)
+        const digits = typeof bone["precision"] === "number" ? bone["precision"] : undefined
+        return new Intl.NumberFormat(options.locale, {
+          minimumFractionDigits: digits,
+          maximumFractionDigits: digits,
+        }).format(numeric)
+      }
+      case "date": {
+        const parsed = new Date(String(value))
+        if (Number.isNaN(parsed.getTime())) return String(value)
+        // ViUR setzt die Flags `date`/`time` (beide standardmäßig an).
+        const wantsDate = bone["date"] !== false
+        const wantsTime = bone["time"] !== false
+        const format = {}
+        if (wantsDate || !wantsTime) Object.assign(format, { year: "numeric", month: "2-digit", day: "2-digit" })
+        if (wantsTime) Object.assign(format, { hour: "2-digit", minute: "2-digit" })
+        return new Intl.DateTimeFormat(options.locale, format).format(parsed)
+      }
+      case "relational":
+      case "record": {
+        // Relationale Bones bringen ihren Formatstring mit ("$(dest.name)").
+        const formatstr = bone["format"] ?? bone["params"]?.["format"] ?? "$(dest.name)"
+        const text = Utils.formatString(formatstr, value, "")
+        if (text && text !== "-") return Utils.stripHtml(String(text))
+        // Ohne Format ist der Schlüssel besser als nichts.
+        return String(value?.["dest"]?.["key"] ?? value?.["key"] ?? "")
+      }
+      case "text":
+        // Textbones enthalten HTML — in einer Zelle stört das.
+        return Utils.stripHtml(String(value))
+      case "raw":
+        return typeof value === "object" ? JSON.stringify(value) : String(value)
+      default:
+        return typeof value === "object" ? JSON.stringify(value) : String(value)
+    }
+  }
+
+  /** Ein Wert OHNE Sprachdimension (multiple-Listen inklusive) als Text. */
+  static monolingualToString(value, bone = {}, options = {}) {
+    if (bone["multiple"]) {
+      const list = Array.isArray(value) ? value : value === null || value === undefined ? [] : [value]
+      return list.map((entry) => Utils.singleValueToString(entry, bone, options)).join(options.separator ?? ", ")
+    }
+    return Utils.singleValueToString(value, bone, options)
+  }
+
+  /**
+   * Flagge einer Sprache — pflegefrei über die CLDR-Daten des Browsers:
+   * Sprachcode → wahrscheinlichste Region (`Intl.Locale.maximize`, de→DE,
+   * en→US, ja→JP) → Regional-Indicator-Emoji. `null`, wenn keine Region
+   * bestimmbar ist.
+   */
+  static languageFlag(code) {
+    try {
+      const region = new Intl.Locale(String(code)).maximize().region
+      if (!region || !/^[A-Z]{2}$/.test(region)) return null
+      return String.fromCodePoint(...[...region].map((char) => 0x1f1a5 + char.charCodeAt(0)))
+    } catch {
+      return null
+    }
+  }
+
+  /** Präfix, das einen Wert seiner Sprache zuordnet: Flagge, sonst Kürzel. */
+  static languageTag(code) {
+    return Utils.languageFlag(code) ?? `${code}:`
+  }
+
+  /**
+   * Bone-Wert eines Datensatzes als Text.
+   *
+   * Mehrsprachige Bones (`bone.languages`) steuert `options.language`:
+   * - `"*"` — ALLE befüllten Sprachen, je mit Flaggen-Präfix (`🇩🇪 Wert`),
+   *   verkettet mit `languageSeparator` (Standard `", "`).
+   *   `options.primaryLanguage` steht dabei vorn, die übrigen folgen in der
+   *   Reihenfolge des Bones.
+   * - Sprachcode — der Wert dieser Sprache. Ist er leer, springt die Anzeige
+   *   auf die erste befüllte Sprache und kennzeichnet das mit deren Flagge —
+   *   eine leere Zelle verschweigt sonst, dass der Eintrag in anderer Sprache
+   *   sehr wohl Inhalt hat.
+   * - nicht gesetzt — die erste Sprache des Bones, ohne Präfix (stabiles
+   *   Verhalten für Formatstrings und andere Bestandsnutzer).
+   *
+   * @param {*} value Wert aus dem Skel
+   * @param {object} bone Bone-Beschreibung aus der `structure`
+   * @param {{ language?: string, primaryLanguage?: string, locale?: string, boolTexts?: [string, string], separator?: string, languageSeparator?: string }} [options]
+   */
+  static boneToString(value, bone = {}, options = {}) {
+    const languages = bone["languages"]
+    if (Array.isArray(languages) && languages.length && value && typeof value === "object") {
+      const isEmpty = (entry) =>
+        entry === null || entry === undefined || entry === "" || (Array.isArray(entry) && entry.length === 0)
+      if (options.language === "*") {
+        const primary = options.primaryLanguage
+        const ordered =
+          primary && languages.includes(primary) ? [primary, ...languages.filter((lang) => lang !== primary)] : languages
+        return ordered
+          .filter((lang) => !isEmpty(value[lang]))
+          .map((lang) => `${Utils.languageTag(lang)} ${Utils.monolingualToString(value[lang], bone, options)}`)
+          .join(options.languageSeparator ?? ", ")
+      }
+      let lang = options.language && languages.includes(options.language) ? options.language : languages[0]
+      if (options.language && isEmpty(value[lang])) {
+        lang = languages.find((other) => !isEmpty(value[other])) ?? lang
+      }
+      const text = Utils.monolingualToString(value[lang], bone, options)
+      // Präfix nur, wenn eine BESTIMMTE Sprache gewünscht war und eine andere kam.
+      return options.language && options.language !== lang && !isEmpty(value[lang])
+        ? `${Utils.languageTag(lang)} ${text}`
+        : text
+    }
+    return Utils.monolingualToString(value, bone, options)
+  }
+}
+
+function normalizeBonePathSegment(segment) {
+  return String(segment)
+    .trim()
+    .replace(/[^a-zA-Z0-9_-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
+
+export function buildBoneDomId(pathSegments, suffix = null) {
+  const normalizedSegments = pathSegments
+    .filter((segment) => segment !== null && segment !== undefined && segment !== "")
+    .map(normalizeBonePathSegment)
+    .filter(Boolean)
+
+  if (suffix) {
+    normalizedSegments.push(normalizeBonePathSegment(suffix))
+  }
+
+  return ["vi-bone", ...normalizedSegments].join("--")
+}

package/src/forms/bones/view/base_item.vue

@@ -0,0 +1,35 @@
+<template>
+  {{ getBoneValue(boneName, state.option) }}
+</template>
+
+<script setup>
+import boneLogic from "./boneLogic"
+import { computed, defineComponent, reactive } from "vue"
+import { useI18n } from "vue-i18n"
+
+const props = defineProps({
+  boneName: String,
+  skel: Object,
+  structure: Object,
+})
+
+const state = reactive({
+  option: computed(() => {
+    if (props.structure[props.boneName]["type"] === "date") {
+      if (props.structure[props.boneName]["date"] && !props.structure[props.boneName]["time"]) {
+        return "date"
+      }
+
+      if (props.structure[props.boneName]["time"] && !props.structure[props.boneName]["date"]) {
+        return "time"
+      }
+    }
+    return null
+  }),
+})
+
+const { t } = useI18n()
+const { getBoneValue, bones_state } = boneLogic(props.skel, props.structure, false, null, t)
+</script>
+
+<style scoped></style>