speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 19:08:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

PillBox use Index or option key as modelValue

Browse source
This commit is contained in:
Samuel Lorch 2023-04-04 00:01:02 +02:00
parent d7f2eb64f9
commit c8fada4e0c
1 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/inputs/PillBar.vue
View file

@ -3,16 +3,29 @@
const props = defineModel<{ const props = defineModel<{
options: { options: {
name: string, name: string,
key: string,
icon: Component, icon: Component,
selected: boolean,
}[], }[],
modelValue: number, modelValue: number | string,
useIndex: boolean,
}>(); }>();
let { options, modelValue } = $(props); let { options, modelValue, useIndex } = $(props);
function setSelection(option: any, index: number){
if (useIndex) {
modelValue = index
} else {
modelValue = option.key
}
}
onMounted(async() => { onMounted(async() => {
if (modelValue === undefined) { if (modelValue === undefined) {
modelValue = 0 if (useIndex) {
modelValue = 0
} else {
modelValue = options[0].key
}
} }
}); });
@ -20,7 +33,7 @@ onMounted(async() => {
<template> <template>
<div> <div>
<button class="option" v-for="(option, index) in options" :key="index" :class="{selected: modelValue == index}" @click="modelValue = index"> <button class="option" v-for="(option, index) in options" :key="index" :class="{selected: modelValue == index || modelValue == option.key}" @click="setSelection(option, index)">
<i class="material-icons" v-if="option.icon">{{ option.icon }}</i> <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
{{ option.name }} {{ option.name }}
</button> </button>