@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
60 lines (59 loc) • 2.1 kB
JavaScript
import { PRESENCE_STATES, PRESENCE_STATES_LIST } from "./presence_constants.js";
import { openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeClass } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtPresence",
props: {
/**
* Determines the color of the inner presence circle, indicating status.
* Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
* @values busy, away, active, offline
*/
presence: {
type: String,
default: PRESENCE_STATES.ACTIVE,
validator: (role) => {
return PRESENCE_STATES_LIST.includes(role);
}
},
/**
* Since Presence is a visual element, we need SRs to read out any state changes
* that occur.
* Text entered here will be read by assistive technology. If null this component will be ignored by AT.
*/
srText: {
type: String,
default: null
}
}
};
const _hoisted_1 = ["aria-live"];
const _hoisted_2 = {
key: 0,
"data-qa": "dt-presence-sr-text",
class: "sr-only"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: "d-presence",
"data-qa": "dt-presence",
role: "status",
"aria-live": _ctx.$attrs.ariaLive || "off"
}, [
$props.srText ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($props.srText), 1)) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass(["d-presence__inner", {
"d-presence__inner--active": $props.presence === "active",
"d-presence__inner--away": $props.presence === "away",
"d-presence__inner--busy": $props.presence === "busy",
"d-presence__inner--offline": $props.presence === "offline"
}])
}, null, 2)
], 8, _hoisted_1);
}
const DtPresence = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtPresence as default
};
//# sourceMappingURL=presence.vue.js.map