86c99b10a2
* Activate more linting rules from eslint and typescript * Properly add VForm as type information * Fix usage of native types * Fix more linting issues * Rename vuetify types file, add VTooltip * Fix some more typing problems * Use composition API for more components * Convert RecipeRating * Convert RecipeNutrition * Convert more components to composition API * Fix globals plugin for type checking * Add missing icon types * Fix vuetify types in Nuxt context * Use composition API for RecipeActionMenu * Convert error.vue to composition API * Convert RecipeContextMenu to composition API * Use more composition API and type checking in recipe/create * Convert AppButtonUpload to composition API * Fix some type checking in RecipeContextMenu * Remove unused components BaseAutoForm and BaseColorPicker * Convert RecipeCategoryTagDialog to composition API * Convert RecipeCardSection to composition API * Convert RecipeCategoryTagSelector to composition API * Properly import vuetify type definitions * Convert BaseButton to composition API * Convert AutoForm to composition API * Remove unused requests API file * Remove static routes from recipe API * Fix more type errors * Convert AppHeader to composition API, fixing some search bar focus problems * Convert RecipeDialogSearch to composition API * Update API types from pydantic models, handle undefined values * Improve more typing problems * Add types to other plugins * Properly type the CRUD API access * Fix typing of static image routes * Fix more typing stuff * Fix some more typing problems * Turn off more rules
76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<div class="mx-auto">
|
|
<v-progress-circular :width="size.width" :size="size.size" color="primary lighten-2" indeterminate>
|
|
<div class="text-center">
|
|
<v-icon :size="size.icon" color="primary lighten-2">
|
|
{{ $globals.icons.primary }}
|
|
</v-icon>
|
|
<div v-if="large" class="text-small">
|
|
<slot>
|
|
{{ small ? "" : waitingText }}
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</v-progress-circular>
|
|
<div v-if="!large" class="text-small">
|
|
<slot>
|
|
{{ small ? "" : waitingText }}
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
loading: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
medium: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
large: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const size = computed(() => {
|
|
if (props.small) {
|
|
return {
|
|
width: 2,
|
|
icon: 30,
|
|
size: 50,
|
|
};
|
|
} else if (props.large) {
|
|
return {
|
|
width: 4,
|
|
icon: 120,
|
|
size: 200,
|
|
};
|
|
}
|
|
return {
|
|
width: 3,
|
|
icon: 75,
|
|
size: 125,
|
|
};
|
|
});
|
|
|
|
const { i18n } = useContext();
|
|
const waitingText = i18n.t("general.loading-recipes");
|
|
|
|
return {
|
|
size,
|
|
waitingText,
|
|
};
|
|
},
|
|
});
|
|
</script>
|