@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
110 lines (109 loc) • 3.2 kB
JavaScript
import { DtIconPlus as u, DtIconCommand as h, DtIconArrowDown as p, DtIconArrowUp as m, DtIconArrowLeft as _, DtIconArrowRight as y, DtIconLayoutGrid as f } from "@dialpad/dialtone-icons/vue3";
import { createElementBlock as n, openBlock as t, normalizeClass as s, createCommentVNode as S, toDisplayString as k, Fragment as l, renderList as g, createBlock as w, resolveDynamicComponent as D } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const d = {
"{win}": f,
"{arrow-right}": y,
"{arrow-left}": _,
"{arrow-up}": m,
"{arrow-down}": p,
"{cmd}": h
}, x = {
compatConfig: { MODE: 3 },
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid: f,
DtIconArrowRight: y,
DtIconArrowLeft: _,
DtIconArrowUp: m,
DtIconArrowDown: p,
DtIconCommand: h,
DtIconPlus: u
},
props: {
/**
* If true, applies inverted styles.
* @values true, false
*/
inverted: {
type: Boolean,
default: !1
},
/**
* Include any of these tokens in your string to render the corresponding symbol:
* {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
*/
shortcut: {
type: String,
required: !0
},
/**
* Text entered here will be read by assistive technology. If null this component will be ignored by AT.
*/
screenReaderText: {
type: String,
default: null
}
},
data() {
return {
separator: /\+/gi
};
},
computed: {
icons() {
return {
...d,
"{plus}": u
};
},
shortcutWithSeparator() {
return this.shortcut.replace(this.separator, "{plus}");
},
formattedShortcut() {
return Object.keys(d).reduce((c, e) => c.replace(new RegExp("{" + e + "}", "gi"), d[e]), this.shortcutWithSeparator);
},
// Splits any icon based aliases into their own array items.
formattedShortcutSplit() {
const c = Object.keys(this.icons).join("|"), e = new RegExp(`(${c})`, "gi");
return this.formattedShortcut.split(e).filter(Boolean);
}
}
}, I = {
key: 0,
class: "d-keyboard-shortcut--sr-only"
}, v = ["innerHTML"];
function A(c, e, r, C, R, a) {
return t(), n("kbd", {
class: s([
"d-keyboard-shortcut",
{ "d-keyboard-shortcut--inverted": r.inverted }
])
}, [
r.screenReaderText ? (t(), n("span", I, k(r.screenReaderText), 1)) : S("", !0),
(t(!0), n(l, null, g(a.formattedShortcutSplit, (o, i) => (t(), n(l, null, [
a.icons[o] ? (t(), w(D(a.icons[o]), {
key: `${i}-${o}`,
size: "100",
"aria-hidden": "true",
class: s([
"d-keyboard-shortcut__icon",
{ "d-keyboard-shortcut__icon--inverted": r.inverted }
])
}, null, 8, ["class"])) : (t(), n("span", {
key: `${i}-${o}`,
"aria-hidden": "true",
class: s([
"d-keyboard-shortcut__item",
{ "d-keyboard-shortcut__item--inverted": r.inverted }
]),
innerHTML: o
}, null, 10, v))
], 64))), 256))
], 2);
}
const E = /* @__PURE__ */ b(x, [["render", A]]);
export {
E as default
};
//# sourceMappingURL=keyboard-shortcut.js.map