3.1 KiB

Raw Permalink 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:

currents: these items are currently selected
others: these items 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.

Each item has a label of type string as well as a type of either:

custom: the user can edit its label or
preset: the user cannot edit its label

type Item = { type: 'custom' | 'preset', label: string }
type Model = {
  currents: Item[],
  others?: Item[],
}

No pills

const nullModel = ref({
  currents: []
}) satisfies Model;

<Pills v-model="nullModel" />

Static list of pills

const staticModel = ref({
  currents: [
    { label: "#noise", type: 'preset' },
    { label: "#fieldRecording", type: 'preset' },
    { label: "#experiment", type: 'preset' }
  ]
} satisfies Model);

<Pills v-model="staticModel"/>

Let users add, remove and edit custom pills

By adding custom options, you make the Pills instance interactive. Use reactive methods such as computed(...) and watch(...) to bind the model.

Note that this component will automatically add an empty pill to the end of the model because it made the implementation more straightforward. Use `filter(({ label }) => label !== '') to ignore it when reading the model.

Minimal example

const simpleCustomModel = ref({
  currents: [],
  others: []
})

<Pills v-model="simpleCustomModel"/>

Complex example

const customModel = ref({
  ...staticModel,
  others: [
    { label: "#MyTag1", type: 'custom' },
    { label: "#MyTag2", type: 'custom' }
  ]
} satisfies Model);

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

3.1 KiB Raw Permalink Blame History