@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
2 lines • 3 kB
JavaScript
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let t=require(`vue`),n=require(`@dialpad/dialtone-icons/vue3`);var r={"{win}":n.DtIconLayoutGrid,"{arrow-right}":n.DtIconArrowRight,"{arrow-left}":n.DtIconArrowLeft,"{arrow-up}":n.DtIconArrowUp,"{arrow-down}":n.DtIconArrowDown,"{cmd}":n.DtIconCommand,"{opt}":n.DtIconOption},i={"{cmd}":`Command`,"{opt}":`Option`,"{win}":`Windows`,"{arrow-right}":`Right Arrow`,"{arrow-left}":`Left Arrow`,"{arrow-up}":`Up Arrow`,"{arrow-down}":`Down Arrow`,"{plus}":`plus`},a={ctrl:`Control`,alt:`Alt`,esc:`Escape`,del:`Delete`,ins:`Insert`,pgup:`Page Up`,pgdn:`Page Down`,num:`Number`,caps:`Caps Lock`},o={compatConfig:{MODE:3},name:`DtKeyboardShortcut`,components:{DtIconLayoutGrid:n.DtIconLayoutGrid,DtIconArrowRight:n.DtIconArrowRight,DtIconArrowLeft:n.DtIconArrowLeft,DtIconArrowUp:n.DtIconArrowUp,DtIconArrowDown:n.DtIconArrowDown,DtIconCommand:n.DtIconCommand,DtIconOption:n.DtIconOption,DtIconPlus:n.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...r,"{plus}":n.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,`{plus}`)},formattedShortcut(){return Object.keys(r).reduce((e,t)=>e.replace(RegExp(`{`+t+`}`,`gi`),r[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(i[t])return i[t];let n=t.toLowerCase();return a[n]?a[n]:t}).filter(e=>e).join(` `)}}},s={class:`d-keyboard-shortcut--sr-only`},c=[`innerHTML`];function l(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`kbd`,{class:(0,t.normalizeClass)([`d-keyboard-shortcut`,{"d-keyboard-shortcut--inverted":r.inverted}])},[(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(r.screenReaderText||o.generatedScreenReaderText),1),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.formattedShortcutSplit,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[o.icons[e]?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.icons[e]),{key:`icon-${n}-${e}`,size:`100`,"aria-hidden":`true`,class:(0,t.normalizeClass)([`d-keyboard-shortcut__icon`,{"d-keyboard-shortcut__icon--inverted":r.inverted}])},null,8,[`class`])):e.trim()?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:`text-${n}-${e}`,"aria-hidden":`true`,class:(0,t.normalizeClass)([`d-keyboard-shortcut__item`,{"d-keyboard-shortcut__item--inverted":r.inverted}]),innerHTML:e},null,10,c)):(0,t.createCommentVNode)(``,!0)],64))),256))],2)}var u=e.t(o,[[`render`,l]]);exports.default=u;
//# sourceMappingURL=keyboard-shortcut.cjs.map