11 lines
1.1 KiB
Vue
11 lines
1.1 KiB
Vue
<template>
|
||
<section class="space-y-3" aria-label="Image style">
|
||
<p class="text-xs text-zinc-400">Click to include · right-click to exclude. Gold = positive, red = negative.</p>
|
||
<div v-for="(chips,group) in styleGroups" :key="group"><h3 class="mb-1 text-sm text-zinc-400">{{ group }}</h3><div class="flex flex-wrap gap-2"><button v-for="chip in chips" :key="chip" type="button" class="rounded-full border px-3 py-1 text-sm" :class="model.positive?.includes(chip)?'border-amber-300 bg-amber-300/15 text-amber-200':model.negative?.includes(chip)?'border-red-400 bg-red-400/15 text-red-200':'border-white/15'" :aria-pressed="model.positive?.includes(chip)||model.negative?.includes(chip)" @click="model=toggleStyle(model,chip)" @contextmenu.prevent="model=toggleStyle(model,chip,true)">{{ model.negative?.includes(chip)?'− ':model.positive?.includes(chip)?'+ ':'' }}{{ chip }}</button></div></div>
|
||
</section>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {styleGroups,toggleStyle} from '~/shared/studio2/styles.mjs'
|
||
const model=defineModel<any>({default:()=>({positive:[],negative:[]})})
|
||
</script>
|