[{"data":1,"prerenderedAt":718},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-kbd":12,"i-ph:code":716},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":710,"meta":711,"navigation":126,"path":712,"seo":713,"stem":714,"__hash__":715},"docs\u002Fdocs\u002Fcomponents\u002Fkbd.md","Keyboard Shortcut",{"type":16,"value":17,"toc":701},"minimark",[18,22,26,463,468,553,557,588,592,620,624,635,638,666,669,697],[19,20,14],"h1",{"id":21},"keyboard-shortcut",[23,24,25],"p",{},"A component that displays keyboard shortcuts and can optionally highlight when the keys are pressed. It's useful for showing keyboard shortcuts in your application.",[27,28,30],"kbd-example",{"source-path":29},"Kbd\u002FKbd.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Flex, Kbd, KbdGroup } from '@dolanske\u002Fvui'\nimport { useEventListener } from '@vueuse\u002Fcore'\n\nconst isActive = ref(false)\n\nuseEventListener(document, 'keyup', () => {\n  isActive.value = false\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFlex column y-center>\n    \u003CFlex x-center gap=\"xs\">\n      \u003CKbdGroup @trigger=\"isActive = true\">\n        \u003CKbd keys=\"Shift\" highlight \u002F>\n        \u003CKbd keys=\"S\" highlight \u002F>\n      \u003C\u002FKbdGroup>\n    \u003C\u002FFlex>\n    \u003Cp\n      :style=\"{ color: isActive\n        ? 'var(--color-text-green)'\n        : 'var(--color-text)',\n      }\"\n    >\n      {{ isActive ? 'Yay!!!!' : 'Press both keys.' }}\n    \u003C\u002Fp>\n  \u003C\u002FFlex>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,100,121,128,154,159,191,208,214,224,229,239,256,283,306,336,360,370,380,388,401,407,413,422,428,435,444,454],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,80,83,86,89,93,97],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Flex",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Kbd",[41,79,74],{"class":47},[41,81,82],{"class":55}," KbdGroup",[41,84,85],{"class":47}," }",[41,87,88],{"class":51}," from",[41,90,92],{"class":91},"sBR95"," '",[41,94,96],{"class":95},"sfmH-","@dolanske\u002Fvui",[41,98,99],{"class":91},"'\n",[41,101,103,105,107,110,112,114,116,119],{"class":43,"line":102},3,[41,104,65],{"class":51},[41,106,68],{"class":47},[41,108,109],{"class":55}," useEventListener",[41,111,85],{"class":47},[41,113,88],{"class":51},[41,115,92],{"class":91},[41,117,118],{"class":95},"@vueuse\u002Fcore",[41,120,99],{"class":91},[41,122,124],{"class":43,"line":123},4,[41,125,127],{"emptyLinePlaceholder":126},true,"\n",[41,129,131,135,138,141,145,148,151],{"class":43,"line":130},5,[41,132,134],{"class":133},"sCMWV","const",[41,136,137],{"class":55}," isActive",[41,139,140],{"class":47}," =",[41,142,144],{"class":143},"sRTv0"," ref",[41,146,147],{"class":47},"(",[41,149,150],{"class":51},"false",[41,152,153],{"class":47},")\n",[41,155,157],{"class":43,"line":156},6,[41,158,127],{"emptyLinePlaceholder":126},[41,160,162,165,167,170,172,174,177,180,182,185,188],{"class":43,"line":161},7,[41,163,164],{"class":143},"useEventListener",[41,166,147],{"class":47},[41,168,169],{"class":55},"document",[41,171,74],{"class":47},[41,173,92],{"class":91},[41,175,176],{"class":95},"keyup",[41,178,179],{"class":91},"'",[41,181,74],{"class":47},[41,183,184],{"class":47}," ()",[41,186,187],{"class":47}," =>",[41,189,190],{"class":47}," {\n",[41,192,194,197,200,203,205],{"class":43,"line":193},8,[41,195,196],{"class":55},"  isActive",[41,198,199],{"class":47},".",[41,201,202],{"class":55},"value",[41,204,140],{"class":47},[41,206,207],{"class":51}," false\n",[41,209,211],{"class":43,"line":210},9,[41,212,213],{"class":47},"})\n",[41,215,217,220,222],{"class":43,"line":216},10,[41,218,219],{"class":47},"\u003C\u002F",[41,221,52],{"class":51},[41,223,59],{"class":47},[41,225,227],{"class":43,"line":226},11,[41,228,127],{"emptyLinePlaceholder":126},[41,230,232,234,237],{"class":43,"line":231},12,[41,233,48],{"class":47},[41,235,236],{"class":51},"template",[41,238,59],{"class":47},[41,240,242,245,248,251,254],{"class":43,"line":241},13,[41,243,244],{"class":47},"  \u003C",[41,246,247],{"class":51},"Flex",[41,249,250],{"class":55}," column",[41,252,253],{"class":55}," y-center",[41,255,59],{"class":47},[41,257,259,262,264,267,270,273,276,279,281],{"class":43,"line":258},14,[41,260,261],{"class":47},"    \u003C",[41,263,247],{"class":51},[41,265,266],{"class":55}," x-center",[41,268,269],{"class":55}," gap",[41,271,272],{"class":47},"=",[41,274,275],{"class":91},"\"",[41,277,278],{"class":95},"xs",[41,280,275],{"class":91},[41,282,59],{"class":47},[41,284,286,289,292,295,297,299,302,304],{"class":43,"line":285},15,[41,287,288],{"class":47},"      \u003C",[41,290,291],{"class":51},"KbdGroup",[41,293,294],{"class":55}," @trigger",[41,296,272],{"class":47},[41,298,275],{"class":91},[41,300,301],{"class":95},"isActive = true",[41,303,275],{"class":91},[41,305,59],{"class":47},[41,307,309,312,315,318,320,322,325,327,330,334],{"class":43,"line":308},16,[41,310,311],{"class":47},"        \u003C",[41,313,314],{"class":51},"Kbd",[41,316,317],{"class":55}," keys",[41,319,272],{"class":47},[41,321,275],{"class":91},[41,323,324],{"class":95},"Shift",[41,326,275],{"class":91},[41,328,329],{"class":55}," highlight",[41,331,333],{"class":332},"s4DP-"," \u002F",[41,335,59],{"class":47},[41,337,339,341,343,345,347,349,352,354,356,358],{"class":43,"line":338},17,[41,340,311],{"class":47},[41,342,314],{"class":51},[41,344,317],{"class":55},[41,346,272],{"class":47},[41,348,275],{"class":91},[41,350,351],{"class":95},"S",[41,353,275],{"class":91},[41,355,329],{"class":55},[41,357,333],{"class":332},[41,359,59],{"class":47},[41,361,363,366,368],{"class":43,"line":362},18,[41,364,365],{"class":47},"      \u003C\u002F",[41,367,291],{"class":51},[41,369,59],{"class":47},[41,371,373,376,378],{"class":43,"line":372},19,[41,374,375],{"class":47},"    \u003C\u002F",[41,377,247],{"class":51},[41,379,59],{"class":47},[41,381,383,385],{"class":43,"line":382},20,[41,384,261],{"class":47},[41,386,387],{"class":51},"p\n",[41,389,391,394,396,398],{"class":43,"line":390},21,[41,392,393],{"class":55},"      :style",[41,395,272],{"class":47},[41,397,275],{"class":91},[41,399,400],{"class":95},"{ color: isActive\n",[41,402,404],{"class":43,"line":403},22,[41,405,406],{"class":95},"        ? 'var(--color-text-green)'\n",[41,408,410],{"class":43,"line":409},23,[41,411,412],{"class":95},"        : 'var(--color-text)',\n",[41,414,416,419],{"class":43,"line":415},24,[41,417,418],{"class":95},"      }",[41,420,421],{"class":91},"\"\n",[41,423,425],{"class":43,"line":424},25,[41,426,427],{"class":47},"    >\n",[41,429,431],{"class":43,"line":430},26,[41,432,434],{"class":433},"sX1ls","      {{ isActive ? 'Yay!!!!' : 'Press both keys.' }}\n",[41,436,438,440,442],{"class":43,"line":437},27,[41,439,375],{"class":47},[41,441,23],{"class":51},[41,443,59],{"class":47},[41,445,447,450,452],{"class":43,"line":446},28,[41,448,449],{"class":47},"  \u003C\u002F",[41,451,247],{"class":51},[41,453,59],{"class":47},[41,455,457,459,461],{"class":43,"line":456},29,[41,458,219],{"class":47},[41,460,236],{"class":51},[41,462,59],{"class":47},[464,465,467],"h3",{"id":466},"props","Props",[469,470,471,487],"table",{},[472,473,474],"thead",{},[475,476,477,481,484],"tr",{},[478,479,480],"th",{},"Name",[478,482,483],{},"Default",[478,485,486],{},"Type",[488,489,490,518,534],"tbody",{},[475,491,492,498,501],{},[493,494,495],"td",{},[38,496,497],{},"keys",[493,499,500],{},"—",[493,502,503,506,509,510,513,514,517],{},[38,504,505],{},"string",[507,508],"br",{},"The key or combination of keys to display (e.g., ",[38,511,512],{},"Escape"," or ",[38,515,516],{},"Ctrl+A",")",[475,519,520,525,527],{},[493,521,522],{},[38,523,524],{},"label",[493,526,500],{},[493,528,529,531,533],{},[38,530,505],{},[507,532],{},"Custom label to display instead of the automatically formatted keys",[475,535,536,541,545],{},[493,537,538],{},[38,539,540],{},"highlight",[493,542,543],{},[38,544,150],{},[493,546,547,550,552],{},[38,548,549],{},"boolean",[507,551],{},"Whether to highlight the shortcut when the keys are pressed",[464,554,556],{"id":555},"slots","Slots",[469,558,559,571],{},[472,560,561],{},[475,562,563,565,568],{},[478,564,480],{},[478,566,567],{},"Accepts",[478,569,570],{},"Description",[488,572,573],{},[475,574,575,580,585],{},[493,576,577],{},[38,578,579],{},"default",[493,581,582],{},[38,583,584],{},"any",[493,586,587],{},"Content to be displayed instead of the label or selected keys. This is useful when you want to display an icon instead of just text.",[464,589,591],{"id":590},"events","Events",[469,593,594,605],{},[472,595,596],{},[475,597,598,600,603],{},[478,599,480],{},[478,601,602],{},"Payload",[478,604,570],{},[488,606,607],{},[475,608,609,614,617],{},[493,610,611],{},[38,612,613],{},"trigger",[493,615,616],{},"-",[493,618,619],{},"Emitted when the key or combination of keys is pressed",[621,622,291],"h2",{"id":623},"kbdgroup",[23,625,626,627,630,631,634],{},"You can wrap individual ",[38,628,629],{},"\u003CKbd \u002F>"," components in a ",[38,632,633],{},"\u003CKbdGroup \u002F>"," in case you want to visually distinguish each key inside a keyboard shortcut.",[464,636,556],{"id":637},"slots-1",[469,639,640,650],{},[472,641,642],{},[475,643,644,646,648],{},[478,645,480],{},[478,647,567],{},[478,649,570],{},[488,651,652],{},[475,653,654,658,663],{},[493,655,656],{},[38,657,579],{},[493,659,660],{},[38,661,662],{},"\u003CKbd>",[493,664,665],{},"Individual keys inside a shortcut. Any other component will error.",[464,667,591],{"id":668},"events-1",[469,670,671,681],{},[472,672,673],{},[475,674,675,677,679],{},[478,676,480],{},[478,678,602],{},[478,680,570],{},[488,682,683],{},[475,684,685,689,691],{},[493,686,687],{},[38,688,613],{},[493,690,616],{},[493,692,693,694,696],{},"Emitted once all the ",[38,695,629],{}," components are triggered",[698,699,700],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .s4DP-, html code.shiki .s4DP-{--shiki-dark:#666666;--shiki-dark-font-style:italic;--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-default:#666666;--shiki-default-font-style:italic}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":62,"depth":62,"links":702},[703,704,705,706],{"id":466,"depth":102,"text":467},{"id":555,"depth":102,"text":556},{"id":590,"depth":102,"text":591},{"id":623,"depth":62,"text":291,"children":707},[708,709],{"id":637,"depth":102,"text":556},{"id":668,"depth":102,"text":591},"md",{},"\u002Fdocs\u002Fcomponents\u002Fkbd",{"title":14,"description":25},"docs\u002Fcomponents\u002Fkbd","BWIr0AuokUEfAh1eilbtkjILIH0lBs7tbyLs6xeVXNg",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":717},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882872]