web-ui-pack
Advanced tools
web-ui-packWeb package with high scalable WebComponents and helpers
You can see demo here or just clone repo and run npm i & npm start
.jsx/.tsx support (for React/Vue)It's developed with Typescript and has huge built-in documentation (JSDoc). Every method,property,event is documented well so you don't need extra resource to take an example to implement or configure elements. In build-result without comments you will see that it's small-enough
Using npm:
npm install web-ui-pack
Common rules:
WUP..Element, WUP..Control and has <wup-...> html-tags$... (events $onShow, $onHide, methods $show, $hide, props like $isShown etc.)$defaults (common options for current class) and personal $options (per each component). See details in example$options are observed. So changing options affects on component immediately after empty timeout (every component has static observedOptions as set of watched options)attributes updates $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)Check how you can use every element/control (popupElement for example) Also check code style example
Typescript
import WUPPopupElement, { ShowCases } from "web-ui-pack/popup/popupElement";
// 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: ShowCases is const enum and import ShowCases available only in Typescript
el.$options.showCase = ShowCases.onClick | ShowCases.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 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 appended after target -->
<wup-popup target="#btn1" placement="top-start">Some content here</wup-popup>
How to extend/override
/// popup.ts
// you can override via prototypes
const original = WUPPopupElement.prototype.goShow;
WUPPopupElement.prototype.goShow = 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 goShow(showCase: WUPPopup.ShowCases): boolean {
if (showCase === WUPPopup.ShowCases.onHover) {
return false;
}
return super.goShow(showCase);
}
}
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 positionCopy 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 parentsSum without float-precision-issueScale value from one range to anothernestedProperty.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, kebaCase text to user-friendlyLocale-object with definitions related to user-localePlane time object without dateBe sure that you familiar with common rules
web-ui-pack is compiled to ESNext. So some features maybe don't 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 if you missed import or it was removed by optimizer of wepback etc. To fix this you need to force import at least once
import { WUPSelectControl, WUPTextControl } from "web-ui-pack"; // this force webpack not ignore imports (if imported used only as html-tags without direct access) const sideEffect = WUPTextControl && WUPSelectControl; !sideEffect && console.error("Missed"); // It's required otherwise import is ignored by webpack // or WUPTextControl.$defaults.validateDebounceMs = 500; WUPSelectControl.$defaults.validateDebounceMs = 500; // etc.
see demo/faq
0.7.1 (Jul 24, 2023)
BREAKING CHANGES:
$options.clearAction => refactored enum-names & improved behavior/dynamic-icon for button[clear]Fixes:
$options.readOnly doesn't work - user able to change value$initValue > $options.maxCtrl + Z doesn't revert changesformat isn't applied on initNew/Features:
excludeNested to exclude some nested properties from observer$options.readOnlyInput can be number X to enable autoMode where input.readOnly = items.length < X.$isEqual) to compare by .id. So now don't need to worry about complex objects with id's (mostly related to SelectControl.$options.items & RadioControl.$options.items)$isRequired based on $options.validations.required$options.startWith can be string-dateFAQs
Web package with UI elements
The npm package web-ui-pack receives a total of 130 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 0 open source maintainers 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.