@dialpad/dialtone-vue/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem"],"mappings":"oNAmDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,cACA,QAAAC,EAAAA,YACA,EAGAC,EAAA,CACA,QAAA,UACA,QAAA,SACA,QAAA,UACA,gBAAA,cACA,eAAA,aACA,aAAA,WACA,eAAA,aACA,SAAA,MACA,EAGAC,EAAA,CACA,KAAA,UACA,IAAA,MACA,IAAA,SACA,IAAA,SACA,IAAA,SACA,KAAA,UACA,KAAA,YACA,IAAA,SACA,KAAA,WACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,aAAAC,EAAAA,aACA,WAAAI,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAX,EACA,SAAAW,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAY,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAb,EAAAa,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,EAGA,2BAAA,CACA,OAAA,KAAA,uBACA,IAAAC,GAAA,CACA,MAAAC,EAAAD,EAAA,KAAA,EAGA,GAAAR,EAAAS,CAAA,EACA,OAAAT,EAAAS,CAAA,EAIA,MAAAC,EAAAD,EAAA,YAAA,EACA,OAAAR,EAAAS,CAAA,EACAT,EAAAS,CAAA,EAIAD,CACA,CAAA,EACA,OAAAD,GAAAA,CAAA,EACA,KAAA,GAAA,CACA,CACA,CACA"}