wip; Refactor collections based components #917

core/client/components/collection/KBoard.vue

@@ -1,48 +1,44 @@
 <template>
-  <div class="row justify-between q-gutter-x-sm no-wrap">
-    <div class="col-*" />
-    <template v-for="column in columns" :key="column.value">
-      <KColumn
-        :id="column.value"
-        ref="columnRefs"
-        :name="column.value"
-        :header="[{
-          component: 'QSpace'
-        }, {
-          component: 'QChip',
-          label: $tie(column.label),
-          color: 'grey-10',
-          'text-color': 'white',
-          square: true,
-          class: 'justify-center'
-        }, {
-          component: 'QSpace'
-        }]"
-        v-bind="column.props"
-        :height="height"
-        :width="column.width"
-        :style="{ minWidth: `${column.width}px`, maxWidth: `${column.width}px` }"
-      >
-      </KColumn>
-    </template>
-    <div class="col-*" />
-  </div>
+  <q-scroll-area class="fit">
+    <div class="fit row justify-between q-gutter-x-sm no-wrap">
+      <div class="col-*" />
+      <template v-for="column in columns" :key="column.value">
+        <KCollection
+          ref="columnRefs"
+          :id="column.value"
+          :name="column.value"
+          :header="[{
+            component: 'QSpace'
+          }, {
+            component: 'QChip',
+            label: $tie(column.label),
+            color: 'grey-10',
+            'text-color': 'white',
+            square: true,
+            class: 'justify-center'
+          }, {
+            component: 'QSpace'
+          }]"
+          v-bind="column.props"
+          :append-items="true"
+        >
+        </KCollection>
+      </template>
+      <div class="col-*" />
+    </div>
+  </q-scroll-area>
 </template>
 
 <script setup>
 import _ from 'lodash'
 import { ref } from 'vue'
-import KColumn from './KColumn.vue'
+import KCollection from './KCollection.vue'
 
 // Props
 defineProps({
   columns: {
     type: Array,
     default: () => null
-  },
-  height: {
-    type: Number,
-    required: true
   }
 })