mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-14 16:53:17 +01:00
32 lines
1006 B
Vue
32 lines
1006 B
Vue
<script setup lang="ts">
|
|
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
|
import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
|
|
import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
|
|
import { PlusIcon } from '@heroicons/vue/16/solid';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
canCreateMoreGoals: boolean;
|
|
}>();
|
|
|
|
const showCreateGoalModal = ref(false);
|
|
const showUpgradeModal = ref(false);
|
|
|
|
// The button stays visible when the goal limit is reached and explains the limit instead
|
|
function onClick() {
|
|
if (props.canCreateMoreGoals) {
|
|
showCreateGoalModal.value = true;
|
|
} else {
|
|
showUpgradeModal.value = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
|
|
<UpgradeModal v-model:show="showUpgradeModal" feature="goals" />
|
|
<SecondaryButton :icon="PlusIcon" @click="onClick">
|
|
<slot>Create Goal</slot>
|
|
</SecondaryButton>
|
|
</template>
|