viur-ui 0.0.1

package/src/forms/bones/BoneActions.vue

@@ -0,0 +1,127 @@
+<template>
+  <template
+    v-for="(action, i) in state.actions"
+    :key="action.arg + '_' + name + '_' + lang + '_' + i"
+  >
+    <!-- title darf ein i18n-Key sein (z.B. "bone.del") — Klartext bleibt
+         Klartext ($te-Prüfung, keine missing-Key-Warnungen). -->
+    <wa-button
+      :disabled="isActionDisabled(action, ctx)"
+      size="medium"
+      appearance="outlined"
+      :variant="action.variant ?? 'neutral'"
+      :title="action.title && $te(action.title) ? $t(action.title) : action.title"
+      @click="onClick(action)"
+    >
+      <wa-icon :name="action.icon"></wa-icon>
+    </wa-button>
+
+    <action-dialog
+      v-if="action.type === 'assistant'"
+      :open="action._opened"
+      :name="bone?.descr"
+      :module="bone?.module"
+      :action="action"
+      :params="{ name, value, index, lang, bone, boneState }"
+      @close="onClose"
+      @next="onNext"
+    ></action-dialog>
+  </template>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, inject } from "vue"
+import { resolveActions, isActionDisabled, getActionHandler, formConfiguredActions } from "./actions"
+import ActionDialog from "./actions/ActionDialog.vue"
+
+const emit = defineEmits(["change"])
+
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  bone: Object,
+  /**
+   * Welche Actions diese Leiste zeigt:
+   * - "entry": alle bei `boneactions`, sonst nur die Pflicht-Actions (Standard)
+   * - "value": nur die Pflicht-Actions — am Wert EINER Sprache eines
+   *   mehrsprachigen Bones (Löschen/Download betreffen nur diese Sprache)
+   * - "bone": nur die übrigen — die Leiste neben den Sprach-Tabs (Übersetzen …)
+   */
+  scope: {
+    type: String,
+    default: "entry",
+    validator: (value) => ["entry", "value", "bone"].includes(value),
+  },
+})
+
+const boneState = inject("boneState")
+// Vom HOST bereitgestellte Auswahl für relationale Bones (z.B. ein Admin, der
+// einen Listen-Dialog öffnet): `(request) => Promise<Row[]|null>`. Ohne
+// Provider existiert die zugehörige Action schlicht nicht (`when`-Prädikat).
+const relationSelector = inject("viurRelationSelector", null)
+// Für Mehrfach-Übernahme in multiple-Bones (hängt weitere Einträge an) und
+// die Pflicht-Action "Zeile entfernen".
+const addMultipleEntry = inject("addMultipleEntry", null)
+const removeMultipleEntry = inject("removeMultipleEntry", null)
+// Formular-weite Action-Konfiguration (ViForm `actions`-Prop).
+const boneActionsConfig = inject("boneActionsConfig", null)
+
+const state = reactive({
+  actions: [],
+})
+
+/** Steckt diese Action-Leiste in einer ZEILE eines multiple-Bones? */
+const multipleRow = props.index !== null && props.index !== undefined
+
+const ctx = computed(() => ({
+  name: props.name,
+  value: props.value,
+  index: props.index,
+  lang: props.lang,
+  bone: props.bone,
+  boneState,
+  relationSelector,
+  multipleRow,
+  update: (val) => emit("change", props.name, val, props.lang, props.index),
+  /** Weiteren Eintrag ans Multiple-Array hängen (Mehrfach-Auswahl). */
+  appendEntry: (val) => addMultipleEntry?.(props.lang ?? null, val),
+  /** DIESE Zeile aus dem Multiple-Array entfernen (Pflicht-Action). */
+  removeEntry: () => removeMultipleEntry?.(props.index, props.lang ?? null),
+}))
+
+onMounted(() => {
+  // Formular-Konfiguration VOR den Bone-eigenen params.actions (Bone-Lokales
+  // ist spezifischer); Minus-Einträge gewinnen quellenunabhängig immer.
+  const configured = [...formConfiguredActions(boneActionsConfig, props.name), ...(props.bone?.params?.actions ?? [])]
+  const all = resolveActions(props.bone, configured, boneState, { relationSelector, multipleRow })
+  // Ohne `boneactions` bleiben nur die PFLICHT-Actions (Gerüst, z.B. das
+  // Zeilen-X) — die Leiste als Ganzes ist Opt-in, das Gerüst nicht.
+  if (props.scope === "bone") {
+    state.actions = all.filter((action) => !action.required)
+  } else if (props.scope === "value" || !boneState?.boneactions) {
+    state.actions = all.filter((action) => action.required)
+  } else {
+    state.actions = all
+  }
+})
+
+function onClick(action) {
+  if (action.type === "assistant") {
+    action._opened = true
+  } else if (action.type === "callback") {
+    const handler = getActionHandler(action.arg)
+    handler?.(ctx.value)
+  }
+}
+
+function onClose(val, lang, action) {
+  action._opened = false
+  if (val) emit("change", props.name, val, lang, props.index)
+}
+
+function onNext(val, lang, action) {
+  if (val) emit("change", props.name, val, lang, props.index)
+}
+</script>

package/src/forms/bones/BoneLabel.vue

@@ -0,0 +1,122 @@
+<template>
+  <label class="bone-label">
+    <slot v-if="!debug"></slot>
+    <wa-tooltip
+      v-else
+      :for="tooltipTargetId"
+      :content="name"
+    ></wa-tooltip>
+    <span
+      v-if="debug"
+      :id="tooltipTargetId"
+    >
+      <slot></slot>
+    </span>
+    <template v-if="debug">
+      <div
+        class="debug"
+        @click="state.debug = !state.debug"
+      >
+        <wa-icon name="bug"></wa-icon>
+      </div>
+    </template>
+  </label>
+
+  <wa-dialog
+    v-if="state.debug"
+    open
+    :label="name"
+    @wa-after-hide="state.debug = false"
+  >
+    <pre>
+        {{ boneState }}
+      </pre
+    >
+  </wa-dialog>
+</template>
+
+<script setup>
+import { reactive, inject, computed, unref } from "vue"
+import { buildBoneDomId } from "./utils"
+const props = defineProps({
+  name: String,
+  value: Object,
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+  debug: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(["change", "handleClick"])
+
+const boneState = inject("boneState")
+const bonePath = inject("bonePath", [])
+const tooltipTargetId = computed(() => buildBoneDomId(unref(bonePath) ?? [], "debug-label"))
+const state = reactive({
+  debug: false,
+})
+</script>
+<style scoped>
+@layer foundation.form {
+  .bone-label {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+    background-color: var(--wa-color-fill-quiet);
+    color: var(--wa-color-text-normal);
+    border-radius: var(--wa-border-radius-m);
+    word-break: break-word;
+    align-self: flex-start;
+    min-height: var(--wa-form-control-height);
+    align-items: center;
+  }
+}
+</style>
+
+<!--
+<style scoped>
+@layer foundation.form {
+  .bone-name {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: flex-start;
+    font-size: var(--wa-input-font-size-medium);
+    min-height: var(--wa-input-height-medium);
+    padding: 0.4em 0.7em;
+    color: var(--wa-color-neutral-10);
+    background-color: var(--wa-color-neutral-90);
+    border: none;
+    border-top-left-radius: var(--wa-input-border-radius-medium);
+    border-bottom-left-radius: var(--wa-input-border-radius-medium);
+    word-break: break-word;
+
+    @media (max-width: 900px) {
+      border-top-right-radius: var(--wa-input-border-radius-medium);
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .debug {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    padding-left: 0.4em;
+
+    & wa-icon {
+      background-color: var(--wa-color-danger-50);
+      color: #fff;
+      padding: 0.4em;
+      border-radius: 50%;
+      font-size: 0.55em;
+    }
+  }
+}
+</style>
+-->

package/src/forms/bones/BoneMultipleList.vue

@@ -0,0 +1,91 @@
+<template>
+  <template v-if="entries?.length">
+    <vue-draggable
+      v-model="localEntries"
+      :animation="150"
+      handle=".bone-drag-button"
+      class="wa-stack wa-gap-xs bone-multiple-list"
+    >
+      <div
+        v-for="(val, index) in entries"
+        :key="val?._key ? val._key : index + '_' + entries.length"
+        class="bone-multiple-wrapper"
+      >
+        <bone-multiple-wrapper
+          :readonly="!readonly"
+          :index="index"
+          :lang="lang"
+          :name="name"
+        >
+          <component
+            :is="is"
+            :value="resolveValue(val, index)"
+            :index="index"
+            :lang="lang"
+            :name="name"
+            :bone="bonestructure"
+            @change="updateValue"
+          />
+        </bone-multiple-wrapper>
+      </div>
+    </vue-draggable>
+  </template>
+  <div
+    v-else
+    class="bone-multiple-placeholder"
+    :class="{ 'is-readonly': readonly }"
+  >
+    <wa-input
+      readonly
+      size="medium"
+      :placeholder="$t('bone.no_entries')"
+    />
+  </div>
+  <component
+    :is="actionbar"
+    v-if="!readonly && actionbar"
+    :value="entries"
+    :name="name"
+    :lang="lang"
+    @change="updateValue"
+  />
+</template>
+
+<script setup>
+import { computed, inject } from "vue"
+import { VueDraggable } from "vue-draggable-plus"
+import BoneMultipleWrapper from "./BoneMultipleWrapper.vue"
+
+const props = defineProps({
+  is: { type: Object, required: true },
+  name: { type: String, required: true },
+  lang: { type: String, default: null },
+  entries: { type: Array, default: null },
+  bonestructure: { type: Object, required: true },
+  readonly: { type: Boolean, default: false },
+  actionbar: { type: Object, default: null },
+})
+
+const updateValue = inject("updateValue")
+
+const localEntries = computed({
+  get: () => props.entries ?? [],
+  set: (newVal) => updateValue(props.name, newVal, props.lang),
+})
+
+function resolveValue(val, index) {
+  const defaultvalue = props.bonestructure?.defaultvalue
+  if (!val && defaultvalue) {
+    return props.lang ? defaultvalue[props.lang]?.[index] : defaultvalue?.[index]
+  }
+  return val
+}
+</script>
+<style scoped>
+.bone-multiple-list {
+  background-color: var(--wa-color-surface-lowered);
+  padding: var(--wa-space-xs);
+  border-radius: var(--wa-border-radius-m);
+  border: 1px solid var(--wa-color-surface-border);
+}
+</style>

package/src/forms/bones/BoneMultipleWrapper.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="wa-flank wa-align-items-start wa-gap-xs bone-multiple-entry">
+    <wa-button
+      appearance="filled"
+      :disabled="boneState.readonly"
+      class="bone-drag-button"
+    >
+      <wa-icon name="grip-vertical"></wa-icon>
+    </wa-button>
+    <div class="wa-flank:end wa-gap-xs wa-align-items-start">
+      <div class="value">
+        <slot></slot>
+      </div>
+      <div class="wa-cluster wa-gap-xs">
+        <!-- IMMER gerendert: Das Zeilen-X ist die Pflicht-Action "removeEntry"
+             (actions/index.js) — BoneActions filtert ohne `boneactions` selbst
+             auf die Pflicht-Actions herunter. -->
+        <bone-actions
+          :value="state.value"
+          :name="name"
+          :lang="lang"
+          :index="index"
+          :bone="boneState.bonestructure"
+          @change="updateValue"
+        ></bone-actions>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, inject, computed } from "vue"
+import BoneActions from "./BoneActions.vue"
+
+const props = defineProps({
+  index: Number,
+  name: String,
+  lang: {
+    default: null,
+  },
+})
+
+const state = reactive({
+  value: computed(() => {
+    if (props.lang) {
+      return boneState.bonevalue[props.lang][props.index]
+    }
+    return boneState.bonevalue[props.index]
+  }),
+})
+
+
+const boneState = inject("boneState")
+const updateValue = inject("updateValue")
+</script>
+<!--
+<style scoped>
+.value-line {
+  display: flex;
+  gap: var(--wa-space-xs);
+  align-items: flex-start;
+}
+
+.value {
+  flex: 1 1 100%;
+  width: 1px;
+
+  & :deep(wa-input) {
+    &::part(base) {
+      border-bottom-left-radius: var(--wa-border-radius-m);
+      border-top-left-radius: var(--wa-border-radius-m);
+    }
+  }
+
+  & :deep(.bone-wrapper) {
+    & wa-input::part(base) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  &:deep(wa-alert) {
+    &::part(base) {
+      margin-top: 0;
+    }
+  }
+}
+
+.delete-btn {
+  transition: all ease 0.3s;
+}
+
+.drag-button {
+  &::part(base) {
+    aspect-ratio: 1;
+  }
+}
+.row-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: var(--wa-space-xs);
+}
+</style>
+-->

package/src/forms/bones/BoneNestedWrapper.vue

@@ -0,0 +1,155 @@
+<template>
+  <wa-alert
+    v-if="!state.globalRegistration"
+    open
+    variant="danger"
+  >
+    In Order to use this Bone register the bone component globally in your main file
+  </wa-alert>
+  <div
+    v-else
+    class="form"
+  >
+    <wa-spinner
+      v-if="state.updating"
+      style="position: absolute; top: 20px; left: -10px"
+    ></wa-spinner>
+
+    <vi-form
+      ref="skelRef"
+      :internal="mainformState"
+      :skel="value"
+      :structure="bone['using']"
+      :renderer="state.renderer"
+      :use-categories="bone?.params['categoryDefaultname'] !== null"
+      :category-defaultname="nestedCategory()"
+      :collapsed-categories="
+        state.isLastEntry ? [] : bone?.params?.['collapsedCategories'] ? bone?.params?.['collapsedCategories'] : []
+      "
+      :readonly="mainformState.readonly"
+      :boneactions="mainformState.boneactions"
+      :actions="parentActionsConfig"
+      @change="changeEvent"
+    ></vi-form>
+  </div>
+</template>
+
+<script setup>
+import {
+  reactive,
+  defineComponent,
+  onMounted,
+  inject,
+  computed,
+  getCurrentInstance,
+  watch,
+  ref,
+  provide,
+  unref,
+} from "vue"
+import { getBoneWidget } from "./index"
+import ViForm from "../ViForm.vue"
+import { useTimeoutFn } from "@vueuse/core"
+
+const emit = defineEmits(["change"])
+const props = defineProps({
+  name: String,
+  value: null,
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+  bone: Object,
+})
+const skelRef = ref(null)
+const boneState = inject("boneState")
+const mainformState = inject("mainformState")
+// Action-Konfiguration des umgebenden Formulars (ViForm `actions`) — das
+// Unterformular stellt sonst seine eigene (leere) bereit.
+const parentActionsConfig = inject("boneActionsConfig", null)
+const parentBonePath = inject("bonePath", [])
+const bonePath = computed(() => {
+  const path = [...(unref(parentBonePath) ?? []), props.name]
+
+  if (props.lang) {
+    path.push(`lang-${props.lang}`)
+  }
+
+  if (props.index !== null && props.index !== undefined) {
+    path.push(`idx-${props.index}`)
+  }
+
+  return path
+})
+provide("bonePath", bonePath)
+const state = reactive({
+  renderer: import.meta.env.VITE_DEFAULT_RENDERER || "json",
+  globalRegistration: false,
+  isLastEntry: computed(() => {
+    if (!props.bone["multiple"]) return false
+
+    let val = mainformState.skel[props.name]
+    if (props.lang) {
+      val = mainformState.skel[props.name][props.lang]
+    }
+    if (!val) {
+      return false
+    }
+    return val.length - 1 === props.index
+  }),
+  updating: false,
+})
+
+function changeEvent(val) {
+  state.updating = true
+  val["value"] = skelRef.value.state.skel // send whole form
+  val["name"] = props.name
+  val["index"] = props.index
+  val["lang"] = props.lang
+  emit("change", val)
+  useTimeoutFn(() => {
+    state.updating = false
+  }, 1000)
+}
+
+watch(
+  () => props.value,
+  (newVal, oldVal) => {
+    state.updating = false
+  }
+)
+
+onMounted(() => {
+  let app = getCurrentInstance().appContext
+  if (app.components.Bone) {
+    state.globalRegistration = true
+  } else {
+    state.globalRegistration = false
+  }
+
+  let val = {}
+  if (props.value) val = props.value
+
+  for (const [bonename, boneStructure] of Object.entries(props.bone["using"])) {
+    if (!Object.keys(val).includes(bonename) && boneStructure["defaultvalue"]) {
+      val[bonename] = boneStructure["defaultvalue"]
+    }
+  }
+
+  emit("change", props.name, val, props.lang, props.index) //init
+})
+function nestedCategory() {
+  if (props.bone?.params?.["categoryDefaultname"]) {
+    return props.bone.params["categoryDefaultname"]
+  } else if (props.bone?.format) {
+    return props.bone.format
+  }
+  return undefined
+}
+</script>
+<style scoped>
+.form {
+  width: 100%;
+  position: relative;
+}
+</style>

package/src/forms/bones/BoneSingleEntry.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="wa-flank:end bone-row wa-gap-xs wa-align-items-start">
+    <div class="bone-block">
+      <component
+        :is="is"
+        :value="bonevalue"
+        :name="name"
+        :index="null"
+        :lang="lang"
+        :bone="bonestructure"
+        :autofocus="autofocus"
+        @change="updateValue"
+        @keypress.enter="updateValue"
+      ></component>
+    </div>
+    <!-- Pflicht-Actions (Löschen, Download …) auch ohne `boneactions`; am
+         Wert DIESES Eintrags, bei Mehrsprachigkeit also seiner Sprache -->
+    <div
+      v-if="(boneactions && boneState?.hasActions) || boneState?.hasRequiredActions"
+      class="wa-cluster wa-gap-xs"
+    >
+      <bone-actions
+        :value="bonevalue"
+        :name="name"
+        :index="null"
+        :lang="lang"
+        :bone="bonestructure"
+        :scope="boneactions ? 'entry' : 'value'"
+        @change="updateValue"
+      ></bone-actions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject } from "vue"
+import BoneActions from "./BoneActions.vue"
+
+const props = defineProps({
+  is: { type: Object, required: true },
+  name: { type: String, required: true },
+  lang: { type: String, default: null },
+  bonevalue: { default: null },
+  bonestructure: { type: Object, required: true },
+  boneactions: { type: Boolean, default: true },
+  autofocus: { type: Boolean, default: false },
+})
+
+const updateValue = inject("updateValue")
+const boneState = inject("boneState")
+</script>