From b20456e4270fb98a7f764fdad70e727a495e8c12 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 15 Jan 2025 10:35:43 +0100
Subject: [PATCH] fix(ui-docs): imports and code examples

---
 front/ui-docs/components/ui/pills.md | 19 +++++++++++++++++++
 front/ui-docs/using-color.md         |  4 ++--
 front/ui-docs/using-width.md         |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/front/ui-docs/components/ui/pills.md b/front/ui-docs/components/ui/pills.md
index 8113ba5dc..b23369ec9 100644
--- a/front/ui-docs/components/ui/pills.md
+++ b/front/ui-docs/components/ui/pills.md
@@ -26,12 +26,25 @@ import Pills from "~/components/ui/Pills.vue"
 
 # Pills
 
+```vue-html
+<Layout class="preview" style="padding:16px">
+  <Pills v-model="staticModel" label="Tags" />
+</Layout>
+```
+
 <Layout class="preview" style="padding:16px">
   <Pills v-model="staticModel" label="Tags" />
 </Layout>
 
 Select a set of pills from presets, and add and remove custom ones
 
+```vue-html
+<Layout class="preview" style="padding:16px">
+  <Pills v-model="interactiveModel" label="Tags" />
+  <Input label="Label" placeholder="Placeholder"></Input>
+</Layout>
+```
+
 <Layout class="preview" style="padding:16px">
   <Pills v-model="interactiveModel" label="Tags" />
   <Input label="Label" placeholder="Placeholder"></Input>
@@ -39,6 +52,12 @@ Select a set of pills from presets, and add and remove custom ones
 
 ## No pills
 
+```vue-html
+<Layout class="preview" style="padding:16px">
+  <Pills v-model="nullModel"  />
+</Layout>
+```
+
 <Layout class="preview" style="padding:16px">
   <Pills v-model="nullModel"  />
 </Layout>
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index 57a0d1011..a102e8582 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -7,7 +7,7 @@ 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"
+import Spacer from "~/components/ui/Spacer.vue"
 
 const route = useRoute();
 const here = route.path
@@ -586,7 +586,7 @@ Here is the meaning the styles should convey:
 
 ---
 
-<Layout flex style="--gap:4px; margin: 0 -50px;">
+<Layout flex style="--gap:4px;">
 
 <Card min-content title="Default" solid default>
   <span>
diff --git a/front/ui-docs/using-width.md b/front/ui-docs/using-width.md
index fb3471e27..cc5e4cc93 100644
--- a/front/ui-docs/using-width.md
+++ b/front/ui-docs/using-width.md
@@ -3,7 +3,7 @@ import Card from "~/components/ui/Card.vue"
 import Button from "~/components/ui/Button.vue"
 import Link from "~/components/ui/Link.vue"
 import Layout from "~/components/ui/Layout.vue"
-import Spacer from "~/components/ui/layout/Spacer.vue";
+import Spacer from "~/components/ui/Spacer.vue";
 </script>
 
 # Using widths