@dialpad/dialtone/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconLayoutGrid, DtIconArrowRight, DtIconArrowLeft, DtIconArrowUp, DtIconArrowDown, DtIconCommand, DtIconPlus } from "@dialpad/dialtone-icons/vue3";
import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const SHORTCUTS_ICON_ALIASES = {
  "{win}": DtIconLayoutGrid,
  "{arrow-right}": DtIconArrowRight,
  "{arrow-left}": DtIconArrowLeft,
  "{arrow-up}": DtIconArrowUp,
  "{arrow-down}": DtIconArrowDown,
  "{cmd}": DtIconCommand
};
const _sfc_main = {
  compatConfig: { MODE: 3 },
  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);
    }
  }
};
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 openBlock(), createElementBlock("kbd", {
    class: normalizeClass([
      "d-keyboard-shortcut",
      { "d-keyboard-shortcut--inverted": $props.inverted }
    ])
  }, [
    $props.screenReaderText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString($props.screenReaderText), 1)) : createCommentVNode("", true),
    (openBlock(true), createElementBlock(Fragment, null, renderList($options.formattedShortcutSplit, (item, i) => {
      return openBlock(), createElementBlock(Fragment, null, [
        $options.icons[item] ? (openBlock(), createBlock(resolveDynamicComponent($options.icons[item]), {
          key: `${i}-${item}`,
          size: "100",
          "aria-hidden": "true",
          class: normalizeClass([
            "d-keyboard-shortcut__icon",
            { "d-keyboard-shortcut__icon--inverted": $props.inverted }
          ])
        }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
          key: `${i}-${item}`,
          "aria-hidden": "true",
          class: normalizeClass([
            "d-keyboard-shortcut__item",
            { "d-keyboard-shortcut__item--inverted": $props.inverted }
          ]),
          innerHTML: item
        }, null, 10, _hoisted_2))
      ], 64);
    }), 256))
  ], 2);
}
const DtKeyboardShortcut = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtKeyboardShortcut as default
};
//# sourceMappingURL=keyboard_shortcut.vue.js.map