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