chore(ui): simplify layout component, improve documentation

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,
+    $style.layout,
-    noGap || classes.gap,
+    noGap || $style.gap,
-    props.grid ? classes.grid
+    props.grid ? $style.grid
-      : props.flex ? classes.flex
+      : props.flex ? $style.flex
-        : props.columns? classes.columns
+        : props.columns? $style.columns
-          : classes.stack
+          : $style.stack
   ]">
     <slot />
 </component>
@@ -93,7 +90,6 @@ const columnWidth = props.columnWidth ?? 320
   &.stack {
     display: flex;
     flex-direction: column;
-    height:100%;
   }
 
   &.flex {

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>
+<Layout columns :column-width="120">
-  <Card title="A"></Card>
+  <Button icon="bi-star"/>
-  <Card title="B"></Card>
+  <Button icon="bi-star"/>
-  <Card title="C"></Card>
+  <Button icon="bi-star"/>
-  <Card title="D"></Card>
+
-  <Card title="E"></Card>
+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>
+<Layout columns :column-width="120">
-  <Card title="A"></Card>
+  <Button icon="bi-star"/>
-  <Card title="B"></Card>
+  <Button icon="bi-star"/>
-  <Card title="C"></Card>
+  <Button icon="bi-star"/>
-  <Card title="D"></Card>
+
-  <Card title="E"></Card>
+---
+
+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 style="height:30em;">
-    <Layout stack>
     <Alert>A</Alert>
     <Alert>B</Alert>
     <Spacer :grow="isGrowing || undefined" />
     <Alert>C (footer)</Alert>
   </Layout>
-  </div>
 </template>
 ```
 
@@ -250,14 +268,12 @@ const isGrowing = ref(true);
 
 ---
 
-<div style="height:30em; background:rgba(255,250,20,.3)">
+<Layout stack style="height:30em; background:rgba(155,200,20,.3)">
-  <Layout stack>
   <Alert>A</Alert>
   <Alert>B</Alert>
     <Spacer :grow="isGrowing || undefined" />
   <Alert>C (footer)</Alert>
-  </Layout>
+</Layout>
-</div>
 </div>
 
 </Layout>
@@ -269,15 +285,10 @@ 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 stack style="height:25em;">
-    <Layout>
     <Alert>A</Alert>
     <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert>B1</Alert>
@@ -285,7 +296,6 @@ const isGrowing = ref(true);
     <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert>C (footer)</Alert>
   </Layout>
-  </div>
 </template>
 ```
 
@@ -294,8 +304,7 @@ const isGrowing = ref(true);
 
 ---
 
-<div style="height:20em;background:rgba(255,250,20,.3)">
+<Layout stack style="height:25em; background:rgba(155,200,20,.3)">
-  <Layout>
     <Alert>A</Alert>
     <Spacer :size="-32" :grow="isGrowing || undefined" />
     <Alert>B1</Alert>
@@ -304,6 +313,5 @@ const isGrowing = ref(true);
     <Alert>C (footer)</Alert>
   </Layout>
 </div>
-</div>
 
 </Layout>