@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
56 lines (55 loc) • 1.78 kB
JavaScript
import { PRESENCE_STATES as s, PRESENCE_STATES_LIST as a } from "./presence-constants.js";
import { createElementBlock as t, openBlock as r, createCommentVNode as c, createElementVNode as i, toDisplayString as o, normalizeClass as l } from "vue";
import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const d = {
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: s.ACTIVE,
validator: (n) => a.includes(n)
},
/**
* 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
}
}
}, p = ["aria-live"], f = {
key: 0,
"data-qa": "dt-presence-sr-text",
class: "sr-only"
};
function m(n, u, e, E, S, y) {
return r(), t("div", {
class: "d-presence",
"data-qa": "dt-presence",
role: "status",
"aria-live": n.$attrs.ariaLive || "off"
}, [
e.srText ? (r(), t("span", f, o(e.srText), 1)) : c("", !0),
i("div", {
class: l(["d-presence__inner", {
"d-presence__inner--active": e.presence === "active",
"d-presence__inner--away": e.presence === "away",
"d-presence__inner--busy": e.presence === "busy",
"d-presence__inner--offline": e.presence === "offline"
}])
}, null, 2)
], 8, p);
}
const C = /* @__PURE__ */ _(d, [["render", m]]);
export {
C as default
};
//# sourceMappingURL=presence.js.map