feat(docs): document layout section component

front/src/components/library/Artists.vue

@@ -30,6 +30,7 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 import useLogger from '~/composables/useLogger'
+import Section from '../ui/layout/Section.vue'
 
 interface Props extends OrderingProps {
   scope?: 'me' | 'all'
@@ -126,6 +127,9 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 </script>
 
 <template>
+  <Section h1="">
+
+  </Section>
     <Layout stack main v-title="labels.title">
       <h2>
         {{ t('components.library.Artists.header.browse') }}

front/src/components/ui/Button.vue

@@ -8,8 +8,6 @@ import { type AlignmentProps, align } from '~/composables/alignment'
 import Loader from '~/components/ui/Loader.vue'
 
 const props = defineProps<{
-  alignText?: 'left' | 'center' | 'right'
-  alignSelf?: 'start' | 'center' | 'end' | 'baseline'
   thin?: true
 
   isActive?: boolean

front/src/components/ui/layout/Section.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { RouterLinkProps } from 'vue-router';
+import type { RouterLinkProps } from 'vue-router'
 
-import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Toggle from '~/components/ui/Toggle.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
-import Activity from '~/components/ui/Activity.vue'
 
 const props = defineProps<{
   [M in 'tiny-items' | 'small-items' | 'medium-items']?: true }

front/ui-docs/components/ui/layout/section.md

@@ -108,6 +108,84 @@ const user: User = {
 
 # Layout section
 
+## Alignment
+
+```vue-html
+<Section alignLeft />
+```
+
+## Item width
+
+Do you want to align the header to tiny, small or medium items?
+
+```vue-html
+<Section medium-items />
+```
+
+## Heading
+
+`h1` or `h2` or `h3` `="title"`
+
+```vue-html
+<Section h3="My title" />
+```
+
+## Action
+
+Will be shown on the right side of the header
+
+### (a) Add a link:
+
+```vue-html
+<Section :action="{ text:'more...', to:'/' }" />
+```
+
+### (b) Or a button:
+
+```vue-html
+<Section :action="{ text:'more...', onClick:'loadMore' }" />
+```
+
+## Example
+
+```vue-html
+<Layout flex>
+<Toggle v-model="alignLeft" label="Left-align the layout"/>
+</Layout>
+
+---
+
+<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
+
+<LayoutSection :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+</LayoutSection>
+
+<LayoutSection
+    :alignLeft="alignLeft"
+    medium-items
+    h3="Activities (medium items)"
+    :action="{ text:'more...', to:'/' }"
+>
+    <Activity :track="track" :user="user" />
+    <Activity :track="track" :user="user" />
+    <Activity :track="track" :user="user" />
+</LayoutSection>
+
+</div>
+```
+
 <Layout flex>
 <Toggle v-model="alignLeft" label="Left-align the layout"/>
 </Layout>