From 713c2fe34fa73172d71110a19e18e5d6a4e58651 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 9 Mar 2025 13:19:05 +0100
Subject: [PATCH] feat(ui): [WIP] implement Pills (Multi-pill widget)

---
 front/src/components/ui/Pills.vue    |  5 +-
 front/ui-docs/components/ui/pills.md | 74 ++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/front/src/components/ui/Pills.vue b/front/src/components/ui/Pills.vue
index 9664f9509..753326b30 100644
--- a/front/src/components/ui/Pills.vue
+++ b/front/src/components/ui/Pills.vue
@@ -234,13 +234,14 @@ watch(model, () => {
       margin: 0 -4px;
 
       padding:4px;
-      border-radius: 24px;
+      border-radius: 22px;
 
       min-height: 48px;
       min-width: 160px;
 
+      gap: 4px;
+
       > .pill {
-        margin: 4px;
         padding: 2px;
         &.static {
           text-decoration: none;
diff --git a/front/ui-docs/components/ui/pills.md b/front/ui-docs/components/ui/pills.md
index 0fd327f69..63cd8ce89 100644
--- a/front/ui-docs/components/ui/pills.md
+++ b/front/ui-docs/components/ui/pills.md
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 
+import Pill from '~/components/ui/Pill.vue';
 import Pills from '~/components/ui/Pills.vue';
 import Spacer from '~/components/ui/Spacer.vue';
 import Layout from '~/components/ui/Layout.vue';
@@ -26,6 +27,12 @@ const customModel = ref({
 });
 
 const search = ref()
+
+const countryInput = ref("")
+
+const inputModel = ref({ input: "Custom", isEditing: false })
+
+const update = (e)=>{console.log(e)}
 </script>
 
 ```ts
@@ -49,6 +56,73 @@ If you place custom pills into `others`, the user will be able to select, edit a
 
 :::
 
+## Test
+
+<label for="selectTag">
+
+<b>Select tag</b>
+
+<Layout flex gap-12 style="background:transparent;padding:12px; outline-inset: -4px; border-radius: 24px;">
+
+  <Pill>
+    #Pell
+  </Pill>
+
+<input autocomplete="off" style="flex-grow: 1; min-width: 44px; flex-basis: 44px; padding: 12px 22px; margin: -12px; border-radius: inherit; outline: 1px solid red;" value="pill"></input>
+
+  <Pill>
+    VeryLongPill
+  </Pill>
+
+  <Pill>
+    VeryLongEvenLongerPill
+  </Pill>
+
+  <Pill v-model="inputModel"/>
+
+<input id="selectTag" size="50" list="tags" autocomplete="off" style="flex-grow: 1; min-width: 44px; flex-basis: 44px; padding: 12px 22px; margin: -12px; border-radius: inherit; outline: 1px solid red;" @input="update">
+</input>
+
+  <!-- https://www.sitepoint.com/html5-datalist-autocomplete/ -->
+
+  <datalist id="tags">
+    <option>Russia</option>
+    <option>Germany</option>
+    <option>UnitedKingdom</option>
+  </datalist>
+
+  <style scoped>
+    *:has(> input){
+      outline: 4px solid transparent;
+    }
+    *:has(> input:focus){
+      outline-color:var(--focus-ring-color)
+    }
+    input:focus+datalist {
+      position: absolute;
+      max-height: 20em;
+      border: 0 none;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    datalist option {
+      font-size: 0.8em;
+      padding: 0.3em 1em;
+      background-color: #ccc;
+      cursor: pointer;
+    }
+
+    datalist option:hover, datalist option:focus {
+      color: #fff;
+      background-color: #036;
+      outline: 0 none;
+    }
+  </style>
+
+</Layout>
+
+</label>
+
 ## No pills
 
 ```ts