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