actionable chart + date service

This commit is contained in:
Emily
2024-11-21 15:39:51 +01:00
parent 606eb0b035
commit b700b96191
7 changed files with 126 additions and 46 deletions

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
type Props = {
options: { label: string }[],
options: { label: string, disabled?: boolean }[],
currentIndex: number
}
@@ -17,9 +17,12 @@ const emits = defineEmits<{
<template>
<div class="flex gap-2 border-[1px] border-lyx-widget-lighter p-1 md:p-2 rounded-xl bg-lyx-widget">
<div @click="$emit('changeIndex', index)" v-for="(opt, index) of options"
<div @click="opt.disabled ? ()=>{}: $emit('changeIndex', index)" v-for="(opt, index) of options"
class="hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
:class="{ 'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index }">
:class="{
'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index && !opt.disabled,
'hover:!bg-lyx-widget !cursor-not-allowed text-lyx-widget-lighter': opt.disabled
}">
{{ opt.label }}
</div>
</div>