[{"data":1,"prerenderedAt":7701},["ShallowReactive",2],{"blog-slugs":3,"post-/blog/dynamic-generic-slots":8,"post-translation-/blog/dynamic-generic-slots":173,"post-others-/blog/dynamic-generic-slots":2687},{"en":4,"ar":7},[5,6],"dynamic-generic-slots","from-renderless-component-to-composable-function",[5,6],{"id":9,"title":10,"body":11,"date":2635,"description":2636,"extension":2637,"img":2638,"meta":2639,"navigation":173,"path":2677,"seo":2678,"stem":2679,"tags":2680,"__hash__":2686},"blog/blog/dynamic-generic-slots/index.md","Vue.js - Dynamic and Generic Slots",{"type":12,"value":13,"toc":2628},"minimark",[14,18,25,28,33,45,48,52,55,58,65,391,419,429,848,851,866,870,883,892,1120,1129,1139,1529,1547,1559,1563,1566,1647,1672,1675,2211,2235,2248,2549,2575,2593,2608,2612,2624],[15,16,10],"h1",{"id":17},"vuejs-dynamic-and-generic-slots",[19,20,21],"tag-renderer",{},[22,23,24],"p",{},"Vue.js, Slots, Dynamic slots, Generic components, defineSlots, TypeScript, Vue 3.3",[26,27],"publish-date",{},[29,30,32],"h2",{"id":31},"introduction","Introduction",[22,34,35,36,40,41,44],{},"In this article we look at dynamic and generic slots in Vue.js, using ",[37,38,39],"code",{},"\u003Cscript setup>"," and the ",[37,42,43],{},"defineSlots"," macro introduced in Vue 3.3. Together they let us build a component that other developers can customise freely, while their editor tells them, slot by slot, what they are working with. That makes the component easier to reuse, too.",[22,46,47],{},"We will work through three small components: a table that renders one slot per column, a generic list whose slot knows the type of its items, and finally a table that does both.",[29,49,51],{"id":50},"dynamic-slots","Dynamic slots",[22,53,54],{},"Dynamic slots are scoped slots with dynamic names: the name is worked out while the component renders, instead of being written into the template in advance.",[22,56,57],{},"There are two sides to this. A component can render slots under computed names, and a parent can fill a slot whose name it computes.",[22,59,60,61,64],{},"Here is the first side. ",[37,62,63],{},"BasicTable"," takes rows and a list of columns, and wraps every cell in a slot named after its column:",[66,67,73],"pre",{"className":68,"code":69,"filename":70,"language":71,"meta":72,"style":72},"language-vue shiki shiki-themes site-light site-light site-dark","\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  rows: Record\u003Cstring, unknown>[]\n  columns: string[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ctable>\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth v-for=\"column in columns\" :key=\"column\" scope=\"col\">\n          \u003Cslot :name=\"`header-${column}`\" :column=\"column\">{{ column }}\u003C/slot>\n        \u003C/th>\n      \u003C/tr>\n    \u003C/thead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"(row, index) in rows\" :key=\"index\">\n        \u003Ctd v-for=\"column in columns\" :key=\"column\">\n          \u003Cslot :name=\"`cell-${column}`\" :value=\"row[column]\" :row=\"row\">{{ row[column] }}\u003C/slot>\n        \u003C/td>\n      \u003C/tr>\n    \u003C/tbody>\n  \u003C/table>\n\u003C/template>\n","BasicTable.vue","vue","",[37,74,75,102,112,142,156,162,168,175,181,187,193,199,231,261,267,273,279,285,307,327,362,368,373,379,385],{"__ignoreMap":72},[76,77,80,84,88,91,95,99],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sZ9Zp","\u003Cscript",[76,85,87],{"class":86},"sSzyk"," setup",[76,89,90],{"class":86}," lang",[76,92,94],{"class":93},"sXnUm","=",[76,96,98],{"class":97},"sgVH1","\"ts\"",[76,100,101],{"class":82},">\n",[76,103,105,109],{"class":78,"line":104},2,[76,106,108],{"class":107},"sUqqj","defineProps",[76,110,111],{"class":93},"\u003C{\n",[76,113,115,119,123,127,130,133,136,139],{"class":78,"line":114},3,[76,116,118],{"class":117},"sBiod","  rows",[76,120,122],{"class":121},"sZ7qJ",":",[76,124,126],{"class":125},"sHXsw"," Record",[76,128,129],{"class":93},"\u003C",[76,131,132],{"class":125},"string",[76,134,135],{"class":93},",",[76,137,138],{"class":125}," unknown",[76,140,141],{"class":93},">[]\n",[76,143,145,148,150,153],{"class":78,"line":144},4,[76,146,147],{"class":117},"  columns",[76,149,122],{"class":121},[76,151,152],{"class":125}," string",[76,154,155],{"class":93},"[]\n",[76,157,159],{"class":78,"line":158},5,[76,160,161],{"class":93},"}>()\n",[76,163,165],{"class":78,"line":164},6,[76,166,167],{"class":82},"\u003C/script>\n",[76,169,171],{"class":78,"line":170},7,[76,172,174],{"emptyLinePlaceholder":173},true,"\n",[76,176,178],{"class":78,"line":177},8,[76,179,180],{"class":82},"\u003Ctemplate>\n",[76,182,184],{"class":78,"line":183},9,[76,185,186],{"class":82},"  \u003Ctable>\n",[76,188,190],{"class":78,"line":189},10,[76,191,192],{"class":82},"    \u003Cthead>\n",[76,194,196],{"class":78,"line":195},11,[76,197,198],{"class":82},"      \u003Ctr>\n",[76,200,202,205,208,210,213,216,218,221,224,226,229],{"class":78,"line":201},12,[76,203,204],{"class":82},"        \u003Cth",[76,206,207],{"class":86}," v-for",[76,209,94],{"class":93},[76,211,212],{"class":97},"\"column in columns\"",[76,214,215],{"class":86}," :key",[76,217,94],{"class":93},[76,219,220],{"class":97},"\"column\"",[76,222,223],{"class":86}," scope",[76,225,94],{"class":93},[76,227,228],{"class":97},"\"col\"",[76,230,101],{"class":82},[76,232,234,237,240,242,245,248,250,252,255,258],{"class":78,"line":233},13,[76,235,236],{"class":82},"          \u003Cslot",[76,238,239],{"class":86}," :name",[76,241,94],{"class":93},[76,243,244],{"class":97},"\"`header-${column}`\"",[76,246,247],{"class":86}," :column",[76,249,94],{"class":93},[76,251,220],{"class":97},[76,253,254],{"class":82},">",[76,256,257],{"class":117},"{{ column }}",[76,259,260],{"class":82},"\u003C/slot>\n",[76,262,264],{"class":78,"line":263},14,[76,265,266],{"class":82},"        \u003C/th>\n",[76,268,270],{"class":78,"line":269},15,[76,271,272],{"class":82},"      \u003C/tr>\n",[76,274,276],{"class":78,"line":275},16,[76,277,278],{"class":82},"    \u003C/thead>\n",[76,280,282],{"class":78,"line":281},17,[76,283,284],{"class":82},"    \u003Ctbody>\n",[76,286,288,291,293,295,298,300,302,305],{"class":78,"line":287},18,[76,289,290],{"class":82},"      \u003Ctr",[76,292,207],{"class":86},[76,294,94],{"class":93},[76,296,297],{"class":97},"\"(row, index) in rows\"",[76,299,215],{"class":86},[76,301,94],{"class":93},[76,303,304],{"class":97},"\"index\"",[76,306,101],{"class":82},[76,308,310,313,315,317,319,321,323,325],{"class":78,"line":309},19,[76,311,312],{"class":82},"        \u003Ctd",[76,314,207],{"class":86},[76,316,94],{"class":93},[76,318,212],{"class":97},[76,320,215],{"class":86},[76,322,94],{"class":93},[76,324,220],{"class":97},[76,326,101],{"class":82},[76,328,330,332,334,336,339,342,344,347,350,352,355,357,360],{"class":78,"line":329},20,[76,331,236],{"class":82},[76,333,239],{"class":86},[76,335,94],{"class":93},[76,337,338],{"class":97},"\"`cell-${column}`\"",[76,340,341],{"class":86}," :value",[76,343,94],{"class":93},[76,345,346],{"class":97},"\"row[column]\"",[76,348,349],{"class":86}," :row",[76,351,94],{"class":93},[76,353,354],{"class":97},"\"row\"",[76,356,254],{"class":82},[76,358,359],{"class":117},"{{ row[column] }}",[76,361,260],{"class":82},[76,363,365],{"class":78,"line":364},21,[76,366,367],{"class":82},"        \u003C/td>\n",[76,369,371],{"class":78,"line":370},22,[76,372,272],{"class":82},[76,374,376],{"class":78,"line":375},23,[76,377,378],{"class":82},"    \u003C/tbody>\n",[76,380,382],{"class":78,"line":381},24,[76,383,384],{"class":82},"  \u003C/table>\n",[76,386,388],{"class":78,"line":387},25,[76,389,390],{"class":82},"\u003C/template>\n",[22,392,393,394,397,398,397,401,404,405,408,409,397,412,397,415,418],{},"With the columns ",[37,395,396],{},"number",", ",[37,399,400],{},"customer",[37,402,403],{},"amount"," and ",[37,406,407],{},"status",", the table offers eight slots: ",[37,410,411],{},"header-number",[37,413,414],{},"cell-number",[37,416,417],{},"header-customer",", and so on. Each one has fallback content, so a parent only fills the slots it wants to change.",[22,420,421,422,425,426,122],{},"The second side is the parent. A slot name can be a dynamic argument, written in square brackets after ",[37,423,424],{},"v-slot:"," or its shorthand ",[37,427,428],{},"#",[430,431,432,843],"demo",{},[433,434,435],"template",{"v-slot:code":72},[66,436,438],{"className":68,"code":437,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport BasicTable from './BasicTable.vue'\n\nconst columns = ['number', 'customer', 'amount', 'status']\nconst invoices = [\n  { number: 'INV-1042', customer: 'Northwind Traders', amount: 1240, status: 'paid' },\n  { number: 'INV-1043', customer: 'Blue Harbor', amount: 860.5, status: 'issued' },\n  { number: 'INV-1044', customer: 'Atlas Studio', amount: 2310, status: 'draft' },\n]\n\nconst highlighted = ref('customer')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cselect v-model=\"highlighted\">\n    \u003Coption v-for=\"column in columns\" :key=\"column\">{{ column }}\u003C/option>\n  \u003C/select>\n\n  \u003CBasicTable :rows=\"invoices\" :columns=\"columns\">\n    \u003Ctemplate #[`cell-${highlighted}`]=\"{ value }\">\n      \u003Cmark>{{ value }}\u003C/mark>\n    \u003C/template>\n  \u003C/BasicTable>\n\u003C/template>\n",[37,439,440,454,474,487,491,527,539,586,626,666,670,674,695,699,703,707,722,746,751,755,778,818,829,834,839],{"__ignoreMap":72},[76,441,442,444,446,448,450,452],{"class":78,"line":79},[76,443,83],{"class":82},[76,445,87],{"class":86},[76,447,90],{"class":86},[76,449,94],{"class":93},[76,451,98],{"class":97},[76,453,101],{"class":82},[76,455,456,459,462,465,468,471],{"class":78,"line":104},[76,457,458],{"class":82},"import",[76,460,461],{"class":93}," {",[76,463,464],{"class":117}," ref ",[76,466,467],{"class":93},"}",[76,469,470],{"class":82}," from",[76,472,473],{"class":97}," 'vue'\n",[76,475,476,478,481,484],{"class":78,"line":114},[76,477,458],{"class":82},[76,479,480],{"class":117}," BasicTable ",[76,482,483],{"class":82},"from",[76,485,486],{"class":97}," './BasicTable.vue'\n",[76,488,489],{"class":78,"line":144},[76,490,174],{"emptyLinePlaceholder":173},[76,492,493,496,500,503,506,509,511,514,516,519,521,524],{"class":78,"line":158},[76,494,495],{"class":82},"const",[76,497,499],{"class":498},"sJ-0L"," columns",[76,501,502],{"class":121}," =",[76,504,505],{"class":93}," [",[76,507,508],{"class":97},"'number'",[76,510,135],{"class":93},[76,512,513],{"class":97}," 'customer'",[76,515,135],{"class":93},[76,517,518],{"class":97}," 'amount'",[76,520,135],{"class":93},[76,522,523],{"class":97}," 'status'",[76,525,526],{"class":93},"]\n",[76,528,529,531,534,536],{"class":78,"line":164},[76,530,495],{"class":82},[76,532,533],{"class":498}," invoices",[76,535,502],{"class":121},[76,537,538],{"class":93}," [\n",[76,540,541,544,548,550,553,555,558,560,563,565,568,570,573,575,578,580,583],{"class":78,"line":170},[76,542,543],{"class":93},"  {",[76,545,547],{"class":546},"snYWn"," number",[76,549,122],{"class":93},[76,551,552],{"class":97}," 'INV-1042'",[76,554,135],{"class":93},[76,556,557],{"class":546}," customer",[76,559,122],{"class":93},[76,561,562],{"class":97}," 'Northwind Traders'",[76,564,135],{"class":93},[76,566,567],{"class":546}," amount",[76,569,122],{"class":93},[76,571,572],{"class":498}," 1240",[76,574,135],{"class":93},[76,576,577],{"class":546}," status",[76,579,122],{"class":93},[76,581,582],{"class":97}," 'paid'",[76,584,585],{"class":93}," },\n",[76,587,588,590,592,594,597,599,601,603,606,608,610,612,615,617,619,621,624],{"class":78,"line":177},[76,589,543],{"class":93},[76,591,547],{"class":546},[76,593,122],{"class":93},[76,595,596],{"class":97}," 'INV-1043'",[76,598,135],{"class":93},[76,600,557],{"class":546},[76,602,122],{"class":93},[76,604,605],{"class":97}," 'Blue Harbor'",[76,607,135],{"class":93},[76,609,567],{"class":546},[76,611,122],{"class":93},[76,613,614],{"class":498}," 860.5",[76,616,135],{"class":93},[76,618,577],{"class":546},[76,620,122],{"class":93},[76,622,623],{"class":97}," 'issued'",[76,625,585],{"class":93},[76,627,628,630,632,634,637,639,641,643,646,648,650,652,655,657,659,661,664],{"class":78,"line":183},[76,629,543],{"class":93},[76,631,547],{"class":546},[76,633,122],{"class":93},[76,635,636],{"class":97}," 'INV-1044'",[76,638,135],{"class":93},[76,640,557],{"class":546},[76,642,122],{"class":93},[76,644,645],{"class":97}," 'Atlas Studio'",[76,647,135],{"class":93},[76,649,567],{"class":546},[76,651,122],{"class":93},[76,653,654],{"class":498}," 2310",[76,656,135],{"class":93},[76,658,577],{"class":546},[76,660,122],{"class":93},[76,662,663],{"class":97}," 'draft'",[76,665,585],{"class":93},[76,667,668],{"class":78,"line":189},[76,669,526],{"class":93},[76,671,672],{"class":78,"line":195},[76,673,174],{"emptyLinePlaceholder":173},[76,675,676,678,681,683,686,689,692],{"class":78,"line":201},[76,677,495],{"class":82},[76,679,680],{"class":498}," highlighted",[76,682,502],{"class":121},[76,684,685],{"class":107}," ref",[76,687,688],{"class":93},"(",[76,690,691],{"class":97},"'customer'",[76,693,694],{"class":93},")\n",[76,696,697],{"class":78,"line":233},[76,698,167],{"class":82},[76,700,701],{"class":78,"line":263},[76,702,174],{"emptyLinePlaceholder":173},[76,704,705],{"class":78,"line":269},[76,706,180],{"class":82},[76,708,709,712,715,717,720],{"class":78,"line":275},[76,710,711],{"class":82},"  \u003Cselect",[76,713,714],{"class":86}," v-model",[76,716,94],{"class":93},[76,718,719],{"class":97},"\"highlighted\"",[76,721,101],{"class":82},[76,723,724,727,729,731,733,735,737,739,741,743],{"class":78,"line":281},[76,725,726],{"class":82},"    \u003Coption",[76,728,207],{"class":86},[76,730,94],{"class":93},[76,732,212],{"class":97},[76,734,215],{"class":86},[76,736,94],{"class":93},[76,738,220],{"class":97},[76,740,254],{"class":82},[76,742,257],{"class":117},[76,744,745],{"class":82},"\u003C/option>\n",[76,747,748],{"class":78,"line":287},[76,749,750],{"class":82},"  \u003C/select>\n",[76,752,753],{"class":78,"line":309},[76,754,174],{"emptyLinePlaceholder":173},[76,756,757,760,763,765,768,771,773,776],{"class":78,"line":329},[76,758,759],{"class":82},"  \u003CBasicTable",[76,761,762],{"class":86}," :rows",[76,764,94],{"class":93},[76,766,767],{"class":97},"\"invoices\"",[76,769,770],{"class":86}," :columns",[76,772,94],{"class":93},[76,774,775],{"class":97},"\"columns\"",[76,777,101],{"class":82},[76,779,780,783,786,789,792,795,797,800,803,806,809,812,814,816],{"class":78,"line":364},[76,781,782],{"class":82},"    \u003Ctemplate",[76,784,785],{"class":93}," #[",[76,787,788],{"class":97},"`cell-",[76,790,791],{"class":93},"${",[76,793,794],{"class":117},"highlighted",[76,796,467],{"class":93},[76,798,799],{"class":97},"`",[76,801,802],{"class":93},"]=",[76,804,805],{"class":97},"\"",[76,807,808],{"class":93},"{",[76,810,811],{"class":117}," value ",[76,813,467],{"class":93},[76,815,805],{"class":97},[76,817,101],{"class":82},[76,819,820,823,826],{"class":78,"line":370},[76,821,822],{"class":82},"      \u003Cmark>",[76,824,825],{"class":117},"{{ value }}",[76,827,828],{"class":82},"\u003C/mark>\n",[76,830,831],{"class":78,"line":375},[76,832,833],{"class":82},"    \u003C/template>\n",[76,835,836],{"class":78,"line":381},[76,837,838],{"class":82},"  \u003C/BasicTable>\n",[76,840,841],{"class":78,"line":387},[76,842,390],{"class":82},[433,844,845],{"v-slot:output":72},[846,847],"slots-dynamic-demo",{},[22,849,850],{},"Pick another column and the highlight moves: the parent is now filling a different slot.",[22,852,853,854,857,858,861,862,865],{},"This works, but only at runtime. As far as TypeScript is concerned, ",[37,855,856],{},"value"," is ",[37,859,860],{},"unknown",", so we cannot format an amount without converting it first. And nothing checks the names: a slot called ",[37,863,864],{},"cell-amout"," is accepted without complaint and simply never renders.",[29,867,869],{"id":868},"generic-slots","Generic slots",[22,871,872,873,876,877,879,880,882],{},"Vue 3.3 added two things that solve this. The first is the ",[37,874,875],{},"generic"," attribute on ",[37,878,39],{},", which gives a component type parameters, just like a generic function. The second is the ",[37,881,43],{}," macro, which declares the slots a component renders and the props each one receives.",[22,884,885,888,889,122],{},[37,886,887],{},"DataList"," uses both. It does not know what kind of items it will be given, so it calls their type ",[37,890,891],{},"T",[66,893,896],{"className":68,"code":894,"filename":895,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T\">\ndefineProps\u003C{\n  items: T[]\n}>()\n\ndefineSlots\u003C{\n  item(props: { item: T, index: number }): any\n  empty?(): any\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cul v-if=\"items.length\">\n    \u003Cli v-for=\"(item, index) in items\" :key=\"index\">\n      \u003Cslot name=\"item\" :item=\"item\" :index=\"index\" />\n    \u003C/li>\n  \u003C/ul>\n  \u003Cslot v-else name=\"empty\" />\n\u003C/template>\n","DataList.vue",[37,897,898,923,929,941,945,949,955,993,1008,1012,1016,1020,1024,1039,1059,1089,1094,1099,1116],{"__ignoreMap":72},[76,899,900,902,904,906,908,910,913,915,917,919,921],{"class":78,"line":79},[76,901,83],{"class":82},[76,903,87],{"class":86},[76,905,90],{"class":86},[76,907,94],{"class":93},[76,909,98],{"class":97},[76,911,912],{"class":86}," generic",[76,914,94],{"class":93},[76,916,805],{"class":97},[76,918,891],{"class":125},[76,920,805],{"class":97},[76,922,101],{"class":82},[76,924,925,927],{"class":78,"line":104},[76,926,108],{"class":107},[76,928,111],{"class":93},[76,930,931,934,936,939],{"class":78,"line":114},[76,932,933],{"class":117},"  items",[76,935,122],{"class":121},[76,937,938],{"class":125}," T",[76,940,155],{"class":93},[76,942,943],{"class":78,"line":144},[76,944,161],{"class":93},[76,946,947],{"class":78,"line":158},[76,948,174],{"emptyLinePlaceholder":173},[76,950,951,953],{"class":78,"line":164},[76,952,43],{"class":107},[76,954,111],{"class":93},[76,956,957,960,962,965,967,969,972,974,976,978,981,983,985,988,990],{"class":78,"line":170},[76,958,959],{"class":107},"  item",[76,961,688],{"class":93},[76,963,964],{"class":117},"props",[76,966,122],{"class":121},[76,968,461],{"class":93},[76,970,971],{"class":117}," item",[76,973,122],{"class":121},[76,975,938],{"class":125},[76,977,135],{"class":93},[76,979,980],{"class":117}," index",[76,982,122],{"class":121},[76,984,547],{"class":125},[76,986,987],{"class":93}," })",[76,989,122],{"class":121},[76,991,992],{"class":125}," any\n",[76,994,995,998,1001,1004,1006],{"class":78,"line":177},[76,996,997],{"class":107},"  empty",[76,999,1000],{"class":121},"?",[76,1002,1003],{"class":93},"()",[76,1005,122],{"class":121},[76,1007,992],{"class":125},[76,1009,1010],{"class":78,"line":183},[76,1011,161],{"class":93},[76,1013,1014],{"class":78,"line":189},[76,1015,167],{"class":82},[76,1017,1018],{"class":78,"line":195},[76,1019,174],{"emptyLinePlaceholder":173},[76,1021,1022],{"class":78,"line":201},[76,1023,180],{"class":82},[76,1025,1026,1029,1032,1034,1037],{"class":78,"line":233},[76,1027,1028],{"class":82},"  \u003Cul",[76,1030,1031],{"class":86}," v-if",[76,1033,94],{"class":93},[76,1035,1036],{"class":97},"\"items.length\"",[76,1038,101],{"class":82},[76,1040,1041,1044,1046,1048,1051,1053,1055,1057],{"class":78,"line":263},[76,1042,1043],{"class":82},"    \u003Cli",[76,1045,207],{"class":86},[76,1047,94],{"class":93},[76,1049,1050],{"class":97},"\"(item, index) in items\"",[76,1052,215],{"class":86},[76,1054,94],{"class":93},[76,1056,304],{"class":97},[76,1058,101],{"class":82},[76,1060,1061,1064,1067,1069,1072,1075,1077,1079,1082,1084,1086],{"class":78,"line":269},[76,1062,1063],{"class":82},"      \u003Cslot",[76,1065,1066],{"class":86}," name",[76,1068,94],{"class":93},[76,1070,1071],{"class":97},"\"item\"",[76,1073,1074],{"class":86}," :item",[76,1076,94],{"class":93},[76,1078,1071],{"class":97},[76,1080,1081],{"class":86}," :index",[76,1083,94],{"class":93},[76,1085,304],{"class":97},[76,1087,1088],{"class":82}," />\n",[76,1090,1091],{"class":78,"line":275},[76,1092,1093],{"class":82},"    \u003C/li>\n",[76,1095,1096],{"class":78,"line":281},[76,1097,1098],{"class":82},"  \u003C/ul>\n",[76,1100,1101,1104,1107,1109,1111,1114],{"class":78,"line":287},[76,1102,1103],{"class":82},"  \u003Cslot",[76,1105,1106],{"class":86}," v-else",[76,1108,1066],{"class":86},[76,1110,94],{"class":93},[76,1112,1113],{"class":97},"\"empty\"",[76,1115,1088],{"class":82},[76,1117,1118],{"class":78,"line":309},[76,1119,390],{"class":82},[22,1121,1122,1124,1125,1128],{},[37,1123,43],{}," takes a type and nothing else. Each key is a slot name, and each value is a function whose first parameter describes the slot props. The return type is ignored for now, so ",[37,1126,1127],{},"any"," is fine.",[22,1130,1131,1132,1134,1135,1138],{},"When we use the component, ",[37,1133,891],{}," is inferred from the ",[37,1136,1137],{},"items"," prop:",[430,1140,1141,1524],{},[433,1142,1143],{"v-slot:code":72},[66,1144,1146],{"className":68,"code":1145,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport DataList from './DataList.vue'\n\ninterface Invoice {\n  number: string\n  customer: string\n  amount: number\n  status: 'draft' | 'issued' | 'paid'\n}\n\nconst invoices: Invoice[] = [/* the same three invoices */]\n\nconst query = ref('')\nconst matches = computed(() =>\n  invoices.filter(invoice => invoice.customer.toLowerCase().includes(query.value.toLowerCase())),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" type=\"search\" placeholder=\"Filter by customer\">\n\n  \u003CDataList :items=\"matches\">\n    \u003Ctemplate #item=\"{ item, index }\">\n      {{ index + 1 }}. {{ item.number }} · {{ item.customer }}\n    \u003C/template>\n    \u003Ctemplate #empty>\n      \u003Cp>No invoice matches.\u003C/p>\n    \u003C/template>\n  \u003C/DataList>\n\u003C/template>\n",[37,1147,1148,1162,1181,1193,1197,1208,1218,1227,1237,1256,1261,1265,1288,1292,1310,1327,1380,1384,1388,1392,1396,1426,1430,1445,1474,1479,1484,1496,1508,1513,1519],{"__ignoreMap":72},[76,1149,1150,1152,1154,1156,1158,1160],{"class":78,"line":79},[76,1151,83],{"class":82},[76,1153,87],{"class":86},[76,1155,90],{"class":86},[76,1157,94],{"class":93},[76,1159,98],{"class":97},[76,1161,101],{"class":82},[76,1163,1164,1166,1168,1171,1173,1175,1177,1179],{"class":78,"line":104},[76,1165,458],{"class":82},[76,1167,461],{"class":93},[76,1169,1170],{"class":117}," computed",[76,1172,135],{"class":93},[76,1174,464],{"class":117},[76,1176,467],{"class":93},[76,1178,470],{"class":82},[76,1180,473],{"class":97},[76,1182,1183,1185,1188,1190],{"class":78,"line":114},[76,1184,458],{"class":82},[76,1186,1187],{"class":117}," DataList ",[76,1189,483],{"class":82},[76,1191,1192],{"class":97}," './DataList.vue'\n",[76,1194,1195],{"class":78,"line":144},[76,1196,174],{"emptyLinePlaceholder":173},[76,1198,1199,1202,1205],{"class":78,"line":158},[76,1200,1201],{"class":82},"interface",[76,1203,1204],{"class":125}," Invoice",[76,1206,1207],{"class":93}," {\n",[76,1209,1210,1213,1215],{"class":78,"line":164},[76,1211,1212],{"class":117},"  number",[76,1214,122],{"class":121},[76,1216,1217],{"class":125}," string\n",[76,1219,1220,1223,1225],{"class":78,"line":170},[76,1221,1222],{"class":117},"  customer",[76,1224,122],{"class":121},[76,1226,1217],{"class":125},[76,1228,1229,1232,1234],{"class":78,"line":177},[76,1230,1231],{"class":117},"  amount",[76,1233,122],{"class":121},[76,1235,1236],{"class":125}," number\n",[76,1238,1239,1242,1244,1246,1249,1251,1253],{"class":78,"line":183},[76,1240,1241],{"class":117},"  status",[76,1243,122],{"class":121},[76,1245,663],{"class":97},[76,1247,1248],{"class":121}," |",[76,1250,623],{"class":97},[76,1252,1248],{"class":121},[76,1254,1255],{"class":97}," 'paid'\n",[76,1257,1258],{"class":78,"line":189},[76,1259,1260],{"class":93},"}\n",[76,1262,1263],{"class":78,"line":195},[76,1264,174],{"emptyLinePlaceholder":173},[76,1266,1267,1269,1271,1273,1275,1278,1280,1282,1286],{"class":78,"line":201},[76,1268,495],{"class":82},[76,1270,533],{"class":498},[76,1272,122],{"class":121},[76,1274,1204],{"class":125},[76,1276,1277],{"class":93},"[]",[76,1279,502],{"class":121},[76,1281,505],{"class":93},[76,1283,1285],{"class":1284},"s5c__","/* the same three invoices */",[76,1287,526],{"class":93},[76,1289,1290],{"class":78,"line":233},[76,1291,174],{"emptyLinePlaceholder":173},[76,1293,1294,1296,1299,1301,1303,1305,1308],{"class":78,"line":263},[76,1295,495],{"class":82},[76,1297,1298],{"class":498}," query",[76,1300,502],{"class":121},[76,1302,685],{"class":107},[76,1304,688],{"class":93},[76,1306,1307],{"class":97},"''",[76,1309,694],{"class":93},[76,1311,1312,1314,1317,1319,1321,1324],{"class":78,"line":269},[76,1313,495],{"class":82},[76,1315,1316],{"class":498}," matches",[76,1318,502],{"class":121},[76,1320,1170],{"class":107},[76,1322,1323],{"class":93},"(()",[76,1325,1326],{"class":82}," =>\n",[76,1328,1329,1332,1335,1338,1340,1343,1346,1349,1351,1353,1355,1358,1361,1364,1366,1369,1371,1373,1375,1377],{"class":78,"line":275},[76,1330,1331],{"class":117},"  invoices",[76,1333,1334],{"class":93},".",[76,1336,1337],{"class":107},"filter",[76,1339,688],{"class":93},[76,1341,1342],{"class":117},"invoice ",[76,1344,1345],{"class":82},"=>",[76,1347,1348],{"class":117}," invoice",[76,1350,1334],{"class":93},[76,1352,400],{"class":546},[76,1354,1334],{"class":93},[76,1356,1357],{"class":107},"toLowerCase",[76,1359,1360],{"class":93},"().",[76,1362,1363],{"class":107},"includes",[76,1365,688],{"class":93},[76,1367,1368],{"class":117},"query",[76,1370,1334],{"class":93},[76,1372,856],{"class":546},[76,1374,1334],{"class":93},[76,1376,1357],{"class":107},[76,1378,1379],{"class":93},"())),\n",[76,1381,1382],{"class":78,"line":281},[76,1383,694],{"class":93},[76,1385,1386],{"class":78,"line":287},[76,1387,167],{"class":82},[76,1389,1390],{"class":78,"line":309},[76,1391,174],{"emptyLinePlaceholder":173},[76,1393,1394],{"class":78,"line":329},[76,1395,180],{"class":82},[76,1397,1398,1401,1403,1405,1408,1411,1413,1416,1419,1421,1424],{"class":78,"line":364},[76,1399,1400],{"class":82},"  \u003Cinput",[76,1402,714],{"class":86},[76,1404,94],{"class":93},[76,1406,1407],{"class":97},"\"query\"",[76,1409,1410],{"class":86}," type",[76,1412,94],{"class":93},[76,1414,1415],{"class":97},"\"search\"",[76,1417,1418],{"class":86}," placeholder",[76,1420,94],{"class":93},[76,1422,1423],{"class":97},"\"Filter by customer\"",[76,1425,101],{"class":82},[76,1427,1428],{"class":78,"line":370},[76,1429,174],{"emptyLinePlaceholder":173},[76,1431,1432,1435,1438,1440,1443],{"class":78,"line":375},[76,1433,1434],{"class":82},"  \u003CDataList",[76,1436,1437],{"class":86}," :items",[76,1439,94],{"class":93},[76,1441,1442],{"class":97},"\"matches\"",[76,1444,101],{"class":82},[76,1446,1447,1449,1452,1455,1457,1459,1461,1463,1465,1468,1470,1472],{"class":78,"line":381},[76,1448,782],{"class":82},[76,1450,1451],{"class":93}," #",[76,1453,1454],{"class":86},"item",[76,1456,94],{"class":93},[76,1458,805],{"class":97},[76,1460,808],{"class":93},[76,1462,971],{"class":117},[76,1464,135],{"class":93},[76,1466,1467],{"class":117}," index ",[76,1469,467],{"class":93},[76,1471,805],{"class":97},[76,1473,101],{"class":82},[76,1475,1476],{"class":78,"line":387},[76,1477,1478],{"class":117},"      {{ index + 1 }}. {{ item.number }} · {{ item.customer }}\n",[76,1480,1482],{"class":78,"line":1481},26,[76,1483,833],{"class":82},[76,1485,1487,1489,1491,1494],{"class":78,"line":1486},27,[76,1488,782],{"class":82},[76,1490,1451],{"class":93},[76,1492,1493],{"class":86},"empty",[76,1495,101],{"class":82},[76,1497,1499,1502,1505],{"class":78,"line":1498},28,[76,1500,1501],{"class":82},"      \u003Cp>",[76,1503,1504],{"class":117},"No invoice matches.",[76,1506,1507],{"class":82},"\u003C/p>\n",[76,1509,1511],{"class":78,"line":1510},29,[76,1512,833],{"class":82},[76,1514,1516],{"class":78,"line":1515},30,[76,1517,1518],{"class":82},"  \u003C/DataList>\n",[76,1520,1522],{"class":78,"line":1521},31,[76,1523,390],{"class":82},[433,1525,1526],{"v-slot:output":72},[1527,1528],"slots-generic-demo",{},[22,1530,1531,1532,1535,1536,1538,1539,1542,1543,1546],{},"Inside the ",[37,1533,1534],{},"#item"," slot, ",[37,1537,1454],{}," is an ",[37,1540,1541],{},"Invoice",". The editor completes its fields, and a typo such as ",[37,1544,1545],{},"item.custmer"," is a compile error rather than an empty line on the screen.",[22,1548,1549,1550,1552,1553,1555,1556,1558],{},"One detail is worth knowing. For a simple slot like this one, Vue's tooling would infer the same types from the template even without ",[37,1551,43],{},". Declaring them is still useful: the contract is written in one place, and an optional slot such as ",[37,1554,1493],{}," can be marked with ",[37,1557,1000],{},". With dynamic names, as we are about to see, inference is no longer enough.",[29,1560,1562],{"id":1561},"dynamic-and-generic-together","Dynamic and generic together",[22,1564,1565],{},"Now let's give the table the same treatment. Making it generic is the easy part:",[66,1567,1569],{"className":68,"code":1568,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T extends object\">\ndefineProps\u003C{\n  rows: T[]\n  columns: (keyof T & string)[]\n}>()\n\u003C/script>\n",[37,1570,1571,1601,1607,1617,1639,1643],{"__ignoreMap":72},[76,1572,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1594,1597,1599],{"class":78,"line":79},[76,1574,83],{"class":82},[76,1576,87],{"class":86},[76,1578,90],{"class":86},[76,1580,94],{"class":93},[76,1582,98],{"class":97},[76,1584,912],{"class":86},[76,1586,94],{"class":93},[76,1588,805],{"class":97},[76,1590,891],{"class":125},[76,1592,1593],{"class":82}," extends",[76,1595,1596],{"class":125}," object",[76,1598,805],{"class":97},[76,1600,101],{"class":82},[76,1602,1603,1605],{"class":78,"line":104},[76,1604,108],{"class":107},[76,1606,111],{"class":93},[76,1608,1609,1611,1613,1615],{"class":78,"line":114},[76,1610,118],{"class":117},[76,1612,122],{"class":121},[76,1614,938],{"class":125},[76,1616,155],{"class":93},[76,1618,1619,1621,1623,1626,1629,1631,1634,1636],{"class":78,"line":144},[76,1620,147],{"class":117},[76,1622,122],{"class":121},[76,1624,1625],{"class":93}," (",[76,1627,1628],{"class":82},"keyof",[76,1630,938],{"class":125},[76,1632,1633],{"class":121}," &",[76,1635,152],{"class":125},[76,1637,1638],{"class":93},")[]\n",[76,1640,1641],{"class":78,"line":158},[76,1642,161],{"class":93},[76,1644,1645],{"class":78,"line":164},[76,1646,167],{"class":82},[22,1648,1649,1652,1653,1656,1657,1660,1661,1663,1664,1667,1668,1671],{},[37,1650,1651],{},"columns"," now only accepts keys of the row type, and the template can stay as it was. Vue's tooling even infers the slot names: ",[37,1654,1655],{},"cell-amount"," is known, and ",[37,1658,1659],{},"cell-total"," is rejected. But every ",[37,1662,856],{}," has the same type, the union of all the columns (",[37,1665,1666],{},"string | number"," for our invoices), because a single ",[37,1669,1670],{},"\u003Cslot>"," in the template serves every column.",[22,1673,1674],{},"To give each column its own type, we describe the slots with a mapped type:",[66,1676,1679],{"className":68,"code":1677,"filename":1678,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T extends object\">\ntype CellSlots = {\n  [K in keyof T & string as `cell-${K}`]?: (props: { value: T[K], row: T }) => any\n}\n\ntype HeaderSlots = {\n  [K in keyof T & string as `header-${K}`]?: (props: { column: K }) => any\n}\n\ndefineProps\u003C{\n  rows: T[]\n  columns: (keyof T & string)[]\n}>()\n\ndefineSlots\u003CCellSlots & HeaderSlots>()\n\nconst cellSlot = (column: keyof T & string) => `cell-${column}` as keyof CellSlots\nconst headerSlot = (column: keyof T & string) => `header-${column}` as keyof HeaderSlots\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ctable>\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth v-for=\"column in columns\" :key=\"column\" scope=\"col\">\n          \u003Cslot :name=\"headerSlot(column)\" :column=\"column\">{{ column }}\u003C/slot>\n        \u003C/th>\n      \u003C/tr>\n    \u003C/thead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"(row, index) in rows\" :key=\"index\">\n        \u003Ctd v-for=\"column in columns\" :key=\"column\">\n          \u003Cslot :name=\"cellSlot(column)\" :value=\"row[column]\" :row=\"row\">{{ row[column] }}\u003C/slot>\n        \u003C/td>\n      \u003C/tr>\n    \u003C/tbody>\n  \u003C/table>\n\u003C/template>\n","DataTable.vue",[37,1680,1681,1709,1721,1798,1802,1806,1817,1872,1876,1880,1886,1896,1914,1918,1922,1938,1942,1988,2032,2036,2040,2044,2048,2052,2056,2080,2103,2107,2111,2115,2119,2137,2156,2186,2191,2196,2201,2206],{"__ignoreMap":72},[76,1682,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707],{"class":78,"line":79},[76,1684,83],{"class":82},[76,1686,87],{"class":86},[76,1688,90],{"class":86},[76,1690,94],{"class":93},[76,1692,98],{"class":97},[76,1694,912],{"class":86},[76,1696,94],{"class":93},[76,1698,805],{"class":97},[76,1700,891],{"class":125},[76,1702,1593],{"class":82},[76,1704,1596],{"class":125},[76,1706,805],{"class":97},[76,1708,101],{"class":82},[76,1710,1711,1714,1717,1719],{"class":78,"line":104},[76,1712,1713],{"class":82},"type",[76,1715,1716],{"class":125}," CellSlots",[76,1718,502],{"class":121},[76,1720,1207],{"class":93},[76,1722,1723,1726,1729,1732,1735,1737,1739,1741,1744,1747,1749,1751,1753,1755,1758,1761,1763,1765,1767,1769,1772,1774,1776,1779,1781,1784,1787,1789,1791,1793,1796],{"class":78,"line":114},[76,1724,1725],{"class":93},"  [",[76,1727,1728],{"class":125},"K",[76,1730,1731],{"class":82}," in",[76,1733,1734],{"class":82}," keyof",[76,1736,938],{"class":125},[76,1738,1633],{"class":121},[76,1740,152],{"class":125},[76,1742,1743],{"class":82}," as",[76,1745,1746],{"class":97}," `cell-",[76,1748,791],{"class":93},[76,1750,1728],{"class":125},[76,1752,467],{"class":93},[76,1754,799],{"class":97},[76,1756,1757],{"class":93},"]",[76,1759,1760],{"class":121},"?:",[76,1762,1625],{"class":93},[76,1764,964],{"class":117},[76,1766,122],{"class":121},[76,1768,461],{"class":93},[76,1770,1771],{"class":117}," value",[76,1773,122],{"class":121},[76,1775,938],{"class":125},[76,1777,1778],{"class":93},"[",[76,1780,1728],{"class":125},[76,1782,1783],{"class":93},"],",[76,1785,1786],{"class":117}," row",[76,1788,122],{"class":121},[76,1790,938],{"class":125},[76,1792,987],{"class":93},[76,1794,1795],{"class":82}," =>",[76,1797,992],{"class":125},[76,1799,1800],{"class":78,"line":144},[76,1801,1260],{"class":93},[76,1803,1804],{"class":78,"line":158},[76,1805,174],{"emptyLinePlaceholder":173},[76,1807,1808,1810,1813,1815],{"class":78,"line":164},[76,1809,1713],{"class":82},[76,1811,1812],{"class":125}," HeaderSlots",[76,1814,502],{"class":121},[76,1816,1207],{"class":93},[76,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1861,1863,1866,1868,1870],{"class":78,"line":170},[76,1820,1725],{"class":93},[76,1822,1728],{"class":125},[76,1824,1731],{"class":82},[76,1826,1734],{"class":82},[76,1828,938],{"class":125},[76,1830,1633],{"class":121},[76,1832,152],{"class":125},[76,1834,1743],{"class":82},[76,1836,1837],{"class":97}," `header-",[76,1839,791],{"class":93},[76,1841,1728],{"class":125},[76,1843,467],{"class":93},[76,1845,799],{"class":97},[76,1847,1757],{"class":93},[76,1849,1760],{"class":121},[76,1851,1625],{"class":93},[76,1853,964],{"class":117},[76,1855,122],{"class":121},[76,1857,461],{"class":93},[76,1859,1860],{"class":117}," column",[76,1862,122],{"class":121},[76,1864,1865],{"class":125}," K",[76,1867,987],{"class":93},[76,1869,1795],{"class":82},[76,1871,992],{"class":125},[76,1873,1874],{"class":78,"line":177},[76,1875,1260],{"class":93},[76,1877,1878],{"class":78,"line":183},[76,1879,174],{"emptyLinePlaceholder":173},[76,1881,1882,1884],{"class":78,"line":189},[76,1883,108],{"class":125},[76,1885,111],{"class":93},[76,1887,1888,1890,1892,1894],{"class":78,"line":195},[76,1889,118],{"class":117},[76,1891,122],{"class":121},[76,1893,938],{"class":125},[76,1895,155],{"class":93},[76,1897,1898,1900,1902,1904,1906,1908,1910,1912],{"class":78,"line":201},[76,1899,147],{"class":117},[76,1901,122],{"class":121},[76,1903,1625],{"class":93},[76,1905,1628],{"class":82},[76,1907,938],{"class":125},[76,1909,1633],{"class":121},[76,1911,152],{"class":125},[76,1913,1638],{"class":93},[76,1915,1916],{"class":78,"line":233},[76,1917,161],{"class":93},[76,1919,1920],{"class":78,"line":263},[76,1921,174],{"emptyLinePlaceholder":173},[76,1923,1924,1926,1928,1931,1933,1935],{"class":78,"line":269},[76,1925,43],{"class":125},[76,1927,129],{"class":93},[76,1929,1930],{"class":125},"CellSlots",[76,1932,1633],{"class":121},[76,1934,1812],{"class":125},[76,1936,1937],{"class":93},">()\n",[76,1939,1940],{"class":78,"line":275},[76,1941,174],{"emptyLinePlaceholder":173},[76,1943,1944,1946,1949,1951,1953,1956,1958,1960,1962,1964,1966,1969,1971,1973,1975,1977,1979,1981,1983,1985],{"class":78,"line":281},[76,1945,495],{"class":82},[76,1947,1948],{"class":107}," cellSlot",[76,1950,502],{"class":121},[76,1952,1625],{"class":93},[76,1954,1955],{"class":117},"column",[76,1957,122],{"class":121},[76,1959,1734],{"class":82},[76,1961,938],{"class":125},[76,1963,1633],{"class":121},[76,1965,152],{"class":125},[76,1967,1968],{"class":93},")",[76,1970,1795],{"class":82},[76,1972,1746],{"class":97},[76,1974,791],{"class":93},[76,1976,1955],{"class":117},[76,1978,467],{"class":93},[76,1980,799],{"class":97},[76,1982,1743],{"class":82},[76,1984,1734],{"class":82},[76,1986,1987],{"class":125}," CellSlots\n",[76,1989,1990,1992,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029],{"class":78,"line":287},[76,1991,495],{"class":82},[76,1993,1994],{"class":107}," headerSlot",[76,1996,502],{"class":121},[76,1998,1625],{"class":93},[76,2000,1955],{"class":117},[76,2002,122],{"class":121},[76,2004,1734],{"class":82},[76,2006,938],{"class":125},[76,2008,1633],{"class":121},[76,2010,152],{"class":125},[76,2012,1968],{"class":93},[76,2014,1795],{"class":82},[76,2016,1837],{"class":97},[76,2018,791],{"class":93},[76,2020,1955],{"class":117},[76,2022,467],{"class":93},[76,2024,799],{"class":97},[76,2026,1743],{"class":82},[76,2028,1734],{"class":82},[76,2030,2031],{"class":125}," HeaderSlots\n",[76,2033,2034],{"class":78,"line":309},[76,2035,167],{"class":82},[76,2037,2038],{"class":78,"line":329},[76,2039,174],{"emptyLinePlaceholder":173},[76,2041,2042],{"class":78,"line":364},[76,2043,180],{"class":82},[76,2045,2046],{"class":78,"line":370},[76,2047,186],{"class":82},[76,2049,2050],{"class":78,"line":375},[76,2051,192],{"class":82},[76,2053,2054],{"class":78,"line":381},[76,2055,198],{"class":82},[76,2057,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078],{"class":78,"line":387},[76,2059,204],{"class":82},[76,2061,207],{"class":86},[76,2063,94],{"class":93},[76,2065,212],{"class":97},[76,2067,215],{"class":86},[76,2069,94],{"class":93},[76,2071,220],{"class":97},[76,2073,223],{"class":86},[76,2075,94],{"class":93},[76,2077,228],{"class":97},[76,2079,101],{"class":82},[76,2081,2082,2084,2086,2088,2091,2093,2095,2097,2099,2101],{"class":78,"line":1481},[76,2083,236],{"class":82},[76,2085,239],{"class":86},[76,2087,94],{"class":93},[76,2089,2090],{"class":97},"\"headerSlot(column)\"",[76,2092,247],{"class":86},[76,2094,94],{"class":93},[76,2096,220],{"class":97},[76,2098,254],{"class":82},[76,2100,257],{"class":117},[76,2102,260],{"class":82},[76,2104,2105],{"class":78,"line":1486},[76,2106,266],{"class":82},[76,2108,2109],{"class":78,"line":1498},[76,2110,272],{"class":82},[76,2112,2113],{"class":78,"line":1510},[76,2114,278],{"class":82},[76,2116,2117],{"class":78,"line":1515},[76,2118,284],{"class":82},[76,2120,2121,2123,2125,2127,2129,2131,2133,2135],{"class":78,"line":1521},[76,2122,290],{"class":82},[76,2124,207],{"class":86},[76,2126,94],{"class":93},[76,2128,297],{"class":97},[76,2130,215],{"class":86},[76,2132,94],{"class":93},[76,2134,304],{"class":97},[76,2136,101],{"class":82},[76,2138,2140,2142,2144,2146,2148,2150,2152,2154],{"class":78,"line":2139},32,[76,2141,312],{"class":82},[76,2143,207],{"class":86},[76,2145,94],{"class":93},[76,2147,212],{"class":97},[76,2149,215],{"class":86},[76,2151,94],{"class":93},[76,2153,220],{"class":97},[76,2155,101],{"class":82},[76,2157,2159,2161,2163,2165,2168,2170,2172,2174,2176,2178,2180,2182,2184],{"class":78,"line":2158},33,[76,2160,236],{"class":82},[76,2162,239],{"class":86},[76,2164,94],{"class":93},[76,2166,2167],{"class":97},"\"cellSlot(column)\"",[76,2169,341],{"class":86},[76,2171,94],{"class":93},[76,2173,346],{"class":97},[76,2175,349],{"class":86},[76,2177,94],{"class":93},[76,2179,354],{"class":97},[76,2181,254],{"class":82},[76,2183,359],{"class":117},[76,2185,260],{"class":82},[76,2187,2189],{"class":78,"line":2188},34,[76,2190,367],{"class":82},[76,2192,2194],{"class":78,"line":2193},35,[76,2195,272],{"class":82},[76,2197,2199],{"class":78,"line":2198},36,[76,2200,378],{"class":82},[76,2202,2204],{"class":78,"line":2203},37,[76,2205,384],{"class":82},[76,2207,2209],{"class":78,"line":2208},38,[76,2210,390],{"class":82},[22,2212,2213,2214,2216,2217,2219,2220,2223,2224,2226,2227,2230,2231,2234],{},"Read the first type as: for every key ",[37,2215,1728],{}," of ",[37,2218,891],{},", there is an optional slot named ",[37,2221,2222],{},"cell-"," followed by that key, and its ",[37,2225,856],{}," has the type of that field, ",[37,2228,2229],{},"T[K]",". The ",[37,2232,2233],{},"as"," clause is what renames the keys.",[22,2236,2237,2238,2240,2241,2244,2245,2247],{},"The two helper functions are there for a reason. While ",[37,2239,891],{}," is still a type parameter, TypeScript cannot work out that ",[37,2242,2243],{},"`cell-${column}`"," is one of the keys of ",[37,2246,1930],{},", and reports that the string cannot be used to index the slots type. So we assert the name once, in the script, and the template stays clean. This only concerns the inside of the component. Whoever uses it gets fully checked slots:",[430,2249,2250,2544],{},[433,2251,2252],{"v-slot:code":72},[66,2253,2255],{"className":68,"code":2254,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport DataTable from './DataTable.vue'\n\ninterface Invoice {\n  number: string\n  customer: string\n  amount: number\n  status: 'draft' | 'issued' | 'paid'\n}\n\nconst invoices: Invoice[] = [/* the same three invoices */]\n\nconst money = new Intl.NumberFormat('en', { style: 'currency', currency: 'EUR' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CDataTable :rows=\"invoices\" :columns=\"['number', 'customer', 'amount', 'status']\">\n    \u003Ctemplate #cell-amount=\"{ value }\">\n      {{ money.format(value) }}\n    \u003C/template>\n    \u003Ctemplate #cell-status=\"{ value }\">\n      \u003Cspan class=\"pill\" :data-status=\"value\">{{ value }}\u003C/span>\n    \u003C/template>\n  \u003C/DataTable>\n\u003C/template>\n",[37,2256,2257,2271,2283,2287,2295,2303,2311,2319,2335,2339,2343,2363,2367,2417,2421,2425,2429,2449,2471,2476,2480,2503,2531,2535,2540],{"__ignoreMap":72},[76,2258,2259,2261,2263,2265,2267,2269],{"class":78,"line":79},[76,2260,83],{"class":82},[76,2262,87],{"class":86},[76,2264,90],{"class":86},[76,2266,94],{"class":93},[76,2268,98],{"class":97},[76,2270,101],{"class":82},[76,2272,2273,2275,2278,2280],{"class":78,"line":104},[76,2274,458],{"class":82},[76,2276,2277],{"class":117}," DataTable ",[76,2279,483],{"class":82},[76,2281,2282],{"class":97}," './DataTable.vue'\n",[76,2284,2285],{"class":78,"line":114},[76,2286,174],{"emptyLinePlaceholder":173},[76,2288,2289,2291,2293],{"class":78,"line":144},[76,2290,1201],{"class":82},[76,2292,1204],{"class":125},[76,2294,1207],{"class":93},[76,2296,2297,2299,2301],{"class":78,"line":158},[76,2298,1212],{"class":117},[76,2300,122],{"class":121},[76,2302,1217],{"class":125},[76,2304,2305,2307,2309],{"class":78,"line":164},[76,2306,1222],{"class":117},[76,2308,122],{"class":121},[76,2310,1217],{"class":125},[76,2312,2313,2315,2317],{"class":78,"line":170},[76,2314,1231],{"class":117},[76,2316,122],{"class":121},[76,2318,1236],{"class":125},[76,2320,2321,2323,2325,2327,2329,2331,2333],{"class":78,"line":177},[76,2322,1241],{"class":117},[76,2324,122],{"class":121},[76,2326,663],{"class":97},[76,2328,1248],{"class":121},[76,2330,623],{"class":97},[76,2332,1248],{"class":121},[76,2334,1255],{"class":97},[76,2336,2337],{"class":78,"line":183},[76,2338,1260],{"class":93},[76,2340,2341],{"class":78,"line":189},[76,2342,174],{"emptyLinePlaceholder":173},[76,2344,2345,2347,2349,2351,2353,2355,2357,2359,2361],{"class":78,"line":195},[76,2346,495],{"class":82},[76,2348,533],{"class":498},[76,2350,122],{"class":121},[76,2352,1204],{"class":125},[76,2354,1277],{"class":93},[76,2356,502],{"class":121},[76,2358,505],{"class":93},[76,2360,1285],{"class":1284},[76,2362,526],{"class":93},[76,2364,2365],{"class":78,"line":201},[76,2366,174],{"emptyLinePlaceholder":173},[76,2368,2369,2371,2374,2376,2379,2382,2384,2387,2389,2392,2394,2396,2399,2401,2404,2406,2409,2411,2414],{"class":78,"line":233},[76,2370,495],{"class":82},[76,2372,2373],{"class":498}," money",[76,2375,502],{"class":121},[76,2377,2378],{"class":82}," new",[76,2380,2381],{"class":117}," Intl",[76,2383,1334],{"class":93},[76,2385,2386],{"class":107},"NumberFormat",[76,2388,688],{"class":93},[76,2390,2391],{"class":97},"'en'",[76,2393,135],{"class":93},[76,2395,461],{"class":93},[76,2397,2398],{"class":546}," style",[76,2400,122],{"class":93},[76,2402,2403],{"class":97}," 'currency'",[76,2405,135],{"class":93},[76,2407,2408],{"class":546}," currency",[76,2410,122],{"class":93},[76,2412,2413],{"class":97}," 'EUR'",[76,2415,2416],{"class":93}," })\n",[76,2418,2419],{"class":78,"line":263},[76,2420,167],{"class":82},[76,2422,2423],{"class":78,"line":269},[76,2424,174],{"emptyLinePlaceholder":173},[76,2426,2427],{"class":78,"line":275},[76,2428,180],{"class":82},[76,2430,2431,2434,2436,2438,2440,2442,2444,2447],{"class":78,"line":281},[76,2432,2433],{"class":82},"  \u003CDataTable",[76,2435,762],{"class":86},[76,2437,94],{"class":93},[76,2439,767],{"class":97},[76,2441,770],{"class":86},[76,2443,94],{"class":93},[76,2445,2446],{"class":97},"\"['number', 'customer', 'amount', 'status']\"",[76,2448,101],{"class":82},[76,2450,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469],{"class":78,"line":287},[76,2452,782],{"class":82},[76,2454,1451],{"class":93},[76,2456,1655],{"class":86},[76,2458,94],{"class":93},[76,2460,805],{"class":97},[76,2462,808],{"class":93},[76,2464,811],{"class":117},[76,2466,467],{"class":93},[76,2468,805],{"class":97},[76,2470,101],{"class":82},[76,2472,2473],{"class":78,"line":309},[76,2474,2475],{"class":117},"      {{ money.format(value) }}\n",[76,2477,2478],{"class":78,"line":329},[76,2479,833],{"class":82},[76,2481,2482,2484,2486,2489,2491,2493,2495,2497,2499,2501],{"class":78,"line":364},[76,2483,782],{"class":82},[76,2485,1451],{"class":93},[76,2487,2488],{"class":86},"cell-status",[76,2490,94],{"class":93},[76,2492,805],{"class":97},[76,2494,808],{"class":93},[76,2496,811],{"class":117},[76,2498,467],{"class":93},[76,2500,805],{"class":97},[76,2502,101],{"class":82},[76,2504,2505,2508,2511,2513,2516,2519,2521,2524,2526,2528],{"class":78,"line":370},[76,2506,2507],{"class":82},"      \u003Cspan",[76,2509,2510],{"class":86}," class",[76,2512,94],{"class":93},[76,2514,2515],{"class":97},"\"pill\"",[76,2517,2518],{"class":86}," :data-status",[76,2520,94],{"class":93},[76,2522,2523],{"class":97},"\"value\"",[76,2525,254],{"class":82},[76,2527,825],{"class":117},[76,2529,2530],{"class":82},"\u003C/span>\n",[76,2532,2533],{"class":78,"line":375},[76,2534,833],{"class":82},[76,2536,2537],{"class":78,"line":381},[76,2538,2539],{"class":82},"  \u003C/DataTable>\n",[76,2541,2542],{"class":78,"line":387},[76,2543,390],{"class":82},[433,2545,2546],{"v-slot:output":72},[2547,2548],"slots-typed-demo",{},[22,2550,2551,2552,397,2555,2557,2558,2560,2561,2564,2565,2568,2569,2572,2573,1334],{},"In ",[37,2553,2554],{},"#cell-amount",[37,2556,856],{}," is a ",[37,2559,396],{},", so it can go straight into ",[37,2562,2563],{},"Intl.NumberFormat",". In ",[37,2566,2567],{},"#cell-status"," it is ",[37,2570,2571],{},"'draft' | 'issued' | 'paid'",". A slot for a column that does not exist is a compile error, and so is a column name that is not a key of ",[37,2574,1541],{},[22,2576,2577,2578,2581,2582,2585,2586,2589,2590,2592],{},"Dynamic names are still allowed on the parent side. If the name is computed from a union, such as ",[37,2579,2580],{},"#[`cell-${key}`]"," with ",[37,2583,2584],{},"key"," typed as ",[37,2587,2588],{},"'number' | 'customer'",", then ",[37,2591,856],{}," gets the union of those two columns' types.",[22,2594,2595,2596,2599,2600,2603,2604,2607],{},"One note on the constraint: we wrote ",[37,2597,2598],{},"T extends object",", not ",[37,2601,2602],{},"T extends Record\u003Cstring, unknown>",". An interface has no index signature, so with the second form an ",[37,2605,2606],{},"Invoice[]"," would be rejected.",[29,2609,2611],{"id":2610},"conclusion","Conclusion",[22,2613,2614,2615,2617,2618,2620,2621,2623],{},"Dynamic names let this table expose a slot for each column. In ",[37,2616,63],{},", the names are unrestricted strings and cell values are ",[37,2619,860],{}," because of the declared row type. Making the table generic lets Vue infer valid names and a union of the column types; the mapped types passed to ",[37,2622,43],{}," go further by giving each column's slot its own value type.",[2625,2626,2627],"style",{},"html pre.shiki code .sZ9Zp, html code.shiki .sZ9Zp{--shiki-light:#994920;--shiki-default:#994920;--shiki-dark:#ECA457}html pre.shiki code .sSzyk, html code.shiki .sSzyk{--shiki-light:#5E4784;--shiki-default:#5E4784;--shiki-dark:#CFB0EA}html pre.shiki code .sXnUm, html code.shiki .sXnUm{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#96918C}html pre.shiki code .sgVH1, html code.shiki .sgVH1{--shiki-light:#3A6830;--shiki-default:#3A6830;--shiki-dark:#A5CF93}html pre.shiki code .sUqqj, html code.shiki .sUqqj{--shiki-light:#4A3170;--shiki-default:#4A3170;--shiki-dark:#D9BDF0}html pre.shiki code .sBiod, html code.shiki .sBiod{--shiki-light:#322C28;--shiki-default:#322C28;--shiki-dark:#DBD7D0}html pre.shiki code .sZ7qJ, html code.shiki .sZ7qJ{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#A39E98}html pre.shiki code .sHXsw, html code.shiki .sHXsw{--shiki-light:#006268;--shiki-default:#006268;--shiki-dark:#86CFD2}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 .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 pre.shiki code .sJ-0L, html code.shiki .sJ-0L{--shiki-light:#2D54A0;--shiki-default:#2D54A0;--shiki-dark:#93BDF5}html pre.shiki code .snYWn, html code.shiki .snYWn{--shiki-light:#624727;--shiki-default:#624727;--shiki-dark:#E2C69F}html pre.shiki code .s5c__, html code.shiki .s5c__{--shiki-light:#736D67;--shiki-light-font-style:italic;--shiki-default:#736D67;--shiki-default-font-style:italic;--shiki-dark:#979189;--shiki-dark-font-style:italic}",{"title":72,"searchDepth":104,"depth":104,"links":2629},[2630,2631,2632,2633,2634],{"id":31,"depth":104,"text":32},{"id":50,"depth":104,"text":51},{"id":868,"depth":104,"text":869},{"id":1561,"depth":104,"text":1562},{"id":2610,"depth":104,"text":2611},"2023-08-29","How dynamic slot names work in Vue.js, and how generic components and the defineSlots macro from Vue 3.3 give those slots precise types in script setup.","md",null,{"head":2640},[2641,2644,2648,2652,2655,2659,2663,2667,2670,2674],{"meta":2642},{"name":2643,"content":10},"description",{"meta":2645},{"name":2646,"content":2647},"keywords","Vue.js, slots, dynamic slots, generic slots, generic components, defineSlots, script setup, TypeScript, Vue 3.3",{"meta":2649},{"name":2650,"content":2651},"author","Boussadjra Brahim",{"meta":2653},{"name":2654,"content":2635},"date",{"meta":2656},{"name":2657,"content":2658},"lastmod","2026-10-05",{"meta":2660},{"name":2661,"content":2662},"draft",false,{"meta":2664},{"name":2665,"content":2666},"slug","vue-dynamic-generic-slots",{"meta":2668},{"name":2669,"content":24},"tags",{"meta":2671},{"name":2672,"content":2673},"categories","Vue.js, Slots",{"meta":2675},{"name":2676,"content":10},"summary","/blog/dynamic-generic-slots",{"title":10,"description":2636},"blog/dynamic-generic-slots/index",[2681,2682,51,2683,43,2684,2685],"Vue.js","Slots","Generic components","TypeScript","Vue 3.3","yZsCMBNZidRpzKppXQt9bw9jzEY_E2BEe1MbgM2kDS8",[2688,4862],{"id":9,"title":10,"body":2689,"date":2635,"description":2636,"extension":2637,"img":2638,"meta":4838,"navigation":173,"path":2677,"seo":4860,"stem":2679,"tags":4861,"__hash__":2686},{"type":12,"value":2690,"toc":4831},[2691,2693,2697,2699,2701,2707,2709,2711,2713,2715,2719,2945,2961,2967,3311,3313,3321,3323,3331,3337,3535,3541,3547,3877,3887,3895,3897,3899,3973,3987,3989,4487,4501,4509,4785,4801,4811,4819,4821,4829],[15,2692,10],{"id":17},[19,2694,2695],{},[22,2696,24],{},[26,2698],{},[29,2700,32],{"id":31},[22,2702,35,2703,40,2705,44],{},[37,2704,39],{},[37,2706,43],{},[22,2708,47],{},[29,2710,51],{"id":50},[22,2712,54],{},[22,2714,57],{},[22,2716,60,2717,64],{},[37,2718,63],{},[66,2720,2721],{"className":68,"code":69,"filename":70,"language":71,"meta":72,"style":72},[37,2722,2723,2737,2743,2761,2771,2775,2779,2783,2787,2791,2795,2799,2823,2845,2849,2853,2857,2861,2879,2897,2925,2929,2933,2937,2941],{"__ignoreMap":72},[76,2724,2725,2727,2729,2731,2733,2735],{"class":78,"line":79},[76,2726,83],{"class":82},[76,2728,87],{"class":86},[76,2730,90],{"class":86},[76,2732,94],{"class":93},[76,2734,98],{"class":97},[76,2736,101],{"class":82},[76,2738,2739,2741],{"class":78,"line":104},[76,2740,108],{"class":107},[76,2742,111],{"class":93},[76,2744,2745,2747,2749,2751,2753,2755,2757,2759],{"class":78,"line":114},[76,2746,118],{"class":117},[76,2748,122],{"class":121},[76,2750,126],{"class":125},[76,2752,129],{"class":93},[76,2754,132],{"class":125},[76,2756,135],{"class":93},[76,2758,138],{"class":125},[76,2760,141],{"class":93},[76,2762,2763,2765,2767,2769],{"class":78,"line":144},[76,2764,147],{"class":117},[76,2766,122],{"class":121},[76,2768,152],{"class":125},[76,2770,155],{"class":93},[76,2772,2773],{"class":78,"line":158},[76,2774,161],{"class":93},[76,2776,2777],{"class":78,"line":164},[76,2778,167],{"class":82},[76,2780,2781],{"class":78,"line":170},[76,2782,174],{"emptyLinePlaceholder":173},[76,2784,2785],{"class":78,"line":177},[76,2786,180],{"class":82},[76,2788,2789],{"class":78,"line":183},[76,2790,186],{"class":82},[76,2792,2793],{"class":78,"line":189},[76,2794,192],{"class":82},[76,2796,2797],{"class":78,"line":195},[76,2798,198],{"class":82},[76,2800,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821],{"class":78,"line":201},[76,2802,204],{"class":82},[76,2804,207],{"class":86},[76,2806,94],{"class":93},[76,2808,212],{"class":97},[76,2810,215],{"class":86},[76,2812,94],{"class":93},[76,2814,220],{"class":97},[76,2816,223],{"class":86},[76,2818,94],{"class":93},[76,2820,228],{"class":97},[76,2822,101],{"class":82},[76,2824,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843],{"class":78,"line":233},[76,2826,236],{"class":82},[76,2828,239],{"class":86},[76,2830,94],{"class":93},[76,2832,244],{"class":97},[76,2834,247],{"class":86},[76,2836,94],{"class":93},[76,2838,220],{"class":97},[76,2840,254],{"class":82},[76,2842,257],{"class":117},[76,2844,260],{"class":82},[76,2846,2847],{"class":78,"line":263},[76,2848,266],{"class":82},[76,2850,2851],{"class":78,"line":269},[76,2852,272],{"class":82},[76,2854,2855],{"class":78,"line":275},[76,2856,278],{"class":82},[76,2858,2859],{"class":78,"line":281},[76,2860,284],{"class":82},[76,2862,2863,2865,2867,2869,2871,2873,2875,2877],{"class":78,"line":287},[76,2864,290],{"class":82},[76,2866,207],{"class":86},[76,2868,94],{"class":93},[76,2870,297],{"class":97},[76,2872,215],{"class":86},[76,2874,94],{"class":93},[76,2876,304],{"class":97},[76,2878,101],{"class":82},[76,2880,2881,2883,2885,2887,2889,2891,2893,2895],{"class":78,"line":309},[76,2882,312],{"class":82},[76,2884,207],{"class":86},[76,2886,94],{"class":93},[76,2888,212],{"class":97},[76,2890,215],{"class":86},[76,2892,94],{"class":93},[76,2894,220],{"class":97},[76,2896,101],{"class":82},[76,2898,2899,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923],{"class":78,"line":329},[76,2900,236],{"class":82},[76,2902,239],{"class":86},[76,2904,94],{"class":93},[76,2906,338],{"class":97},[76,2908,341],{"class":86},[76,2910,94],{"class":93},[76,2912,346],{"class":97},[76,2914,349],{"class":86},[76,2916,94],{"class":93},[76,2918,354],{"class":97},[76,2920,254],{"class":82},[76,2922,359],{"class":117},[76,2924,260],{"class":82},[76,2926,2927],{"class":78,"line":364},[76,2928,367],{"class":82},[76,2930,2931],{"class":78,"line":370},[76,2932,272],{"class":82},[76,2934,2935],{"class":78,"line":375},[76,2936,378],{"class":82},[76,2938,2939],{"class":78,"line":381},[76,2940,384],{"class":82},[76,2942,2943],{"class":78,"line":387},[76,2944,390],{"class":82},[22,2946,393,2947,397,2949,397,2951,404,2953,408,2955,397,2957,397,2959,418],{},[37,2948,396],{},[37,2950,400],{},[37,2952,403],{},[37,2954,407],{},[37,2956,411],{},[37,2958,414],{},[37,2960,417],{},[22,2962,421,2963,425,2965,122],{},[37,2964,424],{},[37,2966,428],{},[430,2968,2969,3307],{},[433,2970,2971],{"v-slot:code":72},[66,2972,2973],{"className":68,"code":437,"language":71,"meta":72,"style":72},[37,2974,2975,2989,3003,3013,3017,3043,3053,3089,3125,3161,3165,3169,3185,3189,3193,3197,3209,3231,3235,3239,3257,3287,3295,3299,3303],{"__ignoreMap":72},[76,2976,2977,2979,2981,2983,2985,2987],{"class":78,"line":79},[76,2978,83],{"class":82},[76,2980,87],{"class":86},[76,2982,90],{"class":86},[76,2984,94],{"class":93},[76,2986,98],{"class":97},[76,2988,101],{"class":82},[76,2990,2991,2993,2995,2997,2999,3001],{"class":78,"line":104},[76,2992,458],{"class":82},[76,2994,461],{"class":93},[76,2996,464],{"class":117},[76,2998,467],{"class":93},[76,3000,470],{"class":82},[76,3002,473],{"class":97},[76,3004,3005,3007,3009,3011],{"class":78,"line":114},[76,3006,458],{"class":82},[76,3008,480],{"class":117},[76,3010,483],{"class":82},[76,3012,486],{"class":97},[76,3014,3015],{"class":78,"line":144},[76,3016,174],{"emptyLinePlaceholder":173},[76,3018,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041],{"class":78,"line":158},[76,3020,495],{"class":82},[76,3022,499],{"class":498},[76,3024,502],{"class":121},[76,3026,505],{"class":93},[76,3028,508],{"class":97},[76,3030,135],{"class":93},[76,3032,513],{"class":97},[76,3034,135],{"class":93},[76,3036,518],{"class":97},[76,3038,135],{"class":93},[76,3040,523],{"class":97},[76,3042,526],{"class":93},[76,3044,3045,3047,3049,3051],{"class":78,"line":164},[76,3046,495],{"class":82},[76,3048,533],{"class":498},[76,3050,502],{"class":121},[76,3052,538],{"class":93},[76,3054,3055,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087],{"class":78,"line":170},[76,3056,543],{"class":93},[76,3058,547],{"class":546},[76,3060,122],{"class":93},[76,3062,552],{"class":97},[76,3064,135],{"class":93},[76,3066,557],{"class":546},[76,3068,122],{"class":93},[76,3070,562],{"class":97},[76,3072,135],{"class":93},[76,3074,567],{"class":546},[76,3076,122],{"class":93},[76,3078,572],{"class":498},[76,3080,135],{"class":93},[76,3082,577],{"class":546},[76,3084,122],{"class":93},[76,3086,582],{"class":97},[76,3088,585],{"class":93},[76,3090,3091,3093,3095,3097,3099,3101,3103,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123],{"class":78,"line":177},[76,3092,543],{"class":93},[76,3094,547],{"class":546},[76,3096,122],{"class":93},[76,3098,596],{"class":97},[76,3100,135],{"class":93},[76,3102,557],{"class":546},[76,3104,122],{"class":93},[76,3106,605],{"class":97},[76,3108,135],{"class":93},[76,3110,567],{"class":546},[76,3112,122],{"class":93},[76,3114,614],{"class":498},[76,3116,135],{"class":93},[76,3118,577],{"class":546},[76,3120,122],{"class":93},[76,3122,623],{"class":97},[76,3124,585],{"class":93},[76,3126,3127,3129,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159],{"class":78,"line":183},[76,3128,543],{"class":93},[76,3130,547],{"class":546},[76,3132,122],{"class":93},[76,3134,636],{"class":97},[76,3136,135],{"class":93},[76,3138,557],{"class":546},[76,3140,122],{"class":93},[76,3142,645],{"class":97},[76,3144,135],{"class":93},[76,3146,567],{"class":546},[76,3148,122],{"class":93},[76,3150,654],{"class":498},[76,3152,135],{"class":93},[76,3154,577],{"class":546},[76,3156,122],{"class":93},[76,3158,663],{"class":97},[76,3160,585],{"class":93},[76,3162,3163],{"class":78,"line":189},[76,3164,526],{"class":93},[76,3166,3167],{"class":78,"line":195},[76,3168,174],{"emptyLinePlaceholder":173},[76,3170,3171,3173,3175,3177,3179,3181,3183],{"class":78,"line":201},[76,3172,495],{"class":82},[76,3174,680],{"class":498},[76,3176,502],{"class":121},[76,3178,685],{"class":107},[76,3180,688],{"class":93},[76,3182,691],{"class":97},[76,3184,694],{"class":93},[76,3186,3187],{"class":78,"line":233},[76,3188,167],{"class":82},[76,3190,3191],{"class":78,"line":263},[76,3192,174],{"emptyLinePlaceholder":173},[76,3194,3195],{"class":78,"line":269},[76,3196,180],{"class":82},[76,3198,3199,3201,3203,3205,3207],{"class":78,"line":275},[76,3200,711],{"class":82},[76,3202,714],{"class":86},[76,3204,94],{"class":93},[76,3206,719],{"class":97},[76,3208,101],{"class":82},[76,3210,3211,3213,3215,3217,3219,3221,3223,3225,3227,3229],{"class":78,"line":281},[76,3212,726],{"class":82},[76,3214,207],{"class":86},[76,3216,94],{"class":93},[76,3218,212],{"class":97},[76,3220,215],{"class":86},[76,3222,94],{"class":93},[76,3224,220],{"class":97},[76,3226,254],{"class":82},[76,3228,257],{"class":117},[76,3230,745],{"class":82},[76,3232,3233],{"class":78,"line":287},[76,3234,750],{"class":82},[76,3236,3237],{"class":78,"line":309},[76,3238,174],{"emptyLinePlaceholder":173},[76,3240,3241,3243,3245,3247,3249,3251,3253,3255],{"class":78,"line":329},[76,3242,759],{"class":82},[76,3244,762],{"class":86},[76,3246,94],{"class":93},[76,3248,767],{"class":97},[76,3250,770],{"class":86},[76,3252,94],{"class":93},[76,3254,775],{"class":97},[76,3256,101],{"class":82},[76,3258,3259,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285],{"class":78,"line":364},[76,3260,782],{"class":82},[76,3262,785],{"class":93},[76,3264,788],{"class":97},[76,3266,791],{"class":93},[76,3268,794],{"class":117},[76,3270,467],{"class":93},[76,3272,799],{"class":97},[76,3274,802],{"class":93},[76,3276,805],{"class":97},[76,3278,808],{"class":93},[76,3280,811],{"class":117},[76,3282,467],{"class":93},[76,3284,805],{"class":97},[76,3286,101],{"class":82},[76,3288,3289,3291,3293],{"class":78,"line":370},[76,3290,822],{"class":82},[76,3292,825],{"class":117},[76,3294,828],{"class":82},[76,3296,3297],{"class":78,"line":375},[76,3298,833],{"class":82},[76,3300,3301],{"class":78,"line":381},[76,3302,838],{"class":82},[76,3304,3305],{"class":78,"line":387},[76,3306,390],{"class":82},[433,3308,3309],{"v-slot:output":72},[846,3310],{},[22,3312,850],{},[22,3314,853,3315,857,3317,861,3319,865],{},[37,3316,856],{},[37,3318,860],{},[37,3320,864],{},[29,3322,869],{"id":868},[22,3324,872,3325,876,3327,879,3329,882],{},[37,3326,875],{},[37,3328,39],{},[37,3330,43],{},[22,3332,3333,888,3335,122],{},[37,3334,887],{},[37,3336,891],{},[66,3338,3339],{"className":68,"code":894,"filename":895,"language":71,"meta":72,"style":72},[37,3340,3341,3365,3371,3381,3385,3389,3395,3427,3439,3443,3447,3451,3455,3467,3485,3509,3513,3517,3531],{"__ignoreMap":72},[76,3342,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363],{"class":78,"line":79},[76,3344,83],{"class":82},[76,3346,87],{"class":86},[76,3348,90],{"class":86},[76,3350,94],{"class":93},[76,3352,98],{"class":97},[76,3354,912],{"class":86},[76,3356,94],{"class":93},[76,3358,805],{"class":97},[76,3360,891],{"class":125},[76,3362,805],{"class":97},[76,3364,101],{"class":82},[76,3366,3367,3369],{"class":78,"line":104},[76,3368,108],{"class":107},[76,3370,111],{"class":93},[76,3372,3373,3375,3377,3379],{"class":78,"line":114},[76,3374,933],{"class":117},[76,3376,122],{"class":121},[76,3378,938],{"class":125},[76,3380,155],{"class":93},[76,3382,3383],{"class":78,"line":144},[76,3384,161],{"class":93},[76,3386,3387],{"class":78,"line":158},[76,3388,174],{"emptyLinePlaceholder":173},[76,3390,3391,3393],{"class":78,"line":164},[76,3392,43],{"class":107},[76,3394,111],{"class":93},[76,3396,3397,3399,3401,3403,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3425],{"class":78,"line":170},[76,3398,959],{"class":107},[76,3400,688],{"class":93},[76,3402,964],{"class":117},[76,3404,122],{"class":121},[76,3406,461],{"class":93},[76,3408,971],{"class":117},[76,3410,122],{"class":121},[76,3412,938],{"class":125},[76,3414,135],{"class":93},[76,3416,980],{"class":117},[76,3418,122],{"class":121},[76,3420,547],{"class":125},[76,3422,987],{"class":93},[76,3424,122],{"class":121},[76,3426,992],{"class":125},[76,3428,3429,3431,3433,3435,3437],{"class":78,"line":177},[76,3430,997],{"class":107},[76,3432,1000],{"class":121},[76,3434,1003],{"class":93},[76,3436,122],{"class":121},[76,3438,992],{"class":125},[76,3440,3441],{"class":78,"line":183},[76,3442,161],{"class":93},[76,3444,3445],{"class":78,"line":189},[76,3446,167],{"class":82},[76,3448,3449],{"class":78,"line":195},[76,3450,174],{"emptyLinePlaceholder":173},[76,3452,3453],{"class":78,"line":201},[76,3454,180],{"class":82},[76,3456,3457,3459,3461,3463,3465],{"class":78,"line":233},[76,3458,1028],{"class":82},[76,3460,1031],{"class":86},[76,3462,94],{"class":93},[76,3464,1036],{"class":97},[76,3466,101],{"class":82},[76,3468,3469,3471,3473,3475,3477,3479,3481,3483],{"class":78,"line":263},[76,3470,1043],{"class":82},[76,3472,207],{"class":86},[76,3474,94],{"class":93},[76,3476,1050],{"class":97},[76,3478,215],{"class":86},[76,3480,94],{"class":93},[76,3482,304],{"class":97},[76,3484,101],{"class":82},[76,3486,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3507],{"class":78,"line":269},[76,3488,1063],{"class":82},[76,3490,1066],{"class":86},[76,3492,94],{"class":93},[76,3494,1071],{"class":97},[76,3496,1074],{"class":86},[76,3498,94],{"class":93},[76,3500,1071],{"class":97},[76,3502,1081],{"class":86},[76,3504,94],{"class":93},[76,3506,304],{"class":97},[76,3508,1088],{"class":82},[76,3510,3511],{"class":78,"line":275},[76,3512,1093],{"class":82},[76,3514,3515],{"class":78,"line":281},[76,3516,1098],{"class":82},[76,3518,3519,3521,3523,3525,3527,3529],{"class":78,"line":287},[76,3520,1103],{"class":82},[76,3522,1106],{"class":86},[76,3524,1066],{"class":86},[76,3526,94],{"class":93},[76,3528,1113],{"class":97},[76,3530,1088],{"class":82},[76,3532,3533],{"class":78,"line":309},[76,3534,390],{"class":82},[22,3536,3537,1124,3539,1128],{},[37,3538,43],{},[37,3540,1127],{},[22,3542,1131,3543,1134,3545,1138],{},[37,3544,891],{},[37,3546,1137],{},[430,3548,3549,3873],{},[433,3550,3551],{"v-slot:code":72},[66,3552,3553],{"className":68,"code":1145,"language":71,"meta":72,"style":72},[37,3554,3555,3569,3587,3597,3601,3609,3617,3625,3633,3649,3653,3657,3677,3681,3697,3711,3753,3757,3761,3765,3769,3793,3797,3809,3835,3839,3843,3853,3861,3865,3869],{"__ignoreMap":72},[76,3556,3557,3559,3561,3563,3565,3567],{"class":78,"line":79},[76,3558,83],{"class":82},[76,3560,87],{"class":86},[76,3562,90],{"class":86},[76,3564,94],{"class":93},[76,3566,98],{"class":97},[76,3568,101],{"class":82},[76,3570,3571,3573,3575,3577,3579,3581,3583,3585],{"class":78,"line":104},[76,3572,458],{"class":82},[76,3574,461],{"class":93},[76,3576,1170],{"class":117},[76,3578,135],{"class":93},[76,3580,464],{"class":117},[76,3582,467],{"class":93},[76,3584,470],{"class":82},[76,3586,473],{"class":97},[76,3588,3589,3591,3593,3595],{"class":78,"line":114},[76,3590,458],{"class":82},[76,3592,1187],{"class":117},[76,3594,483],{"class":82},[76,3596,1192],{"class":97},[76,3598,3599],{"class":78,"line":144},[76,3600,174],{"emptyLinePlaceholder":173},[76,3602,3603,3605,3607],{"class":78,"line":158},[76,3604,1201],{"class":82},[76,3606,1204],{"class":125},[76,3608,1207],{"class":93},[76,3610,3611,3613,3615],{"class":78,"line":164},[76,3612,1212],{"class":117},[76,3614,122],{"class":121},[76,3616,1217],{"class":125},[76,3618,3619,3621,3623],{"class":78,"line":170},[76,3620,1222],{"class":117},[76,3622,122],{"class":121},[76,3624,1217],{"class":125},[76,3626,3627,3629,3631],{"class":78,"line":177},[76,3628,1231],{"class":117},[76,3630,122],{"class":121},[76,3632,1236],{"class":125},[76,3634,3635,3637,3639,3641,3643,3645,3647],{"class":78,"line":183},[76,3636,1241],{"class":117},[76,3638,122],{"class":121},[76,3640,663],{"class":97},[76,3642,1248],{"class":121},[76,3644,623],{"class":97},[76,3646,1248],{"class":121},[76,3648,1255],{"class":97},[76,3650,3651],{"class":78,"line":189},[76,3652,1260],{"class":93},[76,3654,3655],{"class":78,"line":195},[76,3656,174],{"emptyLinePlaceholder":173},[76,3658,3659,3661,3663,3665,3667,3669,3671,3673,3675],{"class":78,"line":201},[76,3660,495],{"class":82},[76,3662,533],{"class":498},[76,3664,122],{"class":121},[76,3666,1204],{"class":125},[76,3668,1277],{"class":93},[76,3670,502],{"class":121},[76,3672,505],{"class":93},[76,3674,1285],{"class":1284},[76,3676,526],{"class":93},[76,3678,3679],{"class":78,"line":233},[76,3680,174],{"emptyLinePlaceholder":173},[76,3682,3683,3685,3687,3689,3691,3693,3695],{"class":78,"line":263},[76,3684,495],{"class":82},[76,3686,1298],{"class":498},[76,3688,502],{"class":121},[76,3690,685],{"class":107},[76,3692,688],{"class":93},[76,3694,1307],{"class":97},[76,3696,694],{"class":93},[76,3698,3699,3701,3703,3705,3707,3709],{"class":78,"line":269},[76,3700,495],{"class":82},[76,3702,1316],{"class":498},[76,3704,502],{"class":121},[76,3706,1170],{"class":107},[76,3708,1323],{"class":93},[76,3710,1326],{"class":82},[76,3712,3713,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751],{"class":78,"line":275},[76,3714,1331],{"class":117},[76,3716,1334],{"class":93},[76,3718,1337],{"class":107},[76,3720,688],{"class":93},[76,3722,1342],{"class":117},[76,3724,1345],{"class":82},[76,3726,1348],{"class":117},[76,3728,1334],{"class":93},[76,3730,400],{"class":546},[76,3732,1334],{"class":93},[76,3734,1357],{"class":107},[76,3736,1360],{"class":93},[76,3738,1363],{"class":107},[76,3740,688],{"class":93},[76,3742,1368],{"class":117},[76,3744,1334],{"class":93},[76,3746,856],{"class":546},[76,3748,1334],{"class":93},[76,3750,1357],{"class":107},[76,3752,1379],{"class":93},[76,3754,3755],{"class":78,"line":281},[76,3756,694],{"class":93},[76,3758,3759],{"class":78,"line":287},[76,3760,167],{"class":82},[76,3762,3763],{"class":78,"line":309},[76,3764,174],{"emptyLinePlaceholder":173},[76,3766,3767],{"class":78,"line":329},[76,3768,180],{"class":82},[76,3770,3771,3773,3775,3777,3779,3781,3783,3785,3787,3789,3791],{"class":78,"line":364},[76,3772,1400],{"class":82},[76,3774,714],{"class":86},[76,3776,94],{"class":93},[76,3778,1407],{"class":97},[76,3780,1410],{"class":86},[76,3782,94],{"class":93},[76,3784,1415],{"class":97},[76,3786,1418],{"class":86},[76,3788,94],{"class":93},[76,3790,1423],{"class":97},[76,3792,101],{"class":82},[76,3794,3795],{"class":78,"line":370},[76,3796,174],{"emptyLinePlaceholder":173},[76,3798,3799,3801,3803,3805,3807],{"class":78,"line":375},[76,3800,1434],{"class":82},[76,3802,1437],{"class":86},[76,3804,94],{"class":93},[76,3806,1442],{"class":97},[76,3808,101],{"class":82},[76,3810,3811,3813,3815,3817,3819,3821,3823,3825,3827,3829,3831,3833],{"class":78,"line":381},[76,3812,782],{"class":82},[76,3814,1451],{"class":93},[76,3816,1454],{"class":86},[76,3818,94],{"class":93},[76,3820,805],{"class":97},[76,3822,808],{"class":93},[76,3824,971],{"class":117},[76,3826,135],{"class":93},[76,3828,1467],{"class":117},[76,3830,467],{"class":93},[76,3832,805],{"class":97},[76,3834,101],{"class":82},[76,3836,3837],{"class":78,"line":387},[76,3838,1478],{"class":117},[76,3840,3841],{"class":78,"line":1481},[76,3842,833],{"class":82},[76,3844,3845,3847,3849,3851],{"class":78,"line":1486},[76,3846,782],{"class":82},[76,3848,1451],{"class":93},[76,3850,1493],{"class":86},[76,3852,101],{"class":82},[76,3854,3855,3857,3859],{"class":78,"line":1498},[76,3856,1501],{"class":82},[76,3858,1504],{"class":117},[76,3860,1507],{"class":82},[76,3862,3863],{"class":78,"line":1510},[76,3864,833],{"class":82},[76,3866,3867],{"class":78,"line":1515},[76,3868,1518],{"class":82},[76,3870,3871],{"class":78,"line":1521},[76,3872,390],{"class":82},[433,3874,3875],{"v-slot:output":72},[1527,3876],{},[22,3878,1531,3879,1535,3881,1538,3883,1542,3885,1546],{},[37,3880,1534],{},[37,3882,1454],{},[37,3884,1541],{},[37,3886,1545],{},[22,3888,1549,3889,1552,3891,1555,3893,1558],{},[37,3890,43],{},[37,3892,1493],{},[37,3894,1000],{},[29,3896,1562],{"id":1561},[22,3898,1565],{},[66,3900,3901],{"className":68,"code":1568,"language":71,"meta":72,"style":72},[37,3902,3903,3931,3937,3947,3965,3969],{"__ignoreMap":72},[76,3904,3905,3907,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927,3929],{"class":78,"line":79},[76,3906,83],{"class":82},[76,3908,87],{"class":86},[76,3910,90],{"class":86},[76,3912,94],{"class":93},[76,3914,98],{"class":97},[76,3916,912],{"class":86},[76,3918,94],{"class":93},[76,3920,805],{"class":97},[76,3922,891],{"class":125},[76,3924,1593],{"class":82},[76,3926,1596],{"class":125},[76,3928,805],{"class":97},[76,3930,101],{"class":82},[76,3932,3933,3935],{"class":78,"line":104},[76,3934,108],{"class":107},[76,3936,111],{"class":93},[76,3938,3939,3941,3943,3945],{"class":78,"line":114},[76,3940,118],{"class":117},[76,3942,122],{"class":121},[76,3944,938],{"class":125},[76,3946,155],{"class":93},[76,3948,3949,3951,3953,3955,3957,3959,3961,3963],{"class":78,"line":144},[76,3950,147],{"class":117},[76,3952,122],{"class":121},[76,3954,1625],{"class":93},[76,3956,1628],{"class":82},[76,3958,938],{"class":125},[76,3960,1633],{"class":121},[76,3962,152],{"class":125},[76,3964,1638],{"class":93},[76,3966,3967],{"class":78,"line":158},[76,3968,161],{"class":93},[76,3970,3971],{"class":78,"line":164},[76,3972,167],{"class":82},[22,3974,3975,1652,3977,1656,3979,1660,3981,1663,3983,1667,3985,1671],{},[37,3976,1651],{},[37,3978,1655],{},[37,3980,1659],{},[37,3982,856],{},[37,3984,1666],{},[37,3986,1670],{},[22,3988,1674],{},[66,3990,3991],{"className":68,"code":1677,"filename":1678,"language":71,"meta":72,"style":72},[37,3992,3993,4021,4031,4095,4099,4103,4113,4165,4169,4173,4179,4189,4207,4211,4215,4229,4233,4275,4317,4321,4325,4329,4333,4337,4341,4365,4387,4391,4395,4399,4403,4421,4439,4467,4471,4475,4479,4483],{"__ignoreMap":72},[76,3994,3995,3997,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017,4019],{"class":78,"line":79},[76,3996,83],{"class":82},[76,3998,87],{"class":86},[76,4000,90],{"class":86},[76,4002,94],{"class":93},[76,4004,98],{"class":97},[76,4006,912],{"class":86},[76,4008,94],{"class":93},[76,4010,805],{"class":97},[76,4012,891],{"class":125},[76,4014,1593],{"class":82},[76,4016,1596],{"class":125},[76,4018,805],{"class":97},[76,4020,101],{"class":82},[76,4022,4023,4025,4027,4029],{"class":78,"line":104},[76,4024,1713],{"class":82},[76,4026,1716],{"class":125},[76,4028,502],{"class":121},[76,4030,1207],{"class":93},[76,4032,4033,4035,4037,4039,4041,4043,4045,4047,4049,4051,4053,4055,4057,4059,4061,4063,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093],{"class":78,"line":114},[76,4034,1725],{"class":93},[76,4036,1728],{"class":125},[76,4038,1731],{"class":82},[76,4040,1734],{"class":82},[76,4042,938],{"class":125},[76,4044,1633],{"class":121},[76,4046,152],{"class":125},[76,4048,1743],{"class":82},[76,4050,1746],{"class":97},[76,4052,791],{"class":93},[76,4054,1728],{"class":125},[76,4056,467],{"class":93},[76,4058,799],{"class":97},[76,4060,1757],{"class":93},[76,4062,1760],{"class":121},[76,4064,1625],{"class":93},[76,4066,964],{"class":117},[76,4068,122],{"class":121},[76,4070,461],{"class":93},[76,4072,1771],{"class":117},[76,4074,122],{"class":121},[76,4076,938],{"class":125},[76,4078,1778],{"class":93},[76,4080,1728],{"class":125},[76,4082,1783],{"class":93},[76,4084,1786],{"class":117},[76,4086,122],{"class":121},[76,4088,938],{"class":125},[76,4090,987],{"class":93},[76,4092,1795],{"class":82},[76,4094,992],{"class":125},[76,4096,4097],{"class":78,"line":144},[76,4098,1260],{"class":93},[76,4100,4101],{"class":78,"line":158},[76,4102,174],{"emptyLinePlaceholder":173},[76,4104,4105,4107,4109,4111],{"class":78,"line":164},[76,4106,1713],{"class":82},[76,4108,1812],{"class":125},[76,4110,502],{"class":121},[76,4112,1207],{"class":93},[76,4114,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149,4151,4153,4155,4157,4159,4161,4163],{"class":78,"line":170},[76,4116,1725],{"class":93},[76,4118,1728],{"class":125},[76,4120,1731],{"class":82},[76,4122,1734],{"class":82},[76,4124,938],{"class":125},[76,4126,1633],{"class":121},[76,4128,152],{"class":125},[76,4130,1743],{"class":82},[76,4132,1837],{"class":97},[76,4134,791],{"class":93},[76,4136,1728],{"class":125},[76,4138,467],{"class":93},[76,4140,799],{"class":97},[76,4142,1757],{"class":93},[76,4144,1760],{"class":121},[76,4146,1625],{"class":93},[76,4148,964],{"class":117},[76,4150,122],{"class":121},[76,4152,461],{"class":93},[76,4154,1860],{"class":117},[76,4156,122],{"class":121},[76,4158,1865],{"class":125},[76,4160,987],{"class":93},[76,4162,1795],{"class":82},[76,4164,992],{"class":125},[76,4166,4167],{"class":78,"line":177},[76,4168,1260],{"class":93},[76,4170,4171],{"class":78,"line":183},[76,4172,174],{"emptyLinePlaceholder":173},[76,4174,4175,4177],{"class":78,"line":189},[76,4176,108],{"class":125},[76,4178,111],{"class":93},[76,4180,4181,4183,4185,4187],{"class":78,"line":195},[76,4182,118],{"class":117},[76,4184,122],{"class":121},[76,4186,938],{"class":125},[76,4188,155],{"class":93},[76,4190,4191,4193,4195,4197,4199,4201,4203,4205],{"class":78,"line":201},[76,4192,147],{"class":117},[76,4194,122],{"class":121},[76,4196,1625],{"class":93},[76,4198,1628],{"class":82},[76,4200,938],{"class":125},[76,4202,1633],{"class":121},[76,4204,152],{"class":125},[76,4206,1638],{"class":93},[76,4208,4209],{"class":78,"line":233},[76,4210,161],{"class":93},[76,4212,4213],{"class":78,"line":263},[76,4214,174],{"emptyLinePlaceholder":173},[76,4216,4217,4219,4221,4223,4225,4227],{"class":78,"line":269},[76,4218,43],{"class":125},[76,4220,129],{"class":93},[76,4222,1930],{"class":125},[76,4224,1633],{"class":121},[76,4226,1812],{"class":125},[76,4228,1937],{"class":93},[76,4230,4231],{"class":78,"line":275},[76,4232,174],{"emptyLinePlaceholder":173},[76,4234,4235,4237,4239,4241,4243,4245,4247,4249,4251,4253,4255,4257,4259,4261,4263,4265,4267,4269,4271,4273],{"class":78,"line":281},[76,4236,495],{"class":82},[76,4238,1948],{"class":107},[76,4240,502],{"class":121},[76,4242,1625],{"class":93},[76,4244,1955],{"class":117},[76,4246,122],{"class":121},[76,4248,1734],{"class":82},[76,4250,938],{"class":125},[76,4252,1633],{"class":121},[76,4254,152],{"class":125},[76,4256,1968],{"class":93},[76,4258,1795],{"class":82},[76,4260,1746],{"class":97},[76,4262,791],{"class":93},[76,4264,1955],{"class":117},[76,4266,467],{"class":93},[76,4268,799],{"class":97},[76,4270,1743],{"class":82},[76,4272,1734],{"class":82},[76,4274,1987],{"class":125},[76,4276,4277,4279,4281,4283,4285,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315],{"class":78,"line":287},[76,4278,495],{"class":82},[76,4280,1994],{"class":107},[76,4282,502],{"class":121},[76,4284,1625],{"class":93},[76,4286,1955],{"class":117},[76,4288,122],{"class":121},[76,4290,1734],{"class":82},[76,4292,938],{"class":125},[76,4294,1633],{"class":121},[76,4296,152],{"class":125},[76,4298,1968],{"class":93},[76,4300,1795],{"class":82},[76,4302,1837],{"class":97},[76,4304,791],{"class":93},[76,4306,1955],{"class":117},[76,4308,467],{"class":93},[76,4310,799],{"class":97},[76,4312,1743],{"class":82},[76,4314,1734],{"class":82},[76,4316,2031],{"class":125},[76,4318,4319],{"class":78,"line":309},[76,4320,167],{"class":82},[76,4322,4323],{"class":78,"line":329},[76,4324,174],{"emptyLinePlaceholder":173},[76,4326,4327],{"class":78,"line":364},[76,4328,180],{"class":82},[76,4330,4331],{"class":78,"line":370},[76,4332,186],{"class":82},[76,4334,4335],{"class":78,"line":375},[76,4336,192],{"class":82},[76,4338,4339],{"class":78,"line":381},[76,4340,198],{"class":82},[76,4342,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4363],{"class":78,"line":387},[76,4344,204],{"class":82},[76,4346,207],{"class":86},[76,4348,94],{"class":93},[76,4350,212],{"class":97},[76,4352,215],{"class":86},[76,4354,94],{"class":93},[76,4356,220],{"class":97},[76,4358,223],{"class":86},[76,4360,94],{"class":93},[76,4362,228],{"class":97},[76,4364,101],{"class":82},[76,4366,4367,4369,4371,4373,4375,4377,4379,4381,4383,4385],{"class":78,"line":1481},[76,4368,236],{"class":82},[76,4370,239],{"class":86},[76,4372,94],{"class":93},[76,4374,2090],{"class":97},[76,4376,247],{"class":86},[76,4378,94],{"class":93},[76,4380,220],{"class":97},[76,4382,254],{"class":82},[76,4384,257],{"class":117},[76,4386,260],{"class":82},[76,4388,4389],{"class":78,"line":1486},[76,4390,266],{"class":82},[76,4392,4393],{"class":78,"line":1498},[76,4394,272],{"class":82},[76,4396,4397],{"class":78,"line":1510},[76,4398,278],{"class":82},[76,4400,4401],{"class":78,"line":1515},[76,4402,284],{"class":82},[76,4404,4405,4407,4409,4411,4413,4415,4417,4419],{"class":78,"line":1521},[76,4406,290],{"class":82},[76,4408,207],{"class":86},[76,4410,94],{"class":93},[76,4412,297],{"class":97},[76,4414,215],{"class":86},[76,4416,94],{"class":93},[76,4418,304],{"class":97},[76,4420,101],{"class":82},[76,4422,4423,4425,4427,4429,4431,4433,4435,4437],{"class":78,"line":2139},[76,4424,312],{"class":82},[76,4426,207],{"class":86},[76,4428,94],{"class":93},[76,4430,212],{"class":97},[76,4432,215],{"class":86},[76,4434,94],{"class":93},[76,4436,220],{"class":97},[76,4438,101],{"class":82},[76,4440,4441,4443,4445,4447,4449,4451,4453,4455,4457,4459,4461,4463,4465],{"class":78,"line":2158},[76,4442,236],{"class":82},[76,4444,239],{"class":86},[76,4446,94],{"class":93},[76,4448,2167],{"class":97},[76,4450,341],{"class":86},[76,4452,94],{"class":93},[76,4454,346],{"class":97},[76,4456,349],{"class":86},[76,4458,94],{"class":93},[76,4460,354],{"class":97},[76,4462,254],{"class":82},[76,4464,359],{"class":117},[76,4466,260],{"class":82},[76,4468,4469],{"class":78,"line":2188},[76,4470,367],{"class":82},[76,4472,4473],{"class":78,"line":2193},[76,4474,272],{"class":82},[76,4476,4477],{"class":78,"line":2198},[76,4478,378],{"class":82},[76,4480,4481],{"class":78,"line":2203},[76,4482,384],{"class":82},[76,4484,4485],{"class":78,"line":2208},[76,4486,390],{"class":82},[22,4488,2213,4489,2216,4491,2219,4493,2223,4495,2226,4497,2230,4499,2234],{},[37,4490,1728],{},[37,4492,891],{},[37,4494,2222],{},[37,4496,856],{},[37,4498,2229],{},[37,4500,2233],{},[22,4502,2237,4503,2240,4505,2244,4507,2247],{},[37,4504,891],{},[37,4506,2243],{},[37,4508,1930],{},[430,4510,4511,4781],{},[433,4512,4513],{"v-slot:code":72},[66,4514,4515],{"className":68,"code":2254,"language":71,"meta":72,"style":72},[37,4516,4517,4531,4541,4545,4553,4561,4569,4577,4593,4597,4601,4621,4625,4665,4669,4673,4677,4695,4717,4721,4725,4747,4769,4773,4777],{"__ignoreMap":72},[76,4518,4519,4521,4523,4525,4527,4529],{"class":78,"line":79},[76,4520,83],{"class":82},[76,4522,87],{"class":86},[76,4524,90],{"class":86},[76,4526,94],{"class":93},[76,4528,98],{"class":97},[76,4530,101],{"class":82},[76,4532,4533,4535,4537,4539],{"class":78,"line":104},[76,4534,458],{"class":82},[76,4536,2277],{"class":117},[76,4538,483],{"class":82},[76,4540,2282],{"class":97},[76,4542,4543],{"class":78,"line":114},[76,4544,174],{"emptyLinePlaceholder":173},[76,4546,4547,4549,4551],{"class":78,"line":144},[76,4548,1201],{"class":82},[76,4550,1204],{"class":125},[76,4552,1207],{"class":93},[76,4554,4555,4557,4559],{"class":78,"line":158},[76,4556,1212],{"class":117},[76,4558,122],{"class":121},[76,4560,1217],{"class":125},[76,4562,4563,4565,4567],{"class":78,"line":164},[76,4564,1222],{"class":117},[76,4566,122],{"class":121},[76,4568,1217],{"class":125},[76,4570,4571,4573,4575],{"class":78,"line":170},[76,4572,1231],{"class":117},[76,4574,122],{"class":121},[76,4576,1236],{"class":125},[76,4578,4579,4581,4583,4585,4587,4589,4591],{"class":78,"line":177},[76,4580,1241],{"class":117},[76,4582,122],{"class":121},[76,4584,663],{"class":97},[76,4586,1248],{"class":121},[76,4588,623],{"class":97},[76,4590,1248],{"class":121},[76,4592,1255],{"class":97},[76,4594,4595],{"class":78,"line":183},[76,4596,1260],{"class":93},[76,4598,4599],{"class":78,"line":189},[76,4600,174],{"emptyLinePlaceholder":173},[76,4602,4603,4605,4607,4609,4611,4613,4615,4617,4619],{"class":78,"line":195},[76,4604,495],{"class":82},[76,4606,533],{"class":498},[76,4608,122],{"class":121},[76,4610,1204],{"class":125},[76,4612,1277],{"class":93},[76,4614,502],{"class":121},[76,4616,505],{"class":93},[76,4618,1285],{"class":1284},[76,4620,526],{"class":93},[76,4622,4623],{"class":78,"line":201},[76,4624,174],{"emptyLinePlaceholder":173},[76,4626,4627,4629,4631,4633,4635,4637,4639,4641,4643,4645,4647,4649,4651,4653,4655,4657,4659,4661,4663],{"class":78,"line":233},[76,4628,495],{"class":82},[76,4630,2373],{"class":498},[76,4632,502],{"class":121},[76,4634,2378],{"class":82},[76,4636,2381],{"class":117},[76,4638,1334],{"class":93},[76,4640,2386],{"class":107},[76,4642,688],{"class":93},[76,4644,2391],{"class":97},[76,4646,135],{"class":93},[76,4648,461],{"class":93},[76,4650,2398],{"class":546},[76,4652,122],{"class":93},[76,4654,2403],{"class":97},[76,4656,135],{"class":93},[76,4658,2408],{"class":546},[76,4660,122],{"class":93},[76,4662,2413],{"class":97},[76,4664,2416],{"class":93},[76,4666,4667],{"class":78,"line":263},[76,4668,167],{"class":82},[76,4670,4671],{"class":78,"line":269},[76,4672,174],{"emptyLinePlaceholder":173},[76,4674,4675],{"class":78,"line":275},[76,4676,180],{"class":82},[76,4678,4679,4681,4683,4685,4687,4689,4691,4693],{"class":78,"line":281},[76,4680,2433],{"class":82},[76,4682,762],{"class":86},[76,4684,94],{"class":93},[76,4686,767],{"class":97},[76,4688,770],{"class":86},[76,4690,94],{"class":93},[76,4692,2446],{"class":97},[76,4694,101],{"class":82},[76,4696,4697,4699,4701,4703,4705,4707,4709,4711,4713,4715],{"class":78,"line":287},[76,4698,782],{"class":82},[76,4700,1451],{"class":93},[76,4702,1655],{"class":86},[76,4704,94],{"class":93},[76,4706,805],{"class":97},[76,4708,808],{"class":93},[76,4710,811],{"class":117},[76,4712,467],{"class":93},[76,4714,805],{"class":97},[76,4716,101],{"class":82},[76,4718,4719],{"class":78,"line":309},[76,4720,2475],{"class":117},[76,4722,4723],{"class":78,"line":329},[76,4724,833],{"class":82},[76,4726,4727,4729,4731,4733,4735,4737,4739,4741,4743,4745],{"class":78,"line":364},[76,4728,782],{"class":82},[76,4730,1451],{"class":93},[76,4732,2488],{"class":86},[76,4734,94],{"class":93},[76,4736,805],{"class":97},[76,4738,808],{"class":93},[76,4740,811],{"class":117},[76,4742,467],{"class":93},[76,4744,805],{"class":97},[76,4746,101],{"class":82},[76,4748,4749,4751,4753,4755,4757,4759,4761,4763,4765,4767],{"class":78,"line":370},[76,4750,2507],{"class":82},[76,4752,2510],{"class":86},[76,4754,94],{"class":93},[76,4756,2515],{"class":97},[76,4758,2518],{"class":86},[76,4760,94],{"class":93},[76,4762,2523],{"class":97},[76,4764,254],{"class":82},[76,4766,825],{"class":117},[76,4768,2530],{"class":82},[76,4770,4771],{"class":78,"line":375},[76,4772,833],{"class":82},[76,4774,4775],{"class":78,"line":381},[76,4776,2539],{"class":82},[76,4778,4779],{"class":78,"line":387},[76,4780,390],{"class":82},[433,4782,4783],{"v-slot:output":72},[2547,4784],{},[22,4786,2551,4787,397,4789,2557,4791,2560,4793,2564,4795,2568,4797,2572,4799,1334],{},[37,4788,2554],{},[37,4790,856],{},[37,4792,396],{},[37,4794,2563],{},[37,4796,2567],{},[37,4798,2571],{},[37,4800,1541],{},[22,4802,2577,4803,2581,4805,2585,4807,2589,4809,2592],{},[37,4804,2580],{},[37,4806,2584],{},[37,4808,2588],{},[37,4810,856],{},[22,4812,2595,4813,2599,4815,2603,4817,2607],{},[37,4814,2598],{},[37,4816,2602],{},[37,4818,2606],{},[29,4820,2611],{"id":2610},[22,4822,2614,4823,2617,4825,2620,4827,2623],{},[37,4824,63],{},[37,4826,860],{},[37,4828,43],{},[2625,4830,2627],{},{"title":72,"searchDepth":104,"depth":104,"links":4832},[4833,4834,4835,4836,4837],{"id":31,"depth":104,"text":32},{"id":50,"depth":104,"text":51},{"id":868,"depth":104,"text":869},{"id":1561,"depth":104,"text":1562},{"id":2610,"depth":104,"text":2611},{"head":4839},[4840,4842,4844,4846,4848,4850,4852,4854,4856,4858],{"meta":4841},{"name":2643,"content":10},{"meta":4843},{"name":2646,"content":2647},{"meta":4845},{"name":2650,"content":2651},{"meta":4847},{"name":2654,"content":2635},{"meta":4849},{"name":2657,"content":2658},{"meta":4851},{"name":2661,"content":2662},{"meta":4853},{"name":2665,"content":2666},{"meta":4855},{"name":2669,"content":24},{"meta":4857},{"name":2672,"content":2673},{"meta":4859},{"name":2676,"content":10},{"title":10,"description":2636},[2681,2682,51,2683,43,2684,2685],{"id":4863,"title":4864,"body":4865,"date":7665,"description":7666,"extension":2637,"img":2638,"meta":7667,"navigation":173,"path":7691,"seo":7692,"stem":7693,"tags":7694,"__hash__":7700},"blog/blog/from-renderless-component-to-composable-function/index.md","Vue.js - Evolution From Renderless Component to Composable Function",{"type":12,"value":4866,"toc":7650},[4867,4870,4875,4877,4879,4882,4886,4889,4893,4907,4911,4924,4927,4932,5572,5575,5813,5817,5820,6280,6284,6293,6296,6682,6685,6689,6692,6695,6698,6990,6993,7199,7214,7217,7220,7642,7644,7647],[15,4868,4864],{"id":4869},"vuejs-evolution-from-renderless-component-to-composable-function",[19,4871,4872],{},[22,4873,4874],{},"Vue.js, Renderless Component, Composable function, Composition API, Vue 3, Reusability",[26,4876],{},[29,4878,32],{"id":31},[22,4880,4881],{},"An autocomplete can use the same search logic whether it displays results as a list or a grid of cards. We'll build that logic in a renderless component, then move it into a composable to compare how each approach connects to the template.",[29,4883,4885],{"id":4884},"what-is-a-renderless-component","What is a renderless component?",[22,4887,4888],{},"A renderless component manages logic and state while its parent supplies the markup through scoped slots. It accepts props, exposes data and functions as slot props, and can emit events. In the autocomplete below, the component handles searching and selection; the parent renders the input and results.",[29,4890,4892],{"id":4891},"why-use-a-renderless-component","Why use a renderless component?",[22,4894,4895,4896,4899,4900,1334],{},"Use this pattern when several interfaces need the same behavior but different markup. Here, one ",[37,4897,4898],{},"AutoComplete"," supplies search results to both a list and a card grid. A validation component can work the same way: it handles validation and exposes the field state so the parent can decide how to show errors. For an example, see ",[4901,4902,4906],"a",{"href":4903,"rel":4904},"https://www.digitalocean.com/community/tutorials/vuejs-renderless-components",[4905],"nofollow","Renderless components pattern in Vue 3",[29,4908,4910],{"id":4909},"how-to-build-a-renderless-component-in-vuejs","How to build a renderless component in Vue.js",[22,4912,4913,4914,4919,4920,4923],{},"To illustrate the process of building a renderless component in Vue.js, we will create an ",[4915,4916,4917],"strong",{},[37,4918,4898],{}," component that can be used to search for a specific item in a list of items. The component accepts a list of items and, optionally, a search function as props. It keeps the search query itself, filters the items as the query changes, and passes the results to a slot, where the parent decides how to render them. It also emits a ",[37,4921,4922],{},"select"," event, so the parent knows which item was picked.",[22,4925,4926],{},"The slot exposes the query, results, and two functions: one to update the query and one to select an item. The parent uses these to connect its input and result controls to the search logic.",[4928,4929,4931],"h3",{"id":4930},"basic-example","Basic example",[66,4933,4945],{"className":4934,"code":4935,"filename":4936,"highlights":4937,"language":4944,"meta":72,"style":72},"language-ts shiki shiki-themes site-light site-light site-dark","import { defineComponent, ref } from 'vue'\n\nconst AutoComplete = defineComponent({\n  props: {\n    items: {\n      type: Array,\n      required: true,\n    },\n    searchFn: {\n      type: Function,\n      required: false,\n    },\n  },\n  emits: ['select'],\n  setup(props, { emit, slots }) {\n    const searchQuery = ref('') // Represents the search query entered by the user\n    const results = ref([]) // Stores the search results based on the search query\n    const onSearch = () => {\n      if (searchQuery.value.length === 0) {\n        results.value = []\n        return\n      }\n\n      results.value = props.searchFn\n        ? props.searchFn(searchQuery.value)\n        : props.items.filter((item: any) => {\n            return item.toLowerCase().includes(searchQuery.value.toLowerCase())\n          })\n    }\n\n    const onSearchQueryChange = (val: string) => {\n      searchQuery.value = val\n      onSearch()\n    }\n\n    const select = (result: any) => {\n      emit('select', result)\n      searchQuery.value = ''\n      results.value = []\n    }\n\n    return () => slots.default?.({\n      searchQuery: searchQuery.value,\n      results: results.value,\n      onSearchQueryChange,\n      select,\n    })\n  },\n})\n\nexport default AutoComplete\n","AutoComplete.ts",[4938,4939,4940,4941,4942,4943],42,43,44,45,46,47,"ts",[37,4946,4947,4966,4970,4984,4993,5002,5015,5027,5032,5041,5052,5063,5067,5072,5087,5113,5134,5151,5167,5196,5210,5215,5220,5224,5243,5265,5296,5326,5331,5336,5340,5364,5378,5386,5390,5394,5418,5434,5447,5460,5465,5470,5492,5507,5522,5530,5538,5544,5549,5555,5560],{"__ignoreMap":72},[76,4948,4949,4951,4953,4956,4958,4960,4962,4964],{"class":78,"line":79},[76,4950,458],{"class":82},[76,4952,461],{"class":93},[76,4954,4955],{"class":117}," defineComponent",[76,4957,135],{"class":93},[76,4959,464],{"class":117},[76,4961,467],{"class":93},[76,4963,470],{"class":82},[76,4965,473],{"class":97},[76,4967,4968],{"class":78,"line":104},[76,4969,174],{"emptyLinePlaceholder":173},[76,4971,4972,4974,4977,4979,4981],{"class":78,"line":114},[76,4973,495],{"class":82},[76,4975,4976],{"class":498}," AutoComplete",[76,4978,502],{"class":121},[76,4980,4955],{"class":107},[76,4982,4983],{"class":93},"({\n",[76,4985,4986,4989,4991],{"class":78,"line":144},[76,4987,4988],{"class":546},"  props",[76,4990,122],{"class":93},[76,4992,1207],{"class":93},[76,4994,4995,4998,5000],{"class":78,"line":158},[76,4996,4997],{"class":546},"    items",[76,4999,122],{"class":93},[76,5001,1207],{"class":93},[76,5003,5004,5007,5009,5012],{"class":78,"line":164},[76,5005,5006],{"class":546},"      type",[76,5008,122],{"class":93},[76,5010,5011],{"class":117}," Array",[76,5013,5014],{"class":93},",\n",[76,5016,5017,5020,5022,5025],{"class":78,"line":170},[76,5018,5019],{"class":546},"      required",[76,5021,122],{"class":93},[76,5023,5024],{"class":498}," true",[76,5026,5014],{"class":93},[76,5028,5029],{"class":78,"line":177},[76,5030,5031],{"class":93},"    },\n",[76,5033,5034,5037,5039],{"class":78,"line":183},[76,5035,5036],{"class":546},"    searchFn",[76,5038,122],{"class":93},[76,5040,1207],{"class":93},[76,5042,5043,5045,5047,5050],{"class":78,"line":189},[76,5044,5006],{"class":546},[76,5046,122],{"class":93},[76,5048,5049],{"class":117}," Function",[76,5051,5014],{"class":93},[76,5053,5054,5056,5058,5061],{"class":78,"line":195},[76,5055,5019],{"class":546},[76,5057,122],{"class":93},[76,5059,5060],{"class":498}," false",[76,5062,5014],{"class":93},[76,5064,5065],{"class":78,"line":201},[76,5066,5031],{"class":93},[76,5068,5069],{"class":78,"line":233},[76,5070,5071],{"class":93},"  },\n",[76,5073,5074,5077,5079,5081,5084],{"class":78,"line":263},[76,5075,5076],{"class":546},"  emits",[76,5078,122],{"class":93},[76,5080,505],{"class":93},[76,5082,5083],{"class":97},"'select'",[76,5085,5086],{"class":93},"],\n",[76,5088,5089,5092,5094,5096,5098,5100,5103,5105,5108,5111],{"class":78,"line":269},[76,5090,5091],{"class":107},"  setup",[76,5093,688],{"class":93},[76,5095,964],{"class":117},[76,5097,135],{"class":93},[76,5099,461],{"class":93},[76,5101,5102],{"class":117}," emit",[76,5104,135],{"class":93},[76,5106,5107],{"class":117}," slots ",[76,5109,5110],{"class":93},"})",[76,5112,1207],{"class":93},[76,5114,5115,5118,5121,5123,5125,5127,5129,5131],{"class":78,"line":275},[76,5116,5117],{"class":82},"    const",[76,5119,5120],{"class":498}," searchQuery",[76,5122,502],{"class":121},[76,5124,685],{"class":107},[76,5126,688],{"class":93},[76,5128,1307],{"class":97},[76,5130,1968],{"class":93},[76,5132,5133],{"class":1284}," // Represents the search query entered by the user\n",[76,5135,5136,5138,5141,5143,5145,5148],{"class":78,"line":281},[76,5137,5117],{"class":82},[76,5139,5140],{"class":498}," results",[76,5142,502],{"class":121},[76,5144,685],{"class":107},[76,5146,5147],{"class":93},"([])",[76,5149,5150],{"class":1284}," // Stores the search results based on the search query\n",[76,5152,5153,5155,5158,5160,5163,5165],{"class":78,"line":287},[76,5154,5117],{"class":82},[76,5156,5157],{"class":107}," onSearch",[76,5159,502],{"class":121},[76,5161,5162],{"class":93}," ()",[76,5164,1795],{"class":82},[76,5166,1207],{"class":93},[76,5168,5169,5172,5174,5177,5179,5181,5183,5186,5189,5192,5194],{"class":78,"line":309},[76,5170,5171],{"class":82},"      if",[76,5173,1625],{"class":93},[76,5175,5176],{"class":117},"searchQuery",[76,5178,1334],{"class":93},[76,5180,856],{"class":546},[76,5182,1334],{"class":93},[76,5184,5185],{"class":546},"length",[76,5187,5188],{"class":121}," ===",[76,5190,5191],{"class":498}," 0",[76,5193,1968],{"class":93},[76,5195,1207],{"class":93},[76,5197,5198,5201,5203,5205,5207],{"class":78,"line":329},[76,5199,5200],{"class":117},"        results",[76,5202,1334],{"class":93},[76,5204,856],{"class":546},[76,5206,502],{"class":121},[76,5208,5209],{"class":93}," []\n",[76,5211,5212],{"class":78,"line":364},[76,5213,5214],{"class":82},"        return\n",[76,5216,5217],{"class":78,"line":370},[76,5218,5219],{"class":93},"      }\n",[76,5221,5222],{"class":78,"line":375},[76,5223,174],{"emptyLinePlaceholder":173},[76,5225,5226,5229,5231,5233,5235,5238,5240],{"class":78,"line":381},[76,5227,5228],{"class":117},"      results",[76,5230,1334],{"class":93},[76,5232,856],{"class":546},[76,5234,502],{"class":121},[76,5236,5237],{"class":117}," props",[76,5239,1334],{"class":93},[76,5241,5242],{"class":546},"searchFn\n",[76,5244,5245,5248,5250,5252,5255,5257,5259,5261,5263],{"class":78,"line":387},[76,5246,5247],{"class":121},"        ?",[76,5249,5237],{"class":117},[76,5251,1334],{"class":93},[76,5253,5254],{"class":107},"searchFn",[76,5256,688],{"class":93},[76,5258,5176],{"class":117},[76,5260,1334],{"class":93},[76,5262,856],{"class":546},[76,5264,694],{"class":93},[76,5266,5267,5270,5272,5274,5276,5278,5280,5283,5285,5287,5290,5292,5294],{"class":78,"line":1481},[76,5268,5269],{"class":121},"        :",[76,5271,5237],{"class":117},[76,5273,1334],{"class":93},[76,5275,1137],{"class":546},[76,5277,1334],{"class":93},[76,5279,1337],{"class":107},[76,5281,5282],{"class":93},"((",[76,5284,1454],{"class":117},[76,5286,122],{"class":121},[76,5288,5289],{"class":125}," any",[76,5291,1968],{"class":93},[76,5293,1795],{"class":82},[76,5295,1207],{"class":93},[76,5297,5298,5301,5303,5305,5307,5309,5311,5313,5315,5317,5319,5321,5323],{"class":78,"line":1486},[76,5299,5300],{"class":82},"            return",[76,5302,971],{"class":117},[76,5304,1334],{"class":93},[76,5306,1357],{"class":107},[76,5308,1360],{"class":93},[76,5310,1363],{"class":107},[76,5312,688],{"class":93},[76,5314,5176],{"class":117},[76,5316,1334],{"class":93},[76,5318,856],{"class":546},[76,5320,1334],{"class":93},[76,5322,1357],{"class":107},[76,5324,5325],{"class":93},"())\n",[76,5327,5328],{"class":78,"line":1498},[76,5329,5330],{"class":93},"          })\n",[76,5332,5333],{"class":78,"line":1510},[76,5334,5335],{"class":93},"    }\n",[76,5337,5338],{"class":78,"line":1515},[76,5339,174],{"emptyLinePlaceholder":173},[76,5341,5342,5344,5347,5349,5351,5354,5356,5358,5360,5362],{"class":78,"line":1521},[76,5343,5117],{"class":82},[76,5345,5346],{"class":107}," onSearchQueryChange",[76,5348,502],{"class":121},[76,5350,1625],{"class":93},[76,5352,5353],{"class":117},"val",[76,5355,122],{"class":121},[76,5357,152],{"class":125},[76,5359,1968],{"class":93},[76,5361,1795],{"class":82},[76,5363,1207],{"class":93},[76,5365,5366,5369,5371,5373,5375],{"class":78,"line":2139},[76,5367,5368],{"class":117},"      searchQuery",[76,5370,1334],{"class":93},[76,5372,856],{"class":546},[76,5374,502],{"class":121},[76,5376,5377],{"class":117}," val\n",[76,5379,5380,5383],{"class":78,"line":2158},[76,5381,5382],{"class":107},"      onSearch",[76,5384,5385],{"class":93},"()\n",[76,5387,5388],{"class":78,"line":2188},[76,5389,5335],{"class":93},[76,5391,5392],{"class":78,"line":2193},[76,5393,174],{"emptyLinePlaceholder":173},[76,5395,5396,5398,5401,5403,5405,5408,5410,5412,5414,5416],{"class":78,"line":2198},[76,5397,5117],{"class":82},[76,5399,5400],{"class":107}," select",[76,5402,502],{"class":121},[76,5404,1625],{"class":93},[76,5406,5407],{"class":117},"result",[76,5409,122],{"class":121},[76,5411,5289],{"class":125},[76,5413,1968],{"class":93},[76,5415,1795],{"class":82},[76,5417,1207],{"class":93},[76,5419,5420,5423,5425,5427,5429,5432],{"class":78,"line":2203},[76,5421,5422],{"class":107},"      emit",[76,5424,688],{"class":93},[76,5426,5083],{"class":97},[76,5428,135],{"class":93},[76,5430,5431],{"class":117}," result",[76,5433,694],{"class":93},[76,5435,5436,5438,5440,5442,5444],{"class":78,"line":2208},[76,5437,5368],{"class":117},[76,5439,1334],{"class":93},[76,5441,856],{"class":546},[76,5443,502],{"class":121},[76,5445,5446],{"class":97}," ''\n",[76,5448,5450,5452,5454,5456,5458],{"class":78,"line":5449},39,[76,5451,5228],{"class":117},[76,5453,1334],{"class":93},[76,5455,856],{"class":546},[76,5457,502],{"class":121},[76,5459,5209],{"class":93},[76,5461,5463],{"class":78,"line":5462},40,[76,5464,5335],{"class":93},[76,5466,5468],{"class":78,"line":5467},41,[76,5469,174],{"emptyLinePlaceholder":173},[76,5471,5474,5477,5479,5481,5484,5486,5489],{"class":5472,"line":4938},[78,5473],"highlight",[76,5475,5476],{"class":82},"    return",[76,5478,5162],{"class":93},[76,5480,1795],{"class":82},[76,5482,5483],{"class":117}," slots",[76,5485,1334],{"class":93},[76,5487,5488],{"class":107},"default",[76,5490,5491],{"class":93},"?.({\n",[76,5493,5495,5497,5499,5501,5503,5505],{"class":5494,"line":4939},[78,5473],[76,5496,5368],{"class":546},[76,5498,122],{"class":93},[76,5500,5120],{"class":117},[76,5502,1334],{"class":93},[76,5504,856],{"class":546},[76,5506,5014],{"class":93},[76,5508,5510,5512,5514,5516,5518,5520],{"class":5509,"line":4940},[78,5473],[76,5511,5228],{"class":546},[76,5513,122],{"class":93},[76,5515,5140],{"class":117},[76,5517,1334],{"class":93},[76,5519,856],{"class":546},[76,5521,5014],{"class":93},[76,5523,5525,5528],{"class":5524,"line":4941},[78,5473],[76,5526,5527],{"class":117},"      onSearchQueryChange",[76,5529,5014],{"class":93},[76,5531,5533,5536],{"class":5532,"line":4942},[78,5473],[76,5534,5535],{"class":117},"      select",[76,5537,5014],{"class":93},[76,5539,5541],{"class":5540,"line":4943},[78,5473],[76,5542,5543],{"class":93},"    })\n",[76,5545,5547],{"class":78,"line":5546},48,[76,5548,5071],{"class":93},[76,5550,5552],{"class":78,"line":5551},49,[76,5553,5554],{"class":93},"})\n",[76,5556,5558],{"class":78,"line":5557},50,[76,5559,174],{"emptyLinePlaceholder":173},[76,5561,5563,5566,5569],{"class":78,"line":5562},51,[76,5564,5565],{"class":82},"export",[76,5567,5568],{"class":82}," default",[76,5570,5571],{"class":117}," AutoComplete\n",[22,5573,5574],{},"Here we're going to use the component to render an input that provides the search query, then render the filtered items as an unordered list.",[430,5576,5577,5808],{},[433,5578,5579],{"v-slot:code":72},[66,5580,5582],{"className":68,"code":5581,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport AutoComplete from './AutoComplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-2\">\n    \u003CAutoComplete v-slot=\"{ searchQuery, results, onSearchQueryChange }\" :items=\"items\">\n      \u003Cinput\n        class=\"bg-transparent p-2 border rounded\"\n        type=\"text\"\n        :value=\"searchQuery\"\n        @input=\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n      />\n      \u003Cul>\n        \u003Cli v-for=\"result in results\" :key=\"result\">\n          {{ result }}\n        \u003C/li>\n      \u003C/ul>\n    \u003C/AutoComplete>\n  \u003C/div>\n\u003C/template>\n",[37,5583,5584,5598,5610,5614,5655,5659,5663,5667,5681,5703,5708,5718,5728,5738,5748,5753,5758,5779,5784,5789,5794,5799,5804],{"__ignoreMap":72},[76,5585,5586,5588,5590,5592,5594,5596],{"class":78,"line":79},[76,5587,83],{"class":82},[76,5589,87],{"class":86},[76,5591,90],{"class":86},[76,5593,94],{"class":93},[76,5595,98],{"class":97},[76,5597,101],{"class":82},[76,5599,5600,5602,5605,5607],{"class":78,"line":104},[76,5601,458],{"class":82},[76,5603,5604],{"class":117}," AutoComplete ",[76,5606,483],{"class":82},[76,5608,5609],{"class":97}," './AutoComplete'\n",[76,5611,5612],{"class":78,"line":114},[76,5613,174],{"emptyLinePlaceholder":173},[76,5615,5616,5618,5621,5623,5625,5628,5630,5633,5635,5638,5640,5643,5645,5648,5650,5653],{"class":78,"line":144},[76,5617,495],{"class":82},[76,5619,5620],{"class":498}," items",[76,5622,502],{"class":121},[76,5624,505],{"class":93},[76,5626,5627],{"class":97},"'Vue.js'",[76,5629,135],{"class":93},[76,5631,5632],{"class":97}," 'React'",[76,5634,135],{"class":93},[76,5636,5637],{"class":97}," 'Angular'",[76,5639,135],{"class":93},[76,5641,5642],{"class":97}," 'Svelte'",[76,5644,135],{"class":93},[76,5646,5647],{"class":97}," 'Ember'",[76,5649,135],{"class":93},[76,5651,5652],{"class":97}," 'Meteor'",[76,5654,526],{"class":93},[76,5656,5657],{"class":78,"line":158},[76,5658,167],{"class":82},[76,5660,5661],{"class":78,"line":164},[76,5662,174],{"emptyLinePlaceholder":173},[76,5664,5665],{"class":78,"line":170},[76,5666,180],{"class":82},[76,5668,5669,5672,5674,5676,5679],{"class":78,"line":177},[76,5670,5671],{"class":82},"  \u003Cdiv",[76,5673,2510],{"class":86},[76,5675,94],{"class":93},[76,5677,5678],{"class":97},"\"p-2\"",[76,5680,101],{"class":82},[76,5682,5683,5686,5689,5691,5694,5696,5698,5701],{"class":78,"line":183},[76,5684,5685],{"class":82},"    \u003CAutoComplete",[76,5687,5688],{"class":86}," v-slot",[76,5690,94],{"class":93},[76,5692,5693],{"class":97},"\"{ searchQuery, results, onSearchQueryChange }\"",[76,5695,1437],{"class":86},[76,5697,94],{"class":93},[76,5699,5700],{"class":97},"\"items\"",[76,5702,101],{"class":82},[76,5704,5705],{"class":78,"line":189},[76,5706,5707],{"class":82},"      \u003Cinput\n",[76,5709,5710,5713,5715],{"class":78,"line":195},[76,5711,5712],{"class":86},"        class",[76,5714,94],{"class":93},[76,5716,5717],{"class":97},"\"bg-transparent p-2 border rounded\"\n",[76,5719,5720,5723,5725],{"class":78,"line":201},[76,5721,5722],{"class":86},"        type",[76,5724,94],{"class":93},[76,5726,5727],{"class":97},"\"text\"\n",[76,5729,5730,5733,5735],{"class":78,"line":233},[76,5731,5732],{"class":86},"        :value",[76,5734,94],{"class":93},[76,5736,5737],{"class":97},"\"searchQuery\"\n",[76,5739,5740,5743,5745],{"class":78,"line":263},[76,5741,5742],{"class":86},"        @input",[76,5744,94],{"class":93},[76,5746,5747],{"class":97},"\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n",[76,5749,5750],{"class":78,"line":269},[76,5751,5752],{"class":82},"      />\n",[76,5754,5755],{"class":78,"line":275},[76,5756,5757],{"class":82},"      \u003Cul>\n",[76,5759,5760,5763,5765,5767,5770,5772,5774,5777],{"class":78,"line":281},[76,5761,5762],{"class":82},"        \u003Cli",[76,5764,207],{"class":86},[76,5766,94],{"class":93},[76,5768,5769],{"class":97},"\"result in results\"",[76,5771,215],{"class":86},[76,5773,94],{"class":93},[76,5775,5776],{"class":97},"\"result\"",[76,5778,101],{"class":82},[76,5780,5781],{"class":78,"line":287},[76,5782,5783],{"class":117},"          {{ result }}\n",[76,5785,5786],{"class":78,"line":309},[76,5787,5788],{"class":82},"        \u003C/li>\n",[76,5790,5791],{"class":78,"line":329},[76,5792,5793],{"class":82},"      \u003C/ul>\n",[76,5795,5796],{"class":78,"line":364},[76,5797,5798],{"class":82},"    \u003C/AutoComplete>\n",[76,5800,5801],{"class":78,"line":370},[76,5802,5803],{"class":82},"  \u003C/div>\n",[76,5805,5806],{"class":78,"line":375},[76,5807,390],{"class":82},[433,5809,5810],{"v-slot:output":72},[5811,5812],"basic",{},[4928,5814,5816],{"id":5815},"advanced-example","Advanced example",[22,5818,5819],{},"Suppose we have a list of frameworks along with their corresponding logos, and our goal is to display them as a grid of cards. As the items in the list are objects, we'll need to provide a custom search function to the AutoComplete component that searches based on the framework's name.",[430,5821,5822,6275],{},[433,5823,5824],{"v-slot:code":72},[66,5825,5827],{"className":68,"code":5826,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport AutoComplete from './AutoComplete'\n\nconst items = [\n  { name: 'Vue.js', logo: '/blog-img/logos/vue.svg' },\n  { name: 'React', logo: '/blog-img/logos/react.svg' },\n  { name: 'Angular', logo: '/blog-img/logos/angular.svg' },\n  { name: 'Svelte', logo: '/blog-img/logos/svelte.svg' },\n  { name: 'Ember', logo: '/blog-img/logos/ember.svg' },\n  { name: 'Meteor', logo: '/blog-img/logos/meteor.svg' },\n]\n\nconst filterLibs = (searchQuery: string) => {\n  return items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()))\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-2\">\n    \u003CAutoComplete v-slot=\"{ searchQuery, results, onSearchQueryChange }\" :items=\"items\" :search-fn=\"filterLibs\">\n      \u003Cinput\n        class=\"bg-transparent p-2 border rounded\"\n        type=\"text\"\n        :value=\"searchQuery\"\n        @input=\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n      />\n      \u003Cdiv class=\"grid grid-cols-3 gap-4 p-4\">\n        \u003Cdiv v-for=\"result in results\" :key=\"result.name\" class=\"rounded shadow p-4\">\n          \u003Cimg :src=\"result.logo\" :alt=\"result.name\" class=\"w-24 h-24 mx-auto\" />\n          \u003Cp class=\"text-center\">{{ result.name }}\u003C/p>\n        \u003C/div>\n      \u003C/div>\n    \u003C/AutoComplete>\n  \u003C/div>\n\u003C/template>\n",[37,5828,5829,5843,5853,5857,5867,5890,5911,5932,5953,5974,5995,5999,6003,6026,6070,6074,6078,6082,6086,6098,6124,6128,6136,6144,6152,6160,6164,6178,6205,6234,6253,6258,6263,6267,6271],{"__ignoreMap":72},[76,5830,5831,5833,5835,5837,5839,5841],{"class":78,"line":79},[76,5832,83],{"class":82},[76,5834,87],{"class":86},[76,5836,90],{"class":86},[76,5838,94],{"class":93},[76,5840,98],{"class":97},[76,5842,101],{"class":82},[76,5844,5845,5847,5849,5851],{"class":78,"line":104},[76,5846,458],{"class":82},[76,5848,5604],{"class":117},[76,5850,483],{"class":82},[76,5852,5609],{"class":97},[76,5854,5855],{"class":78,"line":114},[76,5856,174],{"emptyLinePlaceholder":173},[76,5858,5859,5861,5863,5865],{"class":78,"line":144},[76,5860,495],{"class":82},[76,5862,5620],{"class":498},[76,5864,502],{"class":121},[76,5866,538],{"class":93},[76,5868,5869,5871,5873,5875,5878,5880,5883,5885,5888],{"class":78,"line":158},[76,5870,543],{"class":93},[76,5872,1066],{"class":546},[76,5874,122],{"class":93},[76,5876,5877],{"class":97}," 'Vue.js'",[76,5879,135],{"class":93},[76,5881,5882],{"class":546}," logo",[76,5884,122],{"class":93},[76,5886,5887],{"class":97}," '/blog-img/logos/vue.svg'",[76,5889,585],{"class":93},[76,5891,5892,5894,5896,5898,5900,5902,5904,5906,5909],{"class":78,"line":164},[76,5893,543],{"class":93},[76,5895,1066],{"class":546},[76,5897,122],{"class":93},[76,5899,5632],{"class":97},[76,5901,135],{"class":93},[76,5903,5882],{"class":546},[76,5905,122],{"class":93},[76,5907,5908],{"class":97}," '/blog-img/logos/react.svg'",[76,5910,585],{"class":93},[76,5912,5913,5915,5917,5919,5921,5923,5925,5927,5930],{"class":78,"line":170},[76,5914,543],{"class":93},[76,5916,1066],{"class":546},[76,5918,122],{"class":93},[76,5920,5637],{"class":97},[76,5922,135],{"class":93},[76,5924,5882],{"class":546},[76,5926,122],{"class":93},[76,5928,5929],{"class":97}," '/blog-img/logos/angular.svg'",[76,5931,585],{"class":93},[76,5933,5934,5936,5938,5940,5942,5944,5946,5948,5951],{"class":78,"line":177},[76,5935,543],{"class":93},[76,5937,1066],{"class":546},[76,5939,122],{"class":93},[76,5941,5642],{"class":97},[76,5943,135],{"class":93},[76,5945,5882],{"class":546},[76,5947,122],{"class":93},[76,5949,5950],{"class":97}," '/blog-img/logos/svelte.svg'",[76,5952,585],{"class":93},[76,5954,5955,5957,5959,5961,5963,5965,5967,5969,5972],{"class":78,"line":183},[76,5956,543],{"class":93},[76,5958,1066],{"class":546},[76,5960,122],{"class":93},[76,5962,5647],{"class":97},[76,5964,135],{"class":93},[76,5966,5882],{"class":546},[76,5968,122],{"class":93},[76,5970,5971],{"class":97}," '/blog-img/logos/ember.svg'",[76,5973,585],{"class":93},[76,5975,5976,5978,5980,5982,5984,5986,5988,5990,5993],{"class":78,"line":189},[76,5977,543],{"class":93},[76,5979,1066],{"class":546},[76,5981,122],{"class":93},[76,5983,5652],{"class":97},[76,5985,135],{"class":93},[76,5987,5882],{"class":546},[76,5989,122],{"class":93},[76,5991,5992],{"class":97}," '/blog-img/logos/meteor.svg'",[76,5994,585],{"class":93},[76,5996,5997],{"class":78,"line":195},[76,5998,526],{"class":93},[76,6000,6001],{"class":78,"line":201},[76,6002,174],{"emptyLinePlaceholder":173},[76,6004,6005,6007,6010,6012,6014,6016,6018,6020,6022,6024],{"class":78,"line":233},[76,6006,495],{"class":82},[76,6008,6009],{"class":107}," filterLibs",[76,6011,502],{"class":121},[76,6013,1625],{"class":93},[76,6015,5176],{"class":117},[76,6017,122],{"class":121},[76,6019,152],{"class":125},[76,6021,1968],{"class":93},[76,6023,1795],{"class":82},[76,6025,1207],{"class":93},[76,6027,6028,6031,6033,6035,6037,6039,6042,6044,6046,6048,6051,6053,6055,6057,6059,6061,6063,6065,6067],{"class":78,"line":263},[76,6029,6030],{"class":82},"  return",[76,6032,5620],{"class":117},[76,6034,1334],{"class":93},[76,6036,1337],{"class":107},[76,6038,688],{"class":93},[76,6040,6041],{"class":117},"item ",[76,6043,1345],{"class":82},[76,6045,971],{"class":117},[76,6047,1334],{"class":93},[76,6049,6050],{"class":546},"name",[76,6052,1334],{"class":93},[76,6054,1357],{"class":107},[76,6056,1360],{"class":93},[76,6058,1363],{"class":107},[76,6060,688],{"class":93},[76,6062,5176],{"class":117},[76,6064,1334],{"class":93},[76,6066,1357],{"class":107},[76,6068,6069],{"class":93},"()))\n",[76,6071,6072],{"class":78,"line":269},[76,6073,1260],{"class":93},[76,6075,6076],{"class":78,"line":275},[76,6077,167],{"class":82},[76,6079,6080],{"class":78,"line":281},[76,6081,174],{"emptyLinePlaceholder":173},[76,6083,6084],{"class":78,"line":287},[76,6085,180],{"class":82},[76,6087,6088,6090,6092,6094,6096],{"class":78,"line":309},[76,6089,5671],{"class":82},[76,6091,2510],{"class":86},[76,6093,94],{"class":93},[76,6095,5678],{"class":97},[76,6097,101],{"class":82},[76,6099,6100,6102,6104,6106,6108,6110,6112,6114,6117,6119,6122],{"class":78,"line":329},[76,6101,5685],{"class":82},[76,6103,5688],{"class":86},[76,6105,94],{"class":93},[76,6107,5693],{"class":97},[76,6109,1437],{"class":86},[76,6111,94],{"class":93},[76,6113,5700],{"class":97},[76,6115,6116],{"class":86}," :search-fn",[76,6118,94],{"class":93},[76,6120,6121],{"class":97},"\"filterLibs\"",[76,6123,101],{"class":82},[76,6125,6126],{"class":78,"line":364},[76,6127,5707],{"class":82},[76,6129,6130,6132,6134],{"class":78,"line":370},[76,6131,5712],{"class":86},[76,6133,94],{"class":93},[76,6135,5717],{"class":97},[76,6137,6138,6140,6142],{"class":78,"line":375},[76,6139,5722],{"class":86},[76,6141,94],{"class":93},[76,6143,5727],{"class":97},[76,6145,6146,6148,6150],{"class":78,"line":381},[76,6147,5732],{"class":86},[76,6149,94],{"class":93},[76,6151,5737],{"class":97},[76,6153,6154,6156,6158],{"class":78,"line":387},[76,6155,5742],{"class":86},[76,6157,94],{"class":93},[76,6159,5747],{"class":97},[76,6161,6162],{"class":78,"line":1481},[76,6163,5752],{"class":82},[76,6165,6166,6169,6171,6173,6176],{"class":78,"line":1486},[76,6167,6168],{"class":82},"      \u003Cdiv",[76,6170,2510],{"class":86},[76,6172,94],{"class":93},[76,6174,6175],{"class":97},"\"grid grid-cols-3 gap-4 p-4\"",[76,6177,101],{"class":82},[76,6179,6180,6183,6185,6187,6189,6191,6193,6196,6198,6200,6203],{"class":78,"line":1498},[76,6181,6182],{"class":82},"        \u003Cdiv",[76,6184,207],{"class":86},[76,6186,94],{"class":93},[76,6188,5769],{"class":97},[76,6190,215],{"class":86},[76,6192,94],{"class":93},[76,6194,6195],{"class":97},"\"result.name\"",[76,6197,2510],{"class":86},[76,6199,94],{"class":93},[76,6201,6202],{"class":97},"\"rounded shadow p-4\"",[76,6204,101],{"class":82},[76,6206,6207,6210,6213,6215,6218,6221,6223,6225,6227,6229,6232],{"class":78,"line":1510},[76,6208,6209],{"class":82},"          \u003Cimg",[76,6211,6212],{"class":86}," :src",[76,6214,94],{"class":93},[76,6216,6217],{"class":97},"\"result.logo\"",[76,6219,6220],{"class":86}," :alt",[76,6222,94],{"class":93},[76,6224,6195],{"class":97},[76,6226,2510],{"class":86},[76,6228,94],{"class":93},[76,6230,6231],{"class":97},"\"w-24 h-24 mx-auto\"",[76,6233,1088],{"class":82},[76,6235,6236,6239,6241,6243,6246,6248,6251],{"class":78,"line":1515},[76,6237,6238],{"class":82},"          \u003Cp",[76,6240,2510],{"class":86},[76,6242,94],{"class":93},[76,6244,6245],{"class":97},"\"text-center\"",[76,6247,254],{"class":82},[76,6249,6250],{"class":117},"{{ result.name }}",[76,6252,1507],{"class":82},[76,6254,6255],{"class":78,"line":1521},[76,6256,6257],{"class":82},"        \u003C/div>\n",[76,6259,6260],{"class":78,"line":2139},[76,6261,6262],{"class":82},"      \u003C/div>\n",[76,6264,6265],{"class":78,"line":2158},[76,6266,5798],{"class":82},[76,6268,6269],{"class":78,"line":2188},[76,6270,5803],{"class":82},[76,6272,6273],{"class":78,"line":2193},[76,6274,390],{"class":82},[433,6276,6277],{"v-slot:output":72},[6278,6279],"items-as-cards",{},[4928,6281,6283],{"id":6282},"selecting-an-item","Selecting an item",[22,6285,6286,6287,6289,6290,6292],{},"So far, both examples only search. The component can also tell its parent which item was picked. The slot receives a ",[37,6288,4922],{}," function: calling it emits a ",[37,6291,4922],{}," event with the chosen item, then clears the search query and resets the list of results.",[22,6294,6295],{},"Because the list is reset, the button that was clicked is removed from the page. The example therefore moves the focus back to the input, so that keyboard users keep their place.",[430,6297,6298,6677],{},[433,6299,6300],{"v-slot:code":72},[66,6301,6303],{"className":68,"code":6302,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport AutoComplete from './AutoComplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\nconst selected = ref('')\nconst input = ref\u003CHTMLInputElement>()\n\nconst onSelect = (item: string) => {\n  selected.value = item\n  // The clicked button is gone, so the input takes the focus back\n  input.value?.focus()\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-2\">\n    \u003CAutoComplete\n      v-slot=\"{ searchQuery, results, onSearchQueryChange, select }\"\n      :items=\"items\"\n      @select=\"onSelect\"\n    >\n      \u003Cinput\n        ref=\"input\"\n        class=\"bg-transparent p-2 border rounded\"\n        type=\"text\"\n        :value=\"searchQuery\"\n        @input=\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n      />\n      \u003Cul>\n        \u003Cli v-for=\"result in results\" :key=\"result\">\n          \u003Cbutton type=\"button\" @click=\"select(result)\">{{ result }}\u003C/button>\n        \u003C/li>\n      \u003C/ul>\n    \u003C/AutoComplete>\n    \u003Cp>Selected: {{ selected || 'nothing yet' }}\u003C/p>\n  \u003C/div>\n\u003C/template>\n",[37,6304,6305,6319,6333,6343,6347,6381,6398,6416,6420,6443,6457,6462,6479,6483,6487,6491,6495,6507,6512,6522,6532,6542,6547,6551,6561,6569,6577,6585,6593,6597,6601,6619,6647,6651,6655,6659,6669,6673],{"__ignoreMap":72},[76,6306,6307,6309,6311,6313,6315,6317],{"class":78,"line":79},[76,6308,83],{"class":82},[76,6310,87],{"class":86},[76,6312,90],{"class":86},[76,6314,94],{"class":93},[76,6316,98],{"class":97},[76,6318,101],{"class":82},[76,6320,6321,6323,6325,6327,6329,6331],{"class":78,"line":104},[76,6322,458],{"class":82},[76,6324,461],{"class":93},[76,6326,464],{"class":117},[76,6328,467],{"class":93},[76,6330,470],{"class":82},[76,6332,473],{"class":97},[76,6334,6335,6337,6339,6341],{"class":78,"line":114},[76,6336,458],{"class":82},[76,6338,5604],{"class":117},[76,6340,483],{"class":82},[76,6342,5609],{"class":97},[76,6344,6345],{"class":78,"line":144},[76,6346,174],{"emptyLinePlaceholder":173},[76,6348,6349,6351,6353,6355,6357,6359,6361,6363,6365,6367,6369,6371,6373,6375,6377,6379],{"class":78,"line":158},[76,6350,495],{"class":82},[76,6352,5620],{"class":498},[76,6354,502],{"class":121},[76,6356,505],{"class":93},[76,6358,5627],{"class":97},[76,6360,135],{"class":93},[76,6362,5632],{"class":97},[76,6364,135],{"class":93},[76,6366,5637],{"class":97},[76,6368,135],{"class":93},[76,6370,5642],{"class":97},[76,6372,135],{"class":93},[76,6374,5647],{"class":97},[76,6376,135],{"class":93},[76,6378,5652],{"class":97},[76,6380,526],{"class":93},[76,6382,6383,6385,6388,6390,6392,6394,6396],{"class":78,"line":164},[76,6384,495],{"class":82},[76,6386,6387],{"class":498}," selected",[76,6389,502],{"class":121},[76,6391,685],{"class":107},[76,6393,688],{"class":93},[76,6395,1307],{"class":97},[76,6397,694],{"class":93},[76,6399,6400,6402,6405,6407,6409,6411,6414],{"class":78,"line":170},[76,6401,495],{"class":82},[76,6403,6404],{"class":498}," input",[76,6406,502],{"class":121},[76,6408,685],{"class":107},[76,6410,129],{"class":93},[76,6412,6413],{"class":125},"HTMLInputElement",[76,6415,1937],{"class":93},[76,6417,6418],{"class":78,"line":177},[76,6419,174],{"emptyLinePlaceholder":173},[76,6421,6422,6424,6427,6429,6431,6433,6435,6437,6439,6441],{"class":78,"line":183},[76,6423,495],{"class":82},[76,6425,6426],{"class":107}," onSelect",[76,6428,502],{"class":121},[76,6430,1625],{"class":93},[76,6432,1454],{"class":117},[76,6434,122],{"class":121},[76,6436,152],{"class":125},[76,6438,1968],{"class":93},[76,6440,1795],{"class":82},[76,6442,1207],{"class":93},[76,6444,6445,6448,6450,6452,6454],{"class":78,"line":189},[76,6446,6447],{"class":117},"  selected",[76,6449,1334],{"class":93},[76,6451,856],{"class":546},[76,6453,502],{"class":121},[76,6455,6456],{"class":117}," item\n",[76,6458,6459],{"class":78,"line":195},[76,6460,6461],{"class":1284},"  // The clicked button is gone, so the input takes the focus back\n",[76,6463,6464,6467,6469,6471,6474,6477],{"class":78,"line":201},[76,6465,6466],{"class":117},"  input",[76,6468,1334],{"class":93},[76,6470,856],{"class":546},[76,6472,6473],{"class":93},"?.",[76,6475,6476],{"class":107},"focus",[76,6478,5385],{"class":93},[76,6480,6481],{"class":78,"line":233},[76,6482,1260],{"class":93},[76,6484,6485],{"class":78,"line":263},[76,6486,167],{"class":82},[76,6488,6489],{"class":78,"line":269},[76,6490,174],{"emptyLinePlaceholder":173},[76,6492,6493],{"class":78,"line":275},[76,6494,180],{"class":82},[76,6496,6497,6499,6501,6503,6505],{"class":78,"line":281},[76,6498,5671],{"class":82},[76,6500,2510],{"class":86},[76,6502,94],{"class":93},[76,6504,5678],{"class":97},[76,6506,101],{"class":82},[76,6508,6509],{"class":78,"line":287},[76,6510,6511],{"class":82},"    \u003CAutoComplete\n",[76,6513,6514,6517,6519],{"class":78,"line":309},[76,6515,6516],{"class":86},"      v-slot",[76,6518,94],{"class":93},[76,6520,6521],{"class":97},"\"{ searchQuery, results, onSearchQueryChange, select }\"\n",[76,6523,6524,6527,6529],{"class":78,"line":329},[76,6525,6526],{"class":86},"      :items",[76,6528,94],{"class":93},[76,6530,6531],{"class":97},"\"items\"\n",[76,6533,6534,6537,6539],{"class":78,"line":364},[76,6535,6536],{"class":86},"      @select",[76,6538,94],{"class":93},[76,6540,6541],{"class":97},"\"onSelect\"\n",[76,6543,6544],{"class":78,"line":370},[76,6545,6546],{"class":82},"    >\n",[76,6548,6549],{"class":78,"line":375},[76,6550,5707],{"class":82},[76,6552,6553,6556,6558],{"class":78,"line":381},[76,6554,6555],{"class":86},"        ref",[76,6557,94],{"class":93},[76,6559,6560],{"class":97},"\"input\"\n",[76,6562,6563,6565,6567],{"class":78,"line":387},[76,6564,5712],{"class":86},[76,6566,94],{"class":93},[76,6568,5717],{"class":97},[76,6570,6571,6573,6575],{"class":78,"line":1481},[76,6572,5722],{"class":86},[76,6574,94],{"class":93},[76,6576,5727],{"class":97},[76,6578,6579,6581,6583],{"class":78,"line":1486},[76,6580,5732],{"class":86},[76,6582,94],{"class":93},[76,6584,5737],{"class":97},[76,6586,6587,6589,6591],{"class":78,"line":1498},[76,6588,5742],{"class":86},[76,6590,94],{"class":93},[76,6592,5747],{"class":97},[76,6594,6595],{"class":78,"line":1510},[76,6596,5752],{"class":82},[76,6598,6599],{"class":78,"line":1515},[76,6600,5757],{"class":82},[76,6602,6603,6605,6607,6609,6611,6613,6615,6617],{"class":78,"line":1521},[76,6604,5762],{"class":82},[76,6606,207],{"class":86},[76,6608,94],{"class":93},[76,6610,5769],{"class":97},[76,6612,215],{"class":86},[76,6614,94],{"class":93},[76,6616,5776],{"class":97},[76,6618,101],{"class":82},[76,6620,6621,6624,6626,6628,6631,6634,6636,6639,6641,6644],{"class":78,"line":2139},[76,6622,6623],{"class":82},"          \u003Cbutton",[76,6625,1410],{"class":86},[76,6627,94],{"class":93},[76,6629,6630],{"class":97},"\"button\"",[76,6632,6633],{"class":86}," @click",[76,6635,94],{"class":93},[76,6637,6638],{"class":97},"\"select(result)\"",[76,6640,254],{"class":82},[76,6642,6643],{"class":117},"{{ result }}",[76,6645,6646],{"class":82},"\u003C/button>\n",[76,6648,6649],{"class":78,"line":2158},[76,6650,5788],{"class":82},[76,6652,6653],{"class":78,"line":2188},[76,6654,5793],{"class":82},[76,6656,6657],{"class":78,"line":2193},[76,6658,5798],{"class":82},[76,6660,6661,6664,6667],{"class":78,"line":2198},[76,6662,6663],{"class":82},"    \u003Cp>",[76,6665,6666],{"class":117},"Selected: {{ selected || 'nothing yet' }}",[76,6668,1507],{"class":82},[76,6670,6671],{"class":78,"line":2203},[76,6672,5803],{"class":82},[76,6674,6675],{"class":78,"line":2208},[76,6676,390],{"class":82},[433,6678,6679],{"v-slot:output":72},[6680,6681],"basic-select",{},[22,6683,6684],{},"The search state and filtering logic do not depend on the markup, so we can also put them in a composable. The component that calls it receives reactive values directly instead of through a slot.",[29,6686,6688],{"id":6687},"whats-a-composable-function","What's a composable function?",[22,6690,6691],{},"A composable is a function that uses Vue's Composition API to encapsulate reusable stateful logic. It can use reactivity, lifecycle hooks, and dependency injection.",[4928,6693,4931],{"id":6694},"basic-example-1",[22,6696,6697],{},"Let's start by creating a composable function that handles the logic of searching for a specific item in a list of items. The composable function accepts a list of items and, optionally, a search function. It returns the search query and the list of results, which updates whenever the query changes.",[66,6699,6702],{"className":4934,"code":6700,"filename":6701,"language":4944,"meta":72,"style":72},"import { computed, ref } from 'vue'\n\nexport default function useAutocomplete\u003CT = string>(items: T[], searchFn?: (query: string) => T[]) {\n  const searchQuery = ref('') // Represents the search query entered by the user\n  const results = computed\u003CT[]>(() => {\n    // Stores the search results based on the search query\n    if (searchQuery.value.length === 0) {\n      return []\n    }\n\n    return searchFn\n      ? searchFn(searchQuery.value)\n      : items.filter((item) => {\n          return String(item).toLowerCase().includes(searchQuery.value.toLowerCase())\n        })\n  })\n\n  return {\n    searchQuery,\n    results,\n  }\n}\n","useAutocomplete.ts",[37,6703,6704,6722,6726,6782,6801,6822,6827,6852,6859,6863,6867,6874,6891,6912,6947,6952,6957,6961,6967,6974,6981,6986],{"__ignoreMap":72},[76,6705,6706,6708,6710,6712,6714,6716,6718,6720],{"class":78,"line":79},[76,6707,458],{"class":82},[76,6709,461],{"class":93},[76,6711,1170],{"class":117},[76,6713,135],{"class":93},[76,6715,464],{"class":117},[76,6717,467],{"class":93},[76,6719,470],{"class":82},[76,6721,473],{"class":97},[76,6723,6724],{"class":78,"line":104},[76,6725,174],{"emptyLinePlaceholder":173},[76,6727,6728,6730,6732,6735,6738,6740,6742,6744,6746,6749,6751,6753,6755,6758,6761,6763,6765,6767,6769,6771,6773,6775,6777,6780],{"class":78,"line":114},[76,6729,5565],{"class":82},[76,6731,5568],{"class":82},[76,6733,6734],{"class":82}," function",[76,6736,6737],{"class":107}," useAutocomplete",[76,6739,129],{"class":93},[76,6741,891],{"class":125},[76,6743,502],{"class":121},[76,6745,152],{"class":125},[76,6747,6748],{"class":93},">(",[76,6750,1137],{"class":117},[76,6752,122],{"class":121},[76,6754,938],{"class":125},[76,6756,6757],{"class":93},"[],",[76,6759,6760],{"class":107}," searchFn",[76,6762,1760],{"class":121},[76,6764,1625],{"class":93},[76,6766,1368],{"class":117},[76,6768,122],{"class":121},[76,6770,152],{"class":125},[76,6772,1968],{"class":93},[76,6774,1795],{"class":82},[76,6776,938],{"class":125},[76,6778,6779],{"class":93},"[])",[76,6781,1207],{"class":93},[76,6783,6784,6787,6789,6791,6793,6795,6797,6799],{"class":78,"line":144},[76,6785,6786],{"class":82},"  const",[76,6788,5120],{"class":498},[76,6790,502],{"class":121},[76,6792,685],{"class":107},[76,6794,688],{"class":93},[76,6796,1307],{"class":97},[76,6798,1968],{"class":93},[76,6800,5133],{"class":1284},[76,6802,6803,6805,6807,6809,6811,6813,6815,6818,6820],{"class":78,"line":158},[76,6804,6786],{"class":82},[76,6806,5140],{"class":498},[76,6808,502],{"class":121},[76,6810,1170],{"class":107},[76,6812,129],{"class":93},[76,6814,891],{"class":125},[76,6816,6817],{"class":93},"[]>(()",[76,6819,1795],{"class":82},[76,6821,1207],{"class":93},[76,6823,6824],{"class":78,"line":164},[76,6825,6826],{"class":1284},"    // Stores the search results based on the search query\n",[76,6828,6829,6832,6834,6836,6838,6840,6842,6844,6846,6848,6850],{"class":78,"line":170},[76,6830,6831],{"class":82},"    if",[76,6833,1625],{"class":93},[76,6835,5176],{"class":117},[76,6837,1334],{"class":93},[76,6839,856],{"class":546},[76,6841,1334],{"class":93},[76,6843,5185],{"class":546},[76,6845,5188],{"class":121},[76,6847,5191],{"class":498},[76,6849,1968],{"class":93},[76,6851,1207],{"class":93},[76,6853,6854,6857],{"class":78,"line":177},[76,6855,6856],{"class":82},"      return",[76,6858,5209],{"class":93},[76,6860,6861],{"class":78,"line":183},[76,6862,5335],{"class":93},[76,6864,6865],{"class":78,"line":189},[76,6866,174],{"emptyLinePlaceholder":173},[76,6868,6869,6871],{"class":78,"line":195},[76,6870,5476],{"class":82},[76,6872,6873],{"class":117}," searchFn\n",[76,6875,6876,6879,6881,6883,6885,6887,6889],{"class":78,"line":201},[76,6877,6878],{"class":121},"      ?",[76,6880,6760],{"class":107},[76,6882,688],{"class":93},[76,6884,5176],{"class":117},[76,6886,1334],{"class":93},[76,6888,856],{"class":546},[76,6890,694],{"class":93},[76,6892,6893,6896,6898,6900,6902,6904,6906,6908,6910],{"class":78,"line":233},[76,6894,6895],{"class":121},"      :",[76,6897,5620],{"class":117},[76,6899,1334],{"class":93},[76,6901,1337],{"class":107},[76,6903,5282],{"class":93},[76,6905,1454],{"class":117},[76,6907,1968],{"class":93},[76,6909,1795],{"class":82},[76,6911,1207],{"class":93},[76,6913,6914,6917,6920,6922,6924,6927,6929,6931,6933,6935,6937,6939,6941,6943,6945],{"class":78,"line":263},[76,6915,6916],{"class":82},"          return",[76,6918,6919],{"class":107}," String",[76,6921,688],{"class":93},[76,6923,1454],{"class":117},[76,6925,6926],{"class":93},").",[76,6928,1357],{"class":107},[76,6930,1360],{"class":93},[76,6932,1363],{"class":107},[76,6934,688],{"class":93},[76,6936,5176],{"class":117},[76,6938,1334],{"class":93},[76,6940,856],{"class":546},[76,6942,1334],{"class":93},[76,6944,1357],{"class":107},[76,6946,5325],{"class":93},[76,6948,6949],{"class":78,"line":269},[76,6950,6951],{"class":93},"        })\n",[76,6953,6954],{"class":78,"line":275},[76,6955,6956],{"class":93},"  })\n",[76,6958,6959],{"class":78,"line":281},[76,6960,174],{"emptyLinePlaceholder":173},[76,6962,6963,6965],{"class":78,"line":287},[76,6964,6030],{"class":82},[76,6966,1207],{"class":93},[76,6968,6969,6972],{"class":78,"line":309},[76,6970,6971],{"class":117},"    searchQuery",[76,6973,5014],{"class":93},[76,6975,6976,6979],{"class":78,"line":329},[76,6977,6978],{"class":117},"    results",[76,6980,5014],{"class":93},[76,6982,6983],{"class":78,"line":364},[76,6984,6985],{"class":93},"  }\n",[76,6987,6988],{"class":78,"line":370},[76,6989,1260],{"class":93},[22,6991,6992],{},"Now, we can use the composable function to render an input that provides the search query, then render the filtered items as an unordered list.",[430,6994,6995,7194],{},[433,6996,6997],{"v-slot:code":72},[66,6998,7000],{"className":68,"code":6999,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport useAutocomplete from './useAutocomplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\n\nconst { searchQuery, results } = useAutocomplete(items)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-2\">\n    \u003Cinput v-model=\"searchQuery\" class=\"bg-transparent p-2 border rounded\" type=\"text\" />\n    \u003Cul>\n      \u003Cli v-for=\"result in results\" :key=\"result\">\n        {{ result }}\n      \u003C/li>\n    \u003C/ul>\n  \u003C/div>\n\u003C/template>\n",[37,7001,7002,7016,7028,7032,7066,7070,7095,7099,7103,7107,7119,7147,7152,7171,7176,7181,7186,7190],{"__ignoreMap":72},[76,7003,7004,7006,7008,7010,7012,7014],{"class":78,"line":79},[76,7005,83],{"class":82},[76,7007,87],{"class":86},[76,7009,90],{"class":86},[76,7011,94],{"class":93},[76,7013,98],{"class":97},[76,7015,101],{"class":82},[76,7017,7018,7020,7023,7025],{"class":78,"line":104},[76,7019,458],{"class":82},[76,7021,7022],{"class":117}," useAutocomplete ",[76,7024,483],{"class":82},[76,7026,7027],{"class":97}," './useAutocomplete'\n",[76,7029,7030],{"class":78,"line":114},[76,7031,174],{"emptyLinePlaceholder":173},[76,7033,7034,7036,7038,7040,7042,7044,7046,7048,7050,7052,7054,7056,7058,7060,7062,7064],{"class":78,"line":144},[76,7035,495],{"class":82},[76,7037,5620],{"class":498},[76,7039,502],{"class":121},[76,7041,505],{"class":93},[76,7043,5627],{"class":97},[76,7045,135],{"class":93},[76,7047,5632],{"class":97},[76,7049,135],{"class":93},[76,7051,5637],{"class":97},[76,7053,135],{"class":93},[76,7055,5642],{"class":97},[76,7057,135],{"class":93},[76,7059,5647],{"class":97},[76,7061,135],{"class":93},[76,7063,5652],{"class":97},[76,7065,526],{"class":93},[76,7067,7068],{"class":78,"line":158},[76,7069,174],{"emptyLinePlaceholder":173},[76,7071,7072,7074,7076,7078,7080,7082,7085,7087,7089,7091,7093],{"class":78,"line":164},[76,7073,495],{"class":82},[76,7075,461],{"class":93},[76,7077,5120],{"class":498},[76,7079,135],{"class":93},[76,7081,5140],{"class":498},[76,7083,7084],{"class":93}," }",[76,7086,502],{"class":121},[76,7088,6737],{"class":107},[76,7090,688],{"class":93},[76,7092,1137],{"class":117},[76,7094,694],{"class":93},[76,7096,7097],{"class":78,"line":170},[76,7098,167],{"class":82},[76,7100,7101],{"class":78,"line":177},[76,7102,174],{"emptyLinePlaceholder":173},[76,7104,7105],{"class":78,"line":183},[76,7106,180],{"class":82},[76,7108,7109,7111,7113,7115,7117],{"class":78,"line":189},[76,7110,5671],{"class":82},[76,7112,2510],{"class":86},[76,7114,94],{"class":93},[76,7116,5678],{"class":97},[76,7118,101],{"class":82},[76,7120,7121,7124,7126,7128,7131,7133,7135,7138,7140,7142,7145],{"class":78,"line":195},[76,7122,7123],{"class":82},"    \u003Cinput",[76,7125,714],{"class":86},[76,7127,94],{"class":93},[76,7129,7130],{"class":97},"\"searchQuery\"",[76,7132,2510],{"class":86},[76,7134,94],{"class":93},[76,7136,7137],{"class":97},"\"bg-transparent p-2 border rounded\"",[76,7139,1410],{"class":86},[76,7141,94],{"class":93},[76,7143,7144],{"class":97},"\"text\"",[76,7146,1088],{"class":82},[76,7148,7149],{"class":78,"line":201},[76,7150,7151],{"class":82},"    \u003Cul>\n",[76,7153,7154,7157,7159,7161,7163,7165,7167,7169],{"class":78,"line":233},[76,7155,7156],{"class":82},"      \u003Cli",[76,7158,207],{"class":86},[76,7160,94],{"class":93},[76,7162,5769],{"class":97},[76,7164,215],{"class":86},[76,7166,94],{"class":93},[76,7168,5776],{"class":97},[76,7170,101],{"class":82},[76,7172,7173],{"class":78,"line":263},[76,7174,7175],{"class":117},"        {{ result }}\n",[76,7177,7178],{"class":78,"line":269},[76,7179,7180],{"class":82},"      \u003C/li>\n",[76,7182,7183],{"class":78,"line":275},[76,7184,7185],{"class":82},"    \u003C/ul>\n",[76,7187,7188],{"class":78,"line":281},[76,7189,5803],{"class":82},[76,7191,7192],{"class":78,"line":287},[76,7193,390],{"class":82},[433,7195,7196],{"v-slot:output":72},[7197,7198],"basic-composable",{},[22,7200,7201,7202,2581,7204,7207,7208,7211,7212,1334],{},"For this example, the composable removes the component wrapper and slot bindings. The caller binds ",[37,7203,5176],{},[37,7205,7206],{},"v-model"," and renders ",[37,7209,7210],{},"results"," directly. Selection also belongs to the caller: its click handler can store the chosen item and clear ",[37,7213,5176],{},[4928,7215,5816],{"id":7216},"advanced-example-1",[22,7218,7219],{},"Let's now pass a search function to the composable and render the results as a grid of cards. The search function is used to filter the list of items based on the search query.",[430,7221,7222,7637],{},[433,7223,7224],{"v-slot:code":72},[66,7225,7227],{"className":68,"code":7226,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport useAutocomplete from './useAutocomplete'\n\nconst items = [\n  { name: 'Vue.js', logo: '/blog-img/logos/vue.svg' },\n  { name: 'React', logo: '/blog-img/logos/react.svg' },\n  { name: 'Angular', logo: '/blog-img/logos/angular.svg' },\n  { name: 'Svelte', logo: '/blog-img/logos/svelte.svg' },\n  { name: 'Ember', logo: '/blog-img/logos/ember.svg' },\n  { name: 'Meteor', logo: '/blog-img/logos/meteor.svg' },\n]\n\nconst filterLibs = (searchQuery: string) => {\n  return items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()))\n}\n\nconst { searchQuery, results } = useAutocomplete(items, filterLibs)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-2\">\n    \u003Cinput v-model=\"searchQuery\" class=\"bg-transparent p-2 border rounded\" type=\"text\" />\n    \u003Cdiv class=\"grid grid-cols-3 gap-4 p-4\">\n      \u003Cdiv v-for=\"result in results\" :key=\"result.name\" class=\"rounded shadow p-4\">\n        \u003Cimg :src=\"result.logo\" :alt=\"result.name\" class=\"w-24 h-24 mx-auto\" />\n        \u003Cp class=\"text-center\">{{ result.name }}\u003C/p>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[37,7228,7229,7243,7253,7257,7267,7287,7307,7327,7347,7367,7387,7391,7395,7417,7457,7461,7465,7493,7497,7501,7505,7517,7541,7554,7578,7603,7620,7624,7629,7633],{"__ignoreMap":72},[76,7230,7231,7233,7235,7237,7239,7241],{"class":78,"line":79},[76,7232,83],{"class":82},[76,7234,87],{"class":86},[76,7236,90],{"class":86},[76,7238,94],{"class":93},[76,7240,98],{"class":97},[76,7242,101],{"class":82},[76,7244,7245,7247,7249,7251],{"class":78,"line":104},[76,7246,458],{"class":82},[76,7248,7022],{"class":117},[76,7250,483],{"class":82},[76,7252,7027],{"class":97},[76,7254,7255],{"class":78,"line":114},[76,7256,174],{"emptyLinePlaceholder":173},[76,7258,7259,7261,7263,7265],{"class":78,"line":144},[76,7260,495],{"class":82},[76,7262,5620],{"class":498},[76,7264,502],{"class":121},[76,7266,538],{"class":93},[76,7268,7269,7271,7273,7275,7277,7279,7281,7283,7285],{"class":78,"line":158},[76,7270,543],{"class":93},[76,7272,1066],{"class":546},[76,7274,122],{"class":93},[76,7276,5877],{"class":97},[76,7278,135],{"class":93},[76,7280,5882],{"class":546},[76,7282,122],{"class":93},[76,7284,5887],{"class":97},[76,7286,585],{"class":93},[76,7288,7289,7291,7293,7295,7297,7299,7301,7303,7305],{"class":78,"line":164},[76,7290,543],{"class":93},[76,7292,1066],{"class":546},[76,7294,122],{"class":93},[76,7296,5632],{"class":97},[76,7298,135],{"class":93},[76,7300,5882],{"class":546},[76,7302,122],{"class":93},[76,7304,5908],{"class":97},[76,7306,585],{"class":93},[76,7308,7309,7311,7313,7315,7317,7319,7321,7323,7325],{"class":78,"line":170},[76,7310,543],{"class":93},[76,7312,1066],{"class":546},[76,7314,122],{"class":93},[76,7316,5637],{"class":97},[76,7318,135],{"class":93},[76,7320,5882],{"class":546},[76,7322,122],{"class":93},[76,7324,5929],{"class":97},[76,7326,585],{"class":93},[76,7328,7329,7331,7333,7335,7337,7339,7341,7343,7345],{"class":78,"line":177},[76,7330,543],{"class":93},[76,7332,1066],{"class":546},[76,7334,122],{"class":93},[76,7336,5642],{"class":97},[76,7338,135],{"class":93},[76,7340,5882],{"class":546},[76,7342,122],{"class":93},[76,7344,5950],{"class":97},[76,7346,585],{"class":93},[76,7348,7349,7351,7353,7355,7357,7359,7361,7363,7365],{"class":78,"line":183},[76,7350,543],{"class":93},[76,7352,1066],{"class":546},[76,7354,122],{"class":93},[76,7356,5647],{"class":97},[76,7358,135],{"class":93},[76,7360,5882],{"class":546},[76,7362,122],{"class":93},[76,7364,5971],{"class":97},[76,7366,585],{"class":93},[76,7368,7369,7371,7373,7375,7377,7379,7381,7383,7385],{"class":78,"line":189},[76,7370,543],{"class":93},[76,7372,1066],{"class":546},[76,7374,122],{"class":93},[76,7376,5652],{"class":97},[76,7378,135],{"class":93},[76,7380,5882],{"class":546},[76,7382,122],{"class":93},[76,7384,5992],{"class":97},[76,7386,585],{"class":93},[76,7388,7389],{"class":78,"line":195},[76,7390,526],{"class":93},[76,7392,7393],{"class":78,"line":201},[76,7394,174],{"emptyLinePlaceholder":173},[76,7396,7397,7399,7401,7403,7405,7407,7409,7411,7413,7415],{"class":78,"line":233},[76,7398,495],{"class":82},[76,7400,6009],{"class":107},[76,7402,502],{"class":121},[76,7404,1625],{"class":93},[76,7406,5176],{"class":117},[76,7408,122],{"class":121},[76,7410,152],{"class":125},[76,7412,1968],{"class":93},[76,7414,1795],{"class":82},[76,7416,1207],{"class":93},[76,7418,7419,7421,7423,7425,7427,7429,7431,7433,7435,7437,7439,7441,7443,7445,7447,7449,7451,7453,7455],{"class":78,"line":263},[76,7420,6030],{"class":82},[76,7422,5620],{"class":117},[76,7424,1334],{"class":93},[76,7426,1337],{"class":107},[76,7428,688],{"class":93},[76,7430,6041],{"class":117},[76,7432,1345],{"class":82},[76,7434,971],{"class":117},[76,7436,1334],{"class":93},[76,7438,6050],{"class":546},[76,7440,1334],{"class":93},[76,7442,1357],{"class":107},[76,7444,1360],{"class":93},[76,7446,1363],{"class":107},[76,7448,688],{"class":93},[76,7450,5176],{"class":117},[76,7452,1334],{"class":93},[76,7454,1357],{"class":107},[76,7456,6069],{"class":93},[76,7458,7459],{"class":78,"line":269},[76,7460,1260],{"class":93},[76,7462,7463],{"class":78,"line":275},[76,7464,174],{"emptyLinePlaceholder":173},[76,7466,7467,7469,7471,7473,7475,7477,7479,7481,7483,7485,7487,7489,7491],{"class":78,"line":281},[76,7468,495],{"class":82},[76,7470,461],{"class":93},[76,7472,5120],{"class":498},[76,7474,135],{"class":93},[76,7476,5140],{"class":498},[76,7478,7084],{"class":93},[76,7480,502],{"class":121},[76,7482,6737],{"class":107},[76,7484,688],{"class":93},[76,7486,1137],{"class":117},[76,7488,135],{"class":93},[76,7490,6009],{"class":117},[76,7492,694],{"class":93},[76,7494,7495],{"class":78,"line":287},[76,7496,167],{"class":82},[76,7498,7499],{"class":78,"line":309},[76,7500,174],{"emptyLinePlaceholder":173},[76,7502,7503],{"class":78,"line":329},[76,7504,180],{"class":82},[76,7506,7507,7509,7511,7513,7515],{"class":78,"line":364},[76,7508,5671],{"class":82},[76,7510,2510],{"class":86},[76,7512,94],{"class":93},[76,7514,5678],{"class":97},[76,7516,101],{"class":82},[76,7518,7519,7521,7523,7525,7527,7529,7531,7533,7535,7537,7539],{"class":78,"line":370},[76,7520,7123],{"class":82},[76,7522,714],{"class":86},[76,7524,94],{"class":93},[76,7526,7130],{"class":97},[76,7528,2510],{"class":86},[76,7530,94],{"class":93},[76,7532,7137],{"class":97},[76,7534,1410],{"class":86},[76,7536,94],{"class":93},[76,7538,7144],{"class":97},[76,7540,1088],{"class":82},[76,7542,7543,7546,7548,7550,7552],{"class":78,"line":375},[76,7544,7545],{"class":82},"    \u003Cdiv",[76,7547,2510],{"class":86},[76,7549,94],{"class":93},[76,7551,6175],{"class":97},[76,7553,101],{"class":82},[76,7555,7556,7558,7560,7562,7564,7566,7568,7570,7572,7574,7576],{"class":78,"line":381},[76,7557,6168],{"class":82},[76,7559,207],{"class":86},[76,7561,94],{"class":93},[76,7563,5769],{"class":97},[76,7565,215],{"class":86},[76,7567,94],{"class":93},[76,7569,6195],{"class":97},[76,7571,2510],{"class":86},[76,7573,94],{"class":93},[76,7575,6202],{"class":97},[76,7577,101],{"class":82},[76,7579,7580,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601],{"class":78,"line":387},[76,7581,7582],{"class":82},"        \u003Cimg",[76,7584,6212],{"class":86},[76,7586,94],{"class":93},[76,7588,6217],{"class":97},[76,7590,6220],{"class":86},[76,7592,94],{"class":93},[76,7594,6195],{"class":97},[76,7596,2510],{"class":86},[76,7598,94],{"class":93},[76,7600,6231],{"class":97},[76,7602,1088],{"class":82},[76,7604,7605,7608,7610,7612,7614,7616,7618],{"class":78,"line":1481},[76,7606,7607],{"class":82},"        \u003Cp",[76,7609,2510],{"class":86},[76,7611,94],{"class":93},[76,7613,6245],{"class":97},[76,7615,254],{"class":82},[76,7617,6250],{"class":117},[76,7619,1507],{"class":82},[76,7621,7622],{"class":78,"line":1486},[76,7623,6262],{"class":82},[76,7625,7626],{"class":78,"line":1498},[76,7627,7628],{"class":82},"    \u003C/div>\n",[76,7630,7631],{"class":78,"line":1510},[76,7632,5803],{"class":82},[76,7634,7635],{"class":78,"line":1515},[76,7636,390],{"class":82},[433,7638,7639],{"v-slot:output":72},[7640,7641],"items-as-cards-composable",{},[29,7643,2611],{"id":2610},[22,7645,7646],{},"Both versions filter the same items and leave the markup to the component that uses them. The renderless version provides state and actions through a slot and reports selection with an event. The composable returns the search state directly; the caller handles selection and clearing the query.",[2625,7648,7649],{},"html pre.shiki code .sZ9Zp, html code.shiki .sZ9Zp{--shiki-light:#994920;--shiki-default:#994920;--shiki-dark:#ECA457}html pre.shiki code .sXnUm, html code.shiki .sXnUm{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#96918C}html pre.shiki code .sBiod, html code.shiki .sBiod{--shiki-light:#322C28;--shiki-default:#322C28;--shiki-dark:#DBD7D0}html pre.shiki code .sgVH1, html code.shiki .sgVH1{--shiki-light:#3A6830;--shiki-default:#3A6830;--shiki-dark:#A5CF93}html pre.shiki code .sJ-0L, html code.shiki .sJ-0L{--shiki-light:#2D54A0;--shiki-default:#2D54A0;--shiki-dark:#93BDF5}html pre.shiki code .sZ7qJ, html code.shiki .sZ7qJ{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#A39E98}html pre.shiki code .sUqqj, html code.shiki .sUqqj{--shiki-light:#4A3170;--shiki-default:#4A3170;--shiki-dark:#D9BDF0}html pre.shiki code .snYWn, html code.shiki .snYWn{--shiki-light:#624727;--shiki-default:#624727;--shiki-dark:#E2C69F}html pre.shiki code .s5c__, html code.shiki .s5c__{--shiki-light:#736D67;--shiki-light-font-style:italic;--shiki-default:#736D67;--shiki-default-font-style:italic;--shiki-dark:#979189;--shiki-dark-font-style:italic}html pre.shiki code .sHXsw, html code.shiki .sHXsw{--shiki-light:#006268;--shiki-default:#006268;--shiki-dark:#86CFD2}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 .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 pre.shiki code .sSzyk, html code.shiki .sSzyk{--shiki-light:#5E4784;--shiki-default:#5E4784;--shiki-dark:#CFB0EA}",{"title":72,"searchDepth":104,"depth":104,"links":7651},[7652,7653,7654,7655,7660,7664],{"id":31,"depth":104,"text":32},{"id":4884,"depth":104,"text":4885},{"id":4891,"depth":104,"text":4892},{"id":4909,"depth":104,"text":4910,"children":7656},[7657,7658,7659],{"id":4930,"depth":114,"text":4931},{"id":5815,"depth":114,"text":5816},{"id":6282,"depth":114,"text":6283},{"id":6687,"depth":104,"text":6688,"children":7661},[7662,7663],{"id":6694,"depth":114,"text":4931},{"id":7216,"depth":114,"text":5816},{"id":2610,"depth":104,"text":2611},"2023-06-04","This article explains the concept of renderless components and how to evolve them into composable functions using the Vue.js Composition API.",{"head":7668},[7669,7671,7674,7676,7678,7680,7682,7685,7687,7689],{"meta":7670},{"name":2643,"content":4864},{"meta":7672},{"name":2646,"content":7673},"Vue.js, Renderless Component",{"meta":7675},{"name":2650,"content":2651},{"meta":7677},{"name":2654,"content":7665},{"meta":7679},{"name":2657,"content":2658},{"meta":7681},{"name":2661,"content":2662},{"meta":7683},{"name":2665,"content":7684},"vue-renderless-component",{"meta":7686},{"name":2669,"content":4874},{"meta":7688},{"name":2672,"content":7673},{"meta":7690},{"name":2676,"content":4864},"/blog/from-renderless-component-to-composable-function",{"title":4864,"description":7666},"blog/from-renderless-component-to-composable-function/index",[2681,7695,7696,7697,7698,7699],"Renderless Component","Composable function","Composition API","Vue 3","Reusability","e2rMaeTOTEGEUGqbSptxK0t-aFah9mDfF76bX9GrqkQ",1792326994133]