Gathering detailed insights and metrics for web-ui-pack
Gathering detailed insights and metrics for web-ui-pack
Installations
npm install web-ui-packDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.18.1
NPM Version
10.8.2
Releases
22
Languages
1
TypeScript
TypeScript (100%)
Developer
Download Statistics
Total Downloads
25,863
Last Day
9
Last Week
196
Last Month
799
Last Year
16,153
GitHub Statistics
MIT License
9 Stars
2,578 Commits
2 Watchers
10 Branches
1 Contributors
Updated on May 23, 2025
Maintainers
1
Package Meta Information
Latest Version
1.2.4
Package Id
web-ui-pack@1.2.4
Unpacked Size
805.19 kB
Size
169.13 kB
File Count
137
NPM Version
10.8.2
Node Version
20.18.1
Published on
May 23, 2025
Total Downloads
Cumulative downloads
Total Downloads
25,863
Last Day
-10%
9
Compared to previous day
Last Week
148.1%
196
Compared to previous week
Last Month
-11.3%
799
Compared to previous month
Last Year
114.4%
16,153
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
85
@babel/core@babel/plugin-proposal-class-properties@babel/plugin-proposal-private-methods@babel/preset-env@babel/preset-react@babel/preset-typescript@types/jest@types/jest-environment-puppeteer@types/jsdom@types/node@types/prismjs@types/puppeteer@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parserautoprefixerbabel-eslintbabel-loaderbabel-plugin-jsx-classnames-advancedbabel-plugin-prismjsbrowserslistcase-sensitive-paths-webpack-plugincopy-webpack-plugincoverallscss-loadereslinteslint-config-airbnbeslint-config-prettiereslint-import-resolver-typescripteslint-plugin-importeslint-plugin-jesteslint-plugin-jsoneslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookseslint-plugin-unused-importsgulphtml-webpack-pluginjestjest-environment-jsdomjest-puppeteermarkdownlintmarkdownlint-climini-css-class-namemini-css-extract-pluginmini-svg-data-urioptimize-css-assets-webpack-pluginpostcsspostcss-font-base64postcss-hover-media-featurepostcss-importpostcss-loaderpostcss-normalizepostcss-scsspreactpreload-webpack-pluginprettierprettier-eslintprismjspuppeteerreactreact-domreact-router-domsasssass-loadershxstyle-loaderstylelintstylelint-config-prettierstylelint-config-recommended-scssstylelint-no-unsupported-browser-featuresstylelint-prettierstylelint-scssterserts-loadertsconfig-paths-webpack-plugintypescriptv8-to-istanbulwebpackwebpack-cliwebpack-dev-serverwebpack-mergewebpack-mock-server
web-ui-pack
Universal web package with high scalable WebComponents and helpers with focus on DX (developer experience)
Demo
You can see demo here or just clone repo and run npm i & npm start
Template repos with React: webpack-must-have, webpack-react (in progress)
Features
- Possible to use with any frameworks like Angular, React, Vue, etc. or even directly with HTML & JS (because it's js-native logic that doesn't require anything external)
- Form/controls are ready to use and have built-in validation logic for any case that you can imagine (see demo/controls)
- Focus on web-accessibility best practices (most popular packages have lower accessibility)
- High scalable and easily customizable (every component is developed for easy inheritance and redefine/extend default logic)
- Built-in CSS variables to use custom color themes with native ordinary styling (CSS, SCSS, etc.)
- Built-in dark color scheme. Add attribute
wupdark(<body wupdark>) and define your colors for other content outside web-ui-pack - Built-in Typescript (coverage types 100%)
- Built-in
.jsx/.tsxsupport (for React/Preact) - Supports different locales (based on localeInfo helper). For changing built-in messages override global function
window.__wupln(details you can find in your editor during the coding via built-in intellisense) - Well documented with JSDoc (use intellisense power of your editor to get details about each property/option/usage)
- Optimized for webpack (build includes only used components and helpers via side-effects option)
- Zero dependency (don't need to wait for bug-fixing of other packages)
- Always 100% test coverage via e2e and unit tests (it's a must-have and always will be so)
- Focus on performance (it's important to have low memory consumption and fast initialization)
Why the package is so big
It's developed with Typescript and has huge built-in documentation (JSDoc). Every method, property, event, and even local variables are documented well so you don't need extra resources to take an example to implement or configure elements. In the build result, without comments, you will see that it's small enough
Installing & usage
-
Install with npm
npm install web-ui-pack -
Add
import { WUPPopupElement } from "web-ui-pack";into any file (main.jsfor example) -
Call
WUPPopupElement.$use()to register the HTML tag into web-browser -
For usage with React see CODESTYLE.md (for other frameworks it's very similar)
-
For usage with HTML + VSCode extend VSCode settings (For WebStorm it works out of the box - without extra config)
1// .vscode/settings.json 2{ 3 // ... 4 "html.customData": ["node_modules/web-ui-pack/types.html.json"] 5} -
Type
<wup-&<wup-circle w-...to see suggestions (if it doesn't work reload VSCode). More details below
TODO
-
HTMLElement > BaseElement
-
BaseModal
- PopupElement demo
- Tooltip Hook
- ModalElement demo
- Modal in modal
- Confirm modal
- Confirm hook (use WUPModal.$useConfirmHook)
- Modal form
- Notify demo
- PopupElement demo
-
BaseControl
- SwitchControl (toggler) demo
- CheckControl (checkbox) demo
- CheckTreeControl
- CheckControl (checkbox) demo
- RadioControl (radioGroup) demo
- Full customized menu
- TextControl demo
- Mask/pattern for controls demo
- TextareaControl demo
- TextRichControl
- PasswordControl demo
- NumberControl demo
- BaseComboControl
- SelectControl (combobox) demo
- Full customized menu
- SelectManyControl demo
- SearchControl
- TimeControl demo
- DateControl demo
- option
syncto sync with TimeControl - option
multiple - DateTimeControl
- DateRangeControl
- option
- SelectControl (combobox) demo
- CalendarControl demo
- SliderControl (progress bar)
- FileControl
- ImageControl (AvatarEditor)
- ColorControl (ColorPicker)
- SwitchControl (toggler) demo
-
MediaPlayer (Video player)
-
InfiniteScroll
-
VirtualScroll
-
CarouselElement (Slide show)
-
TableElement
Components
Common rules:
- Naming
- All components named
WUP..Element,WUP..Controland have<wup-...>HTML-tags - Public properties/options/events/methods startsWith
$...(events$onOpen,$onClose, methods$open(),$close(), props like$isOpenedetc.) - Every component/class has static
$defaults(common options for the current class) and personal$options(per each component). See details in example $optionsare observed. So changing options affects the component immediately after empty timeout (every component has staticobservedOptionsas a set of watched options)- all custom
attributesupdate$optionsautomatically. Sodocument.querySelector('wup-spin').$options.inlineequal to<wup-spin inline />
- All components named
- Recommendations
- For webpack sideEffects switched on (for optimization). But if you don't use webpack don't import from
web-ui-packdirectly (due to tree-shaking can be not smart enough). Instead useweb-ui-pack/path-to-element - Every component has a good JSDoc so go ahead and read details directly during the coding
- Library compiled into ESNext. To avoid unexpected issues include this package into babel (use
exclude: /node_modules\/(?!(web-ui-pack)\/).*/for babel-loader)
- For webpack sideEffects switched on (for optimization). But if you don't use webpack don't import from
- Limitations
- In
jsx/tsxinstead ofclassNameuseclassattribute (React issue) - If you change custom html-attributes it will update
$options, but if you change some option it removes related attribute (for performance reasons). Better to avoid usage attributes at all
- In
- Inheritance
- Components are developed to be easily customized and inherited. Use ...$defaults of every class to configure behavior. You can rewrite everything you can imagine without digging a lot in a code. To be sure don't hesitate to take a look on *.d.ts or source code (there are enough comments to clarify even weird/difficult cases)
- All Components inherited from WUPBaseElement that extends default HTMLElement
- All internal event-callbacks startsWith
got...(gotReady, gotRemoved) - To redefine the component just extend it and register with a new html tag OR redefine default behavior via prototype functions (if $defaults are not included something). See details in example
Example
More details you can find in CODESTYLE.md and FAQ
Typescript
1import WUPPopupElement, { PopupOpenCases } from "web-ui-pack/popup/popupElement"; 2 3WUPPopupElement.$use(); // call it to register in the system 4// redefine some defaults; WARN: you can change placement rules here without changing $options per each element!!! 5WUPPopupElement.$defaults.offset = [2, 2]; 6WUPPopupElement.$defaults.minWidthByTarget = true; 7WUPPopupElement.$defaults.arrowEnable = true; 8 9// create element 10const el = document.createElement("wup-popup"); 11// WARN el.$options is a observable-clone of WUPPopupElement.$defaults 12// WARN: PopupOpenCases is const enum and import PopupOpenCases available only in Typescript 13el.$options.openCase = PopupOpenCases.onClick | PopupOpenCases.onFocus; // show popup by target.click and/or target.focus events 14el.$options.target = document.querySelector("button"); 15/* 16 Placement can be $top, $right, $bottom, $left (top - above at the target etc.) 17 every placement has align options: $start, $middle, $end (left - to align at the start of target) 18 also, you can set $adjust to allow Reduce popup to fit layout 19*/ 20el.$options.placement = [ 21 WUPPopupElement.$placements.$top.$middle; // place at the top of target and align by vertical line 22 WUPPopupElement.$placements.$bottom.$middle.$adjust, // adjust means 'ignore align to fit layout` 23 WUPPopupElement.$placements.$bottom.$middle.$adjust.$resizeHeight, // resize means 'allow to resize to fit layout' 24] 25document.body.append(el);
HTML, JSX, TSX
1<button id="btn1">Target</button> 2<!-- You can skip pointing attribute 'target' if popup is appended after target --> 3<wup-popup w-target="#btn1" w-placement="top-start">Some content here</wup-popup>
How to extend/override
1/// popup.ts 2 3// you can override via prototypes 4const original = WUPPopupElement.prototype.goOpen; 5WUPPopupElement.prototype.goOpen = function customGoShow() { 6 if (window.isBusy) { 7 return null; 8 } 9 return original(...arguments); 10}; 11 12/*** OR create extended class ***/ 13 14class Popup extends WUPPopupElement { 15 // take a look on definition of WUPPopupElement and you will find internals 16 protected override goOpen(openCase: PopupOpenCases): boolean { 17 if (openCase === PopupOpenCases.onHover) { 18 return false; 19 } 20 return super.goOpen(openCase); 21 } 22} 23 24const tagName = "ext-popup"; 25customElements.define(tagName, Popup); 26// That's it. New Popup with custom tag 'ext-popup' is ready 27 28// add for intellisense (for *.ts only) 29declare global { 30 // add element to DOM document.createElement 31 interface HTMLElementTagNameMap { 32 [tagName]: Popup; 33 } 34} 35 36declare module "react" { 37 // add element for tsx/jsx intellisense 38 namespace JSX { 39 interface IntrinsicElements { 40 [tagName]: IntrinsicElements["wup-popup"]; // reuse same definition from wup-popup 41 } 42 } 43}
Helpers
use import focusFirst from "web-ui-pack/helpers/focusFirst" etc.
WARNING: avoid using import { focusFirst } from "web-ui-pack; because in this case the whole web-ui-pack module traps in compilation of dev-bundle and increases time of compilation
Helpers.Animation
- animateDropdown ⇒
Animate (show/hide) element as dropdown via scale and counter-scale for children - animateStack ⇒
Animate (show/hide) every element via moving from target to own position
Helpers.HTML (DOM)
- findScrollParent ⇒
Find first parent with active scroll X/Y - findScrollParentAll ⇒
Find all parents with active scroll X/Y - focusFirst ⇒
Set focus on element or first possible nested element - isIntoView ⇒
Check if element is visible in scrollable parents - scrollIntoView ⇒
Scroll the HTMLElement's parent container such that the element is visible to the user and return promise by animation end - class WUPScrolled ⇒
Class makes pointed element scrollable and implements carousel-scroll behavior (appends new items during the scrolling). Supports swipe/pageUp/pageDown/mouseWheel events.
Helpers.Date
- dateCompareWithoutTime ⇒
Compare by Date-values without Time - dateCopyTime ⇒
Copy hh:mm:ss.fff part from B to A - dateFromString ⇒
Returns parsed date from string based on pointed format - dateToString ⇒
Returns a string representation of a date-time according to pointed format
Helpers.Math
- mathFixFP ⇒
Fix float precision issue after math operations when 10.53+0.1=>10.629999999999999 - mathScaleValue ⇒
Scale value from one range to another - mathRotate ⇒
Apply transform.rotate on point
Helpers.Object
- nestedProperty.set ⇒
nestedProperty.set(obj, "value.nestedValue", 1) sets obj.value.nestedValue = 1 - nestedProperty.get ⇒
nestedProperty.get(obj, "nested.val2", out?: {hasProp?: boolean} ) returns value from obj.nested.val2 - objectClone ⇒
Deep cloning object - objectToFormData ⇒
Converts pointed object with nested properties to FormData (including files) - observer ⇒
Converts object to observable (via Proxy) to allow listen for changes
Helpers.Event
- onEvent ⇒
More strict (for Typescript) wrapper of addEventListener() that returns callback with removeListener() - onFocusGot ⇒
Fires when element/children takes focus once (fires again after onFocusLost on element) - onScroll ⇒
Handles wheel & touch events for custom scrolling - onScrollStop ⇒
Returns callback when scrolling is stopped (via checking scroll position every frame-render) - onFocusLost ⇒
Fires when element/children completely lost focus - onSpy ⇒
Spy on method-call of object
Helpers.String
- stringLowerCount ⇒
Returns count of chars in lower case (for any language with ignoring numbers, symbols) - stringUpperCount ⇒
Returns count of chars in upper case (for any language with ignoring numbers, symbols) - stringPrettify ⇒
Changes camelCase/snake_case/kebab-case text to user-friendly title: 'somePropValue' to 'Some Prop Value'
Helpers.Other
- promiseWait ⇒
Produce Promise during for "no less than pointed time"; it helps for avoding spinner blinking during the very fast API-request in case: pending > waitResponse > resetPending - localeInfo ⇒
Locale-object with definitions related to user-locale - TimeObject ⇒
Plane time object without date
Troubleshooting
Be sure that you are familiar with common rules
Library doesn't work in some browsers
web-ui-pack is compiled to ESNext. So some features may not exist in browsers. To resolve it include the lib into babel-loader (for webpack check module.rules...exclude sections)
1// webpack.config.js 2 { 3 test: /\.(js|jsx)$/, 4 exclude: (() => { 5 // these packages must be included to change according to browserslist 6 const include = ["web-ui-pack"]; 7 return (v) => v.includes("node_modules") && !include.some((lib) => v.includes(lib)); 8 })(), 9 use: [ "babel-loader", ], 10 },
UI doesn't recognize HTML tags like <wup-popup /> etc
It's possible that you missed import or it was removed by the optimizer of webpack etc. To fix this need to force import at least once and don't forget to call
.$use()1import { WUPSelectControl, WUPTextControl } from "web-ui-pack"; 2 3WUPTextControl.$use(); // register element 4WUPSelectControl.$use(); // register element 5// etc.
FAQ
see demo/faq
No vulnerabilities found.
No security vulnerabilities found.