mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-08 15:48:27 -05:00
moved many compoents to composition API
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user