Gathering detailed insights and metrics for web-ui-pack
Gathering detailed insights and metrics for web-ui-pack
Gathering detailed insights and metrics for web-ui-pack
Gathering detailed insights and metrics for web-ui-pack
@remote-ui/web-workers
This package has been deprecated. If you are looking for an ergonomic way to create web workers in a project using [`@remote-ui/rpc`](../rpc), Webpack, and Babel, we recommend you use [`@shopify/web-worker`](https://github.com/Shopify/quilt/tree/main/pack
zq-react-ui-pack
zq ui tools for build web application
ngx-phosphor-icons
A flexible icon family for interfaces, diagrams, presentations — whatever, really.
spacerr
This starter pack provides a comprehensive Next.js setup, built on top of `create-next-app`, and includes additional features. Developed by spacerrr.
npm install web-ui-pack
Typescript
Module System
Node Version
NPM Version
TypeScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
9 Stars
2,578 Commits
2 Watchers
10 Branches
1 Contributors
Updated on May 23, 2025
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
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
85
Universal web package with high scalable WebComponents and helpers with focus on DX (developer experience)
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)
wupdark
(<body wupdark>
) and define your colors for other content outside web-ui-pack.jsx/.tsx
support (for React/Preact)window.__wupln
(details you can find in your editor during the coding via built-in intellisense)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
Install with npm npm install web-ui-pack
Add import { WUPPopupElement } from "web-ui-pack";
into any file (main.js
for 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
HTMLElement > BaseElement
BaseModal
BaseControl
sync
to sync with TimeControlmultiple
MediaPlayer (Video player)
InfiniteScroll
VirtualScroll
CarouselElement (Slide show)
TableElement
Common rules:
WUP..Element
, WUP..Control
and have <wup-...>
HTML-tags$...
(events $onOpen
, $onClose
, methods $open()
, $close()
, props like $isOpened
etc.)$defaults
(common options for the current class) and personal $options
(per each component). See details in example$options
are observed. So changing options affects the component immediately after empty timeout (every component has static observedOptions
as a set of watched options)attributes
update $options
automatically. So document.querySelector('wup-spin').$options.inline
equal to <wup-spin inline />
web-ui-pack
directly (due to tree-shaking can be not smart enough). Instead use web-ui-pack/path-to-element
exclude: /node_modules\/(?!(web-ui-pack)\/).*/
for babel-loader)jsx/tsx
instead of className
use class
attribute (React issue)$options
, but if you change some option it removes related attribute (for performance reasons). Better to avoid usage attributes at allgot...
(gotReady, gotRemoved)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}
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
Animate (show/hide) element as dropdown via scale and counter-scale for children
Animate (show/hide) every element via moving from target to own position
Find first parent with active scroll X/Y
Find all parents with active scroll X/Y
Set focus on element or first possible nested element
Check if element is visible in scrollable parents
Scroll the HTMLElement's parent container such that the element is visible to the user and return promise by animation end
Class makes pointed element scrollable and implements carousel-scroll behavior (appends new items during the scrolling). Supports swipe/pageUp/pageDown/mouseWheel events.
Compare by Date-values without Time
Copy hh:mm:ss.fff part from B to A
Returns parsed date from string based on pointed format
Returns a string representation of a date-time according to pointed format
Fix float precision issue after math operations when 10.53+0.1=>10.629999999999999
Scale value from one range to another
Apply transform.rotate on point
nestedProperty.set(obj, "value.nestedValue", 1) sets obj.value.nestedValue = 1
nestedProperty.get(obj, "nested.val2", out?: {hasProp?: boolean} ) returns value from obj.nested.val2
Deep cloning object
Converts pointed object with nested properties to FormData (including files)
Converts object to observable (via Proxy) to allow listen for changes
More strict (for Typescript) wrapper of addEventListener() that returns callback with removeListener()
Fires when element/children takes focus once (fires again after onFocusLost on element)
Handles wheel & touch events for custom scrolling
Returns callback when scrolling is stopped (via checking scroll position every frame-render)
Fires when element/children completely lost focus
Spy on method-call of object
Returns count of chars in lower case (for any language with ignoring numbers, symbols)
Returns count of chars in upper case (for any language with ignoring numbers, symbols)
Changes camelCase/snake_case/kebab-case text to user-friendly title: 'somePropValue' to 'Some Prop Value'
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
Locale-object with definitions related to user-locale
Plane time object without date
Be sure that you are familiar with common rules
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 },
<wup-popup />
etcIt'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.
see demo/faq
No vulnerabilities found.
No security vulnerabilities found.