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