[{"data":1,"prerenderedAt":5717},["ShallowReactive",2],{"blog-slugs":3,"blog-index-ar":8},{"en":4,"ar":7},[5,6],"dynamic-generic-slots","from-renderless-component-to-composable-function",[5,6],[9,2808],{"id":10,"title":11,"body":12,"date":2754,"description":2755,"extension":2756,"img":2757,"meta":2758,"navigation":173,"path":2796,"seo":2797,"stem":2798,"tags":2799,"__hash__":2806,"lang":2807},"blogAr/ar/blog/dynamic-generic-slots/index.md","Vue.js - المنافذ الديناميكية والعامة",{"type":13,"value":14,"toc":2746},"minimark",[15,19,26,29,33,45,48,52,55,58,65,391,418,428,847,850,865,869,882,892,1120,1130,1139,1528,1545,1557,1561,1564,1645,1671,1677,2213,2237,2250,2551,2575,2593,2607,2610,2622,2626,2742],[16,17,11],"h1",{"id":18},"vuejs-المنافذ-الديناميكية-والعامة",[20,21,22],"tag-renderer",{},[23,24,25],"p",{},"Vue.js, Slots, Dynamic slots, Generic components, defineSlots, TypeScript, Vue 3.3",[27,28],"publish-date",{},[30,31,32],"h2",{"id":32},"مقدمة",[23,34,35,36,40,41,44],{},"نتناول في هذه المقالة المنافذ الديناميكية والعامة في Vue.js، بصيغة ",[37,38,39],"code",{},"\u003Cscript setup>"," وماكرو ",[37,42,43],{},"defineSlots"," الذي جاء به الإصدار 3.3. باجتماعهما نبني مكوّنًا يخصّصه المطوّرون كما يشاؤون، ومحرّرهم يخبرهم عند كل منفذ بما بين أيديهم. وهذا يجعل المكوّن أسهل في إعادة الاستعمال أيضًا.",[23,46,47],{},"سنمرّ بثلاثة مكوّنات صغيرة: جدول يصيّر منفذًا لكل عمود، ثم قائمة عامة يعرف منفذها نوع عناصرها، ثم جدول يجمع الأمرين.",[30,49,51],{"id":50},"المنافذ-الديناميكية","المنافذ الديناميكية",[23,53,54],{},"المنافذ الديناميكية منافذ ذات نطاق بأسماء ديناميكية: يُحسب اسم المنفذ أثناء تصيير المكوّن، ولا يُكتب في القالب سلفًا.",[23,56,57],{},"وللأمر وجهان: مكوّن يصيّر منافذ بأسماء محسوبة، ومكوّن أب يملأ منفذًا يحسب هو اسمه.",[23,59,60,61,64],{},"نبدأ بالوجه الأول. يستقبل ",[37,62,63],{},"BasicTable"," صفوفًا وقائمة أعمدة، ويحيط كل خلية بمنفذ يحمل اسم عمودها:",[66,67,73],"pre",{"className":68,"code":69,"filename":70,"language":71,"meta":72,"style":72},"language-vue shiki shiki-themes site-light site-light site-dark","\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n rows: Record\u003Cstring, unknown>[]\n columns: string[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth v-for=\"column in columns\" :key=\"column\" scope=\"col\">\n \u003Cslot :name=\"`header-${column}`\" :column=\"column\">{{ column }}\u003C/slot>\n \u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"(row, index) in rows\" :key=\"index\">\n \u003Ctd v-for=\"column in columns\" :key=\"column\">\n \u003Cslot :name=\"`cell-${column}`\" :value=\"row[column]\" :row=\"row\">{{ row[column] }}\u003C/slot>\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n","BasicTable.vue","vue","",[37,74,75,102,112,142,156,162,168,175,181,187,193,199,231,261,267,273,279,285,307,327,362,368,373,379,385],{"__ignoreMap":72},[76,77,80,84,88,91,95,99],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sZ9Zp","\u003Cscript",[76,85,87],{"class":86},"sSzyk"," setup",[76,89,90],{"class":86}," lang",[76,92,94],{"class":93},"sXnUm","=",[76,96,98],{"class":97},"sgVH1","\"ts\"",[76,100,101],{"class":82},">\n",[76,103,105,109],{"class":78,"line":104},2,[76,106,108],{"class":107},"sUqqj","defineProps",[76,110,111],{"class":93},"\u003C{\n",[76,113,115,119,123,127,130,133,136,139],{"class":78,"line":114},3,[76,116,118],{"class":117},"sBiod"," rows",[76,120,122],{"class":121},"sZ7qJ",":",[76,124,126],{"class":125},"sHXsw"," Record",[76,128,129],{"class":93},"\u003C",[76,131,132],{"class":125},"string",[76,134,135],{"class":93},",",[76,137,138],{"class":125}," unknown",[76,140,141],{"class":93},">[]\n",[76,143,145,148,150,153],{"class":78,"line":144},4,[76,146,147],{"class":117}," columns",[76,149,122],{"class":121},[76,151,152],{"class":125}," string",[76,154,155],{"class":93},"[]\n",[76,157,159],{"class":78,"line":158},5,[76,160,161],{"class":93},"}>()\n",[76,163,165],{"class":78,"line":164},6,[76,166,167],{"class":82},"\u003C/script>\n",[76,169,171],{"class":78,"line":170},7,[76,172,174],{"emptyLinePlaceholder":173},true,"\n",[76,176,178],{"class":78,"line":177},8,[76,179,180],{"class":82},"\u003Ctemplate>\n",[76,182,184],{"class":78,"line":183},9,[76,185,186],{"class":82}," \u003Ctable>\n",[76,188,190],{"class":78,"line":189},10,[76,191,192],{"class":82}," \u003Cthead>\n",[76,194,196],{"class":78,"line":195},11,[76,197,198],{"class":82}," \u003Ctr>\n",[76,200,202,205,208,210,213,216,218,221,224,226,229],{"class":78,"line":201},12,[76,203,204],{"class":82}," \u003Cth",[76,206,207],{"class":86}," v-for",[76,209,94],{"class":93},[76,211,212],{"class":97},"\"column in columns\"",[76,214,215],{"class":86}," :key",[76,217,94],{"class":93},[76,219,220],{"class":97},"\"column\"",[76,222,223],{"class":86}," scope",[76,225,94],{"class":93},[76,227,228],{"class":97},"\"col\"",[76,230,101],{"class":82},[76,232,234,237,240,242,245,248,250,252,255,258],{"class":78,"line":233},13,[76,235,236],{"class":82}," \u003Cslot",[76,238,239],{"class":86}," :name",[76,241,94],{"class":93},[76,243,244],{"class":97},"\"`header-${column}`\"",[76,246,247],{"class":86}," :column",[76,249,94],{"class":93},[76,251,220],{"class":97},[76,253,254],{"class":82},">",[76,256,257],{"class":117},"{{ column }}",[76,259,260],{"class":82},"\u003C/slot>\n",[76,262,264],{"class":78,"line":263},14,[76,265,266],{"class":82}," \u003C/th>\n",[76,268,270],{"class":78,"line":269},15,[76,271,272],{"class":82}," \u003C/tr>\n",[76,274,276],{"class":78,"line":275},16,[76,277,278],{"class":82}," \u003C/thead>\n",[76,280,282],{"class":78,"line":281},17,[76,283,284],{"class":82}," \u003Ctbody>\n",[76,286,288,291,293,295,298,300,302,305],{"class":78,"line":287},18,[76,289,290],{"class":82}," \u003Ctr",[76,292,207],{"class":86},[76,294,94],{"class":93},[76,296,297],{"class":97},"\"(row, index) in rows\"",[76,299,215],{"class":86},[76,301,94],{"class":93},[76,303,304],{"class":97},"\"index\"",[76,306,101],{"class":82},[76,308,310,313,315,317,319,321,323,325],{"class":78,"line":309},19,[76,311,312],{"class":82}," \u003Ctd",[76,314,207],{"class":86},[76,316,94],{"class":93},[76,318,212],{"class":97},[76,320,215],{"class":86},[76,322,94],{"class":93},[76,324,220],{"class":97},[76,326,101],{"class":82},[76,328,330,332,334,336,339,342,344,347,350,352,355,357,360],{"class":78,"line":329},20,[76,331,236],{"class":82},[76,333,239],{"class":86},[76,335,94],{"class":93},[76,337,338],{"class":97},"\"`cell-${column}`\"",[76,340,341],{"class":86}," :value",[76,343,94],{"class":93},[76,345,346],{"class":97},"\"row[column]\"",[76,348,349],{"class":86}," :row",[76,351,94],{"class":93},[76,353,354],{"class":97},"\"row\"",[76,356,254],{"class":82},[76,358,359],{"class":117},"{{ row[column] }}",[76,361,260],{"class":82},[76,363,365],{"class":78,"line":364},21,[76,366,367],{"class":82}," \u003C/td>\n",[76,369,371],{"class":78,"line":370},22,[76,372,272],{"class":82},[76,374,376],{"class":78,"line":375},23,[76,377,378],{"class":82}," \u003C/tbody>\n",[76,380,382],{"class":78,"line":381},24,[76,383,384],{"class":82}," \u003C/table>\n",[76,386,388],{"class":78,"line":387},25,[76,389,390],{"class":82},"\u003C/template>\n",[23,392,393,394,397,398,397,401,397,404,407,408,397,411,397,414,417],{},"إذا كانت الأعمدة ",[37,395,396],{},"number"," و ",[37,399,400],{},"customer",[37,402,403],{},"amount",[37,405,406],{},"status","، وفّر الجدول ثمانية منافذ: ",[37,409,410],{},"header-number",[37,412,413],{},"cell-number",[37,415,416],{},"header-customer"," وهكذا. ولكل منفذ محتوى افتراضي، فلا يملأ المكوّن الأب إلا المنافذ التي يريد تغييرها.",[23,419,420,421,424,425,122],{},"أما الوجه الثاني فعند المكوّن الأب. يُكتب اسم المنفذ وسيطًا ديناميكيًا بين قوسين مربّعين بعد ",[37,422,423],{},"v-slot:"," أو اختصاره ",[37,426,427],{},"#",[429,430,431,842],"demo",{},[432,433,434],"template",{"v-slot:code":72},[66,435,437],{"className":68,"code":436,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport BasicTable from './BasicTable.vue'\n\nconst columns = ['number', 'customer', 'amount', 'status']\nconst invoices = [\n { number: 'INV-1042', customer: 'Northwind Traders', amount: 1240, status: 'paid' },\n { number: 'INV-1043', customer: 'Blue Harbor', amount: 860.5, status: 'issued' },\n { number: 'INV-1044', customer: 'Atlas Studio', amount: 2310, status: 'draft' },\n]\n\nconst highlighted = ref('customer')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cselect v-model=\"highlighted\">\n \u003Coption v-for=\"column in columns\" :key=\"column\">{{ column }}\u003C/option>\n \u003C/select>\n\n \u003CBasicTable :rows=\"invoices\" :columns=\"columns\">\n \u003Ctemplate #[`cell-${highlighted}`]=\"{ value }\">\n \u003Cmark>{{ value }}\u003C/mark>\n \u003C/template>\n \u003C/BasicTable>\n\u003C/template>\n",[37,438,439,453,473,486,490,526,538,585,625,665,669,673,694,698,702,706,721,745,750,754,777,817,828,833,838],{"__ignoreMap":72},[76,440,441,443,445,447,449,451],{"class":78,"line":79},[76,442,83],{"class":82},[76,444,87],{"class":86},[76,446,90],{"class":86},[76,448,94],{"class":93},[76,450,98],{"class":97},[76,452,101],{"class":82},[76,454,455,458,461,464,467,470],{"class":78,"line":104},[76,456,457],{"class":82},"import",[76,459,460],{"class":93}," {",[76,462,463],{"class":117}," ref ",[76,465,466],{"class":93},"}",[76,468,469],{"class":82}," from",[76,471,472],{"class":97}," 'vue'\n",[76,474,475,477,480,483],{"class":78,"line":114},[76,476,457],{"class":82},[76,478,479],{"class":117}," BasicTable ",[76,481,482],{"class":82},"from",[76,484,485],{"class":97}," './BasicTable.vue'\n",[76,487,488],{"class":78,"line":144},[76,489,174],{"emptyLinePlaceholder":173},[76,491,492,495,499,502,505,508,510,513,515,518,520,523],{"class":78,"line":158},[76,493,494],{"class":82},"const",[76,496,498],{"class":497},"sJ-0L"," columns",[76,500,501],{"class":121}," =",[76,503,504],{"class":93}," [",[76,506,507],{"class":97},"'number'",[76,509,135],{"class":93},[76,511,512],{"class":97}," 'customer'",[76,514,135],{"class":93},[76,516,517],{"class":97}," 'amount'",[76,519,135],{"class":93},[76,521,522],{"class":97}," 'status'",[76,524,525],{"class":93},"]\n",[76,527,528,530,533,535],{"class":78,"line":164},[76,529,494],{"class":82},[76,531,532],{"class":497}," invoices",[76,534,501],{"class":121},[76,536,537],{"class":93}," [\n",[76,539,540,543,547,549,552,554,557,559,562,564,567,569,572,574,577,579,582],{"class":78,"line":170},[76,541,542],{"class":93}," {",[76,544,546],{"class":545},"snYWn"," number",[76,548,122],{"class":93},[76,550,551],{"class":97}," 'INV-1042'",[76,553,135],{"class":93},[76,555,556],{"class":545}," customer",[76,558,122],{"class":93},[76,560,561],{"class":97}," 'Northwind Traders'",[76,563,135],{"class":93},[76,565,566],{"class":545}," amount",[76,568,122],{"class":93},[76,570,571],{"class":497}," 1240",[76,573,135],{"class":93},[76,575,576],{"class":545}," status",[76,578,122],{"class":93},[76,580,581],{"class":97}," 'paid'",[76,583,584],{"class":93}," },\n",[76,586,587,589,591,593,596,598,600,602,605,607,609,611,614,616,618,620,623],{"class":78,"line":177},[76,588,542],{"class":93},[76,590,546],{"class":545},[76,592,122],{"class":93},[76,594,595],{"class":97}," 'INV-1043'",[76,597,135],{"class":93},[76,599,556],{"class":545},[76,601,122],{"class":93},[76,603,604],{"class":97}," 'Blue Harbor'",[76,606,135],{"class":93},[76,608,566],{"class":545},[76,610,122],{"class":93},[76,612,613],{"class":497}," 860.5",[76,615,135],{"class":93},[76,617,576],{"class":545},[76,619,122],{"class":93},[76,621,622],{"class":97}," 'issued'",[76,624,584],{"class":93},[76,626,627,629,631,633,636,638,640,642,645,647,649,651,654,656,658,660,663],{"class":78,"line":183},[76,628,542],{"class":93},[76,630,546],{"class":545},[76,632,122],{"class":93},[76,634,635],{"class":97}," 'INV-1044'",[76,637,135],{"class":93},[76,639,556],{"class":545},[76,641,122],{"class":93},[76,643,644],{"class":97}," 'Atlas Studio'",[76,646,135],{"class":93},[76,648,566],{"class":545},[76,650,122],{"class":93},[76,652,653],{"class":497}," 2310",[76,655,135],{"class":93},[76,657,576],{"class":545},[76,659,122],{"class":93},[76,661,662],{"class":97}," 'draft'",[76,664,584],{"class":93},[76,666,667],{"class":78,"line":189},[76,668,525],{"class":93},[76,670,671],{"class":78,"line":195},[76,672,174],{"emptyLinePlaceholder":173},[76,674,675,677,680,682,685,688,691],{"class":78,"line":201},[76,676,494],{"class":82},[76,678,679],{"class":497}," highlighted",[76,681,501],{"class":121},[76,683,684],{"class":107}," ref",[76,686,687],{"class":93},"(",[76,689,690],{"class":97},"'customer'",[76,692,693],{"class":93},")\n",[76,695,696],{"class":78,"line":233},[76,697,167],{"class":82},[76,699,700],{"class":78,"line":263},[76,701,174],{"emptyLinePlaceholder":173},[76,703,704],{"class":78,"line":269},[76,705,180],{"class":82},[76,707,708,711,714,716,719],{"class":78,"line":275},[76,709,710],{"class":82}," \u003Cselect",[76,712,713],{"class":86}," v-model",[76,715,94],{"class":93},[76,717,718],{"class":97},"\"highlighted\"",[76,720,101],{"class":82},[76,722,723,726,728,730,732,734,736,738,740,742],{"class":78,"line":281},[76,724,725],{"class":82}," \u003Coption",[76,727,207],{"class":86},[76,729,94],{"class":93},[76,731,212],{"class":97},[76,733,215],{"class":86},[76,735,94],{"class":93},[76,737,220],{"class":97},[76,739,254],{"class":82},[76,741,257],{"class":117},[76,743,744],{"class":82},"\u003C/option>\n",[76,746,747],{"class":78,"line":287},[76,748,749],{"class":82}," \u003C/select>\n",[76,751,752],{"class":78,"line":309},[76,753,174],{"emptyLinePlaceholder":173},[76,755,756,759,762,764,767,770,772,775],{"class":78,"line":329},[76,757,758],{"class":82}," \u003CBasicTable",[76,760,761],{"class":86}," :rows",[76,763,94],{"class":93},[76,765,766],{"class":97},"\"invoices\"",[76,768,769],{"class":86}," :columns",[76,771,94],{"class":93},[76,773,774],{"class":97},"\"columns\"",[76,776,101],{"class":82},[76,778,779,782,785,788,791,794,796,799,802,805,808,811,813,815],{"class":78,"line":364},[76,780,781],{"class":82}," \u003Ctemplate",[76,783,784],{"class":93}," #[",[76,786,787],{"class":97},"`cell-",[76,789,790],{"class":93},"${",[76,792,793],{"class":117},"highlighted",[76,795,466],{"class":93},[76,797,798],{"class":97},"`",[76,800,801],{"class":93},"]=",[76,803,804],{"class":97},"\"",[76,806,807],{"class":93},"{",[76,809,810],{"class":117}," value ",[76,812,466],{"class":93},[76,814,804],{"class":97},[76,816,101],{"class":82},[76,818,819,822,825],{"class":78,"line":370},[76,820,821],{"class":82}," \u003Cmark>",[76,823,824],{"class":117},"{{ value }}",[76,826,827],{"class":82},"\u003C/mark>\n",[76,829,830],{"class":78,"line":375},[76,831,832],{"class":82}," \u003C/template>\n",[76,834,835],{"class":78,"line":381},[76,836,837],{"class":82}," \u003C/BasicTable>\n",[76,839,840],{"class":78,"line":387},[76,841,390],{"class":82},[432,843,844],{"v-slot:output":72},[845,846],"slots-dynamic-demo",{},[23,848,849],{},"اختر عمودًا آخر فينتقل التمييز إليه: صار المكوّن الأب يملأ منفذًا مختلفًا.",[23,851,852,853,856,857,860,861,864],{},"كل هذا يعمل، لكن وقت التشغيل فقط. أما TypeScript فيرى ",[37,854,855],{},"value"," من النوع ",[37,858,859],{},"unknown","، فلا نستطيع تنسيق مبلغ قبل تحويله. ولا شيء يتحقق من الأسماء: منفذ اسمه ",[37,862,863],{},"cell-amout"," يُقبل دون اعتراض، ثم لا يُصيَّر أبدًا.",[30,866,868],{"id":867},"المنافذ-العامة","المنافذ العامة",[23,870,871,872,875,876,878,879,881],{},"أضاف Vue 3.3 أمرين يحلّان المشكلة. الأول خاصية ",[37,873,874],{},"generic"," على ",[37,877,39],{},"، وبها يأخذ المكوّن معاملات نوع كما تأخذها الدوال العامة. والثاني ماكرو ",[37,880,43],{},"، وبه نصرّح بالمنافذ التي يصيّرها المكوّن وبالخاصيات التي يستقبلها كل منفذ.",[23,883,884,885,888,889,122],{},"يستعمل ",[37,886,887],{},"DataList"," الاثنين. فهو لا يعرف نوع العناصر التي ستُعطى له، فيسمّيه ",[37,890,891],{},"T",[66,893,896],{"className":68,"code":894,"filename":895,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T\">\ndefineProps\u003C{\n items: T[]\n}>()\n\ndefineSlots\u003C{\n item(props: { item: T, index: number }): any\n empty?(): any\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cul v-if=\"items.length\">\n \u003Cli v-for=\"(item, index) in items\" :key=\"index\">\n \u003Cslot name=\"item\" :item=\"item\" :index=\"index\" />\n \u003C/li>\n \u003C/ul>\n \u003Cslot v-else name=\"empty\" />\n\u003C/template>\n","DataList.vue",[37,897,898,923,929,941,945,949,955,993,1008,1012,1016,1020,1024,1039,1059,1089,1094,1099,1116],{"__ignoreMap":72},[76,899,900,902,904,906,908,910,913,915,917,919,921],{"class":78,"line":79},[76,901,83],{"class":82},[76,903,87],{"class":86},[76,905,90],{"class":86},[76,907,94],{"class":93},[76,909,98],{"class":97},[76,911,912],{"class":86}," generic",[76,914,94],{"class":93},[76,916,804],{"class":97},[76,918,891],{"class":125},[76,920,804],{"class":97},[76,922,101],{"class":82},[76,924,925,927],{"class":78,"line":104},[76,926,108],{"class":107},[76,928,111],{"class":93},[76,930,931,934,936,939],{"class":78,"line":114},[76,932,933],{"class":117}," items",[76,935,122],{"class":121},[76,937,938],{"class":125}," T",[76,940,155],{"class":93},[76,942,943],{"class":78,"line":144},[76,944,161],{"class":93},[76,946,947],{"class":78,"line":158},[76,948,174],{"emptyLinePlaceholder":173},[76,950,951,953],{"class":78,"line":164},[76,952,43],{"class":107},[76,954,111],{"class":93},[76,956,957,960,962,965,967,969,972,974,976,978,981,983,985,988,990],{"class":78,"line":170},[76,958,959],{"class":107}," item",[76,961,687],{"class":93},[76,963,964],{"class":117},"props",[76,966,122],{"class":121},[76,968,460],{"class":93},[76,970,971],{"class":117}," item",[76,973,122],{"class":121},[76,975,938],{"class":125},[76,977,135],{"class":93},[76,979,980],{"class":117}," index",[76,982,122],{"class":121},[76,984,546],{"class":125},[76,986,987],{"class":93}," })",[76,989,122],{"class":121},[76,991,992],{"class":125}," any\n",[76,994,995,998,1001,1004,1006],{"class":78,"line":177},[76,996,997],{"class":107}," empty",[76,999,1000],{"class":121},"?",[76,1002,1003],{"class":93},"()",[76,1005,122],{"class":121},[76,1007,992],{"class":125},[76,1009,1010],{"class":78,"line":183},[76,1011,161],{"class":93},[76,1013,1014],{"class":78,"line":189},[76,1015,167],{"class":82},[76,1017,1018],{"class":78,"line":195},[76,1019,174],{"emptyLinePlaceholder":173},[76,1021,1022],{"class":78,"line":201},[76,1023,180],{"class":82},[76,1025,1026,1029,1032,1034,1037],{"class":78,"line":233},[76,1027,1028],{"class":82}," \u003Cul",[76,1030,1031],{"class":86}," v-if",[76,1033,94],{"class":93},[76,1035,1036],{"class":97},"\"items.length\"",[76,1038,101],{"class":82},[76,1040,1041,1044,1046,1048,1051,1053,1055,1057],{"class":78,"line":263},[76,1042,1043],{"class":82}," \u003Cli",[76,1045,207],{"class":86},[76,1047,94],{"class":93},[76,1049,1050],{"class":97},"\"(item, index) in items\"",[76,1052,215],{"class":86},[76,1054,94],{"class":93},[76,1056,304],{"class":97},[76,1058,101],{"class":82},[76,1060,1061,1064,1067,1069,1072,1075,1077,1079,1082,1084,1086],{"class":78,"line":269},[76,1062,1063],{"class":82}," \u003Cslot",[76,1065,1066],{"class":86}," name",[76,1068,94],{"class":93},[76,1070,1071],{"class":97},"\"item\"",[76,1073,1074],{"class":86}," :item",[76,1076,94],{"class":93},[76,1078,1071],{"class":97},[76,1080,1081],{"class":86}," :index",[76,1083,94],{"class":93},[76,1085,304],{"class":97},[76,1087,1088],{"class":82}," />\n",[76,1090,1091],{"class":78,"line":275},[76,1092,1093],{"class":82}," \u003C/li>\n",[76,1095,1096],{"class":78,"line":281},[76,1097,1098],{"class":82}," \u003C/ul>\n",[76,1100,1101,1104,1107,1109,1111,1114],{"class":78,"line":287},[76,1102,1103],{"class":82}," \u003Cslot",[76,1105,1106],{"class":86}," v-else",[76,1108,1066],{"class":86},[76,1110,94],{"class":93},[76,1112,1113],{"class":97},"\"empty\"",[76,1115,1088],{"class":82},[76,1117,1118],{"class":78,"line":309},[76,1119,390],{"class":82},[23,1121,1122,1123,1125,1126,1129],{},"لا يأخذ ",[37,1124,43],{}," إلا نوعًا. كل مفتاح فيه اسم منفذ، وكل قيمة دالة يصف معاملها الأول خاصيات المنفذ. أما نوع القيمة المُرجَعة فمهمل حاليًا، ويكفي فيه ",[37,1127,1128],{},"any",".",[23,1131,1132,1133,1135,1136,122],{},"وعند استعمال المكوّن يُستنتج ",[37,1134,891],{}," من الخاصية ",[37,1137,1138],{},"items",[429,1140,1141,1523],{},[432,1142,1143],{"v-slot:code":72},[66,1144,1146],{"className":68,"code":1145,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport DataList from './DataList.vue'\n\ninterface Invoice {\n number: string\n customer: string\n amount: number\n status: 'draft' | 'issued' | 'paid'\n}\n\nconst invoices: Invoice[] = [/* the same three invoices */]\n\nconst query = ref('')\nconst matches = computed(() =>\n invoices.filter(invoice => invoice.customer.toLowerCase().includes(query.value.toLowerCase())),\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cinput v-model=\"query\" type=\"search\" placeholder=\"Filter by customer\">\n\n \u003CDataList :items=\"matches\">\n \u003Ctemplate #item=\"{ item, index }\">\n {{ index + 1 }}. {{ item.number }} · {{ item.customer }}\n \u003C/template>\n \u003Ctemplate #empty>\n \u003Cp>No invoice matches.\u003C/p>\n \u003C/template>\n \u003C/DataList>\n\u003C/template>\n",[37,1147,1148,1162,1181,1193,1197,1208,1218,1227,1237,1256,1261,1265,1288,1292,1310,1327,1379,1383,1387,1391,1395,1425,1429,1444,1473,1478,1483,1495,1507,1512,1518],{"__ignoreMap":72},[76,1149,1150,1152,1154,1156,1158,1160],{"class":78,"line":79},[76,1151,83],{"class":82},[76,1153,87],{"class":86},[76,1155,90],{"class":86},[76,1157,94],{"class":93},[76,1159,98],{"class":97},[76,1161,101],{"class":82},[76,1163,1164,1166,1168,1171,1173,1175,1177,1179],{"class":78,"line":104},[76,1165,457],{"class":82},[76,1167,460],{"class":93},[76,1169,1170],{"class":117}," computed",[76,1172,135],{"class":93},[76,1174,463],{"class":117},[76,1176,466],{"class":93},[76,1178,469],{"class":82},[76,1180,472],{"class":97},[76,1182,1183,1185,1188,1190],{"class":78,"line":114},[76,1184,457],{"class":82},[76,1186,1187],{"class":117}," DataList ",[76,1189,482],{"class":82},[76,1191,1192],{"class":97}," './DataList.vue'\n",[76,1194,1195],{"class":78,"line":144},[76,1196,174],{"emptyLinePlaceholder":173},[76,1198,1199,1202,1205],{"class":78,"line":158},[76,1200,1201],{"class":82},"interface",[76,1203,1204],{"class":125}," Invoice",[76,1206,1207],{"class":93}," {\n",[76,1209,1210,1213,1215],{"class":78,"line":164},[76,1211,1212],{"class":117}," number",[76,1214,122],{"class":121},[76,1216,1217],{"class":125}," string\n",[76,1219,1220,1223,1225],{"class":78,"line":170},[76,1221,1222],{"class":117}," customer",[76,1224,122],{"class":121},[76,1226,1217],{"class":125},[76,1228,1229,1232,1234],{"class":78,"line":177},[76,1230,1231],{"class":117}," amount",[76,1233,122],{"class":121},[76,1235,1236],{"class":125}," number\n",[76,1238,1239,1242,1244,1246,1249,1251,1253],{"class":78,"line":183},[76,1240,1241],{"class":117}," status",[76,1243,122],{"class":121},[76,1245,662],{"class":97},[76,1247,1248],{"class":121}," |",[76,1250,622],{"class":97},[76,1252,1248],{"class":121},[76,1254,1255],{"class":97}," 'paid'\n",[76,1257,1258],{"class":78,"line":189},[76,1259,1260],{"class":93},"}\n",[76,1262,1263],{"class":78,"line":195},[76,1264,174],{"emptyLinePlaceholder":173},[76,1266,1267,1269,1271,1273,1275,1278,1280,1282,1286],{"class":78,"line":201},[76,1268,494],{"class":82},[76,1270,532],{"class":497},[76,1272,122],{"class":121},[76,1274,1204],{"class":125},[76,1276,1277],{"class":93},"[]",[76,1279,501],{"class":121},[76,1281,504],{"class":93},[76,1283,1285],{"class":1284},"s5c__","/* the same three invoices */",[76,1287,525],{"class":93},[76,1289,1290],{"class":78,"line":233},[76,1291,174],{"emptyLinePlaceholder":173},[76,1293,1294,1296,1299,1301,1303,1305,1308],{"class":78,"line":263},[76,1295,494],{"class":82},[76,1297,1298],{"class":497}," query",[76,1300,501],{"class":121},[76,1302,684],{"class":107},[76,1304,687],{"class":93},[76,1306,1307],{"class":97},"''",[76,1309,693],{"class":93},[76,1311,1312,1314,1317,1319,1321,1324],{"class":78,"line":269},[76,1313,494],{"class":82},[76,1315,1316],{"class":497}," matches",[76,1318,501],{"class":121},[76,1320,1170],{"class":107},[76,1322,1323],{"class":93},"(()",[76,1325,1326],{"class":82}," =>\n",[76,1328,1329,1332,1334,1337,1339,1342,1345,1348,1350,1352,1354,1357,1360,1363,1365,1368,1370,1372,1374,1376],{"class":78,"line":275},[76,1330,1331],{"class":117}," invoices",[76,1333,1129],{"class":93},[76,1335,1336],{"class":107},"filter",[76,1338,687],{"class":93},[76,1340,1341],{"class":117},"invoice ",[76,1343,1344],{"class":82},"=>",[76,1346,1347],{"class":117}," invoice",[76,1349,1129],{"class":93},[76,1351,400],{"class":545},[76,1353,1129],{"class":93},[76,1355,1356],{"class":107},"toLowerCase",[76,1358,1359],{"class":93},"().",[76,1361,1362],{"class":107},"includes",[76,1364,687],{"class":93},[76,1366,1367],{"class":117},"query",[76,1369,1129],{"class":93},[76,1371,855],{"class":545},[76,1373,1129],{"class":93},[76,1375,1356],{"class":107},[76,1377,1378],{"class":93},"())),\n",[76,1380,1381],{"class":78,"line":281},[76,1382,693],{"class":93},[76,1384,1385],{"class":78,"line":287},[76,1386,167],{"class":82},[76,1388,1389],{"class":78,"line":309},[76,1390,174],{"emptyLinePlaceholder":173},[76,1392,1393],{"class":78,"line":329},[76,1394,180],{"class":82},[76,1396,1397,1400,1402,1404,1407,1410,1412,1415,1418,1420,1423],{"class":78,"line":364},[76,1398,1399],{"class":82}," \u003Cinput",[76,1401,713],{"class":86},[76,1403,94],{"class":93},[76,1405,1406],{"class":97},"\"query\"",[76,1408,1409],{"class":86}," type",[76,1411,94],{"class":93},[76,1413,1414],{"class":97},"\"search\"",[76,1416,1417],{"class":86}," placeholder",[76,1419,94],{"class":93},[76,1421,1422],{"class":97},"\"Filter by customer\"",[76,1424,101],{"class":82},[76,1426,1427],{"class":78,"line":370},[76,1428,174],{"emptyLinePlaceholder":173},[76,1430,1431,1434,1437,1439,1442],{"class":78,"line":375},[76,1432,1433],{"class":82}," \u003CDataList",[76,1435,1436],{"class":86}," :items",[76,1438,94],{"class":93},[76,1440,1441],{"class":97},"\"matches\"",[76,1443,101],{"class":82},[76,1445,1446,1448,1451,1454,1456,1458,1460,1462,1464,1467,1469,1471],{"class":78,"line":381},[76,1447,781],{"class":82},[76,1449,1450],{"class":93}," #",[76,1452,1453],{"class":86},"item",[76,1455,94],{"class":93},[76,1457,804],{"class":97},[76,1459,807],{"class":93},[76,1461,971],{"class":117},[76,1463,135],{"class":93},[76,1465,1466],{"class":117}," index ",[76,1468,466],{"class":93},[76,1470,804],{"class":97},[76,1472,101],{"class":82},[76,1474,1475],{"class":78,"line":387},[76,1476,1477],{"class":117}," {{ index + 1 }}. {{ item.number }} · {{ item.customer }}\n",[76,1479,1481],{"class":78,"line":1480},26,[76,1482,832],{"class":82},[76,1484,1486,1488,1490,1493],{"class":78,"line":1485},27,[76,1487,781],{"class":82},[76,1489,1450],{"class":93},[76,1491,1492],{"class":86},"empty",[76,1494,101],{"class":82},[76,1496,1498,1501,1504],{"class":78,"line":1497},28,[76,1499,1500],{"class":82}," \u003Cp>",[76,1502,1503],{"class":117},"No invoice matches.",[76,1505,1506],{"class":82},"\u003C/p>\n",[76,1508,1510],{"class":78,"line":1509},29,[76,1511,832],{"class":82},[76,1513,1515],{"class":78,"line":1514},30,[76,1516,1517],{"class":82}," \u003C/DataList>\n",[76,1519,1521],{"class":78,"line":1520},31,[76,1522,390],{"class":82},[432,1524,1525],{"v-slot:output":72},[1526,1527],"slots-generic-demo",{},[23,1529,1530,1531,1534,1535,856,1537,1540,1541,1544],{},"داخل المنفذ ",[37,1532,1533],{},"#item"," يكون ",[37,1536,1453],{},[37,1538,1539],{},"Invoice",". يكمل المحرّر حقوله تلقائيًا، وخطأ إملائي مثل ",[37,1542,1543],{},"item.custmer"," يصير خطأ في فحص الأنواع، لا سطرًا فارغًا على الشاشة.",[23,1546,1547,1548,1550,1551,1553,1554,1556],{},"وتفصيل يحسن أن نعرفه: في منفذ بسيط كهذا، تستنتج أدوات Vue الأنواع نفسها من القالب ولو لم نكتب ",[37,1549,43],{},". لكن التصريح بها يبقى مفيدًا: يُكتب العقد في موضع واحد، وتُعلَّم المنافذ الاختيارية مثل ",[37,1552,1492],{}," بعلامة ",[37,1555,1000],{},". أما مع الأسماء الديناميكية فلا يكفي الاستنتاج، كما سنرى.",[30,1558,1560],{"id":1559},"الديناميكية-والعامة-معًا","الديناميكية والعامة معًا",[23,1562,1563],{},"نعود إلى الجدول لنعامله بالمثل. وجعله عامًّا هو الجزء السهل:",[66,1565,1567],{"className":68,"code":1566,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T extends object\">\ndefineProps\u003C{\n rows: T[]\n columns: (keyof T & string)[]\n}>()\n\u003C/script>\n",[37,1568,1569,1599,1605,1615,1637,1641],{"__ignoreMap":72},[76,1570,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1592,1595,1597],{"class":78,"line":79},[76,1572,83],{"class":82},[76,1574,87],{"class":86},[76,1576,90],{"class":86},[76,1578,94],{"class":93},[76,1580,98],{"class":97},[76,1582,912],{"class":86},[76,1584,94],{"class":93},[76,1586,804],{"class":97},[76,1588,891],{"class":125},[76,1590,1591],{"class":82}," extends",[76,1593,1594],{"class":125}," object",[76,1596,804],{"class":97},[76,1598,101],{"class":82},[76,1600,1601,1603],{"class":78,"line":104},[76,1602,108],{"class":107},[76,1604,111],{"class":93},[76,1606,1607,1609,1611,1613],{"class":78,"line":114},[76,1608,118],{"class":117},[76,1610,122],{"class":121},[76,1612,938],{"class":125},[76,1614,155],{"class":93},[76,1616,1617,1619,1621,1624,1627,1629,1632,1634],{"class":78,"line":144},[76,1618,147],{"class":117},[76,1620,122],{"class":121},[76,1622,1623],{"class":93}," (",[76,1625,1626],{"class":82},"keyof",[76,1628,938],{"class":125},[76,1630,1631],{"class":121}," &",[76,1633,152],{"class":125},[76,1635,1636],{"class":93},")[]\n",[76,1638,1639],{"class":78,"line":158},[76,1640,161],{"class":93},[76,1642,1643],{"class":78,"line":164},[76,1644,167],{"class":82},[23,1646,1647,1648,1651,1652,1655,1656,1659,1660,1662,1663,1666,1667,1670],{},"لا تقبل ",[37,1649,1650],{},"columns"," الآن إلا مفاتيح نوع الصف، ويبقى القالب كما هو. بل إن أدوات Vue تستنتج أسماء المنافذ: فتعرف ",[37,1653,1654],{},"cell-amount"," وترفض ",[37,1657,1658],{},"cell-total",". غير أن ",[37,1661,855],{}," يأخذ النوع نفسه في كل المنافذ، وهو اتحاد أنواع الأعمدة كلها (",[37,1664,1665],{},"string | number"," في فواتيرنا)، لأن في القالب وسم ",[37,1668,1669],{},"\u003Cslot>"," واحدًا يخدم كل الأعمدة.",[23,1672,1673,1674,1676],{},"ولنعطي كل عمود نوعه، نصف المنافذ بنوع يُبنى من مفاتيح ",[37,1675,891],{},"، وهو ما يسمّى mapped type:",[66,1678,1681],{"className":68,"code":1679,"filename":1680,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\" generic=\"T extends object\">\ntype CellSlots = {\n [K in keyof T & string as `cell-${K}`]?: (props: { value: T[K], row: T }) => any\n}\n\ntype HeaderSlots = {\n [K in keyof T & string as `header-${K}`]?: (props: { column: K }) => any\n}\n\ndefineProps\u003C{\n rows: T[]\n columns: (keyof T & string)[]\n}>()\n\ndefineSlots\u003CCellSlots & HeaderSlots>()\n\nconst cellSlot = (column: keyof T & string) => `cell-${column}` as keyof CellSlots\nconst headerSlot = (column: keyof T & string) => `header-${column}` as keyof HeaderSlots\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth v-for=\"column in columns\" :key=\"column\" scope=\"col\">\n \u003Cslot :name=\"headerSlot(column)\" :column=\"column\">{{ column }}\u003C/slot>\n \u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"(row, index) in rows\" :key=\"index\">\n \u003Ctd v-for=\"column in columns\" :key=\"column\">\n \u003Cslot :name=\"cellSlot(column)\" :value=\"row[column]\" :row=\"row\">{{ row[column] }}\u003C/slot>\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n","DataTable.vue",[37,1682,1683,1711,1723,1800,1804,1808,1819,1874,1878,1882,1888,1898,1916,1920,1924,1940,1944,1990,2034,2038,2042,2046,2050,2054,2058,2082,2105,2109,2113,2117,2121,2139,2158,2188,2193,2198,2203,2208],{"__ignoreMap":72},[76,1684,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709],{"class":78,"line":79},[76,1686,83],{"class":82},[76,1688,87],{"class":86},[76,1690,90],{"class":86},[76,1692,94],{"class":93},[76,1694,98],{"class":97},[76,1696,912],{"class":86},[76,1698,94],{"class":93},[76,1700,804],{"class":97},[76,1702,891],{"class":125},[76,1704,1591],{"class":82},[76,1706,1594],{"class":125},[76,1708,804],{"class":97},[76,1710,101],{"class":82},[76,1712,1713,1716,1719,1721],{"class":78,"line":104},[76,1714,1715],{"class":82},"type",[76,1717,1718],{"class":125}," CellSlots",[76,1720,501],{"class":121},[76,1722,1207],{"class":93},[76,1724,1725,1728,1731,1734,1737,1739,1741,1743,1746,1749,1751,1753,1755,1757,1760,1763,1765,1767,1769,1771,1774,1776,1778,1781,1783,1786,1789,1791,1793,1795,1798],{"class":78,"line":114},[76,1726,1727],{"class":93}," [",[76,1729,1730],{"class":125},"K",[76,1732,1733],{"class":82}," in",[76,1735,1736],{"class":82}," keyof",[76,1738,938],{"class":125},[76,1740,1631],{"class":121},[76,1742,152],{"class":125},[76,1744,1745],{"class":82}," as",[76,1747,1748],{"class":97}," `cell-",[76,1750,790],{"class":93},[76,1752,1730],{"class":125},[76,1754,466],{"class":93},[76,1756,798],{"class":97},[76,1758,1759],{"class":93},"]",[76,1761,1762],{"class":121},"?:",[76,1764,1623],{"class":93},[76,1766,964],{"class":117},[76,1768,122],{"class":121},[76,1770,460],{"class":93},[76,1772,1773],{"class":117}," value",[76,1775,122],{"class":121},[76,1777,938],{"class":125},[76,1779,1780],{"class":93},"[",[76,1782,1730],{"class":125},[76,1784,1785],{"class":93},"],",[76,1787,1788],{"class":117}," row",[76,1790,122],{"class":121},[76,1792,938],{"class":125},[76,1794,987],{"class":93},[76,1796,1797],{"class":82}," =>",[76,1799,992],{"class":125},[76,1801,1802],{"class":78,"line":144},[76,1803,1260],{"class":93},[76,1805,1806],{"class":78,"line":158},[76,1807,174],{"emptyLinePlaceholder":173},[76,1809,1810,1812,1815,1817],{"class":78,"line":164},[76,1811,1715],{"class":82},[76,1813,1814],{"class":125}," HeaderSlots",[76,1816,501],{"class":121},[76,1818,1207],{"class":93},[76,1820,1821,1823,1825,1827,1829,1831,1833,1835,1837,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1863,1865,1868,1870,1872],{"class":78,"line":170},[76,1822,1727],{"class":93},[76,1824,1730],{"class":125},[76,1826,1733],{"class":82},[76,1828,1736],{"class":82},[76,1830,938],{"class":125},[76,1832,1631],{"class":121},[76,1834,152],{"class":125},[76,1836,1745],{"class":82},[76,1838,1839],{"class":97}," `header-",[76,1841,790],{"class":93},[76,1843,1730],{"class":125},[76,1845,466],{"class":93},[76,1847,798],{"class":97},[76,1849,1759],{"class":93},[76,1851,1762],{"class":121},[76,1853,1623],{"class":93},[76,1855,964],{"class":117},[76,1857,122],{"class":121},[76,1859,460],{"class":93},[76,1861,1862],{"class":117}," column",[76,1864,122],{"class":121},[76,1866,1867],{"class":125}," K",[76,1869,987],{"class":93},[76,1871,1797],{"class":82},[76,1873,992],{"class":125},[76,1875,1876],{"class":78,"line":177},[76,1877,1260],{"class":93},[76,1879,1880],{"class":78,"line":183},[76,1881,174],{"emptyLinePlaceholder":173},[76,1883,1884,1886],{"class":78,"line":189},[76,1885,108],{"class":125},[76,1887,111],{"class":93},[76,1889,1890,1892,1894,1896],{"class":78,"line":195},[76,1891,118],{"class":117},[76,1893,122],{"class":121},[76,1895,938],{"class":125},[76,1897,155],{"class":93},[76,1899,1900,1902,1904,1906,1908,1910,1912,1914],{"class":78,"line":201},[76,1901,147],{"class":117},[76,1903,122],{"class":121},[76,1905,1623],{"class":93},[76,1907,1626],{"class":82},[76,1909,938],{"class":125},[76,1911,1631],{"class":121},[76,1913,152],{"class":125},[76,1915,1636],{"class":93},[76,1917,1918],{"class":78,"line":233},[76,1919,161],{"class":93},[76,1921,1922],{"class":78,"line":263},[76,1923,174],{"emptyLinePlaceholder":173},[76,1925,1926,1928,1930,1933,1935,1937],{"class":78,"line":269},[76,1927,43],{"class":125},[76,1929,129],{"class":93},[76,1931,1932],{"class":125},"CellSlots",[76,1934,1631],{"class":121},[76,1936,1814],{"class":125},[76,1938,1939],{"class":93},">()\n",[76,1941,1942],{"class":78,"line":275},[76,1943,174],{"emptyLinePlaceholder":173},[76,1945,1946,1948,1951,1953,1955,1958,1960,1962,1964,1966,1968,1971,1973,1975,1977,1979,1981,1983,1985,1987],{"class":78,"line":281},[76,1947,494],{"class":82},[76,1949,1950],{"class":107}," cellSlot",[76,1952,501],{"class":121},[76,1954,1623],{"class":93},[76,1956,1957],{"class":117},"column",[76,1959,122],{"class":121},[76,1961,1736],{"class":82},[76,1963,938],{"class":125},[76,1965,1631],{"class":121},[76,1967,152],{"class":125},[76,1969,1970],{"class":93},")",[76,1972,1797],{"class":82},[76,1974,1748],{"class":97},[76,1976,790],{"class":93},[76,1978,1957],{"class":117},[76,1980,466],{"class":93},[76,1982,798],{"class":97},[76,1984,1745],{"class":82},[76,1986,1736],{"class":82},[76,1988,1989],{"class":125}," CellSlots\n",[76,1991,1992,1994,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031],{"class":78,"line":287},[76,1993,494],{"class":82},[76,1995,1996],{"class":107}," headerSlot",[76,1998,501],{"class":121},[76,2000,1623],{"class":93},[76,2002,1957],{"class":117},[76,2004,122],{"class":121},[76,2006,1736],{"class":82},[76,2008,938],{"class":125},[76,2010,1631],{"class":121},[76,2012,152],{"class":125},[76,2014,1970],{"class":93},[76,2016,1797],{"class":82},[76,2018,1839],{"class":97},[76,2020,790],{"class":93},[76,2022,1957],{"class":117},[76,2024,466],{"class":93},[76,2026,798],{"class":97},[76,2028,1745],{"class":82},[76,2030,1736],{"class":82},[76,2032,2033],{"class":125}," HeaderSlots\n",[76,2035,2036],{"class":78,"line":309},[76,2037,167],{"class":82},[76,2039,2040],{"class":78,"line":329},[76,2041,174],{"emptyLinePlaceholder":173},[76,2043,2044],{"class":78,"line":364},[76,2045,180],{"class":82},[76,2047,2048],{"class":78,"line":370},[76,2049,186],{"class":82},[76,2051,2052],{"class":78,"line":375},[76,2053,192],{"class":82},[76,2055,2056],{"class":78,"line":381},[76,2057,198],{"class":82},[76,2059,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080],{"class":78,"line":387},[76,2061,204],{"class":82},[76,2063,207],{"class":86},[76,2065,94],{"class":93},[76,2067,212],{"class":97},[76,2069,215],{"class":86},[76,2071,94],{"class":93},[76,2073,220],{"class":97},[76,2075,223],{"class":86},[76,2077,94],{"class":93},[76,2079,228],{"class":97},[76,2081,101],{"class":82},[76,2083,2084,2086,2088,2090,2093,2095,2097,2099,2101,2103],{"class":78,"line":1480},[76,2085,236],{"class":82},[76,2087,239],{"class":86},[76,2089,94],{"class":93},[76,2091,2092],{"class":97},"\"headerSlot(column)\"",[76,2094,247],{"class":86},[76,2096,94],{"class":93},[76,2098,220],{"class":97},[76,2100,254],{"class":82},[76,2102,257],{"class":117},[76,2104,260],{"class":82},[76,2106,2107],{"class":78,"line":1485},[76,2108,266],{"class":82},[76,2110,2111],{"class":78,"line":1497},[76,2112,272],{"class":82},[76,2114,2115],{"class":78,"line":1509},[76,2116,278],{"class":82},[76,2118,2119],{"class":78,"line":1514},[76,2120,284],{"class":82},[76,2122,2123,2125,2127,2129,2131,2133,2135,2137],{"class":78,"line":1520},[76,2124,290],{"class":82},[76,2126,207],{"class":86},[76,2128,94],{"class":93},[76,2130,297],{"class":97},[76,2132,215],{"class":86},[76,2134,94],{"class":93},[76,2136,304],{"class":97},[76,2138,101],{"class":82},[76,2140,2142,2144,2146,2148,2150,2152,2154,2156],{"class":78,"line":2141},32,[76,2143,312],{"class":82},[76,2145,207],{"class":86},[76,2147,94],{"class":93},[76,2149,212],{"class":97},[76,2151,215],{"class":86},[76,2153,94],{"class":93},[76,2155,220],{"class":97},[76,2157,101],{"class":82},[76,2159,2161,2163,2165,2167,2170,2172,2174,2176,2178,2180,2182,2184,2186],{"class":78,"line":2160},33,[76,2162,236],{"class":82},[76,2164,239],{"class":86},[76,2166,94],{"class":93},[76,2168,2169],{"class":97},"\"cellSlot(column)\"",[76,2171,341],{"class":86},[76,2173,94],{"class":93},[76,2175,346],{"class":97},[76,2177,349],{"class":86},[76,2179,94],{"class":93},[76,2181,354],{"class":97},[76,2183,254],{"class":82},[76,2185,359],{"class":117},[76,2187,260],{"class":82},[76,2189,2191],{"class":78,"line":2190},34,[76,2192,367],{"class":82},[76,2194,2196],{"class":78,"line":2195},35,[76,2197,272],{"class":82},[76,2199,2201],{"class":78,"line":2200},36,[76,2202,378],{"class":82},[76,2204,2206],{"class":78,"line":2205},37,[76,2207,384],{"class":82},[76,2209,2211],{"class":78,"line":2210},38,[76,2212,390],{"class":82},[23,2214,2215,2216,2218,2219,2221,2222,2225,2226,2228,2229,2232,2233,2236],{},"يُقرأ النوع الأول هكذا: لكل مفتاح ",[37,2217,1730],{}," من مفاتيح ",[37,2220,891],{}," منفذ اختياري اسمه ",[37,2223,2224],{},"cell-"," متبوعًا بالمفتاح، ونوع ",[37,2227,855],{}," فيه هو نوع ذلك الحقل، أي ",[37,2230,2231],{},"T[K]",". وعبارة ",[37,2234,2235],{},"as"," هي التي تعيد تسمية المفاتيح.",[23,2238,2239,2240,2242,2243,2246,2247,2249],{},"وللدالتين المساعدتين سبب. ما دام ",[37,2241,891],{}," معامل نوع لم يتحدّد بعد، يعجز TypeScript عن إثبات أن ",[37,2244,2245],{},"`cell-${column}`"," واحد من مفاتيح ",[37,2248,1932],{},"، فيعترض بأن هذه السلسلة لا تصلح فهرسًا لنوع المنافذ. لذلك نؤكّد الاسم مرة واحدة في السكربت، ويبقى القالب نظيفًا. وهذا شأن داخلي في المكوّن، أما من يستعمله فيحصل على منافذ مفحوصة كاملة:",[429,2251,2252,2546],{},[432,2253,2254],{"v-slot:code":72},[66,2255,2257],{"className":68,"code":2256,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport DataTable from './DataTable.vue'\n\ninterface Invoice {\n number: string\n customer: string\n amount: number\n status: 'draft' | 'issued' | 'paid'\n}\n\nconst invoices: Invoice[] = [/* the same three invoices */]\n\nconst money = new Intl.NumberFormat('en', { style: 'currency', currency: 'EUR' })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDataTable :rows=\"invoices\" :columns=\"['number', 'customer', 'amount', 'status']\">\n \u003Ctemplate #cell-amount=\"{ value }\">\n {{ money.format(value) }}\n \u003C/template>\n \u003Ctemplate #cell-status=\"{ value }\">\n \u003Cspan class=\"pill\" :data-status=\"value\">{{ value }}\u003C/span>\n \u003C/template>\n \u003C/DataTable>\n\u003C/template>\n",[37,2258,2259,2273,2285,2289,2297,2305,2313,2321,2337,2341,2345,2365,2369,2419,2423,2427,2431,2451,2473,2478,2482,2505,2533,2537,2542],{"__ignoreMap":72},[76,2260,2261,2263,2265,2267,2269,2271],{"class":78,"line":79},[76,2262,83],{"class":82},[76,2264,87],{"class":86},[76,2266,90],{"class":86},[76,2268,94],{"class":93},[76,2270,98],{"class":97},[76,2272,101],{"class":82},[76,2274,2275,2277,2280,2282],{"class":78,"line":104},[76,2276,457],{"class":82},[76,2278,2279],{"class":117}," DataTable ",[76,2281,482],{"class":82},[76,2283,2284],{"class":97}," './DataTable.vue'\n",[76,2286,2287],{"class":78,"line":114},[76,2288,174],{"emptyLinePlaceholder":173},[76,2290,2291,2293,2295],{"class":78,"line":144},[76,2292,1201],{"class":82},[76,2294,1204],{"class":125},[76,2296,1207],{"class":93},[76,2298,2299,2301,2303],{"class":78,"line":158},[76,2300,1212],{"class":117},[76,2302,122],{"class":121},[76,2304,1217],{"class":125},[76,2306,2307,2309,2311],{"class":78,"line":164},[76,2308,1222],{"class":117},[76,2310,122],{"class":121},[76,2312,1217],{"class":125},[76,2314,2315,2317,2319],{"class":78,"line":170},[76,2316,1231],{"class":117},[76,2318,122],{"class":121},[76,2320,1236],{"class":125},[76,2322,2323,2325,2327,2329,2331,2333,2335],{"class":78,"line":177},[76,2324,1241],{"class":117},[76,2326,122],{"class":121},[76,2328,662],{"class":97},[76,2330,1248],{"class":121},[76,2332,622],{"class":97},[76,2334,1248],{"class":121},[76,2336,1255],{"class":97},[76,2338,2339],{"class":78,"line":183},[76,2340,1260],{"class":93},[76,2342,2343],{"class":78,"line":189},[76,2344,174],{"emptyLinePlaceholder":173},[76,2346,2347,2349,2351,2353,2355,2357,2359,2361,2363],{"class":78,"line":195},[76,2348,494],{"class":82},[76,2350,532],{"class":497},[76,2352,122],{"class":121},[76,2354,1204],{"class":125},[76,2356,1277],{"class":93},[76,2358,501],{"class":121},[76,2360,504],{"class":93},[76,2362,1285],{"class":1284},[76,2364,525],{"class":93},[76,2366,2367],{"class":78,"line":201},[76,2368,174],{"emptyLinePlaceholder":173},[76,2370,2371,2373,2376,2378,2381,2384,2386,2389,2391,2394,2396,2398,2401,2403,2406,2408,2411,2413,2416],{"class":78,"line":233},[76,2372,494],{"class":82},[76,2374,2375],{"class":497}," money",[76,2377,501],{"class":121},[76,2379,2380],{"class":82}," new",[76,2382,2383],{"class":117}," Intl",[76,2385,1129],{"class":93},[76,2387,2388],{"class":107},"NumberFormat",[76,2390,687],{"class":93},[76,2392,2393],{"class":97},"'en'",[76,2395,135],{"class":93},[76,2397,460],{"class":93},[76,2399,2400],{"class":545}," style",[76,2402,122],{"class":93},[76,2404,2405],{"class":97}," 'currency'",[76,2407,135],{"class":93},[76,2409,2410],{"class":545}," currency",[76,2412,122],{"class":93},[76,2414,2415],{"class":97}," 'EUR'",[76,2417,2418],{"class":93}," })\n",[76,2420,2421],{"class":78,"line":263},[76,2422,167],{"class":82},[76,2424,2425],{"class":78,"line":269},[76,2426,174],{"emptyLinePlaceholder":173},[76,2428,2429],{"class":78,"line":275},[76,2430,180],{"class":82},[76,2432,2433,2436,2438,2440,2442,2444,2446,2449],{"class":78,"line":281},[76,2434,2435],{"class":82}," \u003CDataTable",[76,2437,761],{"class":86},[76,2439,94],{"class":93},[76,2441,766],{"class":97},[76,2443,769],{"class":86},[76,2445,94],{"class":93},[76,2447,2448],{"class":97},"\"['number', 'customer', 'amount', 'status']\"",[76,2450,101],{"class":82},[76,2452,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471],{"class":78,"line":287},[76,2454,781],{"class":82},[76,2456,1450],{"class":93},[76,2458,1654],{"class":86},[76,2460,94],{"class":93},[76,2462,804],{"class":97},[76,2464,807],{"class":93},[76,2466,810],{"class":117},[76,2468,466],{"class":93},[76,2470,804],{"class":97},[76,2472,101],{"class":82},[76,2474,2475],{"class":78,"line":309},[76,2476,2477],{"class":117}," {{ money.format(value) }}\n",[76,2479,2480],{"class":78,"line":329},[76,2481,832],{"class":82},[76,2483,2484,2486,2488,2491,2493,2495,2497,2499,2501,2503],{"class":78,"line":364},[76,2485,781],{"class":82},[76,2487,1450],{"class":93},[76,2489,2490],{"class":86},"cell-status",[76,2492,94],{"class":93},[76,2494,804],{"class":97},[76,2496,807],{"class":93},[76,2498,810],{"class":117},[76,2500,466],{"class":93},[76,2502,804],{"class":97},[76,2504,101],{"class":82},[76,2506,2507,2510,2513,2515,2518,2521,2523,2526,2528,2530],{"class":78,"line":370},[76,2508,2509],{"class":82}," \u003Cspan",[76,2511,2512],{"class":86}," class",[76,2514,94],{"class":93},[76,2516,2517],{"class":97},"\"pill\"",[76,2519,2520],{"class":86}," :data-status",[76,2522,94],{"class":93},[76,2524,2525],{"class":97},"\"value\"",[76,2527,254],{"class":82},[76,2529,824],{"class":117},[76,2531,2532],{"class":82},"\u003C/span>\n",[76,2534,2535],{"class":78,"line":375},[76,2536,832],{"class":82},[76,2538,2539],{"class":78,"line":381},[76,2540,2541],{"class":82}," \u003C/DataTable>\n",[76,2543,2544],{"class":78,"line":387},[76,2545,390],{"class":82},[432,2547,2548],{"v-slot:output":72},[2549,2550],"slots-typed-demo",{},[23,2552,2553,2554,1534,2557,856,2559,2561,2562,2565,2566,1534,2569,2572,2573,1129],{},"في ",[37,2555,2556],{},"#cell-amount",[37,2558,855],{},[37,2560,396],{},"، فيُمرَّر مباشرة إلى ",[37,2563,2564],{},"Intl.NumberFormat",". وفي ",[37,2567,2568],{},"#cell-status",[37,2570,2571],{},"'draft' | 'issued' | 'paid'",". ومنفذ لعمود غير موجود خطأ في فحص الأنواع، وكذلك اسم عمود ليس من مفاتيح ",[37,2574,1539],{},[23,2576,2577,2578,2581,2582,2585,2586,2589,2590,2592],{},"وتبقى الأسماء الديناميكية متاحة للمكوّن الأب. فإن حُسب الاسم من اتحاد، مثل ",[37,2579,2580],{},"#[`cell-${key}`]"," حيث نوع ",[37,2583,2584],{},"key"," هو ",[37,2587,2588],{},"'number' | 'customer'","، أخذ ",[37,2591,855],{}," اتحاد نوعَي العمودين.",[23,2594,2595,2596,2599,2600,2603,2604,1129],{},"وملاحظة عن القيد: كتبنا ",[37,2597,2598],{},"T extends object"," لا ",[37,2601,2602],{},"T extends Record\u003Cstring, unknown>",". فالواجهة (interface) لا تحمل توقيع فهرسة، ومع الصيغة الثانية تُرفض مصفوفة من النوع ",[37,2605,2606],{},"Invoice[]",[30,2608,2609],{"id":2609},"خاتمة",[23,2611,2612,2613,2615,2616,2618,2619,2621],{},"بالأسماء الديناميكية يوفّر جدولنا منفذًا لكل عمود. في ",[37,2614,63],{}," تُقبل الأسماء كسلاسل نصية بلا قيد، وتكون قيم الخلايا من النوع ",[37,2617,859],{}," بسبب نوع الصف المصرَّح به. وعندما نجعل الجدول عامًّا، تستنتج أدوات Vue أسماء المنافذ واتحاد أنواع الأعمدة. أما الأنواع المبنية من المفاتيح التي نمرّرها إلى ",[37,2620,43],{}," فتعطي منفذ كل عمود نوع القيمة الخاص به.",[30,2623,2625],{"id":2624},"فهرس-المصطلحات","فهرس المصطلحات",[2627,2628,2629,2642],"table",{},[2630,2631,2632],"thead",{},[2633,2634,2635,2639],"tr",{},[2636,2637,2638],"th",{},"إنجليزية",[2636,2640,2641],{},"عربية",[2643,2644,2645,2654,2662,2670,2678,2686,2694,2702,2710,2718,2726,2734],"tbody",{},[2633,2646,2647,2651],{},[2648,2649,2650],"td",{},"slot",[2648,2652,2653],{},"منفذ",[2633,2655,2656,2659],{},[2648,2657,2658],{},"scoped slot",[2648,2660,2661],{},"منفذ ذو نطاق",[2633,2663,2664,2667],{},[2648,2665,2666],{},"dynamic slot",[2648,2668,2669],{},"منفذ ديناميكي",[2633,2671,2672,2675],{},[2648,2673,2674],{},"slot props",[2648,2676,2677],{},"خاصيات المنفذ",[2633,2679,2680,2683],{},[2648,2681,2682],{},"generic component",[2648,2684,2685],{},"مكوّن عام",[2633,2687,2688,2691],{},[2648,2689,2690],{},"type parameter",[2648,2692,2693],{},"معامل نوع",[2633,2695,2696,2699],{},[2648,2697,2698],{},"type inference",[2648,2700,2701],{},"استنتاج الأنواع",[2633,2703,2704,2707],{},[2648,2705,2706],{},"union type",[2648,2708,2709],{},"نوع اتحادي",[2633,2711,2712,2715],{},[2648,2713,2714],{},"mapped type",[2648,2716,2717],{},"نوع يُبنى من المفاتيح",[2633,2719,2720,2723],{},[2648,2721,2722],{},"index signature",[2648,2724,2725],{},"توقيع فهرسة",[2633,2727,2728,2731],{},[2648,2729,2730],{},"fallback content",[2648,2732,2733],{},"محتوى افتراضي",[2633,2735,2736,2739],{},[2648,2737,2738],{},"macro",[2648,2740,2741],{},"ماكرو",[2743,2744,2745],"style",{},"html pre.shiki code .sZ9Zp, html code.shiki .sZ9Zp{--shiki-light:#994920;--shiki-default:#994920;--shiki-dark:#ECA457}html pre.shiki code .sSzyk, html code.shiki .sSzyk{--shiki-light:#5E4784;--shiki-default:#5E4784;--shiki-dark:#CFB0EA}html pre.shiki code .sXnUm, html code.shiki .sXnUm{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#96918C}html pre.shiki code .sgVH1, html code.shiki .sgVH1{--shiki-light:#3A6830;--shiki-default:#3A6830;--shiki-dark:#A5CF93}html pre.shiki code .sUqqj, html code.shiki .sUqqj{--shiki-light:#4A3170;--shiki-default:#4A3170;--shiki-dark:#D9BDF0}html pre.shiki code .sBiod, html code.shiki .sBiod{--shiki-light:#322C28;--shiki-default:#322C28;--shiki-dark:#DBD7D0}html pre.shiki code .sZ7qJ, html code.shiki .sZ7qJ{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#A39E98}html pre.shiki code .sHXsw, html code.shiki .sHXsw{--shiki-light:#006268;--shiki-default:#006268;--shiki-dark:#86CFD2}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ-0L, html code.shiki .sJ-0L{--shiki-light:#2D54A0;--shiki-default:#2D54A0;--shiki-dark:#93BDF5}html pre.shiki code .snYWn, html code.shiki .snYWn{--shiki-light:#624727;--shiki-default:#624727;--shiki-dark:#E2C69F}html pre.shiki code .s5c__, html code.shiki .s5c__{--shiki-light:#736D67;--shiki-light-font-style:italic;--shiki-default:#736D67;--shiki-default-font-style:italic;--shiki-dark:#979189;--shiki-dark-font-style:italic}",{"title":72,"searchDepth":104,"depth":104,"links":2747},[2748,2749,2750,2751,2752,2753],{"id":32,"depth":104,"text":32},{"id":50,"depth":104,"text":51},{"id":867,"depth":104,"text":868},{"id":1559,"depth":104,"text":1560},{"id":2609,"depth":104,"text":2609},{"id":2624,"depth":104,"text":2625},"2023-08-29","كيف تُسمّى المنافذ ديناميكيًا في Vue.js، وكيف تضبط المكوّنات العامة وماكرو defineSlots أنواعها منذ الإصدار 3.3، فيعرف المحرّر ما يستقبله كل منفذ.","md",null,{"head":2759},[2760,2763,2767,2771,2774,2778,2782,2786,2789,2793],{"meta":2761},{"name":2762,"content":11},"description",{"meta":2764},{"name":2765,"content":2766},"keywords","Vue.js, slots, dynamic slots, generic slots, generic components, defineSlots, script setup, TypeScript, Vue 3.3",{"meta":2768},{"name":2769,"content":2770},"author","Boussadjra Brahim",{"meta":2772},{"name":2773,"content":2754},"date",{"meta":2775},{"name":2776,"content":2777},"lastmod","2026-10-05",{"meta":2779},{"name":2780,"content":2781},"draft",false,{"meta":2783},{"name":2784,"content":2785},"slug","vue-dynamic-generic-slots",{"meta":2787},{"name":2788,"content":25},"tags",{"meta":2790},{"name":2791,"content":2792},"categories","Vue.js, Slots",{"meta":2794},{"name":2795,"content":11},"summary","/ar/blog/dynamic-generic-slots",{"title":11,"description":2755},"ar/blog/dynamic-generic-slots/index",[2800,2801,2802,2803,43,2804,2805],"Vue.js","Slots","Dynamic slots","Generic components","TypeScript","Vue 3.3","Xa78CoaRbteHs5lvz-7vBJOEI_ETpDCEPp6R70l8nmw","ar",{"id":2809,"title":2810,"body":2811,"date":5680,"description":5681,"extension":2756,"img":2757,"meta":5682,"navigation":173,"path":5708,"seo":5709,"stem":5710,"tags":5711,"__hash__":5716,"lang":2807},"blogAr/ar/blog/from-renderless-component-to-composable-function/index.md","Vue.js - الارتقاء من المكونات عديمة التصيير إلى الدوال التركيبية",{"type":13,"value":2812,"toc":5664},[2813,2816,2821,2823,2825,2828,2832,2835,2839,2849,2853,2867,2875,2880,3520,3523,3761,3765,3773,4233,4237,4246,4249,4635,4638,4642,4645,4648,4651,4943,4946,5152,5158,5161,5164,5586,5589,5592,5594,5661],[16,2814,2810],{"id":2815},"vuejs-الارتقاء-من-المكونات-عديمة-التصيير-إلى-الدوال-التركيبية",[20,2817,2818],{},[23,2819,2820],{},"Vue.js, Renderless Component, Composable function, Composition API, Vue 3, Reusability",[27,2822],{},[30,2824,32],{"id":32},[23,2826,2827],{},"يمكن عرض نتائج الإكمال التلقائي في قائمة أو شبكة بطاقات مع استعمال منطق البحث نفسه. سنبني هذا المنطق في مكوّن عديم التصيير، ثم ننقله إلى دالة تركيبية لنقارن طريقة ربط كل منهما بالقالب.",[30,2829,2831],{"id":2830},"ما-هو-المكون-عديم-التصيير","ما هو المكون عديم التصيير؟",[23,2833,2834],{},"المكوّن عديم التصيير مكوّن لا يصيّر عناصر HTML خاصة به. مهمّته أن يوفّر المنطق والبيانات لمن يستعمله: يستقبل الخاصيات، ويكشف البيانات والدوال عبر المنافذ، ويمكنه إطلاق أحداث. ويترك للمكوّن الأب أن يحدّد ما يُعرض عبر المنافذ ذات النطاق.",[30,2836,2838],{"id":2837},"ما-فائدة-استخدام-المكون-عديم-التصيير","ما فائدة استخدام المكون عديم التصيير؟",[23,2840,2841,2842,1129],{},"فائدته الأولى إعادة الاستعمال: يُكتب المنطق مرة واحدة ويُستعمل في مواضع كثيرة من التطبيق. والثانية حرية العرض: يتكيّف المكوّن مع حالات ومتطلبات مختلفة، لأن الشكل ليس جزءًا منه. مثال ذلك حقل إدخال يتولّى التحقق من القيمة، ويكشف للمكوّن الأب خاصيات المنفذ اللازمة ليعرض هو رسائل التحقق بالشكل الذي يريد. ولمزيد من التفصيل في هذا المثال، راجع مقالة ",[2843,2844,2848],"a",{"href":2845,"rel":2846},"https://www.digitalocean.com/community/tutorials/vuejs-renderless-components",[2847],"nofollow","Renderless components pattern in Vue 3",[30,2850,2852],{"id":2851},"كيف-تنشئ-مكونًا-عديم-التصيير-في-vuejs","كيف تنشئ مكونًا عديم التصيير في Vue.js؟",[23,2854,2855,2856,2862,2863,2866],{},"لنبيّن ذلك بمثال: مكوّن إكمال تلقائي ",[2857,2858,2859],"strong",{},[37,2860,2861],{},"AutoComplete"," يبحث عن عنصر في قائمة. يستقبل المكوّن قائمة العناصر، ودالة بحث اختيارية، في خاصيتين. ويحتفظ هو باستعلام البحث، فيصفّي العناصر كلما تغيّر الاستعلام، ويمرّر النتائج إلى منفذ يصيّرها فيه المكوّن الأب كما يشاء. ويُطلق حدث ",[37,2864,2865],{},"select"," ليعرف المكوّن الأب أيّ عنصر اختير.",[23,2868,2869,2870,2874],{},"يكشف منفذ ",[2857,2871,2872],{},[37,2873,2861],{}," استعلام البحث والنتائج ودالتين: واحدة لتحديث الاستعلام، وأخرى لاختيار عنصر. يستعملها المكوّن الأب لربط حقل الإدخال وأزرار النتائج بمنطق البحث.",[2876,2877,2879],"h3",{"id":2878},"مثال-بسيط","مثال بسيط",[66,2881,2893],{"className":2882,"code":2883,"filename":2884,"highlights":2885,"language":2892,"meta":72,"style":72},"language-ts shiki shiki-themes site-light site-light site-dark","import { defineComponent, ref } from 'vue'\n\nconst AutoComplete = defineComponent({\n props: {\n items: {\n type: Array,\n required: true,\n },\n searchFn: {\n type: Function,\n required: false,\n },\n },\n emits: ['select'],\n setup(props, { emit, slots }) {\n const searchQuery = ref('') // استعلام البحث الذي يكتبه المستخدم\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",[2886,2887,2888,2889,2890,2891],42,43,44,45,46,47,"ts",[37,2894,2895,2914,2918,2932,2941,2950,2963,2975,2980,2989,3000,3011,3015,3020,3035,3061,3082,3099,3115,3144,3158,3163,3168,3172,3191,3213,3244,3274,3279,3284,3288,3312,3326,3334,3338,3342,3366,3382,3395,3408,3413,3418,3440,3455,3470,3478,3486,3492,3497,3503,3508],{"__ignoreMap":72},[76,2896,2897,2899,2901,2904,2906,2908,2910,2912],{"class":78,"line":79},[76,2898,457],{"class":82},[76,2900,460],{"class":93},[76,2902,2903],{"class":117}," defineComponent",[76,2905,135],{"class":93},[76,2907,463],{"class":117},[76,2909,466],{"class":93},[76,2911,469],{"class":82},[76,2913,472],{"class":97},[76,2915,2916],{"class":78,"line":104},[76,2917,174],{"emptyLinePlaceholder":173},[76,2919,2920,2922,2925,2927,2929],{"class":78,"line":114},[76,2921,494],{"class":82},[76,2923,2924],{"class":497}," AutoComplete",[76,2926,501],{"class":121},[76,2928,2903],{"class":107},[76,2930,2931],{"class":93},"({\n",[76,2933,2934,2937,2939],{"class":78,"line":144},[76,2935,2936],{"class":545}," props",[76,2938,122],{"class":93},[76,2940,1207],{"class":93},[76,2942,2943,2946,2948],{"class":78,"line":158},[76,2944,2945],{"class":545}," items",[76,2947,122],{"class":93},[76,2949,1207],{"class":93},[76,2951,2952,2955,2957,2960],{"class":78,"line":164},[76,2953,2954],{"class":545}," type",[76,2956,122],{"class":93},[76,2958,2959],{"class":117}," Array",[76,2961,2962],{"class":93},",\n",[76,2964,2965,2968,2970,2973],{"class":78,"line":170},[76,2966,2967],{"class":545}," required",[76,2969,122],{"class":93},[76,2971,2972],{"class":497}," true",[76,2974,2962],{"class":93},[76,2976,2977],{"class":78,"line":177},[76,2978,2979],{"class":93}," },\n",[76,2981,2982,2985,2987],{"class":78,"line":183},[76,2983,2984],{"class":545}," searchFn",[76,2986,122],{"class":93},[76,2988,1207],{"class":93},[76,2990,2991,2993,2995,2998],{"class":78,"line":189},[76,2992,2954],{"class":545},[76,2994,122],{"class":93},[76,2996,2997],{"class":117}," Function",[76,2999,2962],{"class":93},[76,3001,3002,3004,3006,3009],{"class":78,"line":195},[76,3003,2967],{"class":545},[76,3005,122],{"class":93},[76,3007,3008],{"class":497}," false",[76,3010,2962],{"class":93},[76,3012,3013],{"class":78,"line":201},[76,3014,2979],{"class":93},[76,3016,3017],{"class":78,"line":233},[76,3018,3019],{"class":93}," },\n",[76,3021,3022,3025,3027,3029,3032],{"class":78,"line":263},[76,3023,3024],{"class":545}," emits",[76,3026,122],{"class":93},[76,3028,504],{"class":93},[76,3030,3031],{"class":97},"'select'",[76,3033,3034],{"class":93},"],\n",[76,3036,3037,3040,3042,3044,3046,3048,3051,3053,3056,3059],{"class":78,"line":269},[76,3038,3039],{"class":107}," setup",[76,3041,687],{"class":93},[76,3043,964],{"class":117},[76,3045,135],{"class":93},[76,3047,460],{"class":93},[76,3049,3050],{"class":117}," emit",[76,3052,135],{"class":93},[76,3054,3055],{"class":117}," slots ",[76,3057,3058],{"class":93},"})",[76,3060,1207],{"class":93},[76,3062,3063,3066,3069,3071,3073,3075,3077,3079],{"class":78,"line":275},[76,3064,3065],{"class":82}," const",[76,3067,3068],{"class":497}," searchQuery",[76,3070,501],{"class":121},[76,3072,684],{"class":107},[76,3074,687],{"class":93},[76,3076,1307],{"class":97},[76,3078,1970],{"class":93},[76,3080,3081],{"class":1284}," // استعلام البحث الذي يكتبه المستخدم\n",[76,3083,3084,3086,3089,3091,3093,3096],{"class":78,"line":281},[76,3085,3065],{"class":82},[76,3087,3088],{"class":497}," results",[76,3090,501],{"class":121},[76,3092,684],{"class":107},[76,3094,3095],{"class":93},"([])",[76,3097,3098],{"class":1284}," // نتائج البحث عن الاستعلام الحالي\n",[76,3100,3101,3103,3106,3108,3111,3113],{"class":78,"line":287},[76,3102,3065],{"class":82},[76,3104,3105],{"class":107}," onSearch",[76,3107,501],{"class":121},[76,3109,3110],{"class":93}," ()",[76,3112,1797],{"class":82},[76,3114,1207],{"class":93},[76,3116,3117,3120,3122,3125,3127,3129,3131,3134,3137,3140,3142],{"class":78,"line":309},[76,3118,3119],{"class":82}," if",[76,3121,1623],{"class":93},[76,3123,3124],{"class":117},"searchQuery",[76,3126,1129],{"class":93},[76,3128,855],{"class":545},[76,3130,1129],{"class":93},[76,3132,3133],{"class":545},"length",[76,3135,3136],{"class":121}," ===",[76,3138,3139],{"class":497}," 0",[76,3141,1970],{"class":93},[76,3143,1207],{"class":93},[76,3145,3146,3149,3151,3153,3155],{"class":78,"line":329},[76,3147,3148],{"class":117}," results",[76,3150,1129],{"class":93},[76,3152,855],{"class":545},[76,3154,501],{"class":121},[76,3156,3157],{"class":93}," []\n",[76,3159,3160],{"class":78,"line":364},[76,3161,3162],{"class":82}," return\n",[76,3164,3165],{"class":78,"line":370},[76,3166,3167],{"class":93}," }\n",[76,3169,3170],{"class":78,"line":375},[76,3171,174],{"emptyLinePlaceholder":173},[76,3173,3174,3177,3179,3181,3183,3186,3188],{"class":78,"line":381},[76,3175,3176],{"class":117}," results",[76,3178,1129],{"class":93},[76,3180,855],{"class":545},[76,3182,501],{"class":121},[76,3184,3185],{"class":117}," props",[76,3187,1129],{"class":93},[76,3189,3190],{"class":545},"searchFn\n",[76,3192,3193,3196,3198,3200,3203,3205,3207,3209,3211],{"class":78,"line":387},[76,3194,3195],{"class":121}," ?",[76,3197,3185],{"class":117},[76,3199,1129],{"class":93},[76,3201,3202],{"class":107},"searchFn",[76,3204,687],{"class":93},[76,3206,3124],{"class":117},[76,3208,1129],{"class":93},[76,3210,855],{"class":545},[76,3212,693],{"class":93},[76,3214,3215,3218,3220,3222,3224,3226,3228,3231,3233,3235,3238,3240,3242],{"class":78,"line":1480},[76,3216,3217],{"class":121}," :",[76,3219,3185],{"class":117},[76,3221,1129],{"class":93},[76,3223,1138],{"class":545},[76,3225,1129],{"class":93},[76,3227,1336],{"class":107},[76,3229,3230],{"class":93},"((",[76,3232,1453],{"class":117},[76,3234,122],{"class":121},[76,3236,3237],{"class":125}," any",[76,3239,1970],{"class":93},[76,3241,1797],{"class":82},[76,3243,1207],{"class":93},[76,3245,3246,3249,3251,3253,3255,3257,3259,3261,3263,3265,3267,3269,3271],{"class":78,"line":1485},[76,3247,3248],{"class":82}," return",[76,3250,971],{"class":117},[76,3252,1129],{"class":93},[76,3254,1356],{"class":107},[76,3256,1359],{"class":93},[76,3258,1362],{"class":107},[76,3260,687],{"class":93},[76,3262,3124],{"class":117},[76,3264,1129],{"class":93},[76,3266,855],{"class":545},[76,3268,1129],{"class":93},[76,3270,1356],{"class":107},[76,3272,3273],{"class":93},"())\n",[76,3275,3276],{"class":78,"line":1497},[76,3277,3278],{"class":93}," })\n",[76,3280,3281],{"class":78,"line":1509},[76,3282,3283],{"class":93}," }\n",[76,3285,3286],{"class":78,"line":1514},[76,3287,174],{"emptyLinePlaceholder":173},[76,3289,3290,3292,3295,3297,3299,3302,3304,3306,3308,3310],{"class":78,"line":1520},[76,3291,3065],{"class":82},[76,3293,3294],{"class":107}," onSearchQueryChange",[76,3296,501],{"class":121},[76,3298,1623],{"class":93},[76,3300,3301],{"class":117},"val",[76,3303,122],{"class":121},[76,3305,152],{"class":125},[76,3307,1970],{"class":93},[76,3309,1797],{"class":82},[76,3311,1207],{"class":93},[76,3313,3314,3317,3319,3321,3323],{"class":78,"line":2141},[76,3315,3316],{"class":117}," searchQuery",[76,3318,1129],{"class":93},[76,3320,855],{"class":545},[76,3322,501],{"class":121},[76,3324,3325],{"class":117}," val\n",[76,3327,3328,3331],{"class":78,"line":2160},[76,3329,3330],{"class":107}," onSearch",[76,3332,3333],{"class":93},"()\n",[76,3335,3336],{"class":78,"line":2190},[76,3337,3283],{"class":93},[76,3339,3340],{"class":78,"line":2195},[76,3341,174],{"emptyLinePlaceholder":173},[76,3343,3344,3346,3349,3351,3353,3356,3358,3360,3362,3364],{"class":78,"line":2200},[76,3345,3065],{"class":82},[76,3347,3348],{"class":107}," select",[76,3350,501],{"class":121},[76,3352,1623],{"class":93},[76,3354,3355],{"class":117},"result",[76,3357,122],{"class":121},[76,3359,3237],{"class":125},[76,3361,1970],{"class":93},[76,3363,1797],{"class":82},[76,3365,1207],{"class":93},[76,3367,3368,3371,3373,3375,3377,3380],{"class":78,"line":2205},[76,3369,3370],{"class":107}," emit",[76,3372,687],{"class":93},[76,3374,3031],{"class":97},[76,3376,135],{"class":93},[76,3378,3379],{"class":117}," result",[76,3381,693],{"class":93},[76,3383,3384,3386,3388,3390,3392],{"class":78,"line":2210},[76,3385,3316],{"class":117},[76,3387,1129],{"class":93},[76,3389,855],{"class":545},[76,3391,501],{"class":121},[76,3393,3394],{"class":97}," ''\n",[76,3396,3398,3400,3402,3404,3406],{"class":78,"line":3397},39,[76,3399,3176],{"class":117},[76,3401,1129],{"class":93},[76,3403,855],{"class":545},[76,3405,501],{"class":121},[76,3407,3157],{"class":93},[76,3409,3411],{"class":78,"line":3410},40,[76,3412,3283],{"class":93},[76,3414,3416],{"class":78,"line":3415},41,[76,3417,174],{"emptyLinePlaceholder":173},[76,3419,3422,3425,3427,3429,3432,3434,3437],{"class":3420,"line":2886},[78,3421],"highlight",[76,3423,3424],{"class":82}," return",[76,3426,3110],{"class":93},[76,3428,1797],{"class":82},[76,3430,3431],{"class":117}," slots",[76,3433,1129],{"class":93},[76,3435,3436],{"class":107},"default",[76,3438,3439],{"class":93},"?.({\n",[76,3441,3443,3445,3447,3449,3451,3453],{"class":3442,"line":2887},[78,3421],[76,3444,3316],{"class":545},[76,3446,122],{"class":93},[76,3448,3068],{"class":117},[76,3450,1129],{"class":93},[76,3452,855],{"class":545},[76,3454,2962],{"class":93},[76,3456,3458,3460,3462,3464,3466,3468],{"class":3457,"line":2888},[78,3421],[76,3459,3176],{"class":545},[76,3461,122],{"class":93},[76,3463,3088],{"class":117},[76,3465,1129],{"class":93},[76,3467,855],{"class":545},[76,3469,2962],{"class":93},[76,3471,3473,3476],{"class":3472,"line":2889},[78,3421],[76,3474,3475],{"class":117}," onSearchQueryChange",[76,3477,2962],{"class":93},[76,3479,3481,3484],{"class":3480,"line":2890},[78,3421],[76,3482,3483],{"class":117}," select",[76,3485,2962],{"class":93},[76,3487,3489],{"class":3488,"line":2891},[78,3421],[76,3490,3491],{"class":93}," })\n",[76,3493,3495],{"class":78,"line":3494},48,[76,3496,3019],{"class":93},[76,3498,3500],{"class":78,"line":3499},49,[76,3501,3502],{"class":93},"})\n",[76,3504,3506],{"class":78,"line":3505},50,[76,3507,174],{"emptyLinePlaceholder":173},[76,3509,3511,3514,3517],{"class":78,"line":3510},51,[76,3512,3513],{"class":82},"export",[76,3515,3516],{"class":82}," default",[76,3518,3519],{"class":117}," AutoComplete\n",[23,3521,3522],{},"نستعمل المكوّن هنا لتصيير حقل إدخال يُكتب فيه استعلام البحث، وتحته النتائج في قائمة غير مرتّبة.",[429,3524,3525,3756],{},[432,3526,3527],{"v-slot:code":72},[66,3528,3530],{"className":68,"code":3529,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport AutoComplete from './AutoComplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"p-2\">\n \u003CAutoComplete v-slot=\"{ searchQuery, results, onSearchQueryChange }\" :items=\"items\">\n \u003Cinput\n class=\"bg-transparent p-2 border rounded\"\n type=\"text\"\n :value=\"searchQuery\"\n @input=\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n />\n \u003Cul>\n \u003Cli v-for=\"result in results\" :key=\"result\">\n {{ result }}\n \u003C/li>\n \u003C/ul>\n \u003C/AutoComplete>\n \u003C/div>\n\u003C/template>\n",[37,3531,3532,3546,3558,3562,3603,3607,3611,3615,3629,3651,3656,3666,3676,3686,3696,3701,3706,3727,3732,3737,3742,3747,3752],{"__ignoreMap":72},[76,3533,3534,3536,3538,3540,3542,3544],{"class":78,"line":79},[76,3535,83],{"class":82},[76,3537,87],{"class":86},[76,3539,90],{"class":86},[76,3541,94],{"class":93},[76,3543,98],{"class":97},[76,3545,101],{"class":82},[76,3547,3548,3550,3553,3555],{"class":78,"line":104},[76,3549,457],{"class":82},[76,3551,3552],{"class":117}," AutoComplete ",[76,3554,482],{"class":82},[76,3556,3557],{"class":97}," './AutoComplete'\n",[76,3559,3560],{"class":78,"line":114},[76,3561,174],{"emptyLinePlaceholder":173},[76,3563,3564,3566,3569,3571,3573,3576,3578,3581,3583,3586,3588,3591,3593,3596,3598,3601],{"class":78,"line":144},[76,3565,494],{"class":82},[76,3567,3568],{"class":497}," items",[76,3570,501],{"class":121},[76,3572,504],{"class":93},[76,3574,3575],{"class":97},"'Vue.js'",[76,3577,135],{"class":93},[76,3579,3580],{"class":97}," 'React'",[76,3582,135],{"class":93},[76,3584,3585],{"class":97}," 'Angular'",[76,3587,135],{"class":93},[76,3589,3590],{"class":97}," 'Svelte'",[76,3592,135],{"class":93},[76,3594,3595],{"class":97}," 'Ember'",[76,3597,135],{"class":93},[76,3599,3600],{"class":97}," 'Meteor'",[76,3602,525],{"class":93},[76,3604,3605],{"class":78,"line":158},[76,3606,167],{"class":82},[76,3608,3609],{"class":78,"line":164},[76,3610,174],{"emptyLinePlaceholder":173},[76,3612,3613],{"class":78,"line":170},[76,3614,180],{"class":82},[76,3616,3617,3620,3622,3624,3627],{"class":78,"line":177},[76,3618,3619],{"class":82}," \u003Cdiv",[76,3621,2512],{"class":86},[76,3623,94],{"class":93},[76,3625,3626],{"class":97},"\"p-2\"",[76,3628,101],{"class":82},[76,3630,3631,3634,3637,3639,3642,3644,3646,3649],{"class":78,"line":183},[76,3632,3633],{"class":82}," \u003CAutoComplete",[76,3635,3636],{"class":86}," v-slot",[76,3638,94],{"class":93},[76,3640,3641],{"class":97},"\"{ searchQuery, results, onSearchQueryChange }\"",[76,3643,1436],{"class":86},[76,3645,94],{"class":93},[76,3647,3648],{"class":97},"\"items\"",[76,3650,101],{"class":82},[76,3652,3653],{"class":78,"line":189},[76,3654,3655],{"class":82}," \u003Cinput\n",[76,3657,3658,3661,3663],{"class":78,"line":195},[76,3659,3660],{"class":86}," class",[76,3662,94],{"class":93},[76,3664,3665],{"class":97},"\"bg-transparent p-2 border rounded\"\n",[76,3667,3668,3671,3673],{"class":78,"line":201},[76,3669,3670],{"class":86}," type",[76,3672,94],{"class":93},[76,3674,3675],{"class":97},"\"text\"\n",[76,3677,3678,3681,3683],{"class":78,"line":233},[76,3679,3680],{"class":86}," :value",[76,3682,94],{"class":93},[76,3684,3685],{"class":97},"\"searchQuery\"\n",[76,3687,3688,3691,3693],{"class":78,"line":263},[76,3689,3690],{"class":86}," @input",[76,3692,94],{"class":93},[76,3694,3695],{"class":97},"\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n",[76,3697,3698],{"class":78,"line":269},[76,3699,3700],{"class":82}," />\n",[76,3702,3703],{"class":78,"line":275},[76,3704,3705],{"class":82}," \u003Cul>\n",[76,3707,3708,3711,3713,3715,3718,3720,3722,3725],{"class":78,"line":281},[76,3709,3710],{"class":82}," \u003Cli",[76,3712,207],{"class":86},[76,3714,94],{"class":93},[76,3716,3717],{"class":97},"\"result in results\"",[76,3719,215],{"class":86},[76,3721,94],{"class":93},[76,3723,3724],{"class":97},"\"result\"",[76,3726,101],{"class":82},[76,3728,3729],{"class":78,"line":287},[76,3730,3731],{"class":117}," {{ result }}\n",[76,3733,3734],{"class":78,"line":309},[76,3735,3736],{"class":82}," \u003C/li>\n",[76,3738,3739],{"class":78,"line":329},[76,3740,3741],{"class":82}," \u003C/ul>\n",[76,3743,3744],{"class":78,"line":364},[76,3745,3746],{"class":82}," \u003C/AutoComplete>\n",[76,3748,3749],{"class":78,"line":370},[76,3750,3751],{"class":82}," \u003C/div>\n",[76,3753,3754],{"class":78,"line":375},[76,3755,390],{"class":82},[432,3757,3758],{"v-slot:output":72},[3759,3760],"basic",{},[2876,3762,3764],{"id":3763},"مثال-متقدم","مثال متقدم",[23,3766,3767,3768,3772],{},"لنفترض أن لدينا قائمة أطر عمل مع شعاراتها، ونريد عرضها شبكةً من البطاقات. العناصر هنا كائنات لا نصوص، فنمرّر إلى ",[2857,3769,3770],{},[37,3771,2861],{}," دالة بحث خاصة تبحث في اسم الإطار.",[429,3774,3775,4228],{},[432,3776,3777],{"v-slot:code":72},[66,3778,3780],{"className":68,"code":3779,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport AutoComplete from './AutoComplete'\n\nconst items = [\n { name: 'Vue.js', logo: '/blog-img/logos/vue.svg' },\n { name: 'React', logo: '/blog-img/logos/react.svg' },\n { name: 'Angular', logo: '/blog-img/logos/angular.svg' },\n { name: 'Svelte', logo: '/blog-img/logos/svelte.svg' },\n { name: 'Ember', logo: '/blog-img/logos/ember.svg' },\n { name: 'Meteor', logo: '/blog-img/logos/meteor.svg' },\n]\n\nconst filterLibs = (searchQuery: string) => {\n return items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()))\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"p-2\">\n \u003CAutoComplete v-slot=\"{ searchQuery, results, onSearchQueryChange }\" :items=\"items\" :search-fn=\"filterLibs\">\n \u003Cinput\n class=\"bg-transparent p-2 border rounded\"\n type=\"text\"\n :value=\"searchQuery\"\n @input=\"onSearchQueryChange(($event.target as HTMLInputElement).value)\"\n />\n \u003Cdiv class=\"grid grid-cols-3 gap-4 p-4\">\n \u003Cdiv v-for=\"result in results\" :key=\"result.name\" class=\"rounded shadow p-4\">\n \u003Cimg :src=\"result.logo\" :alt=\"result.name\" class=\"w-24 h-24 mx-auto\" />\n \u003Cp class=\"text-center\">{{ result.name }}\u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/AutoComplete>\n \u003C/div>\n\u003C/template>\n",[37,3781,3782,3796,3806,3810,3820,3843,3864,3885,3906,3927,3948,3952,3956,3979,4023,4027,4031,4035,4039,4051,4077,4081,4089,4097,4105,4113,4117,4131,4158,4187,4206,4211,4216,4220,4224],{"__ignoreMap":72},[76,3783,3784,3786,3788,3790,3792,3794],{"class":78,"line":79},[76,3785,83],{"class":82},[76,3787,87],{"class":86},[76,3789,90],{"class":86},[76,3791,94],{"class":93},[76,3793,98],{"class":97},[76,3795,101],{"class":82},[76,3797,3798,3800,3802,3804],{"class":78,"line":104},[76,3799,457],{"class":82},[76,3801,3552],{"class":117},[76,3803,482],{"class":82},[76,3805,3557],{"class":97},[76,3807,3808],{"class":78,"line":114},[76,3809,174],{"emptyLinePlaceholder":173},[76,3811,3812,3814,3816,3818],{"class":78,"line":144},[76,3813,494],{"class":82},[76,3815,3568],{"class":497},[76,3817,501],{"class":121},[76,3819,537],{"class":93},[76,3821,3822,3824,3826,3828,3831,3833,3836,3838,3841],{"class":78,"line":158},[76,3823,542],{"class":93},[76,3825,1066],{"class":545},[76,3827,122],{"class":93},[76,3829,3830],{"class":97}," 'Vue.js'",[76,3832,135],{"class":93},[76,3834,3835],{"class":545}," logo",[76,3837,122],{"class":93},[76,3839,3840],{"class":97}," '/blog-img/logos/vue.svg'",[76,3842,584],{"class":93},[76,3844,3845,3847,3849,3851,3853,3855,3857,3859,3862],{"class":78,"line":164},[76,3846,542],{"class":93},[76,3848,1066],{"class":545},[76,3850,122],{"class":93},[76,3852,3580],{"class":97},[76,3854,135],{"class":93},[76,3856,3835],{"class":545},[76,3858,122],{"class":93},[76,3860,3861],{"class":97}," '/blog-img/logos/react.svg'",[76,3863,584],{"class":93},[76,3865,3866,3868,3870,3872,3874,3876,3878,3880,3883],{"class":78,"line":170},[76,3867,542],{"class":93},[76,3869,1066],{"class":545},[76,3871,122],{"class":93},[76,3873,3585],{"class":97},[76,3875,135],{"class":93},[76,3877,3835],{"class":545},[76,3879,122],{"class":93},[76,3881,3882],{"class":97}," '/blog-img/logos/angular.svg'",[76,3884,584],{"class":93},[76,3886,3887,3889,3891,3893,3895,3897,3899,3901,3904],{"class":78,"line":177},[76,3888,542],{"class":93},[76,3890,1066],{"class":545},[76,3892,122],{"class":93},[76,3894,3590],{"class":97},[76,3896,135],{"class":93},[76,3898,3835],{"class":545},[76,3900,122],{"class":93},[76,3902,3903],{"class":97}," '/blog-img/logos/svelte.svg'",[76,3905,584],{"class":93},[76,3907,3908,3910,3912,3914,3916,3918,3920,3922,3925],{"class":78,"line":183},[76,3909,542],{"class":93},[76,3911,1066],{"class":545},[76,3913,122],{"class":93},[76,3915,3595],{"class":97},[76,3917,135],{"class":93},[76,3919,3835],{"class":545},[76,3921,122],{"class":93},[76,3923,3924],{"class":97}," '/blog-img/logos/ember.svg'",[76,3926,584],{"class":93},[76,3928,3929,3931,3933,3935,3937,3939,3941,3943,3946],{"class":78,"line":189},[76,3930,542],{"class":93},[76,3932,1066],{"class":545},[76,3934,122],{"class":93},[76,3936,3600],{"class":97},[76,3938,135],{"class":93},[76,3940,3835],{"class":545},[76,3942,122],{"class":93},[76,3944,3945],{"class":97}," '/blog-img/logos/meteor.svg'",[76,3947,584],{"class":93},[76,3949,3950],{"class":78,"line":195},[76,3951,525],{"class":93},[76,3953,3954],{"class":78,"line":201},[76,3955,174],{"emptyLinePlaceholder":173},[76,3957,3958,3960,3963,3965,3967,3969,3971,3973,3975,3977],{"class":78,"line":233},[76,3959,494],{"class":82},[76,3961,3962],{"class":107}," filterLibs",[76,3964,501],{"class":121},[76,3966,1623],{"class":93},[76,3968,3124],{"class":117},[76,3970,122],{"class":121},[76,3972,152],{"class":125},[76,3974,1970],{"class":93},[76,3976,1797],{"class":82},[76,3978,1207],{"class":93},[76,3980,3981,3984,3986,3988,3990,3992,3995,3997,3999,4001,4004,4006,4008,4010,4012,4014,4016,4018,4020],{"class":78,"line":263},[76,3982,3983],{"class":82}," return",[76,3985,3568],{"class":117},[76,3987,1129],{"class":93},[76,3989,1336],{"class":107},[76,3991,687],{"class":93},[76,3993,3994],{"class":117},"item ",[76,3996,1344],{"class":82},[76,3998,971],{"class":117},[76,4000,1129],{"class":93},[76,4002,4003],{"class":545},"name",[76,4005,1129],{"class":93},[76,4007,1356],{"class":107},[76,4009,1359],{"class":93},[76,4011,1362],{"class":107},[76,4013,687],{"class":93},[76,4015,3124],{"class":117},[76,4017,1129],{"class":93},[76,4019,1356],{"class":107},[76,4021,4022],{"class":93},"()))\n",[76,4024,4025],{"class":78,"line":269},[76,4026,1260],{"class":93},[76,4028,4029],{"class":78,"line":275},[76,4030,167],{"class":82},[76,4032,4033],{"class":78,"line":281},[76,4034,174],{"emptyLinePlaceholder":173},[76,4036,4037],{"class":78,"line":287},[76,4038,180],{"class":82},[76,4040,4041,4043,4045,4047,4049],{"class":78,"line":309},[76,4042,3619],{"class":82},[76,4044,2512],{"class":86},[76,4046,94],{"class":93},[76,4048,3626],{"class":97},[76,4050,101],{"class":82},[76,4052,4053,4055,4057,4059,4061,4063,4065,4067,4070,4072,4075],{"class":78,"line":329},[76,4054,3633],{"class":82},[76,4056,3636],{"class":86},[76,4058,94],{"class":93},[76,4060,3641],{"class":97},[76,4062,1436],{"class":86},[76,4064,94],{"class":93},[76,4066,3648],{"class":97},[76,4068,4069],{"class":86}," :search-fn",[76,4071,94],{"class":93},[76,4073,4074],{"class":97},"\"filterLibs\"",[76,4076,101],{"class":82},[76,4078,4079],{"class":78,"line":364},[76,4080,3655],{"class":82},[76,4082,4083,4085,4087],{"class":78,"line":370},[76,4084,3660],{"class":86},[76,4086,94],{"class":93},[76,4088,3665],{"class":97},[76,4090,4091,4093,4095],{"class":78,"line":375},[76,4092,3670],{"class":86},[76,4094,94],{"class":93},[76,4096,3675],{"class":97},[76,4098,4099,4101,4103],{"class":78,"line":381},[76,4100,3680],{"class":86},[76,4102,94],{"class":93},[76,4104,3685],{"class":97},[76,4106,4107,4109,4111],{"class":78,"line":387},[76,4108,3690],{"class":86},[76,4110,94],{"class":93},[76,4112,3695],{"class":97},[76,4114,4115],{"class":78,"line":1480},[76,4116,3700],{"class":82},[76,4118,4119,4122,4124,4126,4129],{"class":78,"line":1485},[76,4120,4121],{"class":82}," \u003Cdiv",[76,4123,2512],{"class":86},[76,4125,94],{"class":93},[76,4127,4128],{"class":97},"\"grid grid-cols-3 gap-4 p-4\"",[76,4130,101],{"class":82},[76,4132,4133,4136,4138,4140,4142,4144,4146,4149,4151,4153,4156],{"class":78,"line":1497},[76,4134,4135],{"class":82}," \u003Cdiv",[76,4137,207],{"class":86},[76,4139,94],{"class":93},[76,4141,3717],{"class":97},[76,4143,215],{"class":86},[76,4145,94],{"class":93},[76,4147,4148],{"class":97},"\"result.name\"",[76,4150,2512],{"class":86},[76,4152,94],{"class":93},[76,4154,4155],{"class":97},"\"rounded shadow p-4\"",[76,4157,101],{"class":82},[76,4159,4160,4163,4166,4168,4171,4174,4176,4178,4180,4182,4185],{"class":78,"line":1509},[76,4161,4162],{"class":82}," \u003Cimg",[76,4164,4165],{"class":86}," :src",[76,4167,94],{"class":93},[76,4169,4170],{"class":97},"\"result.logo\"",[76,4172,4173],{"class":86}," :alt",[76,4175,94],{"class":93},[76,4177,4148],{"class":97},[76,4179,2512],{"class":86},[76,4181,94],{"class":93},[76,4183,4184],{"class":97},"\"w-24 h-24 mx-auto\"",[76,4186,1088],{"class":82},[76,4188,4189,4192,4194,4196,4199,4201,4204],{"class":78,"line":1514},[76,4190,4191],{"class":82}," \u003Cp",[76,4193,2512],{"class":86},[76,4195,94],{"class":93},[76,4197,4198],{"class":97},"\"text-center\"",[76,4200,254],{"class":82},[76,4202,4203],{"class":117},"{{ result.name }}",[76,4205,1506],{"class":82},[76,4207,4208],{"class":78,"line":1520},[76,4209,4210],{"class":82}," \u003C/div>\n",[76,4212,4213],{"class":78,"line":2141},[76,4214,4215],{"class":82}," \u003C/div>\n",[76,4217,4218],{"class":78,"line":2160},[76,4219,3746],{"class":82},[76,4221,4222],{"class":78,"line":2190},[76,4223,3751],{"class":82},[76,4225,4226],{"class":78,"line":2195},[76,4227,390],{"class":82},[432,4229,4230],{"v-slot:output":72},[4231,4232],"items-as-cards",{},[2876,4234,4236],{"id":4235},"اختيار-عنصر","اختيار عنصر",[23,4238,4239,4240,4242,4243,4245],{},"المثالان السابقان يبحثان فقط. والمكوّن يستطيع أيضًا أن يُعلم المكوّن الأب بالعنصر الذي اختاره المستخدم. فالمنفذ يستقبل دالة ",[37,4241,2865],{},"، واستدعاؤها يُطلق حدث ",[37,4244,2865],{}," ومعه العنصر المختار، ثم يمسح استعلام البحث ويفرّغ قائمة النتائج.",[23,4247,4248],{},"وبتفريغ القائمة يزول من الصفحة الزرّ الذي نُقر عليه، ولذلك يعيد المثال التركيز إلى حقل الإدخال، فلا يفقد من يتنقّل بلوحة المفاتيح موضعه.",[429,4250,4251,4630],{},[432,4252,4253],{"v-slot:code":72},[66,4254,4256],{"className":68,"code":4255,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport AutoComplete from './AutoComplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\nconst selected = ref('')\nconst input = ref\u003CHTMLInputElement>()\n\nconst onSelect = (item: string) => {\n selected.value = item\n // اختفى الزرّ الذي نُقر عليه، فيعود التركيز إلى حقل الإدخال\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",[37,4257,4258,4272,4286,4296,4300,4334,4351,4369,4373,4396,4410,4415,4432,4436,4440,4444,4448,4460,4465,4475,4485,4495,4500,4504,4514,4522,4530,4538,4546,4550,4554,4572,4600,4604,4608,4612,4622,4626],{"__ignoreMap":72},[76,4259,4260,4262,4264,4266,4268,4270],{"class":78,"line":79},[76,4261,83],{"class":82},[76,4263,87],{"class":86},[76,4265,90],{"class":86},[76,4267,94],{"class":93},[76,4269,98],{"class":97},[76,4271,101],{"class":82},[76,4273,4274,4276,4278,4280,4282,4284],{"class":78,"line":104},[76,4275,457],{"class":82},[76,4277,460],{"class":93},[76,4279,463],{"class":117},[76,4281,466],{"class":93},[76,4283,469],{"class":82},[76,4285,472],{"class":97},[76,4287,4288,4290,4292,4294],{"class":78,"line":114},[76,4289,457],{"class":82},[76,4291,3552],{"class":117},[76,4293,482],{"class":82},[76,4295,3557],{"class":97},[76,4297,4298],{"class":78,"line":144},[76,4299,174],{"emptyLinePlaceholder":173},[76,4301,4302,4304,4306,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332],{"class":78,"line":158},[76,4303,494],{"class":82},[76,4305,3568],{"class":497},[76,4307,501],{"class":121},[76,4309,504],{"class":93},[76,4311,3575],{"class":97},[76,4313,135],{"class":93},[76,4315,3580],{"class":97},[76,4317,135],{"class":93},[76,4319,3585],{"class":97},[76,4321,135],{"class":93},[76,4323,3590],{"class":97},[76,4325,135],{"class":93},[76,4327,3595],{"class":97},[76,4329,135],{"class":93},[76,4331,3600],{"class":97},[76,4333,525],{"class":93},[76,4335,4336,4338,4341,4343,4345,4347,4349],{"class":78,"line":164},[76,4337,494],{"class":82},[76,4339,4340],{"class":497}," selected",[76,4342,501],{"class":121},[76,4344,684],{"class":107},[76,4346,687],{"class":93},[76,4348,1307],{"class":97},[76,4350,693],{"class":93},[76,4352,4353,4355,4358,4360,4362,4364,4367],{"class":78,"line":170},[76,4354,494],{"class":82},[76,4356,4357],{"class":497}," input",[76,4359,501],{"class":121},[76,4361,684],{"class":107},[76,4363,129],{"class":93},[76,4365,4366],{"class":125},"HTMLInputElement",[76,4368,1939],{"class":93},[76,4370,4371],{"class":78,"line":177},[76,4372,174],{"emptyLinePlaceholder":173},[76,4374,4375,4377,4380,4382,4384,4386,4388,4390,4392,4394],{"class":78,"line":183},[76,4376,494],{"class":82},[76,4378,4379],{"class":107}," onSelect",[76,4381,501],{"class":121},[76,4383,1623],{"class":93},[76,4385,1453],{"class":117},[76,4387,122],{"class":121},[76,4389,152],{"class":125},[76,4391,1970],{"class":93},[76,4393,1797],{"class":82},[76,4395,1207],{"class":93},[76,4397,4398,4401,4403,4405,4407],{"class":78,"line":189},[76,4399,4400],{"class":117}," selected",[76,4402,1129],{"class":93},[76,4404,855],{"class":545},[76,4406,501],{"class":121},[76,4408,4409],{"class":117}," item\n",[76,4411,4412],{"class":78,"line":195},[76,4413,4414],{"class":1284}," // اختفى الزرّ الذي نُقر عليه، فيعود التركيز إلى حقل الإدخال\n",[76,4416,4417,4420,4422,4424,4427,4430],{"class":78,"line":201},[76,4418,4419],{"class":117}," input",[76,4421,1129],{"class":93},[76,4423,855],{"class":545},[76,4425,4426],{"class":93},"?.",[76,4428,4429],{"class":107},"focus",[76,4431,3333],{"class":93},[76,4433,4434],{"class":78,"line":233},[76,4435,1260],{"class":93},[76,4437,4438],{"class":78,"line":263},[76,4439,167],{"class":82},[76,4441,4442],{"class":78,"line":269},[76,4443,174],{"emptyLinePlaceholder":173},[76,4445,4446],{"class":78,"line":275},[76,4447,180],{"class":82},[76,4449,4450,4452,4454,4456,4458],{"class":78,"line":281},[76,4451,3619],{"class":82},[76,4453,2512],{"class":86},[76,4455,94],{"class":93},[76,4457,3626],{"class":97},[76,4459,101],{"class":82},[76,4461,4462],{"class":78,"line":287},[76,4463,4464],{"class":82}," \u003CAutoComplete\n",[76,4466,4467,4470,4472],{"class":78,"line":309},[76,4468,4469],{"class":86}," v-slot",[76,4471,94],{"class":93},[76,4473,4474],{"class":97},"\"{ searchQuery, results, onSearchQueryChange, select }\"\n",[76,4476,4477,4480,4482],{"class":78,"line":329},[76,4478,4479],{"class":86}," :items",[76,4481,94],{"class":93},[76,4483,4484],{"class":97},"\"items\"\n",[76,4486,4487,4490,4492],{"class":78,"line":364},[76,4488,4489],{"class":86}," @select",[76,4491,94],{"class":93},[76,4493,4494],{"class":97},"\"onSelect\"\n",[76,4496,4497],{"class":78,"line":370},[76,4498,4499],{"class":82}," >\n",[76,4501,4502],{"class":78,"line":375},[76,4503,3655],{"class":82},[76,4505,4506,4509,4511],{"class":78,"line":381},[76,4507,4508],{"class":86}," ref",[76,4510,94],{"class":93},[76,4512,4513],{"class":97},"\"input\"\n",[76,4515,4516,4518,4520],{"class":78,"line":387},[76,4517,3660],{"class":86},[76,4519,94],{"class":93},[76,4521,3665],{"class":97},[76,4523,4524,4526,4528],{"class":78,"line":1480},[76,4525,3670],{"class":86},[76,4527,94],{"class":93},[76,4529,3675],{"class":97},[76,4531,4532,4534,4536],{"class":78,"line":1485},[76,4533,3680],{"class":86},[76,4535,94],{"class":93},[76,4537,3685],{"class":97},[76,4539,4540,4542,4544],{"class":78,"line":1497},[76,4541,3690],{"class":86},[76,4543,94],{"class":93},[76,4545,3695],{"class":97},[76,4547,4548],{"class":78,"line":1509},[76,4549,3700],{"class":82},[76,4551,4552],{"class":78,"line":1514},[76,4553,3705],{"class":82},[76,4555,4556,4558,4560,4562,4564,4566,4568,4570],{"class":78,"line":1520},[76,4557,3710],{"class":82},[76,4559,207],{"class":86},[76,4561,94],{"class":93},[76,4563,3717],{"class":97},[76,4565,215],{"class":86},[76,4567,94],{"class":93},[76,4569,3724],{"class":97},[76,4571,101],{"class":82},[76,4573,4574,4577,4579,4581,4584,4587,4589,4592,4594,4597],{"class":78,"line":2141},[76,4575,4576],{"class":82}," \u003Cbutton",[76,4578,1409],{"class":86},[76,4580,94],{"class":93},[76,4582,4583],{"class":97},"\"button\"",[76,4585,4586],{"class":86}," @click",[76,4588,94],{"class":93},[76,4590,4591],{"class":97},"\"select(result)\"",[76,4593,254],{"class":82},[76,4595,4596],{"class":117},"{{ result }}",[76,4598,4599],{"class":82},"\u003C/button>\n",[76,4601,4602],{"class":78,"line":2160},[76,4603,3736],{"class":82},[76,4605,4606],{"class":78,"line":2190},[76,4607,3741],{"class":82},[76,4609,4610],{"class":78,"line":2195},[76,4611,3746],{"class":82},[76,4613,4614,4617,4620],{"class":78,"line":2200},[76,4615,4616],{"class":82}," \u003Cp>",[76,4618,4619],{"class":117},"العنصر المختار: {{ selected || 'لا شيء بعد' }}",[76,4621,1506],{"class":82},[76,4623,4624],{"class":78,"line":2205},[76,4625,3751],{"class":82},[76,4627,4628],{"class":78,"line":2210},[76,4629,390],{"class":82},[432,4631,4632],{"v-slot:output":72},[4633,4634],"basic-select",{},[23,4636,4637],{},"يمكن وضع حالة البحث ومنطق التصفية في دالة تركيبية أيضًا، لأنهما لا يعتمدان على عناصر الواجهة. عندها يستقبل المكوّن الذي يستدعي الدالة القيم التفاعلية مباشرةً، بدلًا من الحصول عليها عبر منفذ.",[30,4639,4641],{"id":4640},"ما-هي-الدالة-التركيبية","ما هي الدالة التركيبية؟",[23,4643,4644],{},"الدالة التركيبية دالة تضمّ منطقًا له حالة باستعمال الواجهة التركيبية في Vue. ويمكنها استعمال واجهة التفاعلية وخطافات دورة الحياة وحقن الاعتماديات. وبها يُستعمل المنطق نفسه في عدة مكوّنات.",[2876,4646,2879],{"id":4647},"مثال-بسيط-1",[23,4649,4650],{},"نبدأ بدالة تركيبية تتولّى منطق البحث عن عنصر في قائمة. تستقبل قائمة العناصر، ودالة بحث اختيارية، وتُرجع استعلام البحث والنتائج التي تتجدّد كلما تغيّر الاستعلام.",[66,4652,4655],{"className":2882,"code":4653,"filename":4654,"language":2892,"meta":72,"style":72},"import { computed, ref } from 'vue'\n\nexport default function useAutocomplete\u003CT = string>(items: T[], searchFn?: (query: string) => T[]) {\n const searchQuery = ref('') // استعلام البحث الذي يكتبه المستخدم\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",[37,4656,4657,4675,4679,4735,4754,4775,4780,4805,4812,4816,4820,4827,4844,4865,4900,4905,4910,4914,4920,4927,4934,4939],{"__ignoreMap":72},[76,4658,4659,4661,4663,4665,4667,4669,4671,4673],{"class":78,"line":79},[76,4660,457],{"class":82},[76,4662,460],{"class":93},[76,4664,1170],{"class":117},[76,4666,135],{"class":93},[76,4668,463],{"class":117},[76,4670,466],{"class":93},[76,4672,469],{"class":82},[76,4674,472],{"class":97},[76,4676,4677],{"class":78,"line":104},[76,4678,174],{"emptyLinePlaceholder":173},[76,4680,4681,4683,4685,4688,4691,4693,4695,4697,4699,4702,4704,4706,4708,4711,4714,4716,4718,4720,4722,4724,4726,4728,4730,4733],{"class":78,"line":114},[76,4682,3513],{"class":82},[76,4684,3516],{"class":82},[76,4686,4687],{"class":82}," function",[76,4689,4690],{"class":107}," useAutocomplete",[76,4692,129],{"class":93},[76,4694,891],{"class":125},[76,4696,501],{"class":121},[76,4698,152],{"class":125},[76,4700,4701],{"class":93},">(",[76,4703,1138],{"class":117},[76,4705,122],{"class":121},[76,4707,938],{"class":125},[76,4709,4710],{"class":93},"[],",[76,4712,4713],{"class":107}," searchFn",[76,4715,1762],{"class":121},[76,4717,1623],{"class":93},[76,4719,1367],{"class":117},[76,4721,122],{"class":121},[76,4723,152],{"class":125},[76,4725,1970],{"class":93},[76,4727,1797],{"class":82},[76,4729,938],{"class":125},[76,4731,4732],{"class":93},"[])",[76,4734,1207],{"class":93},[76,4736,4737,4740,4742,4744,4746,4748,4750,4752],{"class":78,"line":144},[76,4738,4739],{"class":82}," const",[76,4741,3068],{"class":497},[76,4743,501],{"class":121},[76,4745,684],{"class":107},[76,4747,687],{"class":93},[76,4749,1307],{"class":97},[76,4751,1970],{"class":93},[76,4753,3081],{"class":1284},[76,4755,4756,4758,4760,4762,4764,4766,4768,4771,4773],{"class":78,"line":158},[76,4757,4739],{"class":82},[76,4759,3088],{"class":497},[76,4761,501],{"class":121},[76,4763,1170],{"class":107},[76,4765,129],{"class":93},[76,4767,891],{"class":125},[76,4769,4770],{"class":93},"[]>(()",[76,4772,1797],{"class":82},[76,4774,1207],{"class":93},[76,4776,4777],{"class":78,"line":164},[76,4778,4779],{"class":1284}," // نتائج البحث عن الاستعلام الحالي\n",[76,4781,4782,4785,4787,4789,4791,4793,4795,4797,4799,4801,4803],{"class":78,"line":170},[76,4783,4784],{"class":82}," if",[76,4786,1623],{"class":93},[76,4788,3124],{"class":117},[76,4790,1129],{"class":93},[76,4792,855],{"class":545},[76,4794,1129],{"class":93},[76,4796,3133],{"class":545},[76,4798,3136],{"class":121},[76,4800,3139],{"class":497},[76,4802,1970],{"class":93},[76,4804,1207],{"class":93},[76,4806,4807,4810],{"class":78,"line":177},[76,4808,4809],{"class":82}," return",[76,4811,3157],{"class":93},[76,4813,4814],{"class":78,"line":183},[76,4815,3283],{"class":93},[76,4817,4818],{"class":78,"line":189},[76,4819,174],{"emptyLinePlaceholder":173},[76,4821,4822,4824],{"class":78,"line":195},[76,4823,3424],{"class":82},[76,4825,4826],{"class":117}," searchFn\n",[76,4828,4829,4832,4834,4836,4838,4840,4842],{"class":78,"line":201},[76,4830,4831],{"class":121}," ?",[76,4833,4713],{"class":107},[76,4835,687],{"class":93},[76,4837,3124],{"class":117},[76,4839,1129],{"class":93},[76,4841,855],{"class":545},[76,4843,693],{"class":93},[76,4845,4846,4849,4851,4853,4855,4857,4859,4861,4863],{"class":78,"line":233},[76,4847,4848],{"class":121}," :",[76,4850,3568],{"class":117},[76,4852,1129],{"class":93},[76,4854,1336],{"class":107},[76,4856,3230],{"class":93},[76,4858,1453],{"class":117},[76,4860,1970],{"class":93},[76,4862,1797],{"class":82},[76,4864,1207],{"class":93},[76,4866,4867,4870,4873,4875,4877,4880,4882,4884,4886,4888,4890,4892,4894,4896,4898],{"class":78,"line":263},[76,4868,4869],{"class":82}," return",[76,4871,4872],{"class":107}," String",[76,4874,687],{"class":93},[76,4876,1453],{"class":117},[76,4878,4879],{"class":93},").",[76,4881,1356],{"class":107},[76,4883,1359],{"class":93},[76,4885,1362],{"class":107},[76,4887,687],{"class":93},[76,4889,3124],{"class":117},[76,4891,1129],{"class":93},[76,4893,855],{"class":545},[76,4895,1129],{"class":93},[76,4897,1356],{"class":107},[76,4899,3273],{"class":93},[76,4901,4902],{"class":78,"line":269},[76,4903,4904],{"class":93}," })\n",[76,4906,4907],{"class":78,"line":275},[76,4908,4909],{"class":93}," })\n",[76,4911,4912],{"class":78,"line":281},[76,4913,174],{"emptyLinePlaceholder":173},[76,4915,4916,4918],{"class":78,"line":287},[76,4917,3983],{"class":82},[76,4919,1207],{"class":93},[76,4921,4922,4925],{"class":78,"line":309},[76,4923,4924],{"class":117}," searchQuery",[76,4926,2962],{"class":93},[76,4928,4929,4932],{"class":78,"line":329},[76,4930,4931],{"class":117}," results",[76,4933,2962],{"class":93},[76,4935,4936],{"class":78,"line":364},[76,4937,4938],{"class":93}," }\n",[76,4940,4941],{"class":78,"line":370},[76,4942,1260],{"class":93},[23,4944,4945],{},"والآن نستعمل الدالة التركيبية لتصيير حقل الإدخال نفسه، وتحته النتائج في قائمة غير مرتّبة.",[429,4947,4948,5147],{},[432,4949,4950],{"v-slot:code":72},[66,4951,4953],{"className":68,"code":4952,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport useAutocomplete from './useAutocomplete'\n\nconst items = ['Vue.js', 'React', 'Angular', 'Svelte', 'Ember', 'Meteor']\n\nconst { searchQuery, results } = useAutocomplete(items)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"p-2\">\n \u003Cinput v-model=\"searchQuery\" class=\"bg-transparent p-2 border rounded\" type=\"text\" />\n \u003Cul>\n \u003Cli v-for=\"result in results\" :key=\"result\">\n {{ result }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n",[37,4954,4955,4969,4981,4985,5019,5023,5048,5052,5056,5060,5072,5100,5105,5124,5129,5134,5139,5143],{"__ignoreMap":72},[76,4956,4957,4959,4961,4963,4965,4967],{"class":78,"line":79},[76,4958,83],{"class":82},[76,4960,87],{"class":86},[76,4962,90],{"class":86},[76,4964,94],{"class":93},[76,4966,98],{"class":97},[76,4968,101],{"class":82},[76,4970,4971,4973,4976,4978],{"class":78,"line":104},[76,4972,457],{"class":82},[76,4974,4975],{"class":117}," useAutocomplete ",[76,4977,482],{"class":82},[76,4979,4980],{"class":97}," './useAutocomplete'\n",[76,4982,4983],{"class":78,"line":114},[76,4984,174],{"emptyLinePlaceholder":173},[76,4986,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005,5007,5009,5011,5013,5015,5017],{"class":78,"line":144},[76,4988,494],{"class":82},[76,4990,3568],{"class":497},[76,4992,501],{"class":121},[76,4994,504],{"class":93},[76,4996,3575],{"class":97},[76,4998,135],{"class":93},[76,5000,3580],{"class":97},[76,5002,135],{"class":93},[76,5004,3585],{"class":97},[76,5006,135],{"class":93},[76,5008,3590],{"class":97},[76,5010,135],{"class":93},[76,5012,3595],{"class":97},[76,5014,135],{"class":93},[76,5016,3600],{"class":97},[76,5018,525],{"class":93},[76,5020,5021],{"class":78,"line":158},[76,5022,174],{"emptyLinePlaceholder":173},[76,5024,5025,5027,5029,5031,5033,5035,5038,5040,5042,5044,5046],{"class":78,"line":164},[76,5026,494],{"class":82},[76,5028,460],{"class":93},[76,5030,3068],{"class":497},[76,5032,135],{"class":93},[76,5034,3088],{"class":497},[76,5036,5037],{"class":93}," }",[76,5039,501],{"class":121},[76,5041,4690],{"class":107},[76,5043,687],{"class":93},[76,5045,1138],{"class":117},[76,5047,693],{"class":93},[76,5049,5050],{"class":78,"line":170},[76,5051,167],{"class":82},[76,5053,5054],{"class":78,"line":177},[76,5055,174],{"emptyLinePlaceholder":173},[76,5057,5058],{"class":78,"line":183},[76,5059,180],{"class":82},[76,5061,5062,5064,5066,5068,5070],{"class":78,"line":189},[76,5063,3619],{"class":82},[76,5065,2512],{"class":86},[76,5067,94],{"class":93},[76,5069,3626],{"class":97},[76,5071,101],{"class":82},[76,5073,5074,5077,5079,5081,5084,5086,5088,5091,5093,5095,5098],{"class":78,"line":195},[76,5075,5076],{"class":82}," \u003Cinput",[76,5078,713],{"class":86},[76,5080,94],{"class":93},[76,5082,5083],{"class":97},"\"searchQuery\"",[76,5085,2512],{"class":86},[76,5087,94],{"class":93},[76,5089,5090],{"class":97},"\"bg-transparent p-2 border rounded\"",[76,5092,1409],{"class":86},[76,5094,94],{"class":93},[76,5096,5097],{"class":97},"\"text\"",[76,5099,1088],{"class":82},[76,5101,5102],{"class":78,"line":201},[76,5103,5104],{"class":82}," \u003Cul>\n",[76,5106,5107,5110,5112,5114,5116,5118,5120,5122],{"class":78,"line":233},[76,5108,5109],{"class":82}," \u003Cli",[76,5111,207],{"class":86},[76,5113,94],{"class":93},[76,5115,3717],{"class":97},[76,5117,215],{"class":86},[76,5119,94],{"class":93},[76,5121,3724],{"class":97},[76,5123,101],{"class":82},[76,5125,5126],{"class":78,"line":263},[76,5127,5128],{"class":117}," {{ result }}\n",[76,5130,5131],{"class":78,"line":269},[76,5132,5133],{"class":82}," \u003C/li>\n",[76,5135,5136],{"class":78,"line":275},[76,5137,5138],{"class":82}," \u003C/ul>\n",[76,5140,5141],{"class":78,"line":281},[76,5142,3751],{"class":82},[76,5144,5145],{"class":78,"line":287},[76,5146,390],{"class":82},[432,5148,5149],{"v-slot:output":72},[5150,5151],"basic-composable",{},[23,5153,5154,5155,5157],{},"بالدالة التركيبية أنجزنا البحث في هذا المثال بشيفرة أقل. ولا حاجة هنا إلى حدث لاختيار عنصر: المكوّن الذي يستدعي الدالة يملك القالب، فيستطيع عند النقر أن يحفظ العنصر ويفرّغ ",[37,5156,3124],{}," بنفسه.",[2876,5159,3764],{"id":5160},"مثال-متقدم-1",[23,5162,5163],{},"نمرّر الآن دالة بحث إلى الدالة التركيبية، ونصيّر النتائج شبكةً من البطاقات. ودالة البحث هي التي تصفّي القائمة بحسب استعلام البحث.",[429,5165,5166,5581],{},[432,5167,5168],{"v-slot:code":72},[66,5169,5171],{"className":68,"code":5170,"language":71,"meta":72,"style":72},"\u003Cscript setup lang=\"ts\">\nimport useAutocomplete from './useAutocomplete'\n\nconst items = [\n { name: 'Vue.js', logo: '/blog-img/logos/vue.svg' },\n { name: 'React', logo: '/blog-img/logos/react.svg' },\n { name: 'Angular', logo: '/blog-img/logos/angular.svg' },\n { name: 'Svelte', logo: '/blog-img/logos/svelte.svg' },\n { name: 'Ember', logo: '/blog-img/logos/ember.svg' },\n { name: 'Meteor', logo: '/blog-img/logos/meteor.svg' },\n]\n\nconst filterLibs = (searchQuery: string) => {\n return items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()))\n}\n\nconst { searchQuery, results } = useAutocomplete(items, filterLibs)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"p-2\">\n \u003Cinput v-model=\"searchQuery\" class=\"bg-transparent p-2 border rounded\" type=\"text\" />\n \u003Cdiv class=\"grid grid-cols-3 gap-4 p-4\">\n \u003Cdiv v-for=\"result in results\" :key=\"result.name\" class=\"rounded shadow p-4\">\n \u003Cimg :src=\"result.logo\" :alt=\"result.name\" class=\"w-24 h-24 mx-auto\" />\n \u003Cp class=\"text-center\">{{ result.name }}\u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",[37,5172,5173,5187,5197,5201,5211,5231,5251,5271,5291,5311,5331,5335,5339,5361,5401,5405,5409,5437,5441,5445,5449,5461,5485,5498,5522,5547,5564,5568,5573,5577],{"__ignoreMap":72},[76,5174,5175,5177,5179,5181,5183,5185],{"class":78,"line":79},[76,5176,83],{"class":82},[76,5178,87],{"class":86},[76,5180,90],{"class":86},[76,5182,94],{"class":93},[76,5184,98],{"class":97},[76,5186,101],{"class":82},[76,5188,5189,5191,5193,5195],{"class":78,"line":104},[76,5190,457],{"class":82},[76,5192,4975],{"class":117},[76,5194,482],{"class":82},[76,5196,4980],{"class":97},[76,5198,5199],{"class":78,"line":114},[76,5200,174],{"emptyLinePlaceholder":173},[76,5202,5203,5205,5207,5209],{"class":78,"line":144},[76,5204,494],{"class":82},[76,5206,3568],{"class":497},[76,5208,501],{"class":121},[76,5210,537],{"class":93},[76,5212,5213,5215,5217,5219,5221,5223,5225,5227,5229],{"class":78,"line":158},[76,5214,542],{"class":93},[76,5216,1066],{"class":545},[76,5218,122],{"class":93},[76,5220,3830],{"class":97},[76,5222,135],{"class":93},[76,5224,3835],{"class":545},[76,5226,122],{"class":93},[76,5228,3840],{"class":97},[76,5230,584],{"class":93},[76,5232,5233,5235,5237,5239,5241,5243,5245,5247,5249],{"class":78,"line":164},[76,5234,542],{"class":93},[76,5236,1066],{"class":545},[76,5238,122],{"class":93},[76,5240,3580],{"class":97},[76,5242,135],{"class":93},[76,5244,3835],{"class":545},[76,5246,122],{"class":93},[76,5248,3861],{"class":97},[76,5250,584],{"class":93},[76,5252,5253,5255,5257,5259,5261,5263,5265,5267,5269],{"class":78,"line":170},[76,5254,542],{"class":93},[76,5256,1066],{"class":545},[76,5258,122],{"class":93},[76,5260,3585],{"class":97},[76,5262,135],{"class":93},[76,5264,3835],{"class":545},[76,5266,122],{"class":93},[76,5268,3882],{"class":97},[76,5270,584],{"class":93},[76,5272,5273,5275,5277,5279,5281,5283,5285,5287,5289],{"class":78,"line":177},[76,5274,542],{"class":93},[76,5276,1066],{"class":545},[76,5278,122],{"class":93},[76,5280,3590],{"class":97},[76,5282,135],{"class":93},[76,5284,3835],{"class":545},[76,5286,122],{"class":93},[76,5288,3903],{"class":97},[76,5290,584],{"class":93},[76,5292,5293,5295,5297,5299,5301,5303,5305,5307,5309],{"class":78,"line":183},[76,5294,542],{"class":93},[76,5296,1066],{"class":545},[76,5298,122],{"class":93},[76,5300,3595],{"class":97},[76,5302,135],{"class":93},[76,5304,3835],{"class":545},[76,5306,122],{"class":93},[76,5308,3924],{"class":97},[76,5310,584],{"class":93},[76,5312,5313,5315,5317,5319,5321,5323,5325,5327,5329],{"class":78,"line":189},[76,5314,542],{"class":93},[76,5316,1066],{"class":545},[76,5318,122],{"class":93},[76,5320,3600],{"class":97},[76,5322,135],{"class":93},[76,5324,3835],{"class":545},[76,5326,122],{"class":93},[76,5328,3945],{"class":97},[76,5330,584],{"class":93},[76,5332,5333],{"class":78,"line":195},[76,5334,525],{"class":93},[76,5336,5337],{"class":78,"line":201},[76,5338,174],{"emptyLinePlaceholder":173},[76,5340,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359],{"class":78,"line":233},[76,5342,494],{"class":82},[76,5344,3962],{"class":107},[76,5346,501],{"class":121},[76,5348,1623],{"class":93},[76,5350,3124],{"class":117},[76,5352,122],{"class":121},[76,5354,152],{"class":125},[76,5356,1970],{"class":93},[76,5358,1797],{"class":82},[76,5360,1207],{"class":93},[76,5362,5363,5365,5367,5369,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393,5395,5397,5399],{"class":78,"line":263},[76,5364,3983],{"class":82},[76,5366,3568],{"class":117},[76,5368,1129],{"class":93},[76,5370,1336],{"class":107},[76,5372,687],{"class":93},[76,5374,3994],{"class":117},[76,5376,1344],{"class":82},[76,5378,971],{"class":117},[76,5380,1129],{"class":93},[76,5382,4003],{"class":545},[76,5384,1129],{"class":93},[76,5386,1356],{"class":107},[76,5388,1359],{"class":93},[76,5390,1362],{"class":107},[76,5392,687],{"class":93},[76,5394,3124],{"class":117},[76,5396,1129],{"class":93},[76,5398,1356],{"class":107},[76,5400,4022],{"class":93},[76,5402,5403],{"class":78,"line":269},[76,5404,1260],{"class":93},[76,5406,5407],{"class":78,"line":275},[76,5408,174],{"emptyLinePlaceholder":173},[76,5410,5411,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5435],{"class":78,"line":281},[76,5412,494],{"class":82},[76,5414,460],{"class":93},[76,5416,3068],{"class":497},[76,5418,135],{"class":93},[76,5420,3088],{"class":497},[76,5422,5037],{"class":93},[76,5424,501],{"class":121},[76,5426,4690],{"class":107},[76,5428,687],{"class":93},[76,5430,1138],{"class":117},[76,5432,135],{"class":93},[76,5434,3962],{"class":117},[76,5436,693],{"class":93},[76,5438,5439],{"class":78,"line":287},[76,5440,167],{"class":82},[76,5442,5443],{"class":78,"line":309},[76,5444,174],{"emptyLinePlaceholder":173},[76,5446,5447],{"class":78,"line":329},[76,5448,180],{"class":82},[76,5450,5451,5453,5455,5457,5459],{"class":78,"line":364},[76,5452,3619],{"class":82},[76,5454,2512],{"class":86},[76,5456,94],{"class":93},[76,5458,3626],{"class":97},[76,5460,101],{"class":82},[76,5462,5463,5465,5467,5469,5471,5473,5475,5477,5479,5481,5483],{"class":78,"line":370},[76,5464,5076],{"class":82},[76,5466,713],{"class":86},[76,5468,94],{"class":93},[76,5470,5083],{"class":97},[76,5472,2512],{"class":86},[76,5474,94],{"class":93},[76,5476,5090],{"class":97},[76,5478,1409],{"class":86},[76,5480,94],{"class":93},[76,5482,5097],{"class":97},[76,5484,1088],{"class":82},[76,5486,5487,5490,5492,5494,5496],{"class":78,"line":375},[76,5488,5489],{"class":82}," \u003Cdiv",[76,5491,2512],{"class":86},[76,5493,94],{"class":93},[76,5495,4128],{"class":97},[76,5497,101],{"class":82},[76,5499,5500,5502,5504,5506,5508,5510,5512,5514,5516,5518,5520],{"class":78,"line":381},[76,5501,4121],{"class":82},[76,5503,207],{"class":86},[76,5505,94],{"class":93},[76,5507,3717],{"class":97},[76,5509,215],{"class":86},[76,5511,94],{"class":93},[76,5513,4148],{"class":97},[76,5515,2512],{"class":86},[76,5517,94],{"class":93},[76,5519,4155],{"class":97},[76,5521,101],{"class":82},[76,5523,5524,5527,5529,5531,5533,5535,5537,5539,5541,5543,5545],{"class":78,"line":387},[76,5525,5526],{"class":82}," \u003Cimg",[76,5528,4165],{"class":86},[76,5530,94],{"class":93},[76,5532,4170],{"class":97},[76,5534,4173],{"class":86},[76,5536,94],{"class":93},[76,5538,4148],{"class":97},[76,5540,2512],{"class":86},[76,5542,94],{"class":93},[76,5544,4184],{"class":97},[76,5546,1088],{"class":82},[76,5548,5549,5552,5554,5556,5558,5560,5562],{"class":78,"line":1480},[76,5550,5551],{"class":82}," \u003Cp",[76,5553,2512],{"class":86},[76,5555,94],{"class":93},[76,5557,4198],{"class":97},[76,5559,254],{"class":82},[76,5561,4203],{"class":117},[76,5563,1506],{"class":82},[76,5565,5566],{"class":78,"line":1485},[76,5567,4215],{"class":82},[76,5569,5570],{"class":78,"line":1497},[76,5571,5572],{"class":82}," \u003C/div>\n",[76,5574,5575],{"class":78,"line":1509},[76,5576,3751],{"class":82},[76,5578,5579],{"class":78,"line":1514},[76,5580,390],{"class":82},[432,5582,5583],{"v-slot:output":72},[5584,5585],"items-as-cards-composable",{},[30,5587,5588],{"id":5588},"الخاتمة",[23,5590,5591],{},"الطريقتان تصفّيان العناصر نفسها وتتركان الواجهة للمكوّن الذي يستعملهما. يوفّر المكوّن عديم التصيير الحالة والدوال عبر منفذ، ويُطلق حدثًا عند اختيار عنصر. أما الدالة التركيبية فتُرجع حالة البحث مباشرةً، ويكون اختيار العنصر ومسح الاستعلام مسؤولية المكوّن الذي يستدعيها.",[30,5593,2625],{"id":2624},[2627,5595,5596,5604],{},[2630,5597,5598],{},[2633,5599,5600,5602],{},[2636,5601,2638],{},[2636,5603,2641],{},[2643,5605,5606,5614,5622,5630,5638,5645,5653],{},[2633,5607,5608,5611],{},[2648,5609,5610],{},"renderless component",[2648,5612,5613],{},"مكون عديم التصيير",[2633,5615,5616,5619],{},[2648,5617,5618],{},"composable function",[2648,5620,5621],{},"دالة تركيبية",[2633,5623,5624,5627],{},[2648,5625,5626],{},"render function",[2648,5628,5629],{},"دالة تصيير",[2633,5631,5632,5635],{},[2648,5633,5634],{},"render",[2648,5636,5637],{},"تصيير",[2633,5639,5640,5642],{},[2648,5641,964],{},[2648,5643,5644],{},"خاصيات",[2633,5646,5647,5650],{},[2648,5648,5649],{},"slots",[2648,5651,5652],{},"منافذ",[2633,5654,5655,5658],{},[2648,5656,5657],{},"scoped slots",[2648,5659,5660],{},"منافذ ذات نطاق",[2743,5662,5663],{},"html pre.shiki code .sZ9Zp, html code.shiki .sZ9Zp{--shiki-light:#994920;--shiki-default:#994920;--shiki-dark:#ECA457}html pre.shiki code .sXnUm, html code.shiki .sXnUm{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#96918C}html pre.shiki code .sBiod, html code.shiki .sBiod{--shiki-light:#322C28;--shiki-default:#322C28;--shiki-dark:#DBD7D0}html pre.shiki code .sgVH1, html code.shiki .sgVH1{--shiki-light:#3A6830;--shiki-default:#3A6830;--shiki-dark:#A5CF93}html pre.shiki code .sJ-0L, html code.shiki .sJ-0L{--shiki-light:#2D54A0;--shiki-default:#2D54A0;--shiki-dark:#93BDF5}html pre.shiki code .sZ7qJ, html code.shiki .sZ7qJ{--shiki-light:#6D6863;--shiki-default:#6D6863;--shiki-dark:#A39E98}html pre.shiki code .sUqqj, html code.shiki .sUqqj{--shiki-light:#4A3170;--shiki-default:#4A3170;--shiki-dark:#D9BDF0}html pre.shiki code .snYWn, html code.shiki .snYWn{--shiki-light:#624727;--shiki-default:#624727;--shiki-dark:#E2C69F}html pre.shiki code .s5c__, html code.shiki .s5c__{--shiki-light:#736D67;--shiki-light-font-style:italic;--shiki-default:#736D67;--shiki-default-font-style:italic;--shiki-dark:#979189;--shiki-dark-font-style:italic}html pre.shiki code .sHXsw, html code.shiki .sHXsw{--shiki-light:#006268;--shiki-default:#006268;--shiki-dark:#86CFD2}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sSzyk, html code.shiki .sSzyk{--shiki-light:#5E4784;--shiki-default:#5E4784;--shiki-dark:#CFB0EA}",{"title":72,"searchDepth":104,"depth":104,"links":5665},[5666,5667,5668,5669,5674,5678,5679],{"id":32,"depth":104,"text":32},{"id":2830,"depth":104,"text":2831},{"id":2837,"depth":104,"text":2838},{"id":2851,"depth":104,"text":2852,"children":5670},[5671,5672,5673],{"id":2878,"depth":114,"text":2879},{"id":3763,"depth":114,"text":3764},{"id":4235,"depth":114,"text":4236},{"id":4640,"depth":104,"text":4641,"children":5675},[5676,5677],{"id":4647,"depth":114,"text":2879},{"id":5160,"depth":114,"text":3764},{"id":5588,"depth":104,"text":5588},{"id":2624,"depth":104,"text":2625},"2023-06-04","شرح لمفهوم المكوّنات عديمة التصيير، ولطريقة تحويلها إلى دوال تركيبية بالواجهة التركيبية (Composition API) في Vue.js.",{"categories":5683,"head":5685},[2800,5684],"Renderless Component",[5686,5688,5691,5693,5695,5697,5699,5702,5704,5706],{"meta":5687},{"name":2762,"content":2810},{"meta":5689},{"name":2765,"content":5690},"Vue.js, Renderless Component",{"meta":5692},{"name":2769,"content":2770},{"meta":5694},{"name":2773,"content":5680},{"meta":5696},{"name":2776,"content":2777},{"meta":5698},{"name":2780,"content":2781},{"meta":5700},{"name":2784,"content":5701},"vue-renderless-component",{"meta":5703},{"name":2788,"content":2820},{"meta":5705},{"name":2791,"content":5690},{"meta":5707},{"name":2795,"content":2810},"/ar/blog/from-renderless-component-to-composable-function",{"title":2810,"description":5681},"ar/blog/from-renderless-component-to-composable-function/index",[2800,5684,5712,5713,5714,5715],"Composable function","Composition API","Vue 3","Reusability","j29dS038PYl7O5YV7ic5AMEAftSYo7F_w2ccp96dPFo",1791794147822]