mirror of
				https://github.com/mealie-recipes/mealie.git
				synced 2025-11-03 18:53:17 -05:00 
			
		
		
		
	* extended query filter to accept nested tables * decoupled timeline api from recipe slug * modified frontend to use simplified events api * fixed nested loop index ghosting * updated existing tests * gave mypy a snack * added tests for nested queries * fixed "last made" render error * decoupled recipe timeline from dialog * removed unused props * tweaked recipe get_all to accept ids * created group global timeline added new timeline page to sidebar reformatted the recipe timeline added vertical option to recipe card mobile * extracted timeline item into its own component * fixed apploader centering * added paginated scrolling to recipe timeline * added sort direction config fixed infinite scroll on dialog fixed hasMore var not resetting during instantiation * added sort direction to user preferences * updated API docs with new query filter feature * better error tracing * fix for recipe not found response * simplified recipe crud route for slug/id added test for fetching by slug/id * made query filter UUID validation clearer * moved timeline menu option below shopping lists --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
		
			
				
	
	
		
			83 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			83 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <div class="mx-auto my-3 justify-center" style="display: flex;">
 | 
						|
    <div style="display: inline;">
 | 
						|
      <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 ? "" : waitingTextCalculated }}
 | 
						|
        </slot>
 | 
						|
      </div>
 | 
						|
    </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,
 | 
						|
    },
 | 
						|
    waitingText: {
 | 
						|
      type: String,
 | 
						|
      default: undefined,
 | 
						|
    }
 | 
						|
  },
 | 
						|
  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 waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
 | 
						|
 | 
						|
    return {
 | 
						|
      size,
 | 
						|
      waitingTextCalculated,
 | 
						|
    };
 | 
						|
  },
 | 
						|
});
 | 
						|
</script>
 |