@neptune3d/dom 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -666,6 +666,15 @@ declare abstract class BaseStyle {
666
666
  * @return This instance for chaining.
667
667
  */
668
668
  zIndex(value: Property.ZIndex | undefined): this;
669
+ /**
670
+ * Sets the `opacity` style of the element.
671
+ * Controls the transparency level, where `1` is fully opaque and `0` is fully transparent.
672
+ * Accepts fractional values between `0` and `1`, or `undefined` to remove the style.
673
+ *
674
+ * @param value - The opacity value (e.g., `0.5`, `1`), or `undefined` to remove it.
675
+ * @return This instance for chaining.
676
+ */
677
+ opacity(value: Property.Opacity | undefined): this;
669
678
  /**
670
679
  * Applies CSS styles to truncate overflowing text with an ellipsis.
671
680
  * Ensures the text stays on a single line and hides overflow.
@@ -1216,6 +1225,43 @@ declare class CssRule extends BaseStyle {
1216
1225
  * Delegates to the StyleSheet instance to ensure proper cleanup and cache invalidation.
1217
1226
  */
1218
1227
  remove(): void;
1228
+ /**
1229
+ * Creates a new CssRule for a pseudo-selector extending this rule’s selector.
1230
+ * For example, `.btn:hover`, `.input:focus`, `.card:active`.
1231
+ *
1232
+ * @param pseudo - The pseudo-class to append (e.g., ":hover", ":focus").
1233
+ * @return A new CssRule instance targeting the extended selector.
1234
+ */
1235
+ pseudo(pseudo: `:${string}`): CssRule;
1236
+ /**
1237
+ * Creates a `:hover` rule for this selector.
1238
+ * @return A new CssRule instance for the `:hover` state.
1239
+ */
1240
+ hover(): CssRule;
1241
+ /**
1242
+ * Creates a `:focus` rule for this selector.
1243
+ * @return A new CssRule instance for the `:focus` state.
1244
+ */
1245
+ focus(): CssRule;
1246
+ /**
1247
+ * Creates a `:focus-within` rule for this selector.
1248
+ * Useful for styling parent containers when any child element receives focus.
1249
+ *
1250
+ * @return A new CssRule instance for the `:focus-within` state.
1251
+ */
1252
+ focusWithin(): CssRule;
1253
+ /**
1254
+ * Creates an `:active` rule for this selector.
1255
+ * @return A new CssRule instance for the `:active` state.
1256
+ */
1257
+ active(): CssRule;
1258
+ /**
1259
+ * Creates a `:disabled` rule for this selector.
1260
+ * Useful for styling form controls or buttons in a disabled state.
1261
+ *
1262
+ * @return A new CssRule instance for the `:disabled` state.
1263
+ */
1264
+ disabled(): CssRule;
1219
1265
  /**
1220
1266
  * Applies a style property to the underlying CSS rule.
1221
1267
  * Removes the property if `undefined` is passed.
@@ -1245,6 +1291,47 @@ declare class DomBody extends BaseDom<HTMLBodyElement> {
1245
1291
  */
1246
1292
  declare function $body(): DomBody;
1247
1293
  //#endregion
1294
+ //#region src/DomDocument.d.ts
1295
+ /**
1296
+ * Wrapper for the global `document` object with typed event listener utilities.
1297
+ * Useful for managing document-level events like visibility changes, selection, or clipboard interactions.
1298
+ */
1299
+ declare class DomDocument {
1300
+ /**
1301
+ * Adds an event listener to the document.
1302
+ * @param type - The event type (e.g., "visibilitychange", "copy", "selectionchange").
1303
+ * @param handler - The event handler function.
1304
+ * @param options - Optional event listener options.
1305
+ * @return This instance for chaining.
1306
+ */
1307
+ on<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T] & {
1308
+ currentTarget: Document;
1309
+ }) => void, options?: boolean | AddEventListenerOptions): this;
1310
+ /**
1311
+ * Removes an event listener from the document.
1312
+ * @param type - The event type to remove.
1313
+ * @param handler - The original handler function.
1314
+ * @param options - Optional event listener options.
1315
+ */
1316
+ off<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
1317
+ /**
1318
+ * Dispatches a DOM event on the document object.
1319
+ *
1320
+ * @param event - The corresponding event instance (e.g., `new Event("visibilitychange")`, `new ClipboardEvent("copy")`).
1321
+ * @return This instance for chaining.
1322
+ */
1323
+ dispatch(event: Event): this;
1324
+ }
1325
+ /**
1326
+ * Creates a new DomDocument instance bound to the global `document` object.
1327
+ * Provides typed event listener utilities and fluent dispatching for document-level DOM events.
1328
+ *
1329
+ * Useful for managing visibility state, clipboard interactions, selection changes, or custom document-wide signaling.
1330
+ *
1331
+ * @return A DomDocument instance wrapping the global `document`.
1332
+ */
1333
+ declare function $document(): DomDocument;
1334
+ //#endregion
1248
1335
  //#region src/DomWindow.d.ts
1249
1336
  /**
1250
1337
  * Wrapper for the global `window` object with typed event listener utilities.
@@ -1391,4 +1478,4 @@ declare function uniqueId(): string;
1391
1478
  declare function camelToKebab(prop: string): string;
1392
1479
  declare function getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
1393
1480
  //#endregion
1394
- export { $, $a, $body, $btn, $canvas, $iframe, $img, $input, $option, $progress, $query, $select, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, Button, Canvas, CssProperties, type CssProperty, CssRule, DomBody, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomWindow, IFrame, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };
1481
+ export { $, $a, $body, $btn, $canvas, $document, $iframe, $img, $input, $option, $progress, $query, $select, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, Button, Canvas, CssProperties, type CssProperty, CssRule, DomBody, DomDocument, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomWindow, IFrame, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- var e=class{p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusBottomLeft(e){return this.setStyleProp(`borderBottomLeftRadius`,e)}radiusBottomRight(e){return this.setStyleProp(`borderBottomRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}radiusBottom(e){return this.radiusBottomLeft(e).radiusBottomRight(e)}radiusLeft(e){return this.radiusTopLeft(e).radiusBottomLeft(e)}radiusRight(e){return this.radiusTopRight(e).radiusBottomRight(e)}radiusX(e){return this.radiusLeft(e).radiusRight(e)}radiusY(e){return this.radiusTop(e).radiusBottom(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}w(e){return this.setStyleProp(`width`,e)}h(e){return this.setStyleProp(`height`,e)}b(e){return this.setStyleProp(`border`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}br(e){return this.setStyleProp(`borderRight`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}bx(e){return this.setStyleProp(`borderLeft`,e),this.setStyleProp(`borderRight`,e),this}by(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderBottom`,e),this}btl(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderLeft`,e),this}btr(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderRight`,e),this}bbl(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderLeft`,e),this}bbr(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderRight`,e),this}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}posTop(e){return this.setStyleProp(`top`,e)}posBottom(e){return this.setStyleProp(`bottom`,e)}posLeft(e){return this.setStyleProp(`left`,e)}posRight(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}userSelect(e){return this.setStyleProp(`userSelect`,e)}verticalAlign(e){return this.setStyleProp(`verticalAlign`,e)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},n={WebkitAppearance:1},r=`svg.svgA.animate.animateMotion.animateTransform.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComponentTransfer.feComposite.feConvolveMatrix.feDiffuseLighting.feDisplacementMap.feDistantLight.feDropShadow.feFlood.feFuncA.feFuncB.feFuncG.feFuncR.feGaussianBlur.feImage.feMerge.feMergeNode.feMorphology.feOffset.fePointLight.feSpecularLighting.feSpotLight.feTile.feTurbulence.filter.foreignObject.g.image.line.linearGradient.marker.mask.metadata.mpath.path.pattern.polygon.polyline.radialGradient.rect.script.set.stop.style.switch.symbol.text.textPath.title.tspan.use.view`.split(`.`),i={svgA:`a`};function a(){return`${Date.now().toString(36)}-${(o++).toString(36)}`}let o=0;function s(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}var l=class extends e{className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){this.dom.removeEventListener(e,t,n)}add(...e){return this.dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this.dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this.dom.removeChild(n[e]);let a=this.dom.children[i]??null;for(let e of t)this.dom.insertBefore(this.resolveNode(e),a);return this}clear(e,t){let n=Array.from(this.dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this.dom.removeChild(n[e]);return this}ref(e){return e(this),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):`dom`in e?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),c(e,t)),this)}},u=class extends l{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}getAttr(e){return this.dom.getAttribute(e)}attr(e,t){return t===void 0?this.dom.removeAttribute(e):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}getProp(e){return this.dom[e]}prop(e,t){return this.dom[e]=t,this}props(e){for(let[t,n]of Object.entries(e))this.prop(t,n);return this}id(e){return this._dom.id=e??``,this}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return e===void 0?this.dom.removeAttribute(`title`):this.dom.setAttribute(`title`,e),this}disabled(e){return e?this.dom.setAttribute(`disabled`,``):this.dom.removeAttribute(`disabled`),this}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),this}};function d(e){return new u(e)}function f(e){let t=document.querySelector(e);return new u(t.tagName.toLowerCase(),t)}var p=class extends u{constructor(){super(`a`)}href(e){return this.dom.href=e,this}};function m(){return new p}var h=class extends u{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function g(){return new h}var _=class extends u{constructor(e){super(`canvas`,e)}_size={width:this.dom.width,height:this.dom.height};getWidth(){return this.dom.width}getHeight(){return this.dom.height}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}getSize(){return this._size.width=this.dom.width,this._size.height=this.dom.height,this._size}getAspect(){return this.dom.width/this.dom.height}getAspectScale(e){let t=this.dom.width/this.dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}};function v(){return new _}var y=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},b=class extends l{get dom(){return document.body}};function x(){return new b}var S=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){window.removeEventListener(e,t,n)}dispatch(e){return window.dispatchEvent(e),this}};function C(){return new S}var w=class extends u{constructor(){super(`iframe`)}src(e){return this.dom.src=e,this}allowFullscreen(e=!0){return this.dom.allowFullscreen=e,this}width(e){return this.dom.width=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function T(){return new w}var E=class extends u{constructor(){super(`img`)}src(e){return this.dom.src=e,this}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}alt(e){return this.dom.alt=e,this}};function D(){return new E}var O=class extends u{constructor(){super(`input`),this.dom.type=`checkbox`}name(e){return this.dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}},k=class extends u{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}},A=class extends u{constructor(){super(`input`),this.dom.type=`number`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}},j=class extends u{constructor(){super(`input`),this.dom.type=`range`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}},M=class extends u{constructor(){super(`input`),this.dom.type=`text`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}placeholder(e){return this.dom.placeholder=e,this}};function N(e){switch(e){case`text`:return new M;case`number`:return new A;case`checkbox`:return new O;case`color`:return new k;case`range`:return new j}}var P=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new y(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},F=class extends u{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function I(){return new F}var L=class extends u{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}};function R(){return new L}var z=class extends u{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function B(){return new z}var V=class e{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new y(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new P(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{d as $,m as $a,x as $body,g as $btn,v as $canvas,T as $iframe,D as $img,N as $input,I as $option,R as $progress,f as $query,B as $select,C as $window,p as AnchorElement,l as BaseDom,e as BaseStyle,h as Button,_ as Canvas,y as CssRule,b as DomBody,u as DomElement,S as DomWindow,w as IFrame,E as ImageElement,O as InputCheckbox,k as InputColor,A as InputNumber,j as InputRange,M as InputText,P as MediaRule,F as OptionElement,L as ProgressElement,r as SVG_TAGS,z as SelectElement,V as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};
1
+ var e=class{p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusBottomLeft(e){return this.setStyleProp(`borderBottomLeftRadius`,e)}radiusBottomRight(e){return this.setStyleProp(`borderBottomRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}radiusBottom(e){return this.radiusBottomLeft(e).radiusBottomRight(e)}radiusLeft(e){return this.radiusTopLeft(e).radiusBottomLeft(e)}radiusRight(e){return this.radiusTopRight(e).radiusBottomRight(e)}radiusX(e){return this.radiusLeft(e).radiusRight(e)}radiusY(e){return this.radiusTop(e).radiusBottom(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}w(e){return this.setStyleProp(`width`,e)}h(e){return this.setStyleProp(`height`,e)}b(e){return this.setStyleProp(`border`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}br(e){return this.setStyleProp(`borderRight`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}bx(e){return this.setStyleProp(`borderLeft`,e),this.setStyleProp(`borderRight`,e),this}by(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderBottom`,e),this}btl(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderLeft`,e),this}btr(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderRight`,e),this}bbl(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderLeft`,e),this}bbr(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderRight`,e),this}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}posTop(e){return this.setStyleProp(`top`,e)}posBottom(e){return this.setStyleProp(`bottom`,e)}posLeft(e){return this.setStyleProp(`left`,e)}posRight(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}userSelect(e){return this.setStyleProp(`userSelect`,e)}verticalAlign(e){return this.setStyleProp(`verticalAlign`,e)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}opacity(e){return this.setStyleProp(`opacity`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},n={WebkitAppearance:1},r=`svg.svgA.animate.animateMotion.animateTransform.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComponentTransfer.feComposite.feConvolveMatrix.feDiffuseLighting.feDisplacementMap.feDistantLight.feDropShadow.feFlood.feFuncA.feFuncB.feFuncG.feFuncR.feGaussianBlur.feImage.feMerge.feMergeNode.feMorphology.feOffset.fePointLight.feSpecularLighting.feSpotLight.feTile.feTurbulence.filter.foreignObject.g.image.line.linearGradient.marker.mask.metadata.mpath.path.pattern.polygon.polyline.radialGradient.rect.script.set.stop.style.switch.symbol.text.textPath.title.tspan.use.view`.split(`.`),i={svgA:`a`};function a(){return`${Date.now().toString(36)}-${(o++).toString(36)}`}let o=0;function s(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}var l=class extends e{className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){this.dom.removeEventListener(e,t,n)}add(...e){return this.dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this.dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this.dom.removeChild(n[e]);let a=this.dom.children[i]??null;for(let e of t)this.dom.insertBefore(this.resolveNode(e),a);return this}clear(e,t){let n=Array.from(this.dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this.dom.removeChild(n[e]);return this}ref(e){return e(this),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):`dom`in e?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),c(e,t)),this)}},u=class extends l{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}getAttr(e){return this.dom.getAttribute(e)}attr(e,t){return t===void 0?this.dom.removeAttribute(e):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}getProp(e){return this.dom[e]}prop(e,t){return this.dom[e]=t,this}props(e){for(let[t,n]of Object.entries(e))this.prop(t,n);return this}id(e){return this._dom.id=e??``,this}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return e===void 0?this.dom.removeAttribute(`title`):this.dom.setAttribute(`title`,e),this}disabled(e){return e?this.dom.setAttribute(`disabled`,``):this.dom.removeAttribute(`disabled`),this}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),this}};function d(e){return new u(e)}function f(e){let t=document.querySelector(e);return new u(t.tagName.toLowerCase(),t)}var p=class extends u{constructor(){super(`a`)}href(e){return this.dom.href=e,this}};function m(){return new p}var h=class extends u{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function g(){return new h}var _=class extends u{constructor(e){super(`canvas`,e)}_size={width:this.dom.width,height:this.dom.height};getWidth(){return this.dom.width}getHeight(){return this.dom.height}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}getSize(){return this._size.width=this.dom.width,this._size.height=this.dom.height,this._size}getAspect(){return this.dom.width/this.dom.height}getAspectScale(e){let t=this.dom.width/this.dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}};function v(){return new _}var y=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}pseudo(e){return this.sheet.cssRule(`${this.selectorText}${e}`)}hover(){return this.pseudo(`:hover`)}focus(){return this.pseudo(`:focus`)}focusWithin(){return this.pseudo(`:focus-within`)}active(){return this.pseudo(`:active`)}disabled(){return this.pseudo(`:disabled`)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},b=class extends l{get dom(){return document.body}};function x(){return new b}var S=class{on(e,t,n){return document.addEventListener(e,t,n),this}off(e,t,n){document.removeEventListener(e,t,n)}dispatch(e){return document.dispatchEvent(e),this}};function C(){return new S}var w=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){window.removeEventListener(e,t,n)}dispatch(e){return window.dispatchEvent(e),this}};function T(){return new w}var E=class extends u{constructor(){super(`iframe`)}src(e){return this.dom.src=e,this}allowFullscreen(e=!0){return this.dom.allowFullscreen=e,this}width(e){return this.dom.width=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function D(){return new E}var O=class extends u{constructor(){super(`img`)}src(e){return this.dom.src=e,this}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}alt(e){return this.dom.alt=e,this}};function k(){return new O}var A=class extends u{constructor(){super(`input`),this.dom.type=`checkbox`}name(e){return this.dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}},j=class extends u{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}},M=class extends u{constructor(){super(`input`),this.dom.type=`number`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}},N=class extends u{constructor(){super(`input`),this.dom.type=`range`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}},P=class extends u{constructor(){super(`input`),this.dom.type=`text`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}placeholder(e){return this.dom.placeholder=e,this}};function F(e){switch(e){case`text`:return new P;case`number`:return new M;case`checkbox`:return new A;case`color`:return new j;case`range`:return new N}}var I=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new y(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},L=class extends u{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function R(){return new L}var z=class extends u{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}};function B(){return new z}var V=class extends u{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function H(){return new V}var U=class e{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new y(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new I(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{d as $,m as $a,x as $body,g as $btn,v as $canvas,C as $document,D as $iframe,k as $img,F as $input,R as $option,B as $progress,f as $query,H as $select,T as $window,p as AnchorElement,l as BaseDom,e as BaseStyle,h as Button,_ as Canvas,y as CssRule,b as DomBody,S as DomDocument,u as DomElement,w as DomWindow,E as IFrame,O as ImageElement,A as InputCheckbox,j as InputColor,M as InputNumber,N as InputRange,P as InputText,I as MediaRule,L as OptionElement,z as ProgressElement,r as SVG_TAGS,V as SelectElement,U as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neptune3d/dom",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "Helper classes and functions for the DOM.",
5
5
  "type": "module",
6
6
  "license": "MIT",