web-ui-pack
Advanced tools
Changelog
1.1.0 (Jan 18, 2024)
valueToUrl/valueFromUrl to valueToStorage/valueFromStorage.renderPopup() to have ability to override popup options$options.items. Improved JSDoc (added example)$options.items = [{value: 1, text: (v, li) => {... li.onclick = (e) => e.preventDefault();... } }]valueToStorage/valueFromStorage)opacity: 1 for button[clear]/prefix/postfix as fix when controls in a flex-row and it resizes on hoverReadme
web-ui-packUniversal 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 repo with React: webpack-must-have Template repo with Angular: webpack-angular
wupdark (<body wupdark>) and define main background & text colors.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)
// .vscode/settings.json
{
// ...
"html.customData": ["node_modules/web-ui-pack/types.html.json"]
}
Type <wup w- to see suggestions (if it doesn't work reload VSCode). More details below
HTMLElement > BaseElement
BaseModal
BaseControl
sync to sync with TimeControlmultipleMediaPlayer (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-elementexclude: /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
import WUPPopupElement, { PopupOpenCases } from "web-ui-pack/popup/popupElement";
WUPPopupElement.$use(); // call it to register in the system
// redefine some defaults; WARN: you can change placement rules here without changing $options per each element!!!
WUPPopupElement.$defaults.offset = [2, 2];
WUPPopupElement.$defaults.minWidthByTarget = true;
WUPPopupElement.$defaults.arrowEnable = true;
// create element
const el = document.createElement("wup-popup");
// WARN el.$options is a observable-clone of WUPPopupElement.$defaults
// WARN: PopupOpenCases is const enum and import PopupOpenCases available only in Typescript
el.$options.openCase = PopupOpenCases.onClick | PopupOpenCases.onFocus; // show popup by target.click and/or target.focus events
el.$options.target = document.querySelector("button");
/*
Placement can be $top, $right, $bottom, $left (top - above at the target etc.)
every placement has align options: $start, $middle, $end (left - to align at the start of target)
also, you can set $adjust to allow Reduce popup to fit layout
*/
el.$options.placement = [
WUPPopupElement.$placements.$top.$middle; // place at the top of target and align by vertical line
WUPPopupElement.$placements.$bottom.$middle.$adjust, // adjust means 'ignore align to fit layout`
WUPPopupElement.$placements.$bottom.$middle.$adjust.$resizeHeight, // resize means 'allow to resize to fit layout'
]
document.body.append(el);
HTML, JSX, TSX
<button id="btn1">Target</button>
<!-- You can skip pointing attribute 'target' if popup is appended after target -->
<wup-popup w-target="#btn1" w-placement="top-start">Some content here</wup-popup>
How to extend/override
/// popup.ts
// you can override via prototypes
const original = WUPPopupElement.prototype.goOpen;
WUPPopupElement.prototype.goOpen = function customGoShow() {
if (window.isBusy) {
return null;
}
return original(...arguments);
};
/*** OR create extended class ***/
class Popup extends WUPPopupElement {
// take a look on definition of WUPPopupElement and you will find internals
protected override goOpen(openCase: PopupOpenCases): boolean {
if (openCase === PopupOpenCases.onHover) {
return false;
}
return super.goOpen(openCase);
}
}
const tagName = "ext-popup";
customElements.define(tagName, Popup);
// That's it. New Popup with custom tag 'ext-popup' is ready
// add for intellisense (for *.ts only)
declare global {
// add element to document.createElement
interface HTMLElementTagNameMap {
[tagName]: Popup;
}
// add element for tsx/jsx intellisense
namespace JSX {
interface IntrinsicElements {
[tagName]: IntrinsicElements["wup-popup"];
}
}
}
use import focusFirst from "web-ui-pack/helpers/focusFirst" etc.
WARN: don't use 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 childrenAnimate (show/hide) every element via moving from target to own positionCompare by Date-values without TimeCopy hh:mm:ss.fff part from B to AReturns parsed date from string based on pointed formatReturns a string representation of a date-time according to pointed formatFind first parent with active scroll X/YFind all parents with active scroll X/YSet focus on element or first possible nested elementCheck if element is visible in scrollable parentsFix float precision issue after math operations when 10.53+0.1=>10.629999999999999Scale value from one range to anotherApply transform.rotate on pointnestedProperty.set(obj, "value.nestedValue", 1) sets obj.value.nestedValue = 1nestedProperty.get(obj, "nested.val2", out?: {hasProp?: boolean} ) returns value from obj.nested.val2deep cloning objectconverts object to observable (via Proxy) to allow listen for changesMore 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 scrollingReturns callback when scrolling is stopped (via checking scroll position every frame-render)Fires when element/children completely lost focusSpy on method-call of objectProduce Promise during for "no less than pointed time"; it helps for avoding spinner blinking during the very fast API-request in case: pending > waitResponse > resetPendingScroll the HTMLElement's parent container such that the element is visible to the user and return promise by animation endClass makes pointed element scrollable and implements carousel-scroll behavior (appends new items during the scrolling). Supports swipe/pageUp/pageDown/mouseWheel events.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, snakeCase, kebabCase text to user-friendlyLocale-object with definitions related to user-localePlane time object without dateBe 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
// webpack.config.js { test: /\.(js|jsx)$/, exclude: (() => { // these packages must be included to change according to browserslist const include = ["web-ui-pack"]; return (v) => v.includes("node_modules") && !include.some((lib) => v.includes(lib)); })(), use: [ "babel-loader", ], },
<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()import { WUPSelectControl, WUPTextControl } from "web-ui-pack"; WUPTextControl.$use(); // register element WUPSelectControl.$use(); // register element // etc.
see demo/faq
FAQs
Web package with UI elements
The npm package web-ui-pack receives a total of 11 weekly downloads. As such, web-ui-pack popularity was classified as not popular.
We found that web-ui-pack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.