@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
101 lines (100 loc) • 3.49 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const SHORTCUTS_ICON_ALIASES = {
"{win}": vue2.DtIconLayoutGrid,
"{arrow-right}": vue2.DtIconArrowRight,
"{arrow-left}": vue2.DtIconArrowLeft,
"{arrow-up}": vue2.DtIconArrowUp,
"{arrow-down}": vue2.DtIconArrowDown,
"{cmd}": vue2.DtIconCommand
};
const _sfc_main = {
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid: vue2.DtIconLayoutGrid,
DtIconArrowRight: vue2.DtIconArrowRight,
DtIconArrowLeft: vue2.DtIconArrowLeft,
DtIconArrowUp: vue2.DtIconArrowUp,
DtIconArrowDown: vue2.DtIconArrowDown,
DtIconCommand: vue2.DtIconCommand,
DtIconPlus: vue2.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}": vue2.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__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtKeyboardShortcut = __component__.exports;
exports.default = DtKeyboardShortcut;
//# sourceMappingURL=keyboard_shortcut.vue.cjs.map