Attendee.vue
1 month ago
AttendeeCustomFields.vue
1 month ago
AttendeeDetails.vue
1 month ago
AttendeePayment.vue
1 month ago
Attendees.vue
1 month ago
Event.vue
1 month ago
EventCustomize.vue
1 month ago
EventDetails.vue
1 month ago
EventPeriods.vue
1 month ago
EventPricing.vue
1 month ago
EventRecurring.vue
1 month ago
EventSettings.vue
1 month ago
EventWaitingList.vue
1 month ago
EventCustomize.vue
280 lines
| 1 | <template> |
| 2 | <el-form ref="customizeFormRef" :model="eventCustomizeForm" class="am-capei-custef"> |
| 3 | <div :id="eventColorsHeadingId" class="am-capei-custef__heading"> |
| 4 | {{ amLabels.event_colors }} |
| 5 | </div> |
| 6 | |
| 7 | <AmRadioGroup v-model="colorType"> |
| 8 | <el-form-item class="am-capei-custef__item"> |
| 9 | <AmRadio :value="1"> {{ amLabels.event_colors_preset }}: </AmRadio> |
| 10 | <div class="am-capei-custef__colors"> |
| 11 | <AmButton |
| 12 | v-for="color in colorPalette" |
| 13 | :key="color" |
| 14 | native-type="button" |
| 15 | type="plain" |
| 16 | size="small" |
| 17 | class="am-capei-custef__colors-item" |
| 18 | :class="{ 'am-disabled': colorType === 2 }" |
| 19 | :disabled="colorType === 2" |
| 20 | :aria-label="getPresetColorLabel(color)" |
| 21 | @click="selectPresetColor(color)" |
| 22 | > |
| 23 | <span class="am-capei-custef__colors-item__inner" :style="{ backgroundColor: color }"> |
| 24 | <span |
| 25 | v-if="color === eventCustomizeForm.color" |
| 26 | class="am-icon-check" |
| 27 | aria-hidden="true" |
| 28 | /> |
| 29 | </span> |
| 30 | </AmButton> |
| 31 | </div> |
| 32 | </el-form-item> |
| 33 | <el-form-item class="am-capei-custef__item"> |
| 34 | <AmRadio :value="2"> {{ amLabels.event_colors_custom }}: </AmRadio> |
| 35 | <el-color-picker |
| 36 | v-model="eventCustomizeForm.color" |
| 37 | :disabled="colorType === 1" |
| 38 | :aria-label="amLabels.event_colors_custom" |
| 39 | /> |
| 40 | </el-form-item> |
| 41 | <el-form-item class="am-capei-custef__item"> |
| 42 | <AmCheckbox v-model="eventCustomizeForm.show" :label="amLabels.event_show_on_site" /> |
| 43 | </el-form-item> |
| 44 | </AmRadioGroup> |
| 45 | </el-form> |
| 46 | </template> |
| 47 | |
| 48 | <script setup> |
| 49 | // * Import form Vue |
| 50 | import { ref, computed, inject, onMounted } from 'vue' |
| 51 | |
| 52 | // * Import store |
| 53 | import { useStore } from 'vuex' |
| 54 | |
| 55 | // * Import Components |
| 56 | import AmButton from '../../../../../_components/button/AmButton.vue' |
| 57 | import AmCheckbox from '../../../../../_components/checkbox/AmCheckbox.vue' |
| 58 | import AmRadioGroup from '../../../../../_components/radio/AmRadioGroup.vue' |
| 59 | import AmRadio from '../../../../../_components/radio/AmRadio.vue' |
| 60 | |
| 61 | // * Store |
| 62 | let store = useStore() |
| 63 | |
| 64 | // * Labels |
| 65 | let amLabels = inject('amLabels') |
| 66 | |
| 67 | // * Form Reference |
| 68 | const customizeFormRef = ref(null) |
| 69 | |
| 70 | const eventColorsHeadingId = `amelia-event-colors-heading-${Math.random().toString(36).slice(2, 9)}` |
| 71 | |
| 72 | let colorType = ref(1) |
| 73 | |
| 74 | let colorPalette = ref([ |
| 75 | '#1788FB', |
| 76 | '#4BBEC6', |
| 77 | '#FBC22D', |
| 78 | '#FA3C52', |
| 79 | '#D696B8', |
| 80 | '#689BCA', |
| 81 | '#26CC2B', |
| 82 | '#FD7E35', |
| 83 | '#E38587', |
| 84 | '#774DFB', |
| 85 | ]) |
| 86 | |
| 87 | // * Form data |
| 88 | let eventCustomizeForm = ref({ |
| 89 | color: computed({ |
| 90 | get: () => store.getters['event/getColor'], |
| 91 | set: (val) => { |
| 92 | store.commit('event/setColor', val) |
| 93 | }, |
| 94 | }), |
| 95 | show: computed({ |
| 96 | get: () => store.getters['event/getShow'], |
| 97 | set: (val) => { |
| 98 | store.commit('event/setShow', val) |
| 99 | }, |
| 100 | }), |
| 101 | }) |
| 102 | |
| 103 | function selectPresetColor(color) { |
| 104 | if (colorType.value === 1) { |
| 105 | store.commit('event/setColor', color) |
| 106 | } |
| 107 | } |
| 108 | |
| 109 | function getPresetColorLabel(color) { |
| 110 | let label = `${amLabels.event_colors_preset} ${color}` |
| 111 | |
| 112 | if (color === eventCustomizeForm.value.color) { |
| 113 | label += `, ${amLabels.selected || 'selected'}` |
| 114 | } |
| 115 | |
| 116 | return label |
| 117 | } |
| 118 | |
| 119 | // * Lifecycle Hooks |
| 120 | onMounted(() => { |
| 121 | let selectedColor = store.getters['event/getColor'] |
| 122 | let colorTypeRecognition = |
| 123 | colorPalette.value.filter((color) => color === selectedColor).length > 0 |
| 124 | if (colorTypeRecognition) { |
| 125 | colorType.value = 1 |
| 126 | } else { |
| 127 | colorType.value = 2 |
| 128 | } |
| 129 | }) |
| 130 | </script> |
| 131 | |
| 132 | <style lang="scss"> |
| 133 | @mixin cabinet-event-customize-block { |
| 134 | // am - amelia |
| 135 | // capei - cabinet panel event item |
| 136 | // custef - customize event form |
| 137 | .am-capei-custef { |
| 138 | display: flex; |
| 139 | flex-direction: column; |
| 140 | gap: 24px; |
| 141 | |
| 142 | &__heading { |
| 143 | font-size: 15px; |
| 144 | font-weight: 400; |
| 145 | line-height: 1.6; |
| 146 | color: var(--am-c-main-text); |
| 147 | } |
| 148 | |
| 149 | &__colors { |
| 150 | display: flex; |
| 151 | align-items: center; |
| 152 | flex-wrap: wrap; |
| 153 | gap: 8px; |
| 154 | |
| 155 | &-item { |
| 156 | width: 32px; |
| 157 | height: 32px; |
| 158 | border-radius: 4px; |
| 159 | cursor: pointer; |
| 160 | padding: 4px; |
| 161 | border: 1px solid var(--am-c-inp-border); |
| 162 | background: transparent; |
| 163 | appearance: none; |
| 164 | |
| 165 | &.am-button { |
| 166 | .am-button__inner { |
| 167 | width: 100%; |
| 168 | height: 100%; |
| 169 | display: flex; |
| 170 | justify-content: center; |
| 171 | align-items: center; |
| 172 | position: relative; |
| 173 | } |
| 174 | } |
| 175 | |
| 176 | &.am-disabled { |
| 177 | cursor: not-allowed; |
| 178 | pointer-events: none; |
| 179 | position: relative; |
| 180 | |
| 181 | &:after { |
| 182 | content: ''; |
| 183 | position: absolute; |
| 184 | top: 0; |
| 185 | left: 0; |
| 186 | width: 100%; |
| 187 | height: 100%; |
| 188 | background-color: rgba(255, 255, 255, 0.5); |
| 189 | border-radius: 4px; |
| 190 | } |
| 191 | } |
| 192 | |
| 193 | &:focus-visible { |
| 194 | border-color: var(--am-c-primary); |
| 195 | } |
| 196 | |
| 197 | &[role='radio']='radio'][aria-checked='true']='true'] { |
| 198 | border-color: var(--am-c-primary); |
| 199 | } |
| 200 | |
| 201 | &.am-button[role='radio']='radio'][aria-checked='true']='true'] { |
| 202 | border-color: var(--am-c-primary); |
| 203 | } |
| 204 | |
| 205 | &:not(.am-disabled):hover { |
| 206 | border-color: var(--am-c-primary); |
| 207 | } |
| 208 | |
| 209 | &__inner { |
| 210 | width: 100%; |
| 211 | height: 100%; |
| 212 | display: flex; |
| 213 | justify-content: center; |
| 214 | align-items: center; |
| 215 | position: relative; |
| 216 | |
| 217 | .am-icon-check { |
| 218 | color: #ffffff; |
| 219 | font-size: 18px; |
| 220 | } |
| 221 | } |
| 222 | } |
| 223 | } |
| 224 | |
| 225 | &__item { |
| 226 | width: 100%; |
| 227 | display: flex; |
| 228 | align-items: center; |
| 229 | justify-content: flex-start; |
| 230 | } |
| 231 | |
| 232 | .el-form-item { |
| 233 | margin: 0; |
| 234 | |
| 235 | &__content { |
| 236 | display: flex; |
| 237 | flex-direction: column; |
| 238 | align-items: flex-start; |
| 239 | } |
| 240 | } |
| 241 | |
| 242 | .el-color-picker { |
| 243 | &__trigger { |
| 244 | display: inline-flex; |
| 245 | justify-content: center; |
| 246 | align-items: center; |
| 247 | box-sizing: border-box; |
| 248 | height: 32px; |
| 249 | width: 32px; |
| 250 | padding: 4px; |
| 251 | border: 1px solid var(--am-c-inp-border); |
| 252 | border-radius: 4px; |
| 253 | font-size: 0; |
| 254 | position: relative; |
| 255 | cursor: pointer; |
| 256 | } |
| 257 | |
| 258 | &__mask { |
| 259 | width: 31px; |
| 260 | height: 31px; |
| 261 | } |
| 262 | |
| 263 | &__icon { |
| 264 | font-size: 12px; |
| 265 | } |
| 266 | } |
| 267 | |
| 268 | .am-radio-group { |
| 269 | display: flex; |
| 270 | flex-direction: column; |
| 271 | gap: 24px; |
| 272 | } |
| 273 | } |
| 274 | } |
| 275 | |
| 276 | .amelia-v2-booking #amelia-container { |
| 277 | @include cabinet-event-customize-block; |
| 278 | } |
| 279 | </style> |
| 280 |