@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
95 lines (94 loc) • 2.82 kB
JavaScript
import { DtIconPlus as a, DtIconCommand as c, DtIconArrowDown as d, DtIconArrowUp as i, DtIconArrowLeft as u, DtIconArrowRight as p, DtIconLayoutGrid as h } from "@dialpad/dialtone-icons/vue2";
import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const n = {
"{win}": h,
"{arrow-right}": p,
"{arrow-left}": u,
"{arrow-up}": i,
"{arrow-down}": d,
"{cmd}": c
}, l = {
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid: h,
DtIconArrowRight: p,
DtIconArrowLeft: u,
DtIconArrowUp: i,
DtIconArrowDown: d,
DtIconCommand: c,
DtIconPlus: a
},
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 {
...n,
"{plus}": a
};
},
shortcutWithSeparator() {
return this.shortcut.replace(this.separator, "{plus}");
},
formattedShortcut() {
return Object.keys(n).reduce((e, t) => e.replace(new RegExp("{" + t + "}", "gi"), n[t]), this.shortcutWithSeparator);
},
// Splits any icon based aliases into their own array items.
formattedShortcutSplit() {
const e = Object.keys(this.icons).join("|"), t = new RegExp(`(${e})`, "gi");
return this.formattedShortcut.split(t).filter(Boolean);
}
}
};
var f = function() {
var t = this, o = t._self._c;
return o("kbd", { class: [
"d-keyboard-shortcut",
{ "d-keyboard-shortcut--inverted": t.inverted }
] }, [t.screenReaderText ? o("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText) + " ")]) : t._e(), t._l(t.formattedShortcutSplit, function(r, s) {
return [t.icons[r] ? o(t.icons[r], { key: `${s}-${r}`, tag: "component", class: [
"d-keyboard-shortcut__icon",
{ "d-keyboard-shortcut__icon--inverted": t.inverted }
], attrs: { size: "100", "aria-hidden": "true" } }) : o("span", { key: `${s}-${r}`, class: [
"d-keyboard-shortcut__item",
{ "d-keyboard-shortcut__item--inverted": t.inverted }
], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(r) } })];
})], 2);
}, m = [], y = /* @__PURE__ */ _(
l,
f,
m
);
const w = y.exports;
export {
w as default
};
//# sourceMappingURL=keyboard-shortcut.js.map