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