Congratulations
5 days ago
Payment
5 days ago
Skeletons
5 days ago
BackLink.vue
5 days ago
BookingSkeleton.vue
5 days ago
Calendar.vue
5 days ago
DotsPopup.vue
5 days ago
RecurringSetup.vue
5 days ago
BookingSkeleton.vue
126 lines
| 1 | <template> |
| 2 | <el-skeleton v-show="loading" animated class="am-skeleton-payment"> |
| 3 | <template #template> |
| 4 | <div class="am-skeleton-payment-heading"> |
| 5 | <el-skeleton-item variant="h3" /> |
| 6 | </div> |
| 7 | <div class="am-skeleton-payment-booking-info"> |
| 8 | <div |
| 9 | v-for="(item, i) in new Array(9)" |
| 10 | :key="item" |
| 11 | :class="{ |
| 12 | 'am-skeleton-border-dashed': i < 5, |
| 13 | 'am-skeleton-border-solid': [5, 7].includes(i), |
| 14 | }" |
| 15 | > |
| 16 | <el-skeleton-item |
| 17 | variant="text" |
| 18 | :style="{ width: `${useRandomIntFromInterval(25, 28)}%` }" |
| 19 | /> |
| 20 | <el-skeleton-item |
| 21 | v-if="i === 5" |
| 22 | variant="text" |
| 23 | :style="{ width: '35%', height: i === 5 ? '32px' : '', margin: '8px 0' }" |
| 24 | /> |
| 25 | <el-skeleton-item |
| 26 | variant="text" |
| 27 | :style="{ |
| 28 | width: `${useRandomIntFromInterval(25, 28)}%`, |
| 29 | height: i === 5 ? '32px' : '', |
| 30 | }" |
| 31 | /> |
| 32 | </div> |
| 33 | </div> |
| 34 | <el-skeleton-item |
| 35 | variant="h3" |
| 36 | :style="{ width: '100%', height: '48px', marginTop: '20px' }" |
| 37 | /> |
| 38 | <el-skeleton-item |
| 39 | variant="h3" |
| 40 | :style="{ width: '116px', height: '26px', marginTop: '16px' }" |
| 41 | /> |
| 42 | <div |
| 43 | :style="{ |
| 44 | marginTop: '20px', |
| 45 | display: 'flex', |
| 46 | justifyContent: 'space-between', |
| 47 | flexDirection: 'row', |
| 48 | }" |
| 49 | > |
| 50 | <el-skeleton-item |
| 51 | v-for="i in new Array(3)" |
| 52 | :key="i" |
| 53 | variant="h3" |
| 54 | :style="{ width: '30%', height: '48px' }" |
| 55 | /> |
| 56 | </div> |
| 57 | </template> |
| 58 | </el-skeleton> |
| 59 | </template> |
| 60 | |
| 61 | <script setup> |
| 62 | // * Import from Vue |
| 63 | import { computed } from 'vue' |
| 64 | // * Import from Store |
| 65 | import { useStore } from 'vuex' |
| 66 | // * Compsables |
| 67 | import { useRandomIntFromInterval } from '../../../assets/js/common/formatting' |
| 68 | |
| 69 | const store = useStore() |
| 70 | |
| 71 | let bookableType = computed(() => store.getters['bookableType/getType']) |
| 72 | |
| 73 | let loading = computed(() => { |
| 74 | if (bookableType.value === 'event') { |
| 75 | return store.getters['getLoading'] |
| 76 | } |
| 77 | |
| 78 | return store.getters['booking/getLoading'] |
| 79 | }) |
| 80 | </script> |
| 81 | |
| 82 | <script> |
| 83 | export default { |
| 84 | name: 'BookingSkeleton', |
| 85 | } |
| 86 | </script> |
| 87 | |
| 88 | <style lang="scss"> |
| 89 | .amelia-v2-booking #amelia-container { |
| 90 | .am-skeleton-payment { |
| 91 | padding: 0; |
| 92 | |
| 93 | &-heading { |
| 94 | .el-skeleton__item { |
| 95 | height: 24px; |
| 96 | width: 100px; |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | &-booking-info { |
| 101 | align-items: center; |
| 102 | padding: 16px 0; |
| 103 | & > div { |
| 104 | padding: 4px 0; |
| 105 | display: flex; |
| 106 | justify-content: space-between; |
| 107 | align-items: center; |
| 108 | |
| 109 | &.am-skeleton-border-dashed { |
| 110 | border-bottom: 1px solid var(--am-c-skeleton-op20); |
| 111 | border-bottom-style: dashed; |
| 112 | } |
| 113 | |
| 114 | &.am-skeleton-border-solid { |
| 115 | border-bottom: 1px solid var(--am-c-skeleton-op20); |
| 116 | } |
| 117 | |
| 118 | .el-skeleton__item { |
| 119 | height: 20px; |
| 120 | } |
| 121 | } |
| 122 | } |
| 123 | } |
| 124 | } |
| 125 | </style> |
| 126 |