منصوبے کے بارے میں

web-ui-pack ایک یونیورسل ویب پیکج ہے جو انتہائی اسکیل ایبل Web Components اور ہیلپر یوٹیلیٹیز فراہم کرتا ہے، جس کا زور ڈویلپر تجربے پر ہے۔ یہ TypeScript میں لکھا گیا ہے اور وسیع JSDoc ڈاکومینٹیشن کے ساتھ آتا ہے، تاکہ ایڈیٹرز انٹیلی سینس کے ذریعے پراپرٹیز، اختیارات اور استعمال کے بارے میں تفصیلات ظاہر کر سکیں۔ README میں بیان کردہ اہم خصوصیات: - فریم ورک سے آزاد: Angular، React، Vue یا سادہ HTML اور JavaScript کے ساتھ استعمال کیا جا سکتا ہے، کیونکہ منطق براؤزر کے لیے native ہے اور کسی بیرونی رن ٹائم کی ضرورت نہیں ہوتی۔ - فارم کنٹرولز بلٹ ان ویلیڈیشن لاجک کے ساتھ تیار ہیں، اور پروجیکٹ ویب ایسز کے بہترین طریقوں پر توجہ دینے کا دعویٰ کرتا ہے۔ - کمپوننٹس وراثت اور حسب ضرورت کے لیے ڈیزائن کیے گئے ہیں؛ ڈیفالٹس کو فی کلاس یا فی ایلیمنٹ تبدیل کیا جا سکتا ہے، اور رویے کو prototypes یا subclassing کے ذریعے اوور رائڈ کیا جا سکتا ہے۔ - CSS variables حسب ضرورت رنگ کے تھیمز کی سپورٹ کرتے ہیں، اور ایک گہرا رنگ سکیم `wupdark` ایٹریبیوٹ شامل کر کے دستیاب ہے۔ - TypeScript ٹائپس شامل ہیں، React/Preact کے لیے `.jsx/.tsx` سپورٹ کے ساتھ۔ - لوکلائزیشن `localeInfo` ہیلپر کے ذریعے سنبھالی جاتی ہے، جس میں پیغامات کو ایک global فنکشن کے ذریعے اوور رائڈ کیا جا سکتا ہے۔ - side-effects آپشن کے ذریعے webpack tree-shaking کے لیے بہتر بنایا گیا ہے؛ پیکج میں صفر انحصار (dependencies) ہیں۔ - پروجیکٹ یونٹ اور e2e ٹیسٹس کے ذریعے 100% ٹیسٹ کوریج کا دعویٰ کرتا ہے، اور کارکردگی اور کم میموری کھپت پر توجہ دینے کا ذکر کرتا ہے۔ دستیاب کمپوننٹس کی فہرست میں DropdownElement، SortElement، SpinElement، CircleElement، PopupElement، ModalElement (modal-in-modal، confirm modal، confirm hook اور modal form کے ساتھ)، Notify، FormElement، اور کنٹرولز کا ایک سیٹ شامل ہے: SwitchControl، CheckControl، RadioControl، TextControl (mask/pattern کے ساتھ)، 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 کے ذریعے ہوتی ہے، جس کے بعد ایک کمپوننٹ کو import کیا جاتا ہے اور اس کا static `$use()` طریقہ کسٹم ایلیمنٹ کو رجسٹر کرنے کے لیے کال کیا جاتا ہے۔ README میں HTML کسٹم ڈیٹا کے لیے VSCode سیٹنگز کی بھی دستاویزات موجود ہیں، اس بات کا نوٹ کیا گیا ہے کہ لائبریری کو ESNext میں کمپائل کیا جاتا ہے اور پرانے براؤزرز کے لیے اسے babel-loader میں شامل کرنے کی ضرورت ہو سکتی ہے، اور غیر معروف ٹیگز کے لیے ٹربل شوٹنگ گائیڈنس فراہم کی گئی ہے۔