refactor(ui-docs): minor improvements

front/ui-docs/.vitepress/config.ts

@@ -14,6 +14,9 @@ export default defineConfig({
       {
         text: 'Using Color', link: '/using-color'
       },
+      {
+        text: 'Using Widths', link: '/using-widths'
+      },
       {
         text: 'Using Components', link: '/using-components'
       },

front/ui-docs/components/ui/button.md

@@ -1,9 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import { color } from '~/composables/colors.ts';
 
-const click = () => new Promise(resolve => setTimeout(resolve, 1000))
+const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
 
 # Button
@@ -363,7 +362,7 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 
 ```vue-html
 <Button icon="bi-three-dots-vertical" />
-<Button round icon="bi-x" />
+<Button round icon="bi-x large" />
 <Button primary icon="bi-save" buttonWidth/>
 <Button destructive icon="bi-trash">
   Delete
@@ -404,18 +403,18 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 ```
 
   <Layout class="preview solid primary" stack no-gap>
-    <Button min-content>·</Button>
+    <Button min-content>🐌</Button>
-    <Button tiny>·</Button>
+    <Button tiny>🐌</Button>
-    <Button buttonWidth>·</Button>
+    <Button buttonWidth>🐌</Button>
-    <Button small>·</Button>
+    <Button small>🐌</Button>
-    <Button auto>·</Button>
+    <Button auto>🐌</Button>
     <hr />
-    <Button alignSelf="start">·</Button>
+    <Button alignSelf="start">🐌</Button>
-    <Button alignSelf="center">·</Button>
+    <Button alignSelf="center">🐌</Button>
-    <Button alignSelf="end">·</Button>
+    <Button alignSelf="end">🐌</Button>
     <hr />
-    <Button alignText="left">·</Button>
+    <Button alignText="left">🐌</Button>
-    <Button alignText="center">·</Button>
+    <Button alignText="center">🐌</Button>
-    <Button alignText="right">·</Button>
+    <Button alignText="right">🐌</Button>
   </Layout>
 </Layout>

front/ui-docs/components/ui/card.md

@@ -111,11 +111,11 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
 
 ```vue-html{3,8-9}
 <Card
-  title="For music lovers"
+  title=" smallFor music lovers"
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
 />
 
-<Card
+<Card small
   title="For music lovers"
   :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
             style:'withPadding' }"
@@ -123,12 +123,12 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
 ```
 
 </div>
-<Card
+<Card small
   title="For music lovers"
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
 />
 
-<Card
+<Card small
     title="For music lovers"
     :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
               style:'withPadding' }"
@@ -142,14 +142,14 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
 <div style="grid-column: span 5; grid-row: span 2;">
 
 ```vue-html{4,10}
-<Card large
+<Card
   title="Uploading..."
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
   icon="bi-cloud-arrow-up-fill"
 />
 
 
-<Card large
+<Card
   to="./"
   title="Find out more"
   icon="bi-box-arrow-up-right"
@@ -160,13 +160,13 @@ Visit the Docs and learn more about developing Funkwhale
 
 </div>
 
-<Card medium
+<Card
   title="Uploading..."
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
   icon="bi-cloud-arrow-up-fill"
 />
 
-<Card medium
+<Card
   to="./"
   title="Find out more"
   icon="bi-box-arrow-up-right">
@@ -280,7 +280,7 @@ If there are multiple actions, they will be presented in a row:
       >
         Items
       </Button>
-      <Spacer h />
+      <Spacer h grow />
       <Button primary @click="alert('Yay')">
         OK
       </Button>

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

@@ -134,7 +134,7 @@ const size = ref(1);
 </Layout>
 ```
 
-<div class="preview" style="flex-wrap:no-wrap">
+<div class="preview" style="flex-wrap:nowrap">
 <Layout flex style="height:30em">
 
 <Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>

front/ui-docs/designing-pages.md

@@ -127,18 +127,15 @@ The page grid consists of 46px wide tracks, separated by 32px wide gaps.
 Resize the window to observe how the items move.
 
 <Layout flex>
-<Toggle v-model="alignLeft" />
+<Toggle v-model="alignLeft" title="Left-align the layout"/> 
-Click Toggle to left-align the layout.
 </Layout>
 
 ---
 
 <Layout
-grid="auto / repeat(auto-fit, calc(46px _ 3 + 32px _ 2))"
+    grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
-v-bind="attributes"
+    v-bind="attributes"
-
 >
-
     <!-- The title row's width is a multiple of 3 rows -->
     <Layout flex no-gap
         style="grid-column: 1 / -1; align-self: baseline;"
@@ -160,7 +157,6 @@ v-bind="attributes"
             Show all
         </Button>
     </Layout>
-
 </Layout>
 <Layout solid default
     style="position:relative;"
@@ -190,11 +186,9 @@ v-bind="attributes"
 </Layout>
 
 <Layout
-grid="auto / repeat(auto-fit, calc(46px _ 4 + 32px _ 3))"
+    grid="auto / repeat(auto-fit, calc(46px * 4 + 32px * 3))"
-v-bind="attributes"
+    v-bind="attributes"
-
 >
-
     <Layout flex no-gap
         style="grid-column: 1 / -1; align-self: baseline;"
     >

front/ui-docs/using-color.md

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { color, setColors } from "~/composables/colors.ts"
 import { useRoute } from "vue-router"
 
@@ -59,12 +59,12 @@ import { color } from "~/composables/colors.ts";
 </script>
 
 <template>
-  <div v-bind="setColors('primary solid interactive raised')" />
+  <div v-bind="color({}, ['primary', 'solid', 'interactive', 'raised'])" />
 </template>
 ```
 
 <div class="preview">
-  <div :class="$style.swatch" v-bind="setColors('primary solid interactive raised')" />
+  <div :class="$style.swatch" v-bind="color({}, ['primary', 'solid', 'interactive', 'raised'])" />
 </div>
 
 </Layout>

front/ui-docs/using-widths.md

@@ -0,0 +1,39 @@
+<script setup>
+import { color, setColors } from "~/composables/colors.ts"
+import { useRoute } from "vue-router"
+
+import Button from "~/components/ui/Button.vue"
+import Card from "~/components/ui/Card.vue"
+import Link from "~/components/ui/Link.vue"
+import Layout from "~/components/ui/Layout.vue"
+import Alert from "~/components/ui/Alert.vue"
+import Spacer from "~/components/ui/layout/Spacer.vue"
+
+const route = useRoute();
+const here = route.path
+</script>
+
+# Using widths
+
+## Add width via prop
+
+<Layout flex class="preview" style="flex-grow: 1">
+
+```vue-html
+<Card min-content title='min-content' />
+<Card tiny title='tiny' />
+<Card buttonWidth title='buttonWidth' />
+<Card small title='small' />
+<Card medium title='medium' />
+<Card auto title='auto' />
+<Card full title='full' />
+```
+
+  <Card min-content title='min-content' />
+  <Card tiny title='tiny' />
+  <Card buttonWidth title='buttonWidth' />
+  <Card small title='small' />
+  <Card medium title='medium' />
+  <Card auto title='auto' />
+  <Card full title='full' />
+</Layout>