2.9 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:

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

No pills

const nullModel = ref({
  currents: []
}) as { currents: Item[] };

<Pills v-model="nullModel" />

Predefined list of pills

const staticModel = ref({
  currents: [
    { label: "#Noise", type: 'preset' },
    { label: "#FieldRecording", type: 'preset' },
    { label: "#Experiment", type: 'preset' }
  ]
});

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

Let users select and unselect pills

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


const interactiveModel = ref({
  ...staticModel,
  others: [
    { label: "#Melody", type: 'preset' },
    { label: "#Rhythm", type: 'preset' }
  ]
});

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

Let users add, remove and edit custom pills

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

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

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

2.9 KiB Raw Blame History