قم بالمزامنة مع لمربع التحرير والسرد . إنه يقوم بتحسين نسختنا التجريبية الحالية لـ Angular

لقد اختبرت مجموعة أدوات Microsoft-graph-toolkit TemplateHelper لإنشاء عناصر مربع التحرير والسرد بسياق ونموذج معينين يتم توفيرهما في الفتحة. يعمل هذا كما كنا نأمل ، أيضًا مع العناصر المتداخلة في القالب.
لقد قمت بتحميل الاختبار إلى هذا الريبو

لذلك يجب أن نكون جيدين لتمرير قائمة العناصر و (اختياريًا) قالب إلى مربع التحرير والسرد وإضافة المحاكاة الافتراضية "فقط" قبل عرض العناصر لعرض x فقط ، اعتمادًا على موضع التمرير وارتفاع حاوية تراكب.

حاليًا ، تقبل طريقة TemplateHelper.renderTemplate() HTMLElement كعقدة جذر ، قالب وسياق (وسياق إضافي اختياري). يقوم بإنشاء جميع العقد وفقًا للقالب المحدد وإرفاقها بالعقدة الجذرية.
قد يكون من الأفضل تغيير هذا السلوك وجعل الطريقة تقبل فقط قالبًا وسياقًا وإرجاع القالب المترجم حتى تتمكن من إخراج HTML الناتج مباشرةً في القالب المضاء في المكون.
ما رأيك؟

متطلبات

• التمرير الافتراضي: يجب أن يتم عرض جزء فقط من الخيارات لتجنب مشاكل الأداء
• قالب مخصص: يجب أن يكون المستخدم قادرًا على توفير نموذج يُستخدم لعرض الخيارات
• التصفية: يجب أن يكون المستخدم قادرًا على كتابة الإدخال لتصفية قائمة العناصر ؛ يجب أن تتم التصفية باستخدام وظيفة التصفية التي يوفرها المستخدم
• مؤشر التمرير: يجب أن يكون واضحًا دائمًا ما إذا كان هناك المزيد من الخيارات -> طالما أن هناك المزيد من الخيارات ، يجب أن يكون نصف الخيار المرئي الأخير في البداية (أو بحد أقصى x بكسل) مرئيًا للإشارة بوضوح إلى أن الحاوية قابلة للتمرير .

متطلبات الخطوات التالية

• حالة التحميل: يجب عرض قرص التحميل في التراكب طالما أنه لا توجد عناصر متوفرة ToDo أين يجب عرض قرص التحميل؟
• التحديد المتعدد: يجب أن يكون المستخدم قادرًا على تحديد خيارات متعددة
• مجموعات الخيارات: ينبغي أن يكون من الممكن تجميع الخيارات

إمكانية الوصول

عند التركيز ، يجب فتح مربع التحرير والسرد عند الضغط على المفتاح Enter أو ArrowUp أو ArrowDown أو عندما يبدأ المستخدم في كتابة عامل تصفية في حقل الإدخال.

عند الفتح ، يجب أن يكون المستخدم قادرًا على استخدام المفتاح ArrowUp / ArrowDown للاختيار من الخيارات الحالية. يجب أن يظل التركيز على كتابة عامل التصفية في حقل الإدخال ، ويجب ألا تكون الخيارات قابلة للجدولة. يجب الإشارة إلى حالة تحديد الخيارات باستخدام السمة aria-selected .

يجب إرسال التحديد باستخدام المفتاح Enter .

يجب أن يؤدي الضغط على المفتاح Tab أو Escape إغلاق التراكب ويجب ألا يغير العنصر المحدد.

عند كتابة مرشح ثم الخروج من حقل الإدخال ، يجب إعادة تعيين المرشح وعرض العنصر المحدد مسبقًا.

بناء جملة قالب مخصص

يجب على المستخدم توفير سلسلة الفتح والإغلاق لأجزاء النموذج. يجب أن يكون هذا ممكنًا إما على المستوى العالمي أو على مستوى كل مكون (لم يتم تحديده بعد).

القيم الافتراضية هي {{ و }} .

اقتراح API

_محجوب_

يجب تقسيم ComboBox إلى مكون FluidComboBox ، ومكون FluidComboBoxOptionsList ومكوّن FluidComboBoxOption .

FluidComboBox

يحتوي على FluidComboBoxOptionsList ، والذي بدوره يحتوي على FluidComboBoxOption s.
يتعامل مع فتح وإغلاق التراكب ووضع التراكب.
يقبل القالب كعنصر فرعي يقبل HTMLElement s الأساسي.

عند توفير قالب ، يجب تعيين سلسلة الفتح والإغلاق المستخدمة لربط القالب.

المدخلات

| الاسم | مخطط لـ | اكتب | افتراضي | الوصف |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| خيارات | أفضل لاعب في العالم | صفيف | [] | مجموعة من الخيارات لعرضها في FluidComboBoxOptionsList |
| عامل التصفية أفضل لاعب في العالم | (option: T) => boolean | null | الوظيفة المستخدمة في خيارات التصفية |
| RenderOptionFn | أفضل لاعب في العالم | (option: T) => string | null | الوظيفة المستخدمة لعرض الخيارات في لوحة الإكمال التلقائي |
| نائب | أفضل لاعب في العالم | سلسلة | "| عنصر نائب لإظهاره في حقل الإدخال عند عدم تحديد أي خيار |
| معطل | أفضل لاعب في العالم | منطقي | خطأ | قيمة منطقية لتحديد ما إذا كان مربع التحرير والسرد معطلاً |
| تحميل | أفضل لاعب في العالم | منطقي | خطأ | قيمة منطقية لتحديد ما إذا كان سيتم إظهار مؤشر التحميل |
| المحدد | أفضل لاعب في العالم | أي | فارغ | عنصر للتحديد المسبق |
| متعدد التحديد | v2 | منطقي | خطأ | قيمة منطقية لتحديد ما إذا كان يمكن تحديد أكثر من خيار في وقت واحد |

النواتج

| الاسم | مخطط لـ | اكتب | الوصف |
| ---------------- | ----------- | --------------------------------- | -------------------------------------------------- ---- |
| تغيير | أفضل لاعب في العالم | FluidComboBoxChangeEvent | تشغيل الحدث عندما تتغير القيمة |
| مرشح التغيير | أفضل لاعب في العالم | FluidComboBoxFilterChangeEvent | تشغيل الحدث عندما يقوم المستخدم بإدخال قيمة للتصفية |
| تغيير الاختيار | أفضل لاعب في العالم | FluidComboBoxSelectionChangeEvent | بدأ تشغيل الحدث عندما يتغير الخيار المحدد |

فلويد لودنغ سبينر

كشرط أساسي لـ FluidComboBox ، نحتاج إلى تنفيذ مكون دوّار تحميل قابل لإعادة الاستخدام أولاً.
ToDo اسأل UX عن L&F لأداة التحميل الدوارة الجديدة (أو إذا كان التصميم القديم يمكن إعادة استخدامه).

FluidVirtualScroller

كشرط أساسي لـ FluidComboBox ، نحتاج إلى تنفيذ مكون قابل لإعادة الاستخدام ينفذ التمرير الافتراضي
من أجل التمكن من استخدام مربع التحرير والسرد مع عدد كبير من العناصر.

أنظر أيضا:
https://github.com/WICG/virtual-scroller/blob/master/README.md
https://www.sitepen.com/blog/next-generation-virtual-scrolling/
https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib
https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

FluidPopover

كشرط أساسي لـ FluidComboBox ، نحتاج إلى تنفيذ مكون منبثق قابل لإعادة الاستخدام يمكن وضعه
تمامًا أسفل عنصر الإدخال في مربع التحرير والسرد.

يجب استخدام هذه المكتبة لتنفيذ هذا المكون:
https://popper.js.org/docs/v2/

فيما يتعلق بالقوالب ، لدي بعض المخاوف لأنه ليس مرنًا وشاملًا للمطور أن يكون لديه بدائل نصية فقط. فكر في تحويلات النص عبر وظائف أو شروط بسيطة مثل إذا لم يكن ذلك ممكنًا ولكن أعتقد أنه مطلوب.

سيكون أسلوبي هو نوعًا ما من وظائف الكتابة التي تعيد سلسلة HTML يمكن وضعها في DocumentFragment والتي يمكن إلحاقها بعد ذلك.

مع وظائف الكتابة ، ستحصل على المرونة الكاملة للتحويل أو الظروف.
لتوفير منفذ بسيط لذلك يمكننا الاستفادة من شيء مشابه لـ JSX htm والذي يمكن تحويله إلى سلسلة بحيث لا تكون هناك حاجة إلى تجميع. كما أن لها مساحة ضئيلة جدًا نتحدث عنها ~ 700 بايت.

يمكن بعد ذلك استخدامه بطريقة ما مثل:

<script type="text/template">
html`
  <span>${text}</span>
   {count > 0
     <span>occurrences ${count}</span>
   }
   </div>
`;
</script>

import { render } from "preact-render-to-string";

const template = document.createElement('template');
template.innerHTML = render(option); // option is the script that can be passed via slot or input

const fragment = temp.content;

بدلاً من ذلك ، يمكننا استخدام القوالب ذات العلامات https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates.

قد يكون هذا هو الحل الأدنى.

لقد أجريت بعض الاختبارات وقام Angular ، للأسف ، بإزالة جميع علامات البرنامج النصي من القالب. فقط سنتان بخصوص إعلان البرنامج النصي داخل القالب.

ربما دعنا نذهب إلى نهج الوظيفة أولاً بحيث يحتوي Combobox على إدخال حيث يمكنك توفير وظيفة حول كيفية عرض القالب.

هل من الممكن توفير وظيفة على LitElements كممتلكات؟ لأنه بعد ذلك سأقوم بتمرير العرض إلى المستهلك حيث يتمتع بكل مرونة جافا سكريبت في هذه الوظيفة. الوظيفة لديها معلمات معلنة (إدخال للقالب) ويجب أن تعيد سلسلة.

يمكن إجراء التنفيذ الافتراضي على النحو التالي:

_defaultTemplate<T>(display: string, value: T): string {
   return `<option>${display}</option>`
}

كما تمت مناقشته في # 1513 ، نحتاج إلى التعامل مع العنصر المنبثق بشكل صحيح.

لست متأكدًا مما إذا كان هذا هو المكان المناسب لمناقشة الإدخال الذي يمثل جزءًا من مكون التحرير والسرد - ولكن نظرًا لأن الإدخال ينمو عند التركيز ، أعتقد أنه من المنطقي توسيع مربع مكون الإدخال ليأخذ المساحة التي تمثل أكبر حالة لديه.

في الوقت الحالي ، يزيد عرض الإدخال بمقدار 16 بكسل بمجرد التركيز عليه. لذلك أقترح نقل التسمية + الإدخال بواسطة مساحة فارغة من 8. وهذا يعني أنه إذا كانت عناصر تحكم متعددة (إدخال ، تحديد ، ...) في تخطيط نموذج عمودي ، فيجب أن تكون جميع تسميات أي عناصر تحكم محاذاة. ربما يكون عنصر التحكم في النموذج منطقيًا حيث يعتني بتوحيد التباعد بين التسميات + المدخلات.

أرغب في تعديل الاقتراح عن طريق إضافة إدخال جديد لعرض سلسلة العرض لخيار التحديد الحالي:

المدخلات

| الاسم | مخطط لـ | اكتب | افتراضي | الوصف |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| displayNameFn | أفضل لاعب في العالم | (option: T) => string | (خيار) => `$ {option}` | دالة تُرجع سلسلة عرض (لا يُسمح باستخدام HTML) لخيار معين. |

سيوفر هذا أيضًا حلاً سهلاً لهذه المشكلة: # 1527

شيء صغير أعتقد أنه مهم: DtCombobox الحالي ، يستخدم الخيار value كنص عرض افتراضي "للخيار المحدد". أعتقد أنه من المنطقي أكثر استخدام الخيار textContent .
1) دائمًا ما يكون textContent قيمة صديقة لواجهة المستخدم ( value هي قيمة مناسبة لواجهة المستخدم في بعض الأحيان فقط)
2) استخدام textContent هو ما يفعله المعيار select

سنغلق هذه المشكلة لأن مكونات الويب ليست هي الطريقة التي نريد إنشاء مكونات في المستقبل ، فهذا مرتبط بتغيير الأولويات في الفريق.