@oscarpalmer/toretto 0.44.0 → 0.45.0

package/dist/index.d.mts

@@ -462,6 +462,12 @@ declare function isEventTarget(value: unknown): value is EventTarget;
  * @returns `true` if it's an HTML or SVG element, otherwise `false`
  */
 declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+declare function isInputElement(value: unknown): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 //#endregion
 //#region src/is.d.ts
 /**
@@ -591,4 +597,4 @@ declare function setStyles(element: Element, styles: Styles): void;
  */
 declare function toggleStyles(element: Element, styles: Styles): StyleToggler;
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, Attribute, CustomEventListener, EventPosition, RemovableEventListener, Selector, StyleToggler, TextDirection, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, Attribute, CustomEventListener, EventPosition, RemovableEventListener, Selector, StyleToggler, TextDirection, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };

package/dist/index.mjs

@@ -397,6 +397,14 @@ function isEventTarget(value) {
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
 //#endregion
 //#region src/is.ts
 /**
@@ -459,11 +467,16 @@ function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 const CSS_VARIABLE_PREFIX$1 = "--";
 //#endregion
 //#region src/internal/property.ts
+function getPropertyValue$1(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
 function updateProperty(element, name, value, dispatch) {
 	let property = name;
 	if (!(property in element)) property = camelCase(name);
-	if (!(property in element) || Object.is(element[property], value)) return;
-	element[property] = value;
+	const next = getPropertyValue$1(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 	if (typeof event === "string") element.dispatchEvent(new Event(event, {
 		bubbles: true,
@@ -1518,4 +1531,4 @@ const templates = new SizedMap(128);
 let parser;
 window.templates = templates;
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };

package/dist/internal/is.d.mts

@@ -11,5 +11,11 @@ declare function isEventTarget(value: unknown): value is EventTarget;
  * @returns `true` if it's an HTML or SVG element, otherwise `false`
  */
 declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+declare function isInputElement(value: unknown): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 //#endregion
-export { isEventTarget, isHTMLOrSVGElement };
+export { isEventTarget, isHTMLOrSVGElement, isInputElement };

package/dist/internal/is.mjs

@@ -15,5 +15,13 @@ function isEventTarget(value) {
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
 //#endregion
-export { isEventTarget, isHTMLOrSVGElement };
+export { isEventTarget, isHTMLOrSVGElement, isInputElement };

package/dist/internal/property.mjs

@@ -1,10 +1,17 @@
+import { isInputElement } from "./is.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 import { camelCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/property.ts
+function getPropertyValue(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
 function updateProperty(element, name, value, dispatch) {
 	let property = name;
 	if (!(property in element)) property = camelCase(name);
-	if (!(property in element) || Object.is(element[property], value)) return;
-	element[property] = value;
+	const next = getPropertyValue(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 	if (typeof event === "string") element.dispatchEvent(new Event(event, {
 		bubbles: true,

package/dist/is.d.mts

@@ -1,4 +1,4 @@
-import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
+import { isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
 
 //#region src/is.d.ts
 /**
@@ -21,4 +21,4 @@ declare function isInDocument(node: Node): boolean;
  */
 declare function isInDocument(node: Node, document: Document): boolean;
 //#endregion
-export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
+export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };

package/dist/is.mjs

@@ -1,4 +1,4 @@
-import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
+import { isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
 //#region src/is.ts
 /**
 * Is the value a child node?
@@ -21,4 +21,4 @@ const CHILD_NODE_TYPES = new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
-export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
+export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/toretto",
-	"version": "0.44.0",
+	"version": "0.45.0",
 	"description": "A collection of badass DOM utilities.",
 	"keywords": [
 		"dom",

package/src/internal/is.ts

@@ -24,4 +24,19 @@ export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGEl
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
 
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+export function isInputElement(
+	value: unknown,
+): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
+	return (
+		value instanceof HTMLInputElement ||
+		value instanceof HTMLSelectElement ||
+		value instanceof HTMLTextAreaElement
+	);
+}
+
 // #endregion

package/src/internal/property.ts

@@ -1,8 +1,18 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
 import {camelCase} from '@oscarpalmer/atoms/string/case';
+import {isInputElement} from './is';
 
 // #region Functions
 
+function getPropertyValue(element: Element, name: string, value: unknown): unknown {
+	if (isInputElement(element) && name === 'value') {
+		return getString(value);
+	}
+
+	return value;
+}
+
 export function updateProperty(
 	element: Element,
 	name: string,
@@ -15,11 +25,13 @@ export function updateProperty(
 		property = camelCase(name);
 	}
 
-	if (!(property in element) || Object.is((element as unknown as PlainObject)[property], value)) {
+	const next = getPropertyValue(element, name, value);
+
+	if (!(property in element) || Object.is((element as unknown as PlainObject)[property], next)) {
 		return;
 	}
 
-	(element as unknown as PlainObject)[property] = value;
+	(element as unknown as PlainObject)[property] = next;
 
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 

package/src/is.ts

@@ -54,6 +54,6 @@ const CHILD_NODE_TYPES: Set<number> = new Set([
 
 // #region Exports
 
-export {isEventTarget, isHTMLOrSVGElement} from './internal/is';
+export {isEventTarget, isHTMLOrSVGElement, isInputElement} from './internal/is';
 
 // #endregion