@neptune3d/dom 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dusan Jovanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -33,6 +33,7 @@ declare class StyleSheet {
 //#region src/types.d.ts
 type CssProperties = PropertiesFallback<string | number>;
 type Autocomplete<T$1 extends string> = T$1 | (string & {});
+type DomElementChild = DomElement<any> | string | number;
 //#endregion
 //#region src/DomElement.d.ts
 declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> {
@@ -47,7 +48,8 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
   get cssClassName(): string;
   getText(): string;
   text(txt: any): this;
-  add(...nodes: DomElement<any>[]): this;
+  protected resolveNode(child: DomElementChild): any;
+  add(...nodes: DomElementChild[]): this;
   /**
    * Inserts one or more DomElements into a parent at the specified index.
    * Each node is inserted sequentially starting from the given index.
@@ -56,7 +58,7 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @param nodes - One or more DomElements to insert.
    * @return This DomElement instance.
    */
-  insertAtIndex(index: number, ...nodes: DomElement<any>[]): this;
+  insertAtIndex(index: number, ...nodes: DomElementChild[]): this;
   /**
    * Replaces all existing child elements of this DOM node with the provided ones.
    * Internally clears the current children and appends the new nodes in order.
@@ -64,7 +66,7 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @param nodes - One or more DomElement instances to set as children.
    * @return This DomElement instance.
    */
-  setChildren(...nodes: DomElement<any>[]): this;
+  setChildren(...nodes: DomElementChild[]): this;
   /**
    * Replaces child elements starting from the specified index with the provided nodes.
    * All children before the index are preserved.
@@ -73,7 +75,7 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @param nodes - One or more DomElement instances to insert.
    * @return This DomElement instance.
    */
-  setChildrenFromIndex(index: number, ...nodes: DomElement<any>[]): this;
+  setChildrenFromIndex(index: number, ...nodes: DomElementChild[]): this;
   remove(): void;
   /**
    * Removes child elements within the specified index range.
@@ -121,8 +123,36 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
   color(value: Property.Color | undefined): this;
   h(value: Property.Height | number | undefined): this;
   w(value: Property.Width | number | undefined): this;
+  /**
+   * Sets the full border style.
+   * @param value - The CSS border value (e.g., "1px solid #ccc").
+   * @return This DomElement instance for chaining.
+   */
   b(value: Property.Border | undefined): this;
+  /**
+   * Sets the top border style.
+   * @param value - The CSS border-top value.
+   * @return This DomElement instance for chaining.
+   */
+  bt(value: Property.BorderTop | undefined): this;
+  /**
+   * Sets the right border style.
+   * @param value - The CSS border-right value.
+   * @return This DomElement instance for chaining.
+   */
   br(value: Property.BorderRight | undefined): this;
+  /**
+   * Sets the bottom border style.
+   * @param value - The CSS border-bottom value.
+   * @return This DomElement instance for chaining.
+   */
+  bb(value: Property.BorderBottom | undefined): this;
+  /**
+   * Sets the left border style.
+   * @param value - The CSS border-left value.
+   * @return This DomElement instance for chaining.
+   */
+  bl(value: Property.BorderLeft | undefined): this;
   overflow(value: Property.Overflow | undefined): this;
   overflowY(value: Property.OverflowY | undefined): this;
   overflowX(value: Property.OverflowX | undefined): this;
@@ -162,7 +192,6 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
 }
 declare function $<T$1 extends keyof HTMLElementTagNameMap>(tag: T$1): DomElement<T$1>;
 declare function $select<T$1 extends keyof HTMLElementTagNameMap>(selector: string): DomElement<T$1>;
-declare function $wrap<T$1 extends keyof HTMLElementTagNameMap = "div">(tag: T$1, ...nodes: DomElement[]): DomElement<T$1>;
 //#endregion
 //#region src/AnchorElement.d.ts
 declare class AnchorElement extends DomElement<"a"> {
@@ -216,24 +245,7 @@ declare class DomBody {
   add(...nodes: DomElement<any>[]): this;
   clear(): this;
 }
-//#endregion
-//#region src/Flex.d.ts
-declare class Flex<T$1 extends keyof HTMLElementTagNameMap = "div"> extends DomElement<T$1> {
-  constructor(tag?: T$1);
-  alignItems(value?: Property.AlignItems): this;
-  justifyContent(value?: Property.JustifyContent): this;
-  gap(value: Property.Gap): this;
-  direction(value: Property.FlexDirection): this;
-}
-//#endregion
-//#region src/Grid.d.ts
-declare class Grid<T$1 extends keyof HTMLElementTagNameMap = "div"> extends DomElement<T$1> {
-  constructor(tag?: T$1);
-  templateColumns(value: Property.GridTemplateColumns): this;
-  templateRows(value: Property.GridTemplateRows): this;
-  gap(value: Property.Gap): this;
-  alignItems(value?: Property.AlignItems): this;
-}
+declare function $body(): DomBody;
 //#endregion
 //#region src/IFrame.d.ts
 declare class IFrame extends DomElement<"iframe"> {
@@ -326,6 +338,46 @@ declare class OptionElement extends DomElement<"option"> {
   getValue(): string;
 }
 //#endregion
+//#region src/ProgressElement.d.ts
+/**
+ * A typed wrapper around the native <progress> HTML element, extending the DomElement base class.
+ *
+ * Provides ergonomic methods for setting and retrieving progress state.
+ *
+ * This class is designed for declarative composition and fluent chaining, and integrates
+ * seamlessly with the DomElement styling and layout system.
+ */
+declare class ProgressElement extends DomElement<"progress"> {
+  constructor();
+  /**
+   * Sets the current progress value.
+   * @param value - The numeric value to assign to the progress bar.
+   * @return This ProgressElement instance for chaining.
+   */
+  value(value: number): this;
+  /**
+   * Retrieves the current progress value.
+   * @return The numeric value of the progress bar.
+   */
+  getValue(): number;
+  /**
+   * Sets the maximum value of the progress bar.
+   * @param value - The numeric maximum value to assign.
+   * @return This ProgressElement instance for chaining.
+   */
+  max(value: number): this;
+  /**
+   * Retrieves the maximum value of the progress bar.
+   * @return The numeric maximum value.
+   */
+  getMax(): number;
+  /**
+   * Enables indeterminate mode by removing the value attribute.
+   * @return This ProgressElement instance for chaining.
+   */
+  indeterminate(): this;
+}
+//#endregion
 //#region src/SelectElement.d.ts
 declare class SelectElement extends DomElement<"select"> {
   constructor();
@@ -338,4 +390,4 @@ declare class SelectElement extends DomElement<"select"> {
 declare function uniqueId(prefix: string): string;
 declare function camelToKebab(prop: string): string;
 //#endregion
-export { $, $select, $wrap, AnchorElement, Autocomplete, Button, Canvas, CssProperties, type CssProperty, DomBody, DomElement, Flex, Grid, IFrame, ImageElement, InputCheckbox, InputColor, InputNumber, InputRange, InputText, OptionElement, SelectElement, StyleSheet, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, uniqueId };
+export { $, $body, $select, AnchorElement, Autocomplete, Button, Canvas, CssProperties, type CssProperty, DomBody, DomElement, DomElementChild, IFrame, ImageElement, InputCheckbox, InputColor, InputNumber, InputRange, InputText, OptionElement, ProgressElement, SelectElement, StyleSheet, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, uniqueId };

package/dist/index.js

@@ -1 +1 @@
-const e={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},t={WebkitAppearance:1};var n=class{constructor(e,t){this._index=e,this._rule=t,this.cssMap=new Map}_index;_rule;cssMap;get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}getCssRule(e){let t=this.cssMap.get(e);return t??=this._rule.insertRule(`${e}{}`,this.length),this._rule.cssRules.item(t)}delete(e){this._rule.deleteRule(e)}},r=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}getCssRule(e){let t=this.getCssMap(),n=t.get(e);return n??(n=this.sheet.insertRule(`${e}{}`),t.set(e,n)),this.sheet.cssRules.item(n)}deleteCssRule(e){let t=this.getCssMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n),t.delete(e))}getMediaRule(e){let t=this.getMediaMap(),r=t.get(e);if(!r){let i=this.sheet.insertRule(`@media(${e}){}`);r=new n(i,this.sheet.cssRules.item(i)),t.set(e,r)}return r}deleteMediaRule(e){let t=this.getMediaMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n.index),t.delete(e))}static getSheet(){let t=document.head.querySelector(`#${e.STYLE_ID}`);if(t==null){let t=document.createElement(`style`);return t.id=e.STYLE_ID,t.setAttribute(`type`,`text/css`),document.head.append(t),new e(t)}else return new e(t)}getCssMap(){let e=window.__neptuneCssMap__;return e||(e=new Map,window.__neptuneCssMap__=e),e}getMediaMap(){let e=window.__neptuneMediaMap__;return e||(e=new Map,window.__neptuneMediaMap__=e),e}static STYLE_ID=`__neptune-style__`};function i(e){return`${e}-${Date.now().toString(36)}-${(a++).toString(36)}`}let a=0;function o(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}var s=class{constructor(e,t){this._tag=e,this._dom=t??document.createElement(e),this._sheet=r.getSheet()}_tag;_dom;_sheet;_cssClassName;_userClassName;get tag(){return this._tag}get dom(){return this._dom}get cssClassName(){return this._cssClassName||=i(this.tag),this._cssClassName}getText(){return this._dom.textContent}text(e){return this._dom.textContent=String(e),this}add(...e){return this._dom.append(...e.map(e=>e._dom)),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(e.dom,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(e._dom,a);return this}remove(){this.dom.remove()}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}on(e,t,n){return this._dom.addEventListener(e,t,n),this}off(e,t,n){return this._dom.removeEventListener(e,t,n)}attr(e){for(let t in e)this._dom.setAttribute(t,e[t]);return this}props(e){for(let t in e){let n=e[t];this._dom[t]=n}return this}prop(e,t){return this._dom[e]=t,this}getProp(e){return this._dom[e]}style(e){for(let t in e)this._dom.style[t]=this.getStyleValue(t,e[t]);return this}id(e){return this._dom.id=e,this}className(e){return this._userClassName=e,this._dom.className=this._cssClassName?`${e} ${this.cssClassName}`:e,this}htmlFor(e){return this._tag===`label`&&(this._dom.htmlFor=e),this}title(e){return this.dom.title=e,this}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(e),this):(this.dom.style.setProperty(o(e),this.getStyleValue(e,t)),this)}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)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(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)}h(e){return this.setStyleProp(`height`,e)}w(e){return this.setStyleProp(`width`,e)}b(e){return this.setStyleProp(`border`,e)}br(e){return this.setStyleProp(`borderRight`,e)}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)}overflowEllipsis(){return this.style({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`})}ref(e){return e(this),this}rootCss(e){return this.css(``,e)}hoverCss(e){return this.css(`:hover`,e)}activeCss(e){return this.css(`:active`,e)}focusCss(e){return this.css(`:focus`,e)}setCssClassName(){return this.dom.className=this._userClassName?`${this._userClassName} ${this.cssClassName}`:this.cssClassName,this}setRuleCss(e,n){for(let r in n){let i=!!t[r],a=o(r);e.style.setProperty(i?`-${a}`:a,this.getStyleValue(r,n[r]))}}css(e,t){this.setCssClassName();let n=this._sheet.getCssRule(`.${this.cssClassName}${e}`);return this.setRuleCss(n,t),this}mediaCss(e,t,n){this.setCssClassName();let r=this._sheet.getMediaRule(e).getCssRule(`.${this.cssClassName}${t}`);return this.setRuleCss(r,n),this}mediaRootCss(e,t){return this.mediaCss(e,``,t)}minWidthCss(e,t){return this.mediaCss(`min-width:${this.getStyleValue(`width`,e)}`,``,t)}maxWidthCss(e,t){return this.mediaCss(`max-width:${this.getStyleValue(`width`,e)}`,``,t)}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}};function c(e){return new s(e)}function l(e){let t=document.querySelector(e);return new s(t.tagName.toLowerCase(),t)}function u(e,...t){return c(e).add(...t)}var d=class extends s{constructor(){super(`a`)}href(e){return this._dom.href=e,this}},f=class extends s{constructor(){super(`button`)}type(e){return this.dom.type=e,this}},p=class extends s{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}},m=class{get dom(){return document.body}style(e){for(let t in e)this.dom.style[t]=this.getStyleValue(t,e[t]);return this}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}add(...e){return this.dom.append(...e.map(e=>e.dom)),this}clear(){return this.dom.innerHTML=``,this}},h=class extends s{constructor(e){super(e??`div`),this.style({display:`flex`,alignItems:`center`})}alignItems(e=`center`){return this._dom.style.alignItems=e,this}justifyContent(e=`center`){return this._dom.style.justifyContent=e,this}gap(e){return this._dom.style.gap=this.getStyleValue(`gap`,e),this}direction(e){return this.dom.style.flexDirection=e,this}},g=class extends s{constructor(e){super(e??`div`),this.style({display:`grid`,alignItems:`center`})}templateColumns(e){return this._dom.style.gridTemplateColumns=String(e),this}templateRows(e){return this._dom.style.gridTemplateRows=String(e),this}gap(e){return this._dom.style.gap=this.getStyleValue(`gap`,e),this}alignItems(e=`center`){return this._dom.style.alignItems=e,this}},_=class extends s{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=this.getStyleValue(`width`,e),this}height(e){return this._dom.height=this.getStyleValue(`height`,e),this}setSize(e,t){return this._dom.width=this.getStyleValue(`width`,e),this._dom.height=this.getStyleValue(`height`,t),this}reload(){this.dom.src=this.dom.src}},v=class extends s{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}},y=class extends s{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`)}},b=class extends s{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}},x=class extends s{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}},S=class extends s{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}},C=class extends s{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}},w=class extends s{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}},T=class extends s{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}};export{c as $,l as $select,u as $wrap,d as AnchorElement,f as Button,p as Canvas,m as DomBody,s as DomElement,h as Flex,g as Grid,_ as IFrame,v as ImageElement,y as InputCheckbox,b as InputColor,x as InputNumber,S as InputRange,C as InputText,w as OptionElement,T as SelectElement,r as StyleSheet,e as UNITLESS_CSS_PROPS,t as VENDOR_CSS_PROPS,o as camelToKebab,i as uniqueId};
+const e={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},t={WebkitAppearance:1};var n=class{constructor(e,t){this._index=e,this._rule=t,this.cssMap=new Map}_index;_rule;cssMap;get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}getCssRule(e){let t=this.cssMap.get(e);return t??=this._rule.insertRule(`${e}{}`,this.length),this._rule.cssRules.item(t)}delete(e){this._rule.deleteRule(e)}},r=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}getCssRule(e){let t=this.getCssMap(),n=t.get(e);return n??(n=this.sheet.insertRule(`${e}{}`),t.set(e,n)),this.sheet.cssRules.item(n)}deleteCssRule(e){let t=this.getCssMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n),t.delete(e))}getMediaRule(e){let t=this.getMediaMap(),r=t.get(e);if(!r){let i=this.sheet.insertRule(`@media(${e}){}`);r=new n(i,this.sheet.cssRules.item(i)),t.set(e,r)}return r}deleteMediaRule(e){let t=this.getMediaMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n.index),t.delete(e))}static getSheet(){let t=document.head.querySelector(`#${e.STYLE_ID}`);if(t==null){let t=document.createElement(`style`);return t.id=e.STYLE_ID,t.setAttribute(`type`,`text/css`),document.head.append(t),new e(t)}else return new e(t)}getCssMap(){let e=window.__neptuneCssMap__;return e||(e=new Map,window.__neptuneCssMap__=e),e}getMediaMap(){let e=window.__neptuneMediaMap__;return e||(e=new Map,window.__neptuneMediaMap__=e),e}static STYLE_ID=`__neptune-style__`};function i(e){return`${e}-${Date.now().toString(36)}-${(a++).toString(36)}`}let a=0;function o(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}var s=class{constructor(e,t){this._tag=e,this._dom=t??document.createElement(e),this._sheet=r.getSheet()}_tag;_dom;_sheet;_cssClassName;_userClassName;get tag(){return this._tag}get dom(){return this._dom}get cssClassName(){return this._cssClassName||=i(this.tag),this._cssClassName}getText(){return this._dom.textContent}text(e){return this._dom.textContent=String(e),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?String(e):e.dom}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}remove(){this.dom.remove()}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}on(e,t,n){return this._dom.addEventListener(e,t,n),this}off(e,t,n){return this._dom.removeEventListener(e,t,n)}attr(e){for(let t in e)this._dom.setAttribute(t,e[t]);return this}props(e){for(let t in e){let n=e[t];this._dom[t]=n}return this}prop(e,t){return this._dom[e]=t,this}getProp(e){return this._dom[e]}style(e){for(let t in e)this._dom.style[t]=this.getStyleValue(t,e[t]);return this}id(e){return this._dom.id=e,this}className(e){return this._userClassName=e,this._dom.className=this._cssClassName?`${e} ${this.cssClassName}`:e,this}htmlFor(e){return this._tag===`label`&&(this._dom.htmlFor=e),this}title(e){return this.dom.title=e,this}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(o(e)),this):(this.dom.style.setProperty(o(e),this.getStyleValue(e,t)),this)}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)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(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)}h(e){return this.setStyleProp(`height`,e)}w(e){return this.setStyleProp(`width`,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)}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)}overflowEllipsis(){return this.style({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`})}ref(e){return e(this),this}rootCss(e){return this.css(``,e)}hoverCss(e){return this.css(`:hover`,e)}activeCss(e){return this.css(`:active`,e)}focusCss(e){return this.css(`:focus`,e)}setCssClassName(){return this.dom.className=this._userClassName?`${this._userClassName} ${this.cssClassName}`:this.cssClassName,this}setRuleCss(e,n){for(let r in n){let i=!!t[r],a=o(r);e.style.setProperty(i?`-${a}`:a,this.getStyleValue(r,n[r]))}}css(e,t){this.setCssClassName();let n=this._sheet.getCssRule(`.${this.cssClassName}${e}`);return this.setRuleCss(n,t),this}mediaCss(e,t,n){this.setCssClassName();let r=this._sheet.getMediaRule(e).getCssRule(`.${this.cssClassName}${t}`);return this.setRuleCss(r,n),this}mediaRootCss(e,t){return this.mediaCss(e,``,t)}minWidthCss(e,t){return this.mediaCss(`min-width:${this.getStyleValue(`width`,e)}`,``,t)}maxWidthCss(e,t){return this.mediaCss(`max-width:${this.getStyleValue(`width`,e)}`,``,t)}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}};function c(e){return new s(e)}function l(e){let t=document.querySelector(e);return new s(t.tagName.toLowerCase(),t)}var u=class extends s{constructor(){super(`a`)}href(e){return this._dom.href=e,this}},d=class extends s{constructor(){super(`button`)}type(e){return this.dom.type=e,this}},f=class extends s{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}},p=class{get dom(){return document.body}style(e){for(let t in e)this.dom.style[t]=this.getStyleValue(t,e[t]);return this}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}add(...e){return this.dom.append(...e.map(e=>e.dom)),this}clear(){return this.dom.innerHTML=``,this}};function m(){return new p}var h=class extends s{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=this.getStyleValue(`width`,e),this}height(e){return this._dom.height=this.getStyleValue(`height`,e),this}setSize(e,t){return this._dom.width=this.getStyleValue(`width`,e),this._dom.height=this.getStyleValue(`height`,t),this}reload(){this.dom.src=this.dom.src}},g=class extends s{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}},_=class extends s{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`)}},v=class extends s{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}},y=class extends s{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}},b=class extends s{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}},x=class extends s{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}},S=class extends s{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}},C=class extends s{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}},w=class extends s{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}};export{c as $,m as $body,l as $select,u as AnchorElement,d as Button,f as Canvas,p as DomBody,s as DomElement,h as IFrame,g as ImageElement,_ as InputCheckbox,v as InputColor,y as InputNumber,b as InputRange,x as InputText,S as OptionElement,C as ProgressElement,w as SelectElement,r as StyleSheet,e as UNITLESS_CSS_PROPS,t as VENDOR_CSS_PROPS,o as camelToKebab,i as uniqueId};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neptune3d/dom",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Helper classes and functions for the DOM.",
   "type": "module",
   "license": "MIT",