viur-ui 0.0.1

package/src/forms/layouts/LayloutList2Columns.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-id="Object.keys(formState.structure).length > 0"
+    class="wrapper"
+  >
+    <div class="column left">
+      <template
+        v-for="(boneValue, boneName, idx) in formState.skel"
+        :key="boneName"
+      >
+        <template v-if="formState.bones.includes(boneName)">
+          <slot
+            v-if="idx % 2 === 0"
+            :bone-name="boneName"
+            :widget="getBoneWidget(formState.structure[boneName]['type'])"
+          ></slot>
+        </template>
+      </template>
+    </div>
+    <div class="column right">
+      <template
+        v-for="(boneValue, boneName, idx) in formState.skel"
+        :key="boneName"
+      >
+        <template v-if="formState.bones.includes(boneName)">
+          <slot
+            v-if="idx % 2 !== 0"
+            :bone-name="boneName"
+            :widget="getBoneWidget(formState.structure[boneName]['type'])"
+          ></slot>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject } from "vue"
+import { getBoneWidget } from "../bones"
+const formState = inject("formState")
+const formUpdate = inject("formUpdate")
+</script>
+
+<style scoped>
+.wrapper {
+  padding: 20px;
+  display: flex;
+  gap: 20px;
+  width: 100%;
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+</style>

package/src/forms/layouts/LayoutCategory.vue

@@ -0,0 +1,38 @@
+<template>
+  <template v-for="(category, identifier) in formState.categories">
+    <vi-form-category
+      v-if="hasCategoryBones(category)"
+      :name="category['name']"
+      :identifier="identifier"
+      :visible="!!category['visible']"
+      :open="category['open']"
+      :hide="!formState.useCategories"
+    >
+      <template
+        v-for="bone in category['bones']"
+        :key="bone['name']"
+      >
+        <slot
+          :bone-name="bone['name']"
+          :widget="getBoneWidget(formState.structure[bone['name']]['type'])"
+        ></slot>
+      </template>
+    </vi-form-category>
+  </template>
+</template>
+
+<script setup>
+import { inject } from "vue"
+import { getBoneWidget } from "../bones"
+import ViFormCategory from "../ViFormCategory.vue"
+const formState = inject("formState")
+const formUpdate = inject("formUpdate")
+
+const hasCategoryBones = (category) => {
+  return category["bones"].some(
+    (bone) => formState.structure[bone["name"]] && formState.structure[bone["name"]]["visible"]
+  )
+}
+</script>
+
+<style scoped></style>

package/src/forms/layouts/LayoutList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="Object.keys(formState.structure).length > 0"
+    class="wrapper"
+  >
+    <template
+      v-for="(boneValue, boneName) in formState.skel"
+      :key="boneName"
+    >
+      <template v-if="formState.structure?.[boneName]">
+        <slot
+          :bone-name="boneName"
+          :widget="getBoneWidget(formState.structure[boneName]['type'])"
+        ></slot>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { inject } from "vue"
+import { getBoneWidget } from "../bones"
+const formState = inject("formState")
+const formUpdate = inject("formUpdate")
+</script>
+
+<style scoped>
+.wrapper {
+  padding: 20px;
+}
+</style>