funkwhale/front/ui-docs/components/ui/pills.md

import Pills from "~/components/ui/Pills.vue";

Pills

Show a dense list of pills representing tags, categories or options. Users can select a subset of given options and create new ones.

The model you provide will be mutated by this component:

• current: these pills are currently selected
• others: these pills are currently not selected (but can be selected by the user). This prop is optional. By adding it, you allow users to change the selection.
• custom: these pills were created by the user. This prop is optional. Users can edit, add and remove any pill defined in this array. Note that the custom array should only contain pills that are either in current or in others.

No pills

const nullModel = ref({
  current: [],
});

<Pills v-model="nullModel" />

Predefined list of pills

const staticModel = ref({
  current: ["#Noise", "#FieldRecording", "#Experiment"],
});

<Pills v-model="staticModel" label="Tags" />

Let users select and unselect pills

Select a set of pills from presets, and add and remove custom ones

const interactiveModel = ref({
  current: ["#Noise", "#FieldRecording", "#Experiment"],
  others: ["#Melody", "#Rhythm"],
});

<Pills v-model="interactiveModel" label="Tags" />

Let users add, remove and edit custom pills

const customModel = ref({
  current: ["#Noise", "#FieldRecording", "#Experiment"],
  others: ["#Melody", "#Rhythm"],
  custom: ["#Noise"],
});

<Pills v-model="customModel" label="Custom Tags" can-add-pills />