@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
106 lines (105 loc) • 3.22 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, openBlock as s, renderList as c, resolveDynamicComponent as l, toDisplayString as u } from "vue";
import { DtIconArrowDown as d, DtIconArrowLeft as f, DtIconArrowRight as p, DtIconArrowUp as m, DtIconCommand as h, DtIconLayoutGrid as g, DtIconOption as _, DtIconPlus as v } from "@dialpad/dialtone-icons/vue3";
//#region components/keyboard_shortcut/keyboard_shortcut.vue
var y = {
"{win}": g,
"{arrow-right}": p,
"{arrow-left}": f,
"{arrow-up}": m,
"{arrow-down}": d,
"{cmd}": h,
"{opt}": _
}, b = {
"{cmd}": "Command",
"{opt}": "Option",
"{win}": "Windows",
"{arrow-right}": "Right Arrow",
"{arrow-left}": "Left Arrow",
"{arrow-up}": "Up Arrow",
"{arrow-down}": "Down Arrow",
"{plus}": "plus"
}, x = {
ctrl: "Control",
alt: "Alt",
esc: "Escape",
del: "Delete",
ins: "Insert",
pgup: "Page Up",
pgdn: "Page Down",
num: "Number",
caps: "Caps Lock"
}, S = {
compatConfig: { MODE: 3 },
name: "DtKeyboardShortcut",
components: {
DtIconLayoutGrid: g,
DtIconArrowRight: p,
DtIconArrowLeft: f,
DtIconArrowUp: m,
DtIconArrowDown: d,
DtIconCommand: h,
DtIconOption: _,
DtIconPlus: v
},
props: {
inverted: {
type: Boolean,
default: !1
},
shortcut: {
type: String,
required: !0
},
screenReaderText: {
type: String,
default: null
}
},
data() {
return { separator: /\+/gi };
},
computed: {
icons() {
return {
...y,
"{plus}": v
};
},
shortcutWithSeparator() {
return this.shortcut.replace(this.separator, "{plus}");
},
formattedShortcut() {
return Object.keys(y).reduce((e, t) => e.replace(RegExp("{" + t + "}", "gi"), y[t]), this.shortcutWithSeparator);
},
formattedShortcutSplit() {
let e = Object.keys(this.icons).join("|"), t = RegExp(`(${e})`, "gi");
return this.formattedShortcut.split(t).filter(Boolean);
},
generatedScreenReaderText() {
return this.formattedShortcutSplit.map((e) => {
let t = e.trim();
if (b[t]) return b[t];
let n = t.toLowerCase();
return x[n] ? x[n] : t;
}).filter((e) => e).join(" ");
}
}
}, C = { class: "d-keyboard-shortcut--sr-only" }, w = ["innerHTML"];
function T(e, d, f, p, m, h) {
return s(), i("kbd", { class: o(["d-keyboard-shortcut", { "d-keyboard-shortcut--inverted": f.inverted }]) }, [a("span", C, u(f.screenReaderText || h.generatedScreenReaderText), 1), (s(!0), i(t, null, c(h.formattedShortcutSplit, (e, a) => (s(), i(t, null, [h.icons[e] ? (s(), n(l(h.icons[e]), {
key: `icon-${a}-${e}`,
size: "100",
"aria-hidden": "true",
class: o(["d-keyboard-shortcut__icon", { "d-keyboard-shortcut__icon--inverted": f.inverted }])
}, null, 8, ["class"])) : e.trim() ? (s(), i("span", {
key: `text-${a}-${e}`,
"aria-hidden": "true",
class: o(["d-keyboard-shortcut__item", { "d-keyboard-shortcut__item--inverted": f.inverted }]),
innerHTML: e
}, null, 10, w)) : r("", !0)], 64))), 256))], 2);
}
var E = /* @__PURE__ */ e(S, [["render", T]]);
//#endregion
export { E as default };
//# sourceMappingURL=keyboard-shortcut.js.map