BringingAnyone.vue
1 week ago
DescriptionItem.vue
1 week ago
EmptyState.vue
1 week ago
EventCard.vue
1 week ago
EventEmployee.vue
1 week ago
EventTicket.vue
1 week ago
GalleryCarousel.vue
1 week ago
BringingAnyone.vue
215 lines
| 1 | <template> |
| 2 | <div class="am-elf__bringing" :style="cssVars" role="group" :aria-labelledby="headingId"> |
| 3 | <div class="am-elf__bringing-main" :class="responsiveClass"> |
| 4 | <div :id="headingId" class="am-elf__bringing-heading"> |
| 5 | {{ amLabels.event_bringing }} |
| 6 | </div> |
| 7 | <div class="am-elf__bringing-content" :class="responsiveClass"> |
| 8 | <AmInputNumber |
| 9 | :id="inputId" |
| 10 | v-model="persons" |
| 11 | :min="options.min" |
| 12 | :max="options.max" |
| 13 | :class="responsiveClass" |
| 14 | :name="'event-bringing-anyone'" |
| 15 | :aria-label="amLabels.event_bringing" |
| 16 | :aria-describedby="inputHelpId" |
| 17 | /> |
| 18 | <span :id="inputHelpId" class="am-elf__bringing-sr-only"> |
| 19 | {{ inputAssistiveText }} |
| 20 | </span> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
| 24 | </template> |
| 25 | |
| 26 | <script setup> |
| 27 | // * Import from Vue |
| 28 | import { reactive, computed, inject } from 'vue' |
| 29 | |
| 30 | // * Import from Vuex |
| 31 | import { useStore } from 'vuex' |
| 32 | |
| 33 | // * _components |
| 34 | import AmInputNumber from '../../../../_components/input-number/AmInputNumber.vue' |
| 35 | |
| 36 | // * Composables |
| 37 | import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation' |
| 38 | import { useResponsiveClass } from '../../../../../assets/js/common/responsive' |
| 39 | |
| 40 | let store = useStore() |
| 41 | |
| 42 | // * Options |
| 43 | let options = computed(() => { |
| 44 | return { |
| 45 | min: store.getters['persons/getMinPersons'], |
| 46 | max: store.getters['persons/getMaxPersons'], |
| 47 | } |
| 48 | }) |
| 49 | |
| 50 | let persons = computed({ |
| 51 | get: () => store.getters['persons/getPersons'], |
| 52 | set: (val) => { |
| 53 | store.commit('persons/setPersons', val) |
| 54 | }, |
| 55 | }) |
| 56 | |
| 57 | // * IDs for ARIA linkage |
| 58 | const uid = Math.random().toString(36).slice(2, 8) |
| 59 | const headingId = `am-elf-bringing-heading-${uid}` |
| 60 | const inputId = `am-elf-bringing-input-${uid}` |
| 61 | const inputHelpId = `am-elf-bringing-help-${uid}` |
| 62 | |
| 63 | // * Screen reader helper text |
| 64 | const inputAssistiveText = computed(() => { |
| 65 | return `${amLabels.value.minimum} ${options.value.min}, ${amLabels.value.maximum} ${options.value.max}.` |
| 66 | }) |
| 67 | |
| 68 | // * Responsive - Container Width |
| 69 | let cWidth = inject('containerWidth') |
| 70 | |
| 71 | let responsiveClass = computed(() => { |
| 72 | return useResponsiveClass(cWidth.value) |
| 73 | }) |
| 74 | |
| 75 | // * Root Settings |
| 76 | const amSettings = inject('settings') |
| 77 | |
| 78 | // * Event form customization |
| 79 | let customizedDataForm = inject('customizedDataForm') |
| 80 | |
| 81 | // * Labels |
| 82 | let labels = inject('labels') |
| 83 | |
| 84 | // * local language short code |
| 85 | const localLanguage = inject('localLanguage') |
| 86 | |
| 87 | // * if local lang is in settings lang |
| 88 | let langDetection = computed(() => amSettings.general.usedLanguages.includes(localLanguage.value)) |
| 89 | |
| 90 | // * Computed labels |
| 91 | let amLabels = computed(() => { |
| 92 | let computedLabels = reactive({ ...labels }) |
| 93 | |
| 94 | if (customizedDataForm.value.bringingAnyone.translations) { |
| 95 | let customizedLabels = customizedDataForm.value.bringingAnyone.translations |
| 96 | Object.keys(customizedLabels).forEach((labelKey) => { |
| 97 | if (customizedLabels[labelKey][localLanguage.value] && langDetection.value) { |
| 98 | computedLabels[labelKey] = customizedLabels[labelKey][localLanguage.value] |
| 99 | } else if (customizedLabels[labelKey].default) { |
| 100 | computedLabels[labelKey] = customizedLabels[labelKey].default |
| 101 | } |
| 102 | }) |
| 103 | } |
| 104 | return computedLabels |
| 105 | }) |
| 106 | |
| 107 | // * Fonts |
| 108 | let amFonts = inject('amFonts') |
| 109 | |
| 110 | // * Global colors |
| 111 | let amColors = inject('amColors') |
| 112 | |
| 113 | // * Css Vars |
| 114 | let cssVars = computed(() => { |
| 115 | return { |
| 116 | '--am-font-family': amFonts.value.fontFamily, |
| 117 | '--am-bringing-color-border': useColorTransparency(amColors.value.colorMainText, 0.25), |
| 118 | '--am-bringing-color-text-opacity60': useColorTransparency(amColors.value.colorMainText, 0.6), |
| 119 | } |
| 120 | }) |
| 121 | </script> |
| 122 | |
| 123 | <script> |
| 124 | export default { |
| 125 | name: 'BringingAnyone', |
| 126 | } |
| 127 | </script> |
| 128 | |
| 129 | <style lang="scss"> |
| 130 | @mixin bringing-anyone-block { |
| 131 | .am-elf { |
| 132 | &__bringing { |
| 133 | display: flex; |
| 134 | flex-direction: row; |
| 135 | width: 100%; |
| 136 | |
| 137 | * { |
| 138 | box-sizing: border-box; |
| 139 | font-family: var(--am-font-family), sans-serif; |
| 140 | } |
| 141 | |
| 142 | &-wrapper { |
| 143 | display: flex; |
| 144 | flex-direction: column; |
| 145 | justify-content: space-between; |
| 146 | min-height: 188px; |
| 147 | padding: 24px; |
| 148 | } |
| 149 | |
| 150 | &-main { |
| 151 | display: flex; |
| 152 | flex-direction: row; |
| 153 | align-items: center; |
| 154 | justify-content: space-between; |
| 155 | width: 100%; |
| 156 | padding: 0 0 32px 0; |
| 157 | |
| 158 | &.am-rw-500 { |
| 159 | flex-wrap: wrap; |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | &-heading { |
| 164 | display: block; |
| 165 | width: 100%; |
| 166 | font-size: 15px; |
| 167 | font-weight: 500; |
| 168 | line-height: 1.33333; |
| 169 | color: var(--am-c-main-text); |
| 170 | margin: 0 8px 4px 0; |
| 171 | word-break: break-word; |
| 172 | } |
| 173 | |
| 174 | &-content { |
| 175 | display: flex; |
| 176 | align-items: center; |
| 177 | justify-content: space-between; |
| 178 | padding: 0; |
| 179 | margin: 0 0 4px 0; |
| 180 | border-radius: 8px; |
| 181 | |
| 182 | &.am-rw-500 { |
| 183 | width: 100%; |
| 184 | } |
| 185 | |
| 186 | .am-input-number { |
| 187 | width: 185px; |
| 188 | |
| 189 | &.am-rw-500 { |
| 190 | width: 100%; |
| 191 | } |
| 192 | } |
| 193 | } |
| 194 | |
| 195 | &-sr-only { |
| 196 | position: absolute; |
| 197 | width: 1px; |
| 198 | height: 1px; |
| 199 | padding: 0; |
| 200 | margin: -1px; |
| 201 | overflow: hidden; |
| 202 | clip: rect(0, 0, 0, 0); |
| 203 | white-space: nowrap; |
| 204 | border: 0; |
| 205 | } |
| 206 | } |
| 207 | } |
| 208 | } |
| 209 | |
| 210 | // Front |
| 211 | .amelia-v2-booking #amelia-container { |
| 212 | @include bringing-anyone-block; |
| 213 | } |
| 214 | </style> |
| 215 |