mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
fcc5d99d40
* add vitest * initialize lib w/ tests * move to dev dep * run tests in CI * update file names * move api folder to lib * move api and api types to same folder * update generator outpath * rm husky * i guess i _did_ need those types * reorg types * extract validators into testable components * (WIP) start composable testing * fix import type * fix linter complaint * simplify icon type def * fix linter errors (maybe?) * rename client file for sorting
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
|
<div v-if="edit || (value && value.length > 0)">
|
|
<template v-if="edit">
|
|
<v-autocomplete
|
|
v-if="tools"
|
|
v-model="recipeTools"
|
|
:items="tools"
|
|
item-text="name"
|
|
multiple
|
|
return-object
|
|
deletable-chips
|
|
:prepend-icon="$globals.icons.potSteam"
|
|
chips
|
|
>
|
|
<template #selection="data">
|
|
<v-chip
|
|
:key="data.index"
|
|
small
|
|
class="ma-1"
|
|
:input-value="data.selected"
|
|
close
|
|
label
|
|
color="accent"
|
|
dark
|
|
@click:close="recipeTools.splice(data.index, 1)"
|
|
>
|
|
{{ data.item.name || data.item }}
|
|
</v-chip>
|
|
</template>
|
|
<template #append-outer>
|
|
<BaseDialog v-model="createDialog" :title="$t('tool.create-new-tool')" @submit="actions.createOne()">
|
|
<template #activator>
|
|
<v-btn icon @click="createDialog = true">
|
|
<v-icon> {{ $globals.icons.create }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-card-text>
|
|
<v-text-field v-model="workingToolData.name" :label="$t('tool.tool-name')"></v-text-field>
|
|
<v-checkbox v-model="workingToolData.onHand" :label="$t('tool.on-hand-checkbox-label')"></v-checkbox>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
</template>
|
|
</v-autocomplete>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, computed } from "@nuxtjs/composition-api";
|
|
import { RecipeTool } from "~/lib/api/types/recipe";
|
|
import { useTools } from "~/composables/recipes";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
value: {
|
|
type: Array as () => RecipeTool[],
|
|
required: true,
|
|
},
|
|
edit: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const { tools, actions, workingToolData } = useTools();
|
|
|
|
const createDialog = ref(false);
|
|
|
|
const recipeTools = computed({
|
|
get: () => {
|
|
return props.value;
|
|
},
|
|
set: (val) => {
|
|
context.emit("input", val);
|
|
},
|
|
});
|
|
|
|
return {
|
|
actions,
|
|
createDialog,
|
|
recipeTools,
|
|
tools,
|
|
workingToolData,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|