[{"data":1,"prerenderedAt":511},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-emoji-picker":12,"i-ph:code":509},{"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":502,"extension":503,"meta":504,"navigation":129,"path":505,"seo":506,"stem":507,"__hash__":508},"docs\u002Fdocs\u002Fcomponents\u002Femoji-picker.md","Emoji Picker",{"type":16,"value":17,"toc":497},"minimark",[18,22,31,198,203,246,250,257,455,459,462,493],[19,20,14],"h1",{"id":21},"emoji-picker",[23,24,25,26],"p",{},"A searchable emoji picker with category tabs and hover previews. If needed, it can be placed inside a ",[27,28,30],"a",{"href":29},"\u002Fdocs\u002Fcomponents\u002Fdropdown","Dropdown",[32,33,35],"emoji-picker-example",{"source-path":34},"EmojiPicker\u002FEmojiPicker.vue",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup lang=\"ts\">\nimport { Card, EmojiPicker } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCard :padding=\"false\" inline>\n    \u003CEmojiPicker \u002F>\n  \u003C\u002FCard>\n\u003C\u002Ftemplate>\n","vue","",[43,44,45,81,114,124,131,141,167,179,189],"code",{"__ignoreMap":41},[46,47,50,54,58,62,65,68,72,76,78],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sP76a","\u003C",[46,55,57],{"class":56},"sKpE2","script",[46,59,61],{"class":60},"sflEz"," setup",[46,63,64],{"class":60}," lang",[46,66,67],{"class":52},"=",[46,69,71],{"class":70},"sBR95","\"",[46,73,75],{"class":74},"sfmH-","ts",[46,77,71],{"class":70},[46,79,80],{"class":52},">\n",[46,82,84,87,90,93,96,99,102,105,108,111],{"class":48,"line":83},2,[46,85,86],{"class":56},"import",[46,88,89],{"class":52}," {",[46,91,92],{"class":60}," Card",[46,94,95],{"class":52},",",[46,97,98],{"class":60}," EmojiPicker",[46,100,101],{"class":52}," }",[46,103,104],{"class":56}," from",[46,106,107],{"class":70}," '",[46,109,110],{"class":74},"@dolanske\u002Fvui",[46,112,113],{"class":70},"'\n",[46,115,117,120,122],{"class":48,"line":116},3,[46,118,119],{"class":52},"\u003C\u002F",[46,121,57],{"class":56},[46,123,80],{"class":52},[46,125,127],{"class":48,"line":126},4,[46,128,130],{"emptyLinePlaceholder":129},true,"\n",[46,132,134,136,139],{"class":48,"line":133},5,[46,135,53],{"class":52},[46,137,138],{"class":56},"template",[46,140,80],{"class":52},[46,142,144,147,150,153,155,157,160,162,165],{"class":48,"line":143},6,[46,145,146],{"class":52},"  \u003C",[46,148,149],{"class":56},"Card",[46,151,152],{"class":60}," :padding",[46,154,67],{"class":52},[46,156,71],{"class":70},[46,158,159],{"class":74},"false",[46,161,71],{"class":70},[46,163,164],{"class":60}," inline",[46,166,80],{"class":52},[46,168,170,173,176],{"class":48,"line":169},7,[46,171,172],{"class":52},"    \u003C",[46,174,175],{"class":56},"EmojiPicker",[46,177,178],{"class":52}," \u002F>\n",[46,180,182,185,187],{"class":48,"line":181},8,[46,183,184],{"class":52},"  \u003C\u002F",[46,186,149],{"class":56},[46,188,80],{"class":52},[46,190,192,194,196],{"class":48,"line":191},9,[46,193,119],{"class":52},[46,195,138],{"class":56},[46,197,80],{"class":52},[199,200,202],"h3",{"id":201},"events","Events",[204,205,206,222],"table",{},[207,208,209],"thead",{},[210,211,212,216,219],"tr",{},[213,214,215],"th",{},"Name",[213,217,218],{},"Payload",[213,220,221],{},"Description",[223,224,225],"tbody",{},[210,226,227,233,243],{},[228,229,230],"td",{},[43,231,232],{},"select",[228,234,235],{},[27,236,240],{"href":237,"rel":238},"https:\u002F\u002Femojibase.dev\u002Fapi\u002Femojibase\u002Finterface\u002FEmoji",[239],"nofollow",[43,241,242],{},"Emoji",[228,244,245],{},"Emitted when an emoji is selected",[199,247,249],{"id":248},"usage","Usage",[23,251,252,253,256],{},"In most cases, you will want to put the ",[43,254,255],{},"\u003CEmojiPicker \u002F>"," component inside a Dropdown, so that it can be opened in a popout.",[258,259,261],"emoji-picker-dropdown-example",{"source-path":260},"EmojiPicker\u002FEmojiPickerDropdown.vue",[36,262,264],{"className":38,"code":263,"language":40,"meta":41,"style":41},"\u003Cscript setup lang=\"ts\">\nimport { Button, Card, Dropdown, EmojiPicker } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDropdown>\n    \u003CButton>Pick emoji\u003C\u002FButton>\n\n    \u003Ctemplate #content>\n      \u003CCard :padding=\"false\" inline>\n        \u003CEmojiPicker \u002F>\n      \u003C\u002FCard>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDropdown>\n\u003C\u002Ftemplate>\n",[43,265,266,286,318,326,330,338,346,366,370,385,407,417,427,437,446],{"__ignoreMap":41},[46,267,268,270,272,274,276,278,280,282,284],{"class":48,"line":49},[46,269,53],{"class":52},[46,271,57],{"class":56},[46,273,61],{"class":60},[46,275,64],{"class":60},[46,277,67],{"class":52},[46,279,71],{"class":70},[46,281,75],{"class":74},[46,283,71],{"class":70},[46,285,80],{"class":52},[46,287,288,290,292,295,297,299,301,304,306,308,310,312,314,316],{"class":48,"line":83},[46,289,86],{"class":56},[46,291,89],{"class":52},[46,293,294],{"class":60}," Button",[46,296,95],{"class":52},[46,298,92],{"class":60},[46,300,95],{"class":52},[46,302,303],{"class":60}," Dropdown",[46,305,95],{"class":52},[46,307,98],{"class":60},[46,309,101],{"class":52},[46,311,104],{"class":56},[46,313,107],{"class":70},[46,315,110],{"class":74},[46,317,113],{"class":70},[46,319,320,322,324],{"class":48,"line":116},[46,321,119],{"class":52},[46,323,57],{"class":56},[46,325,80],{"class":52},[46,327,328],{"class":48,"line":126},[46,329,130],{"emptyLinePlaceholder":129},[46,331,332,334,336],{"class":48,"line":133},[46,333,53],{"class":52},[46,335,138],{"class":56},[46,337,80],{"class":52},[46,339,340,342,344],{"class":48,"line":143},[46,341,146],{"class":52},[46,343,30],{"class":56},[46,345,80],{"class":52},[46,347,348,350,353,356,360,362,364],{"class":48,"line":169},[46,349,172],{"class":52},[46,351,352],{"class":56},"Button",[46,354,355],{"class":52},">",[46,357,359],{"class":358},"sX1ls","Pick emoji",[46,361,119],{"class":52},[46,363,352],{"class":56},[46,365,80],{"class":52},[46,367,368],{"class":48,"line":181},[46,369,130],{"emptyLinePlaceholder":129},[46,371,372,374,376,379,383],{"class":48,"line":191},[46,373,172],{"class":52},[46,375,138],{"class":56},[46,377,378],{"class":52}," #",[46,380,382],{"class":381},"sRTv0","content",[46,384,80],{"class":52},[46,386,388,391,393,395,397,399,401,403,405],{"class":48,"line":387},10,[46,389,390],{"class":52},"      \u003C",[46,392,149],{"class":56},[46,394,152],{"class":60},[46,396,67],{"class":52},[46,398,71],{"class":70},[46,400,159],{"class":74},[46,402,71],{"class":70},[46,404,164],{"class":60},[46,406,80],{"class":52},[46,408,410,413,415],{"class":48,"line":409},11,[46,411,412],{"class":52},"        \u003C",[46,414,175],{"class":56},[46,416,178],{"class":52},[46,418,420,423,425],{"class":48,"line":419},12,[46,421,422],{"class":52},"      \u003C\u002F",[46,424,149],{"class":56},[46,426,80],{"class":52},[46,428,430,433,435],{"class":48,"line":429},13,[46,431,432],{"class":52},"    \u003C\u002F",[46,434,138],{"class":56},[46,436,80],{"class":52},[46,438,440,442,444],{"class":48,"line":439},14,[46,441,184],{"class":52},[46,443,30],{"class":56},[46,445,80],{"class":52},[46,447,449,451,453],{"class":48,"line":448},15,[46,450,119],{"class":52},[46,452,138],{"class":56},[46,454,80],{"class":52},[199,456,458],{"id":457},"tokens","Tokens",[23,460,461],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[204,463,464,476],{},[207,465,466],{},[210,467,468,471,474],{},[213,469,470],{},"Token",[213,472,473],{},"Default",[213,475,221],{},[223,477,478],{},[210,479,480,485,490],{},[228,481,482],{},[43,483,484],{},"--vui-emoji-picker-height",[228,486,487],{},[43,488,489],{},"380px",[228,491,492],{},"Sets the height of the visible emoji list",[494,495,496],"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 .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);}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}",{"title":41,"searchDepth":83,"depth":83,"links":498},[499,500,501],{"id":201,"depth":116,"text":202},{"id":248,"depth":116,"text":249},{"id":457,"depth":116,"text":458},"A searchable emoji picker with category tabs and hover previews. If needed, it can be placed inside a Dropdown","md",{},"\u002Fdocs\u002Fcomponents\u002Femoji-picker",{"title":14,"description":502},"docs\u002Fcomponents\u002Femoji-picker","NeJN7j17M-Kgx6HM-tLvWVcG9VMPpfOEySnEs5z1T88",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":510},"\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>",1782200882811]