22 lines
786 B
Vue
22 lines
786 B
Vue
<template>
|
|
<button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + (hasAlternatives ? 'New' : grade)" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
|
|
<span lang="en" class="sr-only">Design to Light</span>
|
|
<span v-if="hasAlternatives" lang="en" class="new">New</span>
|
|
</button>
|
|
</template>
|
|
<script setup>
|
|
import { storeToRefs } from "pinia";
|
|
import { usePageStore } from "../../stores/page";
|
|
import { computed } from "vue";
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
|
|
const hasAlternatives = computed(() => {
|
|
return page.value.designToLight.length > 1;
|
|
});
|
|
|
|
const grade = computed(() => {
|
|
if (hasAlternatives.value) return "new";
|
|
return page.value.designToLight[0].grades.global.letter;
|
|
});
|
|
</script>
|