mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 05:25:26 +02:00
Feature/shopping lists second try (#927)
* generate types * use generated types * ui updates * init button link for common styles * add links * setup label views * add delete confirmation * reset when not saved * link label to foods and auto set when adding to shopping list * generate types * use inheritence to manage exception handling * fix schema generation and add test for open_api generation * add header to api docs * move list consilidation to service * split list and list items controller * shopping list/list item tests - PARTIAL * enable recipe add/remove in shopping lists * generate types * linting * init global utility components * update types and add list item api * fix import cycle and database error * add container and border classes * new recipe list component * fix tests * breakout item editor * refactor item editor * update bulk actions * update input / color contrast * type generation * refactor controller dependencies * include food/unit editor * remove console.logs * fix and update type generation * fix incorrect type for column * fix postgres error * fix delete by variable * auto remove refs * fix typo
This commit is contained in:
Hayden
GitHub
parent
f794208862
commit
92cf97e401
66 changed files with 2556 additions and 685 deletions
33
frontend/components/Domain/Recipe/RecipeList.vue
Normal file
33
frontend/components/Domain/Recipe/RecipeList.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<v-list>
|
||||
<v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
|
||||
<v-list-item-avatar>
|
||||
<v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ recipe.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { RecipeSummary } from "~/types/api-types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
recipes: {
|
||||
type: Array as () => RecipeSummary[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<v-chip v-bind="$attrs" label :color="label.color || undefined" :text-color="textColor">
|
||||
{{ label.name }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
label: {
|
||||
type: Object as () => MultiPurposeLabelSummary,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const textColor = computed(() => {
|
||||
if (!props.label.color) {
|
||||
return "black";
|
||||
}
|
||||
|
||||
return pickTextColorBasedOnBgColorAdvanced(props.label.color, "white", "black");
|
||||
});
|
||||
|
||||
/*
|
||||
Function to pick the text color based on the background color.
|
||||
|
||||
Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
|
||||
*/
|
||||
|
||||
const ACCESSIBILITY_THRESHOLD = 0.179;
|
||||
|
||||
function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
|
||||
const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
|
||||
const r = parseInt(color.substring(0, 2), 16); // hexToR
|
||||
const g = parseInt(color.substring(2, 4), 16); // hexToG
|
||||
const b = parseInt(color.substring(4, 6), 16); // hexToB
|
||||
const uicolors = [r / 255, g / 255, b / 255];
|
||||
const c = uicolors.map((col) => {
|
||||
if (col <= 0.03928) {
|
||||
return col / 12.92;
|
||||
}
|
||||
return Math.pow((col + 0.055) / 1.055, 2.4);
|
||||
});
|
||||
const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
|
||||
return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
|
||||
}
|
||||
|
||||
return {
|
||||
textColor,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,65 +1,64 @@
|
|||
<template>
|
||||
<div v-if="!edit" class="small-checkboxes d-flex justify-space-between align-center">
|
||||
<v-checkbox v-model="listItem.checked" hide-details dense :label="listItem.note" @change="$emit('checked')">
|
||||
<div v-if="!edit" class="d-flex justify-space-between align-center">
|
||||
<v-checkbox
|
||||
v-model="listItem.checked"
|
||||
color="null"
|
||||
hide-details
|
||||
dense
|
||||
:label="listItem.note"
|
||||
@change="$emit('checked')"
|
||||
>
|
||||
<template #label>
|
||||
<div>
|
||||
{{ listItem.quantity }} <v-icon size="16" class="mx-1"> {{ $globals.icons.close }} </v-icon>
|
||||
{{ listItem.note }}
|
||||
<div :class="listItem.checked ? 'strike-through' : ''">
|
||||
{{ displayText }}
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
<v-chip v-if="listItem.label" class="ml-auto mt-2" small label>
|
||||
{{ listItem.label.name }}
|
||||
</v-chip>
|
||||
<v-menu offset-x left>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn small class="ml-2 mt-2 handle" icon v-bind="attrs" v-on="on">
|
||||
<v-icon>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
|
||||
<v-list-item-title>{{ action.text }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<MultiPurposeLabel v-if="listItem.label" :label="listItem.label" class="ml-auto mt-2" small />
|
||||
<div style="min-width: 72px">
|
||||
<v-menu offset-x left min-width="125px">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn small class="ml-2 mt-2 handle" icon v-bind="attrs" v-on="on">
|
||||
<v-icon>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
|
||||
<v-list-item-title>{{ action.text }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn small class="ml-2 mt-2 handle" icon @click="edit = true">
|
||||
<v-icon>
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="my-1">
|
||||
<v-card outlined>
|
||||
<v-card-text>
|
||||
<v-textarea v-model="listItem.note" hide-details label="Note" rows="1" auto-grow></v-textarea>
|
||||
<div style="max-width: 300px" class="mt-3">
|
||||
<v-autocomplete
|
||||
v-model="listItem.labelId"
|
||||
name=""
|
||||
:items="labels"
|
||||
item-value="id"
|
||||
hide-details
|
||||
item-text="name"
|
||||
clearable
|
||||
:prepend-inner-icon="$globals.icons.tags"
|
||||
>
|
||||
</v-autocomplete>
|
||||
<v-checkbox v-model="listItem.isFood" hide-details label="Treat list item as a recipe ingredient" />
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions class="ma-0 pt-0 pb-1 justify-end">
|
||||
<v-btn icon @click="save">
|
||||
<v-icon>
|
||||
{{ $globals.icons.save }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
<div v-else class="mb-1 mt-6">
|
||||
<ShoppingListItemEditor
|
||||
v-model="listItem"
|
||||
:labels="labels"
|
||||
:units="units"
|
||||
:foods="foods"
|
||||
@save="save"
|
||||
@cancel="edit = !edit"
|
||||
@delete="$emit('delete')"
|
||||
@toggle-foods="listItem.isFood = !listItem.isFood"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
|
||||
import { Label } from "~/api/class-interfaces/group-multiple-purpose-labels";
|
||||
import { ShoppingListItemCreate } from "~/api/class-interfaces/group-shopping-lists";
|
||||
import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
|
||||
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
|
||||
import { ShoppingListItemCreate } from "~/types/api-types/group";
|
||||
import { MultiPurposeLabelOut } from "~/types/api-types/labels";
|
||||
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
|
||||
import { getDisplayText } from "~/composables/use-display-text";
|
||||
|
||||
interface actions {
|
||||
text: string;
|
||||
|
|
@ -71,24 +70,33 @@ const contextMenu: actions[] = [
|
|||
text: "Edit",
|
||||
event: "edit",
|
||||
},
|
||||
// {
|
||||
// text: "Delete",
|
||||
// event: "delete",
|
||||
// },
|
||||
// {
|
||||
// text: "Move",
|
||||
// event: "move",
|
||||
// },
|
||||
{
|
||||
text: "Delete",
|
||||
event: "delete",
|
||||
},
|
||||
{
|
||||
text: "Transfer",
|
||||
event: "transfer",
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
components: { ShoppingListItemEditor, MultiPurposeLabel },
|
||||
props: {
|
||||
value: {
|
||||
type: Object as () => ShoppingListItemCreate,
|
||||
required: true,
|
||||
},
|
||||
labels: {
|
||||
type: Array as () => Label[],
|
||||
type: Array as () => MultiPurposeLabelOut[],
|
||||
required: true,
|
||||
},
|
||||
units: {
|
||||
type: Array as () => IngredientUnit[],
|
||||
required: true,
|
||||
},
|
||||
foods: {
|
||||
type: Array as () => IngredientFood[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
|
@ -114,10 +122,6 @@ export default defineComponent({
|
|||
edit.value = false;
|
||||
}
|
||||
|
||||
function handle(event: string) {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
const updatedLabels = computed(() => {
|
||||
return props.labels.map((label) => {
|
||||
return {
|
||||
|
|
@ -127,9 +131,13 @@ export default defineComponent({
|
|||
});
|
||||
});
|
||||
|
||||
const displayText = computed(() =>
|
||||
getDisplayText(listItem.value.note, listItem.value.quantity, listItem.value.food, listItem.value.unit)
|
||||
);
|
||||
|
||||
return {
|
||||
displayText,
|
||||
updatedLabels,
|
||||
handle,
|
||||
save,
|
||||
contextHandler,
|
||||
edit,
|
||||
|
|
@ -139,3 +147,9 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.strike-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card outlined>
|
||||
<v-card-text class="pb-3 pt-1">
|
||||
<div v-if="listItem.isFood" class="d-md-flex align-center mb-2" style="gap: 20px">
|
||||
<InputLabelType
|
||||
v-model="listItem.food"
|
||||
:items="foods"
|
||||
:item-id.sync="listItem.foodId"
|
||||
label="Food"
|
||||
:icon="$globals.icons.foods"
|
||||
/>
|
||||
<InputLabelType
|
||||
v-model="listItem.unit"
|
||||
:items="units"
|
||||
:item-id.sync="listItem.unitId"
|
||||
label="Units"
|
||||
:icon="$globals.icons.units"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-md-flex align-center" style="gap: 20px">
|
||||
<v-textarea v-model="listItem.note" hide-details label="Note" rows="1" auto-grow></v-textarea>
|
||||
</div>
|
||||
<div class="d-flex align-end" style="gap: 20px">
|
||||
<div>
|
||||
<InputQuantity v-model="listItem.quantity" />
|
||||
</div>
|
||||
<div style="max-width: 300px" class="mt-3 mr-auto">
|
||||
<InputLabelType v-model="listItem.label" :items="labels" :item-id.sync="listItem.labelId" label="Label" />
|
||||
</div>
|
||||
|
||||
<v-menu
|
||||
v-if="listItem.recipeReferences && listItem.recipeReferences.length > 0"
|
||||
open-on-hover
|
||||
offset-y
|
||||
left
|
||||
top
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-icon class="mt-auto" icon v-bind="attrs" color="warning" v-on="on">
|
||||
{{ $globals.icons.alert }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-card max-width="350px" class="left-warning-border">
|
||||
<v-card-text>
|
||||
This item is linked to one or more recipe. Adjusting the units or foods will yield unexpected results
|
||||
when adding or removing the recipe from this list.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card-actions class="ma-0 pt-0 pb-1 justify-end">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.close,
|
||||
text: $t('general.cancel'),
|
||||
event: 'cancel',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.foods,
|
||||
text: 'Toggle Food',
|
||||
event: 'toggle-foods',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.save,
|
||||
text: $t('general.save'),
|
||||
event: 'save',
|
||||
},
|
||||
]"
|
||||
@save="$emit('save')"
|
||||
@cancel="$emit('cancel')"
|
||||
@delete="$emit('delete')"
|
||||
@toggle-foods="listItem.isFood = !listItem.isFood"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from "@nuxtjs/composition-api";
|
||||
import { ShoppingListItemCreate, ShoppingListItemOut } from "~/types/api-types/group";
|
||||
import { MultiPurposeLabelOut } from "~/types/api-types/labels";
|
||||
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Object as () => ShoppingListItemCreate | ShoppingListItemOut,
|
||||
required: true,
|
||||
},
|
||||
labels: {
|
||||
type: Array as () => MultiPurposeLabelOut[],
|
||||
required: true,
|
||||
},
|
||||
units: {
|
||||
type: Array as () => IngredientUnit[],
|
||||
required: true,
|
||||
},
|
||||
foods: {
|
||||
type: Array as () => IngredientFood[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const listItem = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
return {
|
||||
listItem,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "vbase-nuxt",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
31
frontend/components/global/ButtonLink.vue
Normal file
31
frontend/components/global/ButtonLink.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-btn outlined class="rounded-xl my-1 mx-1" :to="to">
|
||||
<v-icon v-if="icon != ''" left>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
{{ text }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "Link",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
25
frontend/components/global/DevDumpJson.vue
Normal file
25
frontend/components/global/DevDumpJson.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<pre>
|
||||
{{ prettyJson }}
|
||||
</pre>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const prettyJson = JSON.stringify(props.data, null, 2);
|
||||
|
||||
return {
|
||||
prettyJson,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
66
frontend/components/global/InputColor.vue
Normal file
66
frontend/components/global/InputColor.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<v-text-field v-model="inputVal" label="Color">
|
||||
<template #prepend>
|
||||
<v-btn class="elevation-0" small height="30px" width="30px" :color="inputVal || 'grey'" @click="setRandomHex">
|
||||
<v-icon color="white">
|
||||
{{ $globals.icons.refreshCircle }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-menu v-model="menu" left nudge-left="30" nudge-top="20" :close-on-content-click="false">
|
||||
<template #activator="{ on }">
|
||||
<v-icon v-on="on">
|
||||
{{ $globals.icons.formatColorFill }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text class="pa-0">
|
||||
<v-color-picker v-model="inputVal" flat hide-inputs show-swatches swatches-max-height="200" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const menu = ref(false);
|
||||
|
||||
const inputVal = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
function getRandomHex() {
|
||||
return "#000000".replace(/0/g, function () {
|
||||
return (~~(Math.random() * 16)).toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function setRandomHex() {
|
||||
inputVal.value = getRandomHex();
|
||||
}
|
||||
|
||||
return {
|
||||
menu,
|
||||
setRandomHex,
|
||||
inputVal,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
87
frontend/components/global/InputLabelType.vue
Normal file
87
frontend/components/global/InputLabelType.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<v-autocomplete
|
||||
v-model="itemVal"
|
||||
v-bind="$attrs"
|
||||
item-text="name"
|
||||
return-object
|
||||
:items="items"
|
||||
:prepend-icon="icon || $globals.icons.tags"
|
||||
clearable
|
||||
hide-details
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
/**
|
||||
* The InputLabelType component is a wrapper for v-autocomplete. It is used to abstract the selection functionality
|
||||
* of some common types within Mealie. This can mostly be used with any type of object provided it has a name and id
|
||||
* property. The name property is used to display the name of the object in the autocomplete dropdown. The id property
|
||||
* is used to store the id of the object in the itemId property.
|
||||
*
|
||||
* Supported Types
|
||||
* - MultiPurposeLabel
|
||||
* - RecipeIngredientFood
|
||||
* - RecipeIngredientUnit
|
||||
*
|
||||
* TODO: Add RecipeTag / Category to this selector
|
||||
* Future Supported Types
|
||||
* - RecipeTags
|
||||
* - RecipeCategories
|
||||
*
|
||||
* Both the ID and Item can be synced. The item can be synced using the v-model syntax and the itemId can be synced
|
||||
* using the .sync syntax `item-id.sync="item.labelId"`
|
||||
*/
|
||||
import { defineComponent, computed } from "@nuxtjs/composition-api";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Object as () => MultiPurposeLabelSummary | IngredientFood | IngredientUnit,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
items: {
|
||||
type: Array as () => Array<MultiPurposeLabelSummary | IngredientFood | IngredientUnit>,
|
||||
required: true,
|
||||
},
|
||||
itemId: {
|
||||
type: [String, Number],
|
||||
default: undefined,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const itemIdVal = computed({
|
||||
get: () => {
|
||||
return props.itemId || undefined;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("update:item-id", val);
|
||||
},
|
||||
});
|
||||
|
||||
const itemVal = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
itemIdVal.value = val?.id || undefined;
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
itemVal,
|
||||
itemIdVal,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
64
frontend/components/global/InputQuantity.vue
Normal file
64
frontend/components/global/InputQuantity.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="d-flex align-center" style="max-width: 60px">
|
||||
<v-text-field
|
||||
v-model.number="quantity"
|
||||
hide-details
|
||||
label="Qty"
|
||||
:min="min"
|
||||
:max="max"
|
||||
type="number"
|
||||
class="rounded-xl"
|
||||
small
|
||||
text
|
||||
>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
name: "VInputNumber",
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: "Qty",
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 9999,
|
||||
},
|
||||
rules: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const quantity = computed({
|
||||
get: () => {
|
||||
return Number(props.value);
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
quantity,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue