From c2dcd6cdba1975282384efdb26eac99e035cf61c Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 23:11:56 +0100
Subject: [PATCH] feat(ui): enable columns layout

---
 front/src/components/ui/Layout.vue    | 11 ++++++++--
 front/ui-docs/components/ui/layout.md | 30 +++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 3295141d2..354ef858c 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -3,7 +3,7 @@ import { useCssModule } from 'vue'
 
 const props = defineProps<
   { columnWidth?: number, noGap?:true }
-  & { [P in "stack" | "grid" | "flex"]?: true }
+  & { [P in "stack" | "grid" | "flex" | "columns"]?: true }
   & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
 const classes = useCssModule()
 const columnWidth = props.columnWidth ?? 320
@@ -17,7 +17,8 @@ const columnWidth = props.columnWidth ?? 320
     noGap || classes.gap,
     props.grid ? classes.grid
       : props.flex ? classes.flex
-        : classes.stack
+        : props.columns? classes.columns
+          : classes.stack
   ]">
     <slot />
 </component>
@@ -39,6 +40,12 @@ const columnWidth = props.columnWidth ?? 320
       flex-grow:0;
     }
   }
+  &.columns{
+    column-count: auto;
+    column-width: calc(v-bind(columnWidth) * 1px);
+    display: block;
+    column-rule: 1px solid var(--border-color);
+  }
   &.grid {
     display: grid;
     grid-template-columns:
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 224e08a75..809dc8756 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -150,6 +150,36 @@ Add space between vertically stacked items
 
 </Tab>
 
+<Tab title="Columns" icon="𝌆">
+
+Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
+
+<Layout flex>
+
+```vue-html
+<Layout columns>
+  <Card title="A"></Card>
+  <Card title="B"></Card>
+  <Card title="C"></Card>
+  <Card title="D"></Card>
+  <Card title="E"></Card>
+</Layout>
+```
+
+<div class="preview">
+<Layout columns>
+  <Card title="A"></Card>
+  <Card title="B"></Card>
+  <Card title="C"></Card>
+  <Card title="D"></Card>
+  <Card title="E"></Card>
+</Layout>
+</div>
+
+</Layout>
+
+</Tab>
+
 </Tabs>
 
 ## Common props