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

Dialpad's Dialtone design system monorepo

{"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\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\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=\"`${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\n        :key=\"`${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  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\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};\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  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\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} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\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};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","_hoisted_2","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_resolveDynamicComponent"],"mappings":"uOAqDMA,EAAyB,CAC7B,QAASC,EAAAA,iBACT,gBAAiBC,EAAAA,iBACjB,eAAgBC,EAAAA,gBAChB,aAAcC,EAAAA,cACd,eAAgBC,EAAAA,gBAChB,QAASC,EAAAA,aACX,EAMKC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,iBAAAN,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,8BACAC,EAAAA,cACA,gBAAAC,EAAAA,8BACAC,EAAAA,yBACAE,EAAAA,YAGF,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,OACN,SAAU,IAMZ,iBAAkB,CAChB,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,UAAW,OAEf,EAEA,SAAU,CACR,OAAS,CACP,MAAO,CACL,GAAGR,EACH,SAAUQ,EAAAA,WAEd,EAEA,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACvD,EAEA,mBAAqB,CACnB,OAAO,OAAO,KAAKR,CAAsB,EAAE,OAAO,CAACS,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,EAAGV,EAAuBU,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC/B,EAGA,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC3D,EAEJ,KAjJA,IAAA,EAUM,MAAM,gCAVZC,EAAA,CAAA,WAAA,+CAEEC,EAAAA,mBAqCM,MAAA,CApCH,MAHLC,EAAAA,eAAA,wDAGoFC,EAAA,QAAQ,MAMhFA,EAAA,gCADRF,EAAAA,mBAKO,OALPG,EAKOC,EAAAA,gBADFF,EAAA,gBAAgB,EAAA,CAAA,GAZzBG,EAAAA,mBAAA,GAAA,EAAA,GAcIC,EAAAA,UAAA,EAAA,EAAAN,EAAAA,mBAwBWO,gBAtCfC,EAAAA,WAe0BC,EAAA,uBAf1B,CAecC,EAAMC,KAfpBL,YAAA,EAAAN,qBAAAO,EAAAA,SAAA,KAAA,CAmBcE,EAAA,MAAMC,CAAI,GAFlBJ,EAAAA,UAAA,EAAAM,EAAAA,YAUEC,EAAAA,wBATKJ,EAAA,MAAMC,CAAI,CAAA,EAAA,CAEd,IAAG,GAAKC,CAAC,IAAID,CAAI,GAClB,KAAK,MACL,cAAY,OACX,MAvBTT,EAAAA,eAAA,oEAuB4GC,EAAA,QAAQ,uCAK9GF,EAAAA,mBASE,OAAA,CAPC,IAAG,GAAKW,CAAC,IAAID,CAAI,GAClB,cAAY,OACX,MAhCTT,EAAAA,eAAA,oEAgC4GC,EAAA,QAAQ,IAI5G,UAAQQ,CApChB,EAAA,KAAA,GAAAX,CAAA"}