3.6 KiB

Raw Blame History

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.

::: warning

If you place custom pills into others, the user will be able to select, edit and delete them but not to deselect them. If there is a use case for this, we have to design a good UX for deselecting custom pills.

:::

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

Use reactive methods such as computed(...) and watch(...) to query the model.

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

<Pills v-model="customModel" label="Custom" />

Combine Pills with other input fields

Ordering key

3.6 KiB Raw Blame History