viur-ui 0.0.1

package/src/forms/bones/actionbar/defaultBar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="actionbar">
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="danger"
+      :title="$t('bone.delAll')"
+      appearance="outlined"
+      class="delete-btn"
+      @click="handleRemove(lang)"
+    >
+      {{ $t("bone.delAll") }}
+    </wa-button>
+
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="success"
+      :title="$t('bone.add')"
+      appearance="outlined"
+      class="add-btn"
+      @click="handleAdd(lang)"
+    >
+      <wa-icon
+        slot="start"
+        name="plus"
+      ></wa-icon>
+      {{ $t("bone.add") }}
+      <template v-if="state.counter > 1">({{ state.counter }})</template>
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineComponent, onMounted, inject } from "vue"
+
+const props = defineProps({
+  name: String,
+  value: Object,
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+})
+
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const state = reactive({
+  counter: 0,
+  debounce: null,
+})
+const addMultipleEntry = inject("addMultipleEntry")
+const removeMultipleEntries = inject("removeMultipleEntries")
+
+function handleAdd() {
+  state.counter += 1
+  let delay = 200
+  if (state.counter > 1) {
+    delay = 500
+  }
+  if (state.debounce) {
+    clearTimeout(state.debounce)
+  }
+  state.debounce = setTimeout(() => {
+    for (let i = state.counter; i--; ) {
+      addMultipleEntry(props.lang)
+    }
+    state.counter = 0
+  }, delay)
+}
+
+function handleRemove() {
+  let delay = 200
+  if (state.debounce) {
+    clearTimeout(state.debounce)
+  }
+  state.debounce = setTimeout(() => {
+    removeMultipleEntries(props.lang)
+  }, delay)
+}
+
+onMounted(() => {
+  if (!props.value || props.value.length === 0) {
+    emit("change", props.name, [], props.lang) //init
+  }
+})
+</script>
+
+<style scoped>
+.actionbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.add-btn {
+  margin-left: auto;
+}
+</style>

package/src/forms/bones/actionbar/fileBar.vue

@@ -0,0 +1,165 @@
+<template>
+  <div
+    class="actionbar"
+    @dragover.prevent="state.droparea = true"
+    @dragleave="state.droparea = false"
+    @drop.prevent="handleDrop"
+  >
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="danger"
+      :title="$t('bone.del')"
+      appearance="outlined"
+      class="delete-btn"
+      @click="openSelector()"
+    >
+      <wa-icon
+        slot="start"
+        name="xmark"
+      ></wa-icon>
+    </wa-button>
+
+    <div
+      v-if="state.droparea"
+      class="droparea"
+    >
+      {{ t("bone.dragFile") }}
+    </div>
+
+    <input
+      ref="uploadinput"
+      hidden
+      type="file"
+      :multiple="boneState.multiple"
+      @change="handleUpload"
+    />
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      appearance="outlined"
+      :title="$t('bone.list')"
+      class="add-btn"
+      @click="addMultipleEntry(lang)"
+    >
+      <wa-icon
+        slot="start"
+        name="plus"
+      ></wa-icon>
+    </wa-button>
+
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="success"
+      appearance="outlined"
+      :title="$t('bone.upload')"
+      class="upload-btn"
+      @click="uploadinput.click()"
+    >
+      <wa-icon name="upload"></wa-icon>
+      {{ $t("bone.upload") }}
+      <wa-spinner
+        v-if="state.loading"
+        slot="end"
+      ></wa-spinner>
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n"
+import { reactive, onMounted, inject, ref, computed } from "vue"
+import { uploadFile } from "../../../request/index.js"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  name: String,
+  value: Object,
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+})
+
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const addMultipleEntry = inject("addMultipleEntry")
+const removeMultipleEntries = null
+const uploadinput = ref()
+const state = reactive({
+  skels: {},
+  uploadinput: null,
+  loading: false,
+  droparea: false,
+  hasUsing: computed(() => boneState?.bonestructure["using"]),
+})
+
+async function handleUpload(event) {
+  state.loading = true
+  for (let file of event.target.files) {
+    let fileresult = await uploadFile(file, { publicUpload: !!boneState?.bonestructure["public"] })
+    uploadinput.value.value = null
+    let relDefault = null
+    if (state.hasUsing) {
+      relDefault = undefined
+    }
+    addMultipleEntry(props.lang, { dest: fileresult, rel: relDefault })
+  }
+  state.loading = false
+}
+
+async function handleDrop(event) {
+  state.loading = true
+  state.droparea = false
+  for (let file of event.dataTransfer.files) {
+    let fileresult = await uploadFile(file, { publicUpload: !!boneState?.bonestructure["public"] })
+    uploadinput.value.value = null
+    let relDefault = null
+    if (state.hasUsing) {
+      relDefault = undefined
+    }
+    addMultipleEntry(props.lang, { dest: fileresult, rel: relDefault })
+  }
+  state.loading = false
+}
+
+onMounted(() => {
+  if (!props.value || props.value.length === 0) {
+    emit("change", props.name, [], props.lang) //init
+  }
+})
+</script>
+
+<style scoped>
+.actionbar {
+  display: flex;
+  position: relative;
+  flex-wrap: nowrap;
+}
+wa-combobox {
+  width: 100%;
+}
+
+.droparea {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0.9;
+  border: 1px solid var(--wa-color-info-50);
+  background-color: var(--wa-color-info-80);
+  color: var(--wa-color-info-10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-btn {
+  margin-left: var(--wa-space-xs);
+}
+
+.upload-btn {
+  margin-left: auto;
+}
+</style>

package/src/forms/bones/actionbar/relationalBar.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="actionbar">
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="danger"
+      :title="$t('bone.del')"
+      appearance="outlined"
+      class="delete-btn"
+      @click="openSelector()"
+    >
+      <wa-icon
+        slot="start"
+        name="xmark"
+      ></wa-icon>
+    </wa-button>
+
+    <wa-combobox
+      :source="getList"
+      @change="
+        addMultipleEntry(lang, {
+          dest: state.skels?.[$event.target.value],
+          rel: state.hasUsing ? undefined : null,
+        })
+      "
+    ></wa-combobox>
+
+    <wa-button
+      v-if="boneState.multiple && !readonly"
+      variant="success"
+      :title="$t('bone.add')"
+      appearance="outlined"
+      class="add-btn"
+      @click="addMultiple"
+    >
+      <wa-icon
+        slot="start"
+        name="plus"
+      ></wa-icon>
+      {{ $t("bone.addEmpty") }}
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed } from "vue"
+import { useListFetch } from "../../../request/index.js"
+
+const props = defineProps({
+  name: String,
+  value: Object,
+  index: Number,
+  lang: String,
+  readonly: Boolean,
+  params: Object,
+})
+
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const addMultipleEntry = inject("addMultipleEntry")
+const formatString = inject("formatString")
+const removeMultipleEntries = null
+const state = reactive({
+  skels: {},
+  hasUsing: computed(() => boneState?.bonestructure["using"]),
+})
+
+async function getList(search) {
+  let params = { limit: 99 }
+  if (boneState.bonestructure["type"].startsWith("relational.tree.leaf")) {
+    params.skelType = "leaf"
+  } else if (boneState.bonestructure["type"].startsWith("relational.tree.node")) {
+    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.skels = data["skellist"].reduce((acc, curr) => ((acc[curr["key"]] = curr), acc), {})
+
+  return data["skellist"]?.map((d) => {
+    return { text: formatString(boneState.bonestructure["format"], { dest: d }), value: d.key, data: d }
+  })
+}
+
+onMounted(() => {
+  if (!props.value || props.value.length === 0) {
+    emit("change", props.name, [], props.lang) //init
+  }
+})
+
+function addMultiple() {
+  let relDefault = null
+  if (state.hasUsing) {
+    relDefault = undefined
+  }
+  addMultipleEntry(props.lang, { dest: {}, rel: relDefault })
+}
+</script>
+
+<style scoped>
+.actionbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+wa-combobox {
+  width: 100%;
+}
+
+.delete-btn {
+  margin-right: var(--wa-space-xs);
+}
+
+.add-btn {
+  margin-left: var(--wa-space-xs);
+}
+</style>

package/src/forms/bones/actions/ActionDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <teleport
+    v-if="open"
+    to="body"
+  >
+    <wa-dialog
+      open
+      :label="action.name + (name ? ' - ' + name : '')"
+      class="bone-action-dialog"
+      @wa-after-hide="emit('close', null, null, action)"
+    >
+      <component
+        :is="component"
+        v-if="component"
+        :name="name"
+        :module="module"
+        :tab-id="tabId"
+        :action="action"
+        :params="params"
+        @close="(val, lang) => emit('close', val ?? null, lang ?? null, action)"
+        @next="(val, lang) => emit('next', val ?? null, lang ?? null, action)"
+      ></component>
+    </wa-dialog>
+  </teleport>
+</template>
+
+<script setup>
+import { computed } from "vue"
+import { getActionComponent } from "./index"
+
+const props = defineProps({
+  open: Boolean,
+  name: String,
+  module: String,
+  tabId: String,
+  params: Object,
+  action: Object,
+})
+
+const emit = defineEmits(["close", "next"])
+const component = computed(() => getActionComponent(props.action?.arg))
+</script>
+
+<style scoped>
+.bone-action-dialog {
+  --width: 85%;
+
+  &::part(body) {
+    display: contents;
+  }
+
+  &::part(base) {
+    position: absolute;
+    height: 100%;
+  }
+
+  &::part(panel) {
+    margin-bottom: 40px;
+    max-width: 1400px;
+  }
+
+  &::part(footer) {
+    padding: var(--wa-space-s);
+  }
+
+  &::part(overlay) {
+    position: absolute;
+  }
+}
+</style>

package/src/forms/bones/actions/Debug.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="debug-wrapper">
+    <wa-details
+      summary="Bone Structure"
+      open
+    >
+      <pre>{{ stringify(params.bone) }}</pre>
+    </wa-details>
+    <wa-details
+      summary="Bone Value"
+      open
+    >
+      <pre>{{ stringify(params.value) }}</pre>
+    </wa-details>
+    <wa-details summary="Bone State">
+      <pre>{{ stringify(params.boneState) }}</pre>
+    </wa-details>
+    <wa-details summary="Context">
+      <pre>{{ stringify({ name: params.name, lang: params.lang, index: params.index }) }}</pre>
+    </wa-details>
+  </div>
+
+  <div
+    slot="footer"
+    class="debug-footer"
+  >
+    <wa-button
+      size="small"
+      variant="brand"
+      appearance="outlined"
+      @click="CloseAction"
+    >
+      {{ t("actions.close") }}
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const props = defineProps({
+  name: String,
+  module: String,
+  tabId: String,
+  action: Object,
+  params: Object,
+})
+
+const emit = defineEmits(["close", "next"])
+
+/**
+ * Stringifiziert ein Objekt für die Debug-Anzeige.
+ * Überspringt interne Felder (`_*`) und behandelt Zyklen.
+ */
+function stringify(obj) {
+  const seen = new WeakSet()
+  try {
+    return JSON.stringify(
+      obj,
+      (key, val) => {
+        if (typeof key === "string" && key.startsWith("_")) return undefined
+        if (typeof val === "function") return `[Function ${val.name || "anonymous"}]`
+        if (val && typeof val === "object") {
+          if (seen.has(val)) return "[Circular]"
+          seen.add(val)
+        }
+        return val
+      },
+      2
+    )
+  } catch (e) {
+    return String(obj)
+  }
+}
+
+function CloseAction() {
+  emit("close")
+}
+</script>
+
+<style scoped>
+.debug-wrapper {
+  padding: var(--wa-space-l);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-xs);
+}
+
+pre {
+  margin: 0;
+  padding: var(--wa-space-s);
+  background-color: var(--wa-color-neutral-95);
+  border-radius: var(--wa-border-radius-m);
+  font-size: 0.8em;
+  font-family: var(--wa-font-family-code, monospace);
+  overflow: auto;
+  max-height: 50vh;
+}
+
+.debug-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wa-space-s);
+}
+</style>

package/src/forms/bones/actions/Delete.vue

@@ -0,0 +1,13 @@
+<script>
+/**
+ * Direct-fire Action: setzt den Bone-Wert auf einen leeren String zurück.
+ * Wird von `BoneActions` bei `type: "callback"` direkt aufgerufen — kein Dialog.
+ *
+ * @param {{ value: object, name: string, lang: string, index: number, bone: object, boneState: object, update: Function }} ctx
+ */
+export function handler(ctx) {
+  ctx.update("")
+}
+
+export default {}
+</script>