speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Pillbar modelValue

Browse source
This commit is contained in:
Samuel Lorch 2023-04-02 19:22:45 +02:00
parent 2c02451da7
commit 2fb089ba73
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,18 +6,20 @@ const props = defineModel<{
icon: Component, icon: Component,
selected: boolean, selected: boolean,
}[], }[],
modelValue: number,
}>(); }>();
let { options } = $(props); let { options, modelValue } = $(props);
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'selectionChanged'): void (event: 'selectionChanged'): void
}>(); }>();
function select(option: any) { function select(option: any, index: number) {
for(let opt of options) { for(let opt of options) {
opt.selected = false; opt.selected = false;
} }
option.selected = true; option.selected = true;
modelValue = index;
emit('selectionChanged'); emit('selectionChanged');
console.debug("selected", options); console.debug("selected", options);
} }
@ -26,7 +28,7 @@ function select(option: any) {
<template> <template>
<div> <div>
<button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(option)"> <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(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>