Barista: Combobox: नया घटक

को निर्मित 2 मार्च 2020 · 8टिप्पणियाँ · स्रोत: dynatrace-oss/barista

सुविधा का अनुरोध

सारांश

लायब्रेरी में एक combobox घटक जोड़ें।

फ़ीचर विवरण

हम बहुत सारे डेटा के साथ काम कर रहे हैं। हमारा dt-select वास्तव में विकल्पों के एक बड़े सेट के साथ काम नहीं करता है। डीटी-चयन के लिए खोज कार्यक्षमता मूल चयन के समान ही है। इसलिए, उपयोगकर्ता केवल उस विकल्प पर जा सकता है जो उपयोगकर्ता द्वारा दबाए गए कुंजी से शुरू होता है।
यह वास्तव में बड़े डेटासेट वाले उपयोग के मामलों में सीमित है।
एक कॉम्बोक्स घटक जो एक डीटी-स्वत: पूर्ण संलग्न के साथ एक इनपुट से बनाया जा सकता है, वहां हमारी मदद कर सकता है।

इनपुट को प्लेसहोल्डर टेक्स्ट दिखाने की जरूरत है।
Combobox

कम्बोबॉक्स को डीटी-चयन के समान शैलियों का उपयोग करना चाहिए।

व्यवहार

क्लिक करने पर ड्रॉपडाउन उपयोगकर्ता के लिए चुनने के लिए कई मदों की एक सूची खोलता है और कर्सर को इनपुट फ़ील्ड में रखा जाता है। जैसे ही उपयोगकर्ता कंबोबॉक्स टाइप करना शुरू करते हैं, एक विवादित घटना का उत्सर्जन करना चाहिए और इनपुट के अंदर एक लोडिंग संकेतक दिखाना चाहिए जो हमारे पास पहले से ही फ़िल्टर-फ़ील्ड में है।

एक बार किसी आइटम का चयन करने के बाद, ड्रॉपडाउन बंद हो जाता है और इनपुट फ़ील्ड को तदनुसार अपडेट किया जाता है।

Combobox on click

कम्बोबॉक्स के पहले संस्करण के लिए, मेरा सुझाव है कि वर्चुअल स्क्रॉलिंग के बारे में चिंता न करें। हम उम्मीद कर सकते हैं कि सर्वर साइड पर आइटम्स की फ़िल्टरिंग की जाएगी। क्लाइंट पर पॉप्युलेट किए गए आइटम को रेंडर किया जा सकता है। हम दूसरे संस्करण में बड़े डेटासेट की हैंडलिंग में सुधार कर सकते हैं।
पहले संस्करण के लिए मैं डीटी-स्वत: पूर्ण का उपयोग करने का सुझाव दूंगा, लेकिन हमें डेटालिस्ट के साथ सरलीकृत ड्रॉपडाउन बनाने पर विचार करना चाहिए।

[ ] एपीआई प्रस्ताव लिखें
[ ] लिब और डेमो बनाएं
[] dtInput के अंदर कैरेट रखने के लिए ड्रॉपडाउन जोड़ें और अतिरिक्त स्टाइल बनाएं।
[ ] विवादित इनपुट इवेंट + लोडिंग इंडिकेटर जोड़ें
[ ] इकाई परीक्षण जोड़ें
[ ] e2e परीक्षण जोड़ें

संलग्नक

P2 feature help wanted new component

स्रोत

ffriedl89

सबसे उपयोगी टिप्पणी

मैं दो और इनपुट जोड़ने का प्रस्ताव करता हूं:
| नाम | प्रकार | डिफ़ॉल्ट मान | विवरण |
| --- | --- | --- | --- |
| लोड हो रहा है | boolean | false | जब सही पर सेट किया जाता है, तो उपयोगकर्ता को यह दिखाने के लिए एक लोडिंग संकेतक दिखाया जाता है कि डेटा वर्तमान में लोड/फ़िल्टर किया जा रहा है |
| डिस्प्लेविथ | (value: T) => string | (value: T) => ${value}`` | एक फ़ंक्शन किसी दिए गए ऑब्जेक्ट के लिए एक प्रदर्शन नाम लौटाता है जो कम्बोबॉक्स से एक विकल्प का प्रतिनिधित्व करता है |

डिस्प्लेविथ फ़ंक्शन ऑब्जेक्ट्स के साथ कम्बोबॉक्स का उपयोग करने के लिए प्रासंगिक है और एक लोडिंग इंडिकेटर एक घटक के लिए जरूरी लगता है - ज्यादातर मामलों में - सर्वर साइड पर फ़िल्टरिंग को ऑफ़लोड कर देगा।

heartdisease 15 मई 2020

👍2

सभी 8 टिप्पणियाँ

एक्सेसिबिलिटी संदर्भ के रूप में कृपया सूची बॉक्स पॉपअप के साथ WAI-ARIA कॉम्बोबॉक्स से सर्वोत्तम अभ्यास अनुशंसा पर विचार करें

tomheller 2 मार्च 2020

एपीआई प्रस्ताव कम्बोबॉक्स

उन्नत संरचना

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

इनपुट

आउटपुट

सामग्री प्रक्षेपण
डीटी-विकल्प
डीटी-ऑप्टग्रुप

जांच सूची

[] उचित कीबोर्ड समर्थन (तीर: ऊपर नीचे)
[ ] वाई-एरिया
[] ngForms संगतता पर विचार करें
[] सत्यापन पर विचार करें

lukett89 13 अप्रैल 2020

🚀1 👍1

अरे @ lukett89 , एपीआई प्रस्ताव के लिए धन्यवाद। वास्तव में महान प्रारंभिक बिंदु।
मुझे लगता है कि हमें dt-select के समान ही इनपुट की आवश्यकता होगी।

मैं जोड़ूंगा
| नाम | प्रकार | विवरण |
| ------------- | ------------- | ------------- |
| id | string | चयन के लिए आईडी |
| compareWith | (v1: T, v2: T) => boolean | चयनित मानों के साथ विकल्प मानों की तुलना करने का कार्य |
| required | boolean | क्या इनपुट की आवश्यकता है |
| panelClass | string | कम्बोबॉक्स ड्रॉपडाउन में जोड़ा गया वर्ग |

हमें खुले राज्य के लिए गेटर्स जोड़ने पर भी विचार करना चाहिए जैसे "खोला" और जब वह राज्य बदलता है तो आउटपुट।
मुझे लगता है कि यह फायदेमंद होगा अगर हम जितना संभव हो सके एक या दूसरे के बीच स्विचिंग को आसान बनाने के लिए निकटतम एपीआई से चयन कर सकते हैं।

ffriedl89 14 अप्रैल 2020

आपके उत्तर @ ffriedl89 के लिए धन्यवाद।
हम घटक के पहले संस्करण के लिए आपके द्वारा उल्लिखित सभी इनपुट/आउटपुट को ध्यान में रखेंगे।

lukett89 14 अप्रैल 2020

अंतिम एपीआई प्रस्ताव कम्बोबॉक्स

उन्नत संरचना

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

इनपुट

| नाम | प्रकार | विवरण |
| ------------- | ------------- | ------------- |
| value | string \| undefined | इनपुट के लिए प्रारंभिक मूल्य |
| placeholder | string \| undefined | इनपुट के लिए प्लेसहोल्डर |
| id | स्ट्रिंग | चयन के लिए आईडी |
| compareWith | (v1: T, v2: T) => boolean | चयनित मानों के साथ विकल्प मानों की तुलना करने का कार्य |
| required | boolean | क्या इनपुट की आवश्यकता है |
| panelClass | string | कम्बोबॉक्स ड्रॉपडाउन में जोड़ा गया वर्ग |

आउटपुट

| नाम | प्रकार | विवरण |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | एक नया मान चुने जाने पर ईवेंट उत्सर्जित होता है |
| filterChanges | EventEmitter<string> | फ़िल्टर में परिवर्तन होने पर उत्सर्जित होने वाली घटना |
| openedChange | इवेंट एमिटर| जब चयनित पैनल को टॉगल किया गया हो तो ईवेंट उत्सर्जित होता है। |

सामग्री प्रक्षेपण
डीटी-विकल्प
डीटी-ऑप्टग्रुप

जांच सूची

[] उचित कीबोर्ड समर्थन (तीर: ऊपर नीचे)
[ ] वाई-एरिया
[] ngForms संगतता पर विचार करें
[] सत्यापन पर विचार करें

lukett89 14 अप्रैल 2020

मैं अगले 2 सप्ताह के भीतर इस सुविधा को लागू करने का ध्यान रखना चाहता हूं। क्या आप कृपया मुझे यह मुद्दा सौंप सकते हैं?

heartdisease 15 अप्रैल 2020

सिंक में और @heartdisease और @lukett89 के साथ चर्चा के बाद, मैंने इस मुद्दे को फिर से सौंप दिया है।

tomheller 15 अप्रैल 2020