132 lines
2.9 KiB
Markdown
132 lines
2.9 KiB
Markdown
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import Pills from '~/components/ui/Pills.vue';
|
|
|
|
type Item = { type: 'custom' | 'preset', label: string }
|
|
type Model = {
|
|
currents: Item[],
|
|
others?: Item[],
|
|
}
|
|
|
|
const nullModel = ref({
|
|
currents: []
|
|
} satisfies Model)
|
|
|
|
const staticModel = ref({
|
|
currents: [
|
|
{ label: "#Noise", type: 'preset' },
|
|
{ label: "#FieldRecording", type: 'preset' },
|
|
{ label: "#Experiment", type: 'preset' }
|
|
]
|
|
} satisfies Model);
|
|
|
|
const interactiveModel = ref({
|
|
...staticModel.value,
|
|
others: [
|
|
{ label: "#Melody", type: 'preset' },
|
|
{ label: "#Rhythm", type: 'preset' }
|
|
]
|
|
} satisfies Model);
|
|
|
|
const customModel = ref({
|
|
...staticModel.value,
|
|
others: [
|
|
{ label: "#MyTag1", type: 'custom' },
|
|
{ label: "#MyTag2", type: 'custom' }
|
|
]
|
|
} satisfies Model);
|
|
</script>
|
|
|
|
```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:
|
|
|
|
- `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
|
|
|
|
```ts
|
|
const nullModel = ref({
|
|
currents: []
|
|
}) as { currents: Item[] };
|
|
```
|
|
|
|
```vue-html
|
|
<Pills v-model="nullModel" />
|
|
```
|
|
|
|
<Pills v-model="nullModel" />
|
|
|
|
## Predefined list of pills
|
|
|
|
```ts
|
|
const staticModel = ref({
|
|
currents: [
|
|
{ label: "#Noise", type: 'preset' },
|
|
{ label: "#FieldRecording", type: 'preset' },
|
|
{ label: "#Experiment", type: 'preset' }
|
|
]
|
|
});
|
|
```
|
|
|
|
```vue-html
|
|
<Pills v-model="staticModel" label="Static Tags" />
|
|
```
|
|
|
|
<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
|
|
|
|
```ts
|
|
|
|
const interactiveModel = ref({
|
|
...staticModel,
|
|
others: [
|
|
{ label: "#Melody", type: 'preset' },
|
|
{ label: "#Rhythm", type: 'preset' }
|
|
]
|
|
});
|
|
```
|
|
|
|
```vue-html
|
|
<Pills v-model="interactiveModel" label="Interactive Tags" />
|
|
```
|
|
|
|
<Pills v-model="interactiveModel" label="Interactive Tags" />
|
|
|
|
## Let users add, remove and edit custom pills
|
|
|
|
Use [reactive](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref) methods [such as `computed(...)`](https://vuejs.org/guide/essentials/computed.html) and `watch(...)` to query the model.
|
|
|
|
```ts
|
|
const customModel = ref({
|
|
...staticModel,
|
|
others: [
|
|
{ label: "#MyTag1", type: 'custom' },
|
|
{ label: "#MyTag2", type: 'custom' }
|
|
]
|
|
});
|
|
```
|
|
|
|
```vue-html
|
|
<Pills v-model="customModel" label="Custom Tags" />
|
|
```
|
|
|
|
<Pills v-model="customModel" label="Custom Tags" />
|