moved many compoents to composition API

This commit is contained in:
vabene1111
2024-04-21 15:58:31 +02:00
parent ce6c43fb62
commit e040a10096
13 changed files with 342 additions and 347 deletions

View File

@@ -1,18 +1,18 @@
<template>
<tr>
<template v-if="ingredient.isHeader">
<td colspan="4"><b>{{ ingredient.note }}</b></td>
<template v-if="props.ingredient.isHeader">
<td colspan="4"><b>{{ props.ingredient.note }}</b></td>
</template>
<template v-else>
<td>{{ ingredient.amount }}</td>
<td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
<td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
<td v-if="showNotes">
<v-icon class="far fa-comment float-right" v-if="ingredient.note != '' && ingredient.note != undefined" @click="show_tooltip = !show_tooltip">
<v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
<td>{{ props.ingredient.amount }}</td>
<td><span v-if="props.ingredient.unit != null">{{ props.ingredient.unit.name }}</span></td>
<td><span v-if="props.ingredient.food != null">{{ props.ingredient.food.name }}</span></td>
<td v-if="props.showNotes">
<v-icon class="far fa-comment float-right" v-if="props.ingredient.note != '' && props.ingredient.note != undefined" @click="showTooltip = !showTooltip">
<v-tooltip v-model="showTooltip" activator="parent" location="start">{{ props.ingredient.note }}</v-tooltip>
</v-icon>
</td>
<td v-if="draggable">
<td v-if="props.draggable">
<i class="fas fa-grip-lines drag-handle cursor-move"></i>
</td>
</template>
@@ -20,32 +20,26 @@
</tr>
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'
<script setup lang="ts">
import {PropType, ref} from 'vue'
import {Ingredient} from "@/openapi";
export default defineComponent({
name: "IngredientsTableRow",
components: {},
props: {
ingredient: {
type: {} as PropType<Ingredient>,
required: true
},
showNotes: {
type: Boolean,
default: true
},
draggable: {
type: Boolean,
},
const props = defineProps({
ingredient: {
type: {} as PropType<Ingredient>,
required: true
},
data() {
return {
show_tooltip: false,
}
showNotes: {
type: Boolean,
default: true
},
draggable: {
type: Boolean,
},
})
const showTooltip = ref(false)
</script>
<style scoped>