```ts 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 ```ts const nullModel = ref({ current: [], }); ``` ```vue-html ``` ## Predefined list of pills ```ts const staticModel = ref({ current: ["#Noise", "#FieldRecording", "#Experiment"], }); ``` ```vue-html ``` ## Let users select and unselect pills Select a set of pills from presets, and add and remove custom ones ```ts const interactiveModel = ref({ current: ["#Noise", "#FieldRecording", "#Experiment"], others: ["#Melody", "#Rhythm"], }); ``` ```vue-html ``` ## Let users add, remove and edit custom pills ```ts const customModel = ref({ current: ["#Noise", "#FieldRecording", "#Experiment"], others: ["#Melody", "#Rhythm"], custom: ["#Noise"], }); ``` ```vue-html ```