@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
118 lines (117 loc) • 4.1 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const SHORTCUTS_ICON_ALIASES = {
"{win}": vue3.DtIconLayoutGrid,
"{arrow-right}": vue3.DtIconArrowRight,
"{arrow-left}": vue3.DtIconArrowLeft,
"{arrow-up}": vue3.DtIconArrowUp,
"{arrow-down}": vue3.DtIconArrowDown,
"{cmd}": vue3.DtIconCommand
};
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid: vue3.DtIconLayoutGrid,
DtIconArrowRight: vue3.DtIconArrowRight,
DtIconArrowLeft: vue3.DtIconArrowLeft,
DtIconArrowUp: vue3.DtIconArrowUp,
DtIconArrowDown: vue3.DtIconArrowDown,
DtIconCommand: vue3.DtIconCommand,
DtIconPlus: vue3.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}": vue3.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);
}
}
};
const _hoisted_1 = {
key: 0,
class: "d-keyboard-shortcut--sr-only"
};
const _hoisted_2 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("kbd", {
class: vue.normalizeClass([
"d-keyboard-shortcut",
{ "d-keyboard-shortcut--inverted": $props.inverted }
])
}, [
$props.screenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString($props.screenReaderText), 1)) : vue.createCommentVNode("", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.formattedShortcutSplit, (item, i) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
$options.icons[item] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.icons[item]), {
key: `${i}-${item}`,
size: "100",
"aria-hidden": "true",
class: vue.normalizeClass([
"d-keyboard-shortcut__icon",
{ "d-keyboard-shortcut__icon--inverted": $props.inverted }
])
}, null, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock("span", {
key: `${i}-${item}`,
"aria-hidden": "true",
class: vue.normalizeClass([
"d-keyboard-shortcut__item",
{ "d-keyboard-shortcut__item--inverted": $props.inverted }
]),
innerHTML: item
}, null, 10, _hoisted_2))
], 64);
}), 256))
], 2);
}
const DtKeyboardShortcut = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtKeyboardShortcut;
//# sourceMappingURL=keyboard_shortcut.vue.cjs.map