mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 20:28:46 -05:00
89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
<template>
|
|
<v-dialog width="500" activator="parent" v-model="dialog">
|
|
<template v-slot:activator="{ props }">
|
|
<slot name="activator">
|
|
<v-btn v-bind="props" text="Open Dialog"></v-btn>
|
|
</slot>
|
|
</template>
|
|
|
|
<template v-slot:default="{ isActive }">
|
|
<v-card :title="title">
|
|
|
|
<v-card-text>
|
|
|
|
<v-number-input v-model="mutable_number" @update:modelValue="updateNumber('set')" control-variant="split" :min="0">
|
|
</v-number-input>
|
|
|
|
<v-btn-group divided class="d-flex">
|
|
<v-btn variant="tonal" class="flex-grow-1" @click="updateNumber( 'half')">
|
|
<i class="fas fa-divide"></i> 2
|
|
</v-btn>
|
|
<v-btn variant="tonal" class="flex-grow-1" @click="updateNumber('double')">
|
|
<i class="fas fa-times"></i> 2
|
|
</v-btn>
|
|
</v-btn-group>
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn class="float-right" rounded @click="dialog = false">Close</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
|
|
</template>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import {defineComponent, onMounted, ref, watch} from 'vue'
|
|
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
|
|
|
|
const emit = defineEmits({
|
|
change(payload: { number: number }) {
|
|
return payload
|
|
}
|
|
})
|
|
|
|
const props = defineProps({
|
|
number: {type: Number, default: 0},
|
|
title: {type: String, default: 'Number'}
|
|
})
|
|
|
|
const dialog = ref(false)
|
|
const mutable_number = ref(0)
|
|
|
|
watch(() => props.number, (newVal) => {
|
|
mutable_number.value = newVal
|
|
})
|
|
|
|
onMounted(() => {
|
|
mutable_number.value = props.number
|
|
})
|
|
|
|
/**
|
|
* perform given operation on linked number
|
|
* @param operation update mode
|
|
*/
|
|
function updateNumber(operation: string) {
|
|
if (operation === 'half') {
|
|
mutable_number.value = props.number / 2
|
|
}
|
|
if (operation === 'double') {
|
|
mutable_number.value = props.number * 2
|
|
}
|
|
if (operation === 'add') {
|
|
mutable_number.value = props.number + 1
|
|
}
|
|
if (operation === 'sub') {
|
|
mutable_number.value = props.number - 1
|
|
}
|
|
console.log(operation, mutable_number.value)
|
|
emit('change', {number: mutable_number.value})
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |