Patrick Toal
c92f737612
All checks were successful
Build BAB Application Deployment Artifact / build (push) Successful in 2m4s
41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<template>
|
|
<q-select
|
|
v-model="boat"
|
|
:options="boats"
|
|
option-value="id"
|
|
option-label="name"
|
|
label="Boat"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-item-section avatar>
|
|
<q-img v-if="boat?.iconSrc" :src="boat?.iconSrc" />
|
|
<q-icon v-else name="sailing" />
|
|
</q-item-section>
|
|
</template>
|
|
|
|
<template v-slot:option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-section avatar>
|
|
<q-img :src="scope.opt.iconsrc" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ scope.opt.name }}</q-item-label>
|
|
<q-item-label caption>{{ scope.opt.class }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar v-if="scope.opt.defects">
|
|
<q-icon name="warning" color="warning" />
|
|
<q-tooltip class="bg-amber text-black shadow-7"
|
|
>This boat has notices. Select it to see details.
|
|
</q-tooltip>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Boat, useBoatStore } from 'src/stores/boat';
|
|
const boats = useBoatStore().boats;
|
|
const boat = <Boat | undefined>undefined;
|
|
</script>
|