عن المشروع

تُعد web-ui-pack حزمة ويب شاملة توفر مكونات Web Components قابلة للتوسع بشكل كبير وأدوات مساعدة، مع التركيز على تجربة المطور. وهي مكتوبة بلغة TypeScript وتأتي مع توثيق JSDoc شامل، مما يتيح للمحررات عرض تفاصيل حول الخصائص والخيارات وطرق الاستخدام عبر الإكمال التلقائي (Intellisense). أبرز السمات المذكورة في ملف README: - مستقلة عن الإطار: يمكن استخدامها مع Angular أو React أو Vue أو HTML وJavaScript العاديين، حيث أن المنطق أصلي للمتصفح ولا يتطلب أي وقت تشغيل خارجي. - تأتي عناصر التحكم في النماذج جاهزة للاستخدام مع منطق مدمج للتحقق من الصحة، وتؤكد المشروع تركيزه على أفضل ممارسات إمكانية الوصول للويب. - صُممت المكونات لتكون قابلة للوراثة والتخصيص؛ حيث يمكن تغيير الإعدادات الافتراضية لكل فئة أو لكل عنصر، كما يمكن تجاوز السلوك عبر النماذج الأولية (Prototypes) أو الفئات الفرعية. - تدعم متغيرات CSS سمات ألوان مخصصة، وتتوفر سمة ألوان داكنة عبر إضافة السمة `wupdark`. - تتضمن أنواع TypeScript، بالإضافة إلى دعم `.jsx/.tsx` لـ React/Preact. - تتم معالجة التوطين (Localization) عبر أداة مساعدة `localeInfo`، مع إمكانية تجاوز الرسائل عبر دالة عامة. - مُحسّنة لتقنية tree-shaking في webpack عبر خيار side-effects؛ والحزمة لا تحتوي على أي تبعيات خارجية. - تدعي المشروع تغطية اختبارات بنسبة 100% عبر اختبارات الوحدات واختبارات end-to-end، مع التركيز على الأداء واستهلاك الذاكرة المنخفض. تشمل المكونات المتاحة المذكورة: DropdownElement، وSortElement، وSpinElement، وCircleElement، وPopupElement، وModalElement (مع دعم نافذة منبثقة داخل نافذة، ونافذة تأكيد، وخطاف تأكيد، ونموذج نافذة منبثقة)، وNotify، وFormElement، بالإضافة إلى مجموعة من عناصر التحكم: SwitchControl، وCheckControl، وRadioControl، وTextControl (مع قناع/نمط)، وTextareaControl، وPasswordControl، وNumberControl، وSelectControl، وSelectManyControl، وTimeControl، وDateControl، وCalendarControl. وتم تصنيف بعض العناصر على أنها لم تكتمل بعد، مثل SliderControl، وFileControl، وImageControl، وColorControl، وMediaPlayer، وInfiniteScroll، وVirtualScroll، وCarouselElement، وTableElement. تُجمع الأدوات المساعدة حسب المجال: الرسوم المتحركة (animateDropdown، animateStack)، وDOM (findScrollParent، focusFirst، isIntoView، scrollIntoView، WUPScrolled)، والتواريخ (dateCompareWithoutTime، dateCopyTime، dateFromString، dateToString)، والرياضيات (mathFixFP، mathScaleValue، mathRotate)، والكائنات (nestedProperty، objectClone، objectToFormData، observer)، والأحداث (onEvent، onFocusGot، onScroll، onScrollStop، onFocusLost، onSpy)، والنصوص (stringLowerCount، stringUpperCount، stringPrettify)، وأخرى (promiseWait، localeInfo، TimeObject)، والملفات (zip، exportToExcel، saveAsFile، csv). يتم التثبيت عبر npm، يليه استيراد المكون واستدعاء طريقتها الثابتة `$use()` لتسجيل العنصر المخصص. يوثق ملف README أيضًا إعدادات VSCode لبيانات HTML المخصصة، ويشير إلى أن المكتبة تُترجم إلى ESNext وقد تحتاج إلى تضمينها في babel-loader للمتصفحات الأقدم، ويوفر إرشادات لاستكشاف الأخطاء وإصلاحها للوسوم غير المعترف بها.