mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-03 19:18:22 -05:00
1e90dc2022
* resolve file not found error and add constants * add group stats and storage functionality * generate new types * add statistics and storage cap graphs * fix: add loadFood query param #1103 * refactor to flex view
54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<v-card :min-width="minWidth" :to="to" :hover="to ? true : false">
|
|
<div class="d-flex flex-no-wrap">
|
|
<v-avatar class="ml-3 mr-0 mt-3" color="primary" size="36">
|
|
<v-icon color="white" class="pa-1">
|
|
{{ activeIcon }}
|
|
</v-icon>
|
|
</v-avatar>
|
|
<div>
|
|
<v-card-title class="text-subtitle-1 pt-2 pb-2">
|
|
<slot name="title"></slot>
|
|
</v-card-title>
|
|
<v-card-subtitle class="pb-2">
|
|
<slot name="value"></slot>
|
|
</v-card-subtitle>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
minWidth: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
to: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { $globals } = useContext();
|
|
|
|
const activeIcon = computed(() => {
|
|
return props.icon ?? $globals.icons.primary;
|
|
});
|
|
|
|
return {
|
|
activeIcon,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|