78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<script setup>
|
|
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
|
|
import {randomInt} from "src/composables/random";
|
|
|
|
const props = defineProps({
|
|
step: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="step === 'basic'">
|
|
<div class="row">
|
|
<div class="col">
|
|
<q-card class="q-my-sm">
|
|
<q-card-section>
|
|
<q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12 col-md-6" v-for="i in 2" :key="i">
|
|
<q-card class="q-mr-md-sm q-my-sm">
|
|
<q-card-section>
|
|
<q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<q-card v-else-if="step === 'copilot'">
|
|
<q-card class="q-mr-md-sm q-my-sm">
|
|
<q-card-section>
|
|
<q-skeleton type="QInput" class="q-my-sm"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-card>
|
|
|
|
<template v-else-if="step === 'track'">
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<BasicListSkeleton :items-count-min="2" :items-count-max="6"/>
|
|
</template>
|
|
|
|
<template v-else-if="step === 'photos'">
|
|
<q-card class="q-my-lg">
|
|
<q-card-section>
|
|
<q-skeleton type="QInput" class="q-my-sm"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
|
|
<q-card class="q-ma-md">
|
|
<q-skeleton height="300px" type="rect"/>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<div v-else-if="step === 'notes'">
|
|
<q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
|
|
<q-skeleton type="rect" width="100%" height="500px"/>
|
|
</div>
|
|
|
|
</template>
|