@dialpad/dialtone-vue/dist/lib/keyboard-shortcut/keyboard-shortcut.js

Vue component library for Dialpad's design system Dialtone

import { DtIconPlus as s, DtIconOption as d, DtIconCommand as u, DtIconArrowDown as p, DtIconArrowUp as l, DtIconArrowLeft as h, DtIconArrowRight as _, DtIconLayoutGrid as m } from "@dialpad/dialtone-icons/vue2";
import { n as w } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const n = {
  "{win}": m,
  "{arrow-right}": _,
  "{arrow-left}": h,
  "{arrow-up}": l,
  "{arrow-down}": p,
  "{cmd}": u,
  "{opt}": d
}, c = {
  "{cmd}": "Command",
  "{opt}": "Option",
  "{win}": "Windows",
  "{arrow-right}": "Right Arrow",
  "{arrow-left}": "Left Arrow",
  "{arrow-up}": "Up Arrow",
  "{arrow-down}": "Down Arrow",
  "{plus}": "plus"
}, i = {
  ctrl: "Control",
  alt: "Alt",
  esc: "Escape",
  del: "Delete",
  ins: "Insert",
  pgup: "Page Up",
  pgdn: "Page Down",
  num: "Number",
  caps: "Caps Lock"
}, f = {
  name: "DtKeyboardShortcut",
  components: {
    DtIconLayoutGrid: m,
    DtIconArrowRight: _,
    DtIconArrowLeft: h,
    DtIconArrowUp: l,
    DtIconArrowDown: p,
    DtIconCommand: u,
    DtIconOption: d,
    DtIconPlus: s
  },
  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} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
     */
    shortcut: {
      type: String,
      required: !0
    },
    /**
     * Optional text to override the auto-generated accessible text for assistive technology.
     * If not provided, accessible text will be automatically generated from the shortcut.
     */
    screenReaderText: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      separator: /\+/gi
    };
  },
  computed: {
    icons() {
      return {
        ...n,
        "{plus}": s
      };
    },
    shortcutWithSeparator() {
      return this.shortcut.replace(this.separator, "{plus}");
    },
    formattedShortcut() {
      return Object.keys(n).reduce((r, t) => r.replace(new RegExp("{" + t + "}", "gi"), n[t]), this.shortcutWithSeparator);
    },
    // Splits any icon based aliases into their own array items.
    formattedShortcutSplit() {
      const r = Object.keys(this.icons).join("|"), t = new RegExp(`(${r})`, "gi");
      return this.formattedShortcut.split(t).filter(Boolean);
    },
    // Generates accessible text for the keyboard shortcut
    generatedScreenReaderText() {
      return this.formattedShortcutSplit.map((r) => {
        const t = r.trim();
        if (c[t])
          return c[t];
        const e = t.toLowerCase();
        return i[e] ? i[e] : t;
      }).filter((r) => r).join(" ");
    }
  }
};
var S = function() {
  var t = this, e = t._self._c;
  return e("kbd", { class: [
    "d-keyboard-shortcut",
    { "d-keyboard-shortcut--inverted": t.inverted }
  ] }, [e("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText || t.generatedScreenReaderText) + " ")]), t._l(t.formattedShortcutSplit, function(o, a) {
    return [t.icons[o] ? e(t.icons[o], { key: `icon-${a}-${o}`, tag: "component", class: [
      "d-keyboard-shortcut__icon",
      { "d-keyboard-shortcut__icon--inverted": t.inverted }
    ], attrs: { size: "100", "aria-hidden": "true" } }) : o.trim() ? e("span", { key: `text-${a}-${o}`, class: [
      "d-keyboard-shortcut__item",
      { "d-keyboard-shortcut__item--inverted": t.inverted }
    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(o) } }) : t._e()];
  })], 2);
}, g = [], y = /* @__PURE__ */ w(
  f,
  S,
  g
);
const D = y.exports;
export {
  D as default
};
//# sourceMappingURL=keyboard-shortcut.js.map