@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
101 lines (100 loc) • 3.27 kB
JavaScript
import { DtIconLayoutGrid, DtIconArrowRight, DtIconArrowLeft, DtIconArrowUp, DtIconArrowDown, DtIconCommand, DtIconPlus } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const SHORTCUTS_ICON_ALIASES = {
"{win}": DtIconLayoutGrid,
"{arrow-right}": DtIconArrowRight,
"{arrow-left}": DtIconArrowLeft,
"{arrow-up}": DtIconArrowUp,
"{arrow-down}": DtIconArrowDown,
"{cmd}": DtIconCommand
};
const _sfc_main = {
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid,
DtIconArrowRight,
DtIconArrowLeft,
DtIconArrowUp,
DtIconArrowDown,
DtIconCommand,
DtIconPlus
},
props: {
/**
* If true, applies inverted styles.
* @values true, false
*/
inverted: {
type: Boolean,
default: false
},
/**
* 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: true
},
/**
* 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 {
...SHORTCUTS_ICON_ALIASES,
"{plus}": DtIconPlus
};
},
shortcutWithSeparator() {
return this.shortcut.replace(this.separator, "{plus}");
},
formattedShortcut() {
return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
return result.replace(new RegExp("{" + key + "}", "gi"), SHORTCUTS_ICON_ALIASES[key]);
}, this.shortcutWithSeparator);
},
// Splits any icon based aliases into their own array items.
formattedShortcutSplit() {
const iconAliasString = Object.keys(this.icons).join("|");
const regex = new RegExp(`(${iconAliasString})`, "gi");
return this.formattedShortcut.split(regex).filter(Boolean);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("kbd", { class: [
"d-keyboard-shortcut",
{ "d-keyboard-shortcut--inverted": _vm.inverted }
] }, [_vm.screenReaderText ? _c("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [_vm._v(" " + _vm._s(_vm.screenReaderText) + " ")]) : _vm._e(), _vm._l(_vm.formattedShortcutSplit, function(item, i) {
return [_vm.icons[item] ? _c(_vm.icons[item], { key: `${i}-${item}`, tag: "component", class: [
"d-keyboard-shortcut__icon",
{ "d-keyboard-shortcut__icon--inverted": _vm.inverted }
], attrs: { "size": "100", "aria-hidden": "true" } }) : _c("span", { key: `${i}-${item}`, class: [
"d-keyboard-shortcut__item",
{ "d-keyboard-shortcut__item--inverted": _vm.inverted }
], attrs: { "aria-hidden": "true" }, domProps: { "innerHTML": _vm._s(item) } })];
})], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtKeyboardShortcut = __component__.exports;
export {
DtKeyboardShortcut as default
};
//# sourceMappingURL=keyboard_shortcut.vue.js.map