@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 1.96 kB
Source Map (JSON)
{"version":3,"file":"presence.cjs","sources":["../../../components/presence/presence.vue"],"sourcesContent":["<template>\n <div\n class=\"d-presence\"\n data-qa=\"dt-presence\"\n role=\"status\"\n :aria-live=\"$attrs.ariaLive || 'off'\"\n >\n <span\n v-if=\"srText\"\n data-qa=\"dt-presence-sr-text\"\n class=\"sr-only\"\n >{{ srText }} </span>\n <div\n class=\"d-presence__inner\"\n :class=\"{\n 'd-presence__inner--active': presence === 'active',\n 'd-presence__inner--away': presence === 'away',\n 'd-presence__inner--busy': presence === 'busy',\n 'd-presence__inner--offline': presence === 'offline',\n }\"\n />\n </div>\n</template>\n\n<script>\nimport { PRESENCE_STATES, PRESENCE_STATES_LIST } from './presence_constants';\n/**\n * Presence is a user status visual indicator element.\n * @see https://dialtone.dialpad.com/components/presence.html\n */\nexport default {\n name: 'DtPresence',\n props: {\n\n /**\n * Determines the color of the inner presence circle, indicating status.\n * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'\n * @values busy, away, active, offline\n */\n presence: {\n type: String,\n default: PRESENCE_STATES.ACTIVE,\n validator: (role) => {\n return PRESENCE_STATES_LIST.includes(role);\n },\n },\n\n /**\n * Since Presence is a visual element, we need SRs to read out any state changes\n * that occur.\n * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n */\n srText: {\n type: String,\n default: null,\n },\n },\n};\n</script>\n"],"names":["_sfc_main","PRESENCE_STATES","role","PRESENCE_STATES_LIST"],"mappings":"gNA8BAA,EAAA,CACA,KAAA,aACA,MAAA,CAOA,SAAA,CACA,KAAA,OACA,QAAAC,EAAAA,gBAAA,OACA,UAAAC,GACAC,EAAAA,qBAAA,SAAAD,CAAA,CAEA,EAOA,OAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,CACA"}