@neptune3d/dom 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# neptune3d/dom
+
+Helper classes and functions for the DOM.

package/dist/index.d.ts

@@ -0,0 +1,341 @@
+import { PropertiesFallback, Property, Property as CssProperty } from "csstype";
+
+//#region src/MediaRule.d.ts
+declare class MediaRule {
+  constructor(index: number, rule: CSSMediaRule);
+  protected _index: number;
+  protected _rule: CSSMediaRule;
+  protected cssMap: Map<string, number>;
+  get index(): number;
+  get rule(): CSSMediaRule;
+  get length(): number;
+  getCssRule(selector: string): CSSStyleRule;
+  delete(index: number): void;
+}
+//#endregion
+//#region src/StyleSheet.d.ts
+declare class StyleSheet {
+  constructor(el: HTMLStyleElement);
+  protected _dom: HTMLStyleElement;
+  get dom(): HTMLStyleElement;
+  get sheet(): CSSStyleSheet;
+  get length(): number;
+  getCssRule(selector: string): CSSStyleRule;
+  deleteCssRule(selector: string): void;
+  getMediaRule(mediaText: string): MediaRule;
+  deleteMediaRule(mediaText: string): void;
+  static getSheet(): StyleSheet;
+  protected getCssMap(): Map<string, number>;
+  protected getMediaMap(): Map<string, MediaRule>;
+  static STYLE_ID: string;
+}
+//#endregion
+//#region src/types.d.ts
+type CssProperties = PropertiesFallback<string | number>;
+type Autocomplete<T$1 extends string> = T$1 | (string & {});
+//#endregion
+//#region src/DomElement.d.ts
+declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> {
+  constructor(tag: Tag, el?: HTMLElementTagNameMap[Tag]);
+  protected _tag: Tag;
+  protected _dom: HTMLElementTagNameMap[Tag];
+  protected _sheet: StyleSheet;
+  protected _cssClassName: string | undefined;
+  protected _userClassName: string | undefined;
+  get tag(): Tag;
+  get dom(): HTMLElementTagNameMap[Tag];
+  get cssClassName(): string;
+  getText(): string;
+  text(txt: any): this;
+  add(...nodes: DomElement<any>[]): this;
+  /**
+   * Inserts one or more DomElements into a parent at the specified index.
+   * Each node is inserted sequentially starting from the given index.
+   *
+   * @param index - The zero-based index at which to start inserting.
+   * @param nodes - One or more DomElements to insert.
+   * @return This DomElement instance.
+   */
+  insertAtIndex(index: number, ...nodes: DomElement<any>[]): 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.
+   *
+   * @param nodes - One or more DomElement instances to set as children.
+   * @return This DomElement instance.
+   */
+  setChildren(...nodes: DomElement<any>[]): this;
+  /**
+   * Replaces child elements starting from the specified index with the provided nodes.
+   * All children before the index are preserved.
+   *
+   * @param index - The zero-based index at which replacement begins.
+   * @param nodes - One or more DomElement instances to insert.
+   * @return This DomElement instance.
+   */
+  setChildrenFromIndex(index: number, ...nodes: DomElement<any>[]): this;
+  remove(): void;
+  /**
+   * Removes child elements within the specified index range.
+   * If no range is provided, removes all children.
+   *
+   * @param from - The starting index (inclusive). Defaults to 0.
+   * @param to - The ending index (exclusive). Defaults to all children.
+   * @returns This DomElement instance.
+   */
+  clear(from?: number, to?: number): this;
+  on<T extends keyof HTMLElementEventMap>(type: T, handler: (ev: HTMLElementEventMap[T] & {
+    currentTarget: HTMLElementTagNameMap[Tag];
+  }) => void, options?: boolean | AddEventListenerOptions): this;
+  off<T extends keyof HTMLElementEventMap>(type: T, handler: (ev: HTMLElementEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  attr(obj: Record<string, any>): this;
+  props(obj: Record<string, any>): this;
+  prop(name: string, value: any): this;
+  getProp(name: string): any;
+  style(obj: CssProperties): this;
+  id(value: string): this;
+  className(value: string): this;
+  htmlFor(value: string): this;
+  title(value: string): this;
+  protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
+  p(value: Property.Padding | undefined): this;
+  pt(value: Property.PaddingTop | undefined): this;
+  pr(value: Property.PaddingRight | undefined): this;
+  pb(value: Property.PaddingBottom | undefined): this;
+  pl(value: Property.PaddingLeft | undefined): this;
+  px(value: Property.PaddingLeft | undefined): this;
+  py(value: Property.PaddingTop | undefined): this;
+  m(value: Property.Margin | undefined): this;
+  mt(value: Property.MarginTop | undefined): this;
+  mr(value: Property.MarginRight | undefined): this;
+  mb(value: Property.MarginBottom | undefined): this;
+  ml(value: Property.MarginLeft | undefined): this;
+  radius(value: Property.BorderRadius | undefined): this;
+  radiusTopLeft(value: Property.BorderTopLeftRadius | undefined): this;
+  radiusTopRight(value: Property.BorderTopRightRadius | undefined): this;
+  radiusTop(value: Property.BorderTopLeftRadius | undefined): this;
+  display(value: Property.Display | undefined): this;
+  flexShrink(value: Property.FlexShrink | undefined): this;
+  flex(value: Property.Flex | undefined): this;
+  bgColor(value: Property.BackgroundColor | undefined): this;
+  color(value: Property.Color | undefined): this;
+  h(value: Property.Height | number | undefined): this;
+  w(value: Property.Width | number | undefined): this;
+  b(value: Property.Border | undefined): this;
+  br(value: Property.BorderRight | undefined): this;
+  overflow(value: Property.Overflow | undefined): this;
+  overflowY(value: Property.OverflowY | undefined): this;
+  overflowX(value: Property.OverflowX | undefined): this;
+  fontSize(value: Property.FontSize | undefined): this;
+  fontWeight(value: Property.FontWeight | undefined): this;
+  fontFamily(value: Property.FontFamily | undefined): this;
+  fontStyle(value: Property.FontStyle | undefined): this;
+  textAlign(value: Property.TextAlign | undefined): this;
+  textDecoration(value: Property.TextDecoration | undefined): this;
+  pos(value: Property.Position | undefined): this;
+  posTop(value: Property.Top | undefined): this;
+  posBottom(value: Property.Bottom | undefined): this;
+  posLeft(value: Property.Left | undefined): this;
+  posRight(value: Property.Right | undefined): this;
+  cursor(value: Property.Cursor | undefined): this;
+  alignItems(value: Property.AlignItems | undefined): this;
+  justifyContent(value: Property.JustifyContent | undefined): this;
+  gap(value: Property.Gap | undefined): this;
+  flexDirection(value: Property.FlexDirection | undefined): this;
+  templateColumns(value: Property.GridTemplateColumns | undefined): this;
+  templateRows(value: Property.GridTemplateRows | undefined): this;
+  appearance(value: Property.Appearance | undefined): this;
+  overflowEllipsis(): this;
+  ref(refFn: (el: this) => void): this;
+  rootCss(props: CssProperties): this;
+  hoverCss(props: CssProperties): this;
+  activeCss(props: CssProperties): this;
+  focusCss(props: CssProperties): this;
+  protected setCssClassName(): this;
+  protected setRuleCss(rule: CSSStyleRule, props: CssProperties): void;
+  css(selector: string, props: CssProperties): this;
+  mediaCss(mediaText: string, selector: string, props: CssProperties): this;
+  mediaRootCss(mediaText: string, props: CssProperties): this;
+  minWidthCss(minWidth: number | string, props: CssProperties): this;
+  maxWidthCss(maxWidth: number | string, props: CssProperties): this;
+  protected getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
+}
+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"> {
+  constructor();
+  href(value: string): this;
+}
+//#endregion
+//#region src/Button.d.ts
+declare class Button extends DomElement<"button"> {
+  constructor();
+  type(value: "button" | "submit" | "reset"): this;
+}
+//#endregion
+//#region src/Canvas.d.ts
+declare class Canvas extends DomElement<"canvas"> {
+  constructor(el?: HTMLCanvasElement);
+  protected _size: {
+    width: number;
+    height: number;
+  };
+  getWidth(): number;
+  getHeight(): number;
+  width(value: number): this;
+  height(value: number): this;
+  setSize(width: number, height: number): this;
+  getSize(): {
+    width: number;
+    height: number;
+  };
+  getAspect(): number;
+  getAspectScale(target: {
+    x: number;
+    y: number;
+    z: number;
+  }): {
+    x: number;
+    y: number;
+    z: number;
+  };
+}
+//#endregion
+//#region src/constants.d.ts
+declare const UNITLESS_CSS_PROPS: Record<string, 1>;
+declare const VENDOR_CSS_PROPS: Record<string, 1>;
+//#endregion
+//#region src/DomBody.d.ts
+declare class DomBody {
+  get dom(): HTMLBodyElement;
+  style(obj: CssProperties): this;
+  protected getStyleValue(name: string, value: string | number): string;
+  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;
+}
+//#endregion
+//#region src/IFrame.d.ts
+declare class IFrame extends DomElement<"iframe"> {
+  constructor();
+  src(value: string): this;
+  allowFullscreen(value?: boolean): this;
+  width(value: number): this;
+  height(value: number): this;
+  setSize(width: number, height: number): this;
+  reload(): void;
+}
+//#endregion
+//#region src/ImageElement.d.ts
+declare class ImageElement extends DomElement<"img"> {
+  constructor();
+  src(value: string): this;
+  width(value: number): this;
+  height(value: number): this;
+  setSize(width: number, height: number): this;
+  alt(value: string): this;
+}
+//#endregion
+//#region src/InputCheckbox.d.ts
+declare class InputCheckbox extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  checked(value: boolean): this;
+  isChecked(): boolean;
+}
+//#endregion
+//#region src/InputColor.d.ts
+declare class InputColor extends DomElement<"input"> {
+  constructor();
+  protected _rgb: {
+    r: number;
+    g: number;
+    b: number;
+  };
+  name(value: string): this;
+  value(value: string): this;
+  getValue(): string;
+  getRGB(): {
+    r: number;
+    g: number;
+    b: number;
+  };
+  getNormalizedRGB(): {
+    r: number;
+    g: number;
+    b: number;
+  };
+}
+//#endregion
+//#region src/InputNumber.d.ts
+declare class InputNumber extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: number): this;
+  getValue(): number;
+  min(value: number): this;
+  max(value: number): this;
+  step(value: number): this;
+  placeholder(value: string): this;
+}
+//#endregion
+//#region src/InputRange.d.ts
+declare class InputRange extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: number): this;
+  getValue(): number;
+  min(value: number): this;
+  max(value: number): this;
+  step(value: number): this;
+}
+//#endregion
+//#region src/InputText.d.ts
+declare class InputText extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: string): this;
+  getValue(): string;
+  placeholder(value: string): this;
+}
+//#endregion
+//#region src/OptionElement.d.ts
+declare class OptionElement extends DomElement<"option"> {
+  constructor();
+  value(value: string | number): this;
+  getValue(): string;
+}
+//#endregion
+//#region src/SelectElement.d.ts
+declare class SelectElement extends DomElement<"select"> {
+  constructor();
+  name(value: string): this;
+  value(value: string | number): this;
+  getValue(): string;
+}
+//#endregion
+//#region src/utils.d.ts
+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 };

package/dist/index.js

@@ -0,0 +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};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@neptune3d/dom",
+  "version": "0.0.1",
+  "description": "Helper classes and functions for the DOM.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/neptune-3d/dom#readme",
+  "bugs": {
+    "url": "https://github.com/neptune-3d/dom/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/neptune-3d/dom.git"
+  },
+  "author": "Dusan Jovanov <jovanovdusan1@gmail.com>",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "bumpp": "^10.3.1",
+    "prettier": "2.8",
+    "tsdown": "^0.15.6",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3"
+  }
+}