Reorganizace skeletonu, aktualizace app-vite a quasaru

src/components/flights/skeletons/FlightDetailSkeleton.vue

@@ -0,0 +1,34 @@
+<script setup>
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+</script>
+
+<template>
+  <q-card class="flight-detail-card">
+    <q-skeleton animation="fade" height="400px" square/>
+
+    <q-card-section>
+      <q-list bordered separator>
+
+        <ListItemSkeleton/>
+        <ListItemSkeleton/>
+
+        <q-item>
+          <q-list>
+            <ListItemSkeleton v-for="i in 3" :key="i"/>
+          </q-list>
+        </q-item>
+
+        <ListItemSkeleton/>
+        <ListItemSkeleton/>
+
+      </q-list>
+
+      <article class="q-my-lg">
+        <BasicTextSkeleton :lines="7" :paragraphs="2" />
+      </article>
+
+      <q-skeleton height="400px" square class="q-mt-lg"/>
+    </q-card-section>
+  </q-card>
+</template>

src/components/flights/skeletons/FlightEditCopilotSkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  edit copilot skeleton
+</template>

src/components/flights/skeletons/FlightEditSkeleton.vue

@@ -0,0 +1,77 @@
+<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>

src/components/flights/skeletons/FlightsListSkeleton.vue

@@ -0,0 +1,21 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item v-for="i in 10" :key="i" ripple>
+      <q-item-section avatar>
+        <q-avatar size="100px">
+          <q-skeleton type="QAvatar" size="100px"></q-skeleton>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(30,50)+'%'"/>
+          <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
+          <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
+          <q-skeleton type="text" width="8%"/>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>