From 2602280080e6e0f735898a7f01651af635f0edab Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Wed, 18 Dec 2024 16:51:16 +0100
Subject: [PATCH] chore(ui): simplify layout component, improve documentation

---
 front/src/components/ui/Layout.vue    |  16 ++--
 front/ui-docs/components/ui/layout.md | 106 ++++++++++++++------------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 354ef858c..4f5768c83 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { useCssModule } from 'vue'
-
 const props = defineProps<
   { columnWidth?: number, noGap?:true }
   & { [P in "stack" | "grid" | "flex" | "columns"]?: true }
   & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
-const classes = useCssModule()
 const columnWidth = props.columnWidth ?? 320
 </script>
 
@@ -13,12 +10,12 @@ const columnWidth = props.columnWidth ?? 320
   <component
     :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
     :class="[
-    classes.layout,
-    noGap || classes.gap,
-    props.grid ? classes.grid
-      : props.flex ? classes.flex
-        : props.columns? classes.columns
-          : classes.stack
+    $style.layout,
+    noGap || $style.gap,
+    props.grid ? $style.grid
+      : props.flex ? $style.flex
+        : props.columns? $style.columns
+          : $style.stack
   ]">
     <slot />
 </component>
@@ -93,7 +90,6 @@ const columnWidth = props.columnWidth ?? 320
   &.stack {
     display: flex;
     flex-direction: column;
-    height:100%;
   }
 
   &.flex {
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 809dc8756..86ac5a929 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
@@ -6,7 +8,7 @@ import Spacer from '~/components/ui/layout/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
-import { ref } from 'vue'
+import Button from '~/components/ui/Button.vue'
 
 const isGrowing = ref(true)
 const noGap = ref(true)
@@ -154,25 +156,43 @@ Add space between vertically stacked items
 
 Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
 
-<Layout flex>
+<Layout stack>
 
 ```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 columns :column-width="120">
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+
+Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
+
+  <Card small title="Cards...">...break over columns...</Card>
+
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
 </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 columns :column-width="120">
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+
+---
+
+Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
+
+---
+
+<Card small title="Cards...">...break over columns...</Card>
+
+---
+
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
+  <Button icon="bi-star"/>
 </Layout>
 </div>
 
@@ -234,14 +254,12 @@ const isGrowing = ref(true);
 <template>
   <Toggle v-model="isGrowing" />
 
-  <div style="height:30em; /* Space to grow into */">
-    <Layout stack>
-      <Alert>A</Alert>
-      <Alert>B</Alert>
-      <Spacer :grow="isGrowing || undefined" />
-      <Alert>C (footer)</Alert>
-    </Layout>
-  </div>
+  <Layout stack style="height:30em;">
+    <Alert>A</Alert>
+    <Alert>B</Alert>
+    <Spacer :grow="isGrowing || undefined" />
+    <Alert>C (footer)</Alert>
+  </Layout>
 </template>
 ```
 
@@ -250,14 +268,12 @@ const isGrowing = ref(true);
 
 ---
 
-<div style="height:30em; background:rgba(255,250,20,.3)">
-  <Layout stack>
-    <Alert>A</Alert>
-    <Alert>B</Alert>
-      <Spacer :grow="isGrowing || undefined" />
-    <Alert>C (footer)</Alert>
-  </Layout>
-</div>
+<Layout stack style="height:30em; background:rgba(155,200,20,.3)">
+  <Alert>A</Alert>
+  <Alert>B</Alert>
+    <Spacer :grow="isGrowing || undefined" />
+  <Alert>C (footer)</Alert>
+</Layout>
 </div>
 
 </Layout>
@@ -269,23 +285,17 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
 <Layout flex>
 
 ```vue
-<script setup>
-const isGrowing = ref(true);
-</script>
-
 <template>
   <Toggle v-model="isGrowing" />
 
-  <div style="height:20em; /* Space to grow into */">
-    <Layout>
-      <Alert>A</Alert>
-      <Spacer :size="-32" :grow="isGrowing || undefined" />
-      <Alert>B1</Alert>
-      <Alert>B2</Alert>
-      <Spacer :size="-32" :grow="isGrowing || undefined" />
-      <Alert>C (footer)</Alert>
-    </Layout>
-  </div>
+  <Layout stack style="height:25em;">
+    <Alert>A</Alert>
+    <Spacer :size="-32" :grow="isGrowing || undefined" />
+    <Alert>B1</Alert>
+    <Alert>B2</Alert>
+    <Spacer :size="-32" :grow="isGrowing || undefined" />
+    <Alert>C (footer)</Alert>
+  </Layout>
 </template>
 ```
 
@@ -294,16 +304,14 @@ const isGrowing = ref(true);
 
 ---
 
-<div style="height:20em;background:rgba(255,250,20,.3)">
-  <Layout>
+<Layout stack style="height:25em; background:rgba(155,200,20,.3)">
     <Alert>A</Alert>
-      <Spacer :size="-32" :grow="isGrowing || undefined" />
+    <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert>B1</Alert>
     <Alert>B2</Alert>
-      <Spacer :size="-32" :grow="isGrowing || undefined" />
+    <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert>C (footer)</Alert>
   </Layout>
 </div>
-</div>
 
 </Layout>