feat(ui): enable columns layout

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:

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