MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): [WIP] implement Pills (Multi-pill widget)

This commit is contained in:
upsiflu 2025-03-09 13:19:05 +01:00
parent 3ffa784027
commit 713c2fe34f
2 changed files with 77 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/components/ui/Pills.vue
View File

@ -234,13 +234,14 @@ watch(model, () => {
margin: 0 -4px; margin: 0 -4px;
padding:4px; padding:4px;
border-radius: 24px; border-radius: 22px;
min-height: 48px; min-height: 48px;
min-width: 160px; min-width: 160px;
gap: 4px;
> .pill { > .pill {
margin: 4px;
padding: 2px; padding: 2px;
&.static { &.static {
text-decoration: none; text-decoration: none;

74
front/ui-docs/components/ui/pills.md
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import Pill from '~/components/ui/Pill.vue';
import Pills from '~/components/ui/Pills.vue'; import Pills from '~/components/ui/Pills.vue';
import Spacer from '~/components/ui/Spacer.vue'; import Spacer from '~/components/ui/Spacer.vue';
import Layout from '~/components/ui/Layout.vue'; import Layout from '~/components/ui/Layout.vue';
@ -26,6 +27,12 @@ const customModel = ref({
}); });
const search = ref() const search = ref()
const countryInput = ref("")
const inputModel = ref({ input: "Custom", isEditing: false })
const update = (e)=>{console.log(e)}
</script> </script>
```ts ```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 ## No pills
```ts ```ts