appointments.js
1 month ago
attendees.js
1 month ago
colorManipulation.js
1 month ago
customer.js
1 month ago
date.js
1 month ago
defaultCustomize.js
1 month ago
employee.js
2 weeks ago
events.js
1 month ago
formFieldsTemplates.js
1 month ago
formatting.js
1 month ago
helper.js
2 weeks ago
image.js
1 month ago
integrationApple.js
1 month ago
integrationGoogle.js
1 month ago
integrationOutlook.js
1 month ago
integrationStripe.js
1 month ago
integrationZoom.js
1 month ago
licence.js
1 month ago
liveAnnouncer.js
1 month ago
phone.js
1 month ago
pricing.js
1 month ago
recurring.js
2 weeks ago
responsive.js
1 month ago
scrollElements.js
1 month ago
settings.js
1 month ago
translationsElementPlus.js
1 month ago
utilHeaderHeight.js
1 month ago
liveAnnouncer.js
68 lines
| 1 | import { inject, nextTick, provide, ref } from 'vue' |
| 2 | |
| 3 | const LIVE_ANNOUNCER_KEY = Symbol('liveAnnouncer') |
| 4 | |
| 5 | function setLiveMessage(target, message) { |
| 6 | if (!message) { |
| 7 | return |
| 8 | } |
| 9 | |
| 10 | target.value = '' |
| 11 | |
| 12 | nextTick(() => { |
| 13 | target.value = message |
| 14 | }) |
| 15 | } |
| 16 | |
| 17 | export function provideLiveAnnouncer() { |
| 18 | const statusMessage = ref('') |
| 19 | const alertMessage = ref('') |
| 20 | |
| 21 | function announceStatus(message) { |
| 22 | setLiveMessage(statusMessage, message) |
| 23 | } |
| 24 | |
| 25 | function announceAlert(message) { |
| 26 | setLiveMessage(alertMessage, message) |
| 27 | } |
| 28 | |
| 29 | const announcer = { |
| 30 | statusMessage, |
| 31 | alertMessage, |
| 32 | announceStatus, |
| 33 | announceAlert, |
| 34 | } |
| 35 | |
| 36 | provide(LIVE_ANNOUNCER_KEY, announcer) |
| 37 | |
| 38 | return announcer |
| 39 | } |
| 40 | |
| 41 | export function useLiveAnnouncer() { |
| 42 | return inject(LIVE_ANNOUNCER_KEY, { |
| 43 | statusMessage: ref(''), |
| 44 | alertMessage: ref(''), |
| 45 | announceStatus: () => {}, |
| 46 | announceAlert: () => {}, |
| 47 | }) |
| 48 | } |
| 49 | |
| 50 | export function announceFormErrors(formRef, announceAlert) { |
| 51 | if (!formRef?.value?.fields) { |
| 52 | return |
| 53 | } |
| 54 | |
| 55 | const errorField = formRef.value.fields.find((field) => field.validateState === 'error') |
| 56 | |
| 57 | if (!errorField) { |
| 58 | return |
| 59 | } |
| 60 | |
| 61 | const errorElement = errorField.$el?.querySelector('.el-form-item__error') |
| 62 | const message = errorElement?.textContent?.trim() || errorField.validateMessage |
| 63 | |
| 64 | if (message) { |
| 65 | announceAlert(message) |
| 66 | } |
| 67 | } |
| 68 |