@oscarpalmer/toretto 0.4.0 → 0.5.0

package/dist/index.js

@@ -147,7 +147,35 @@ function setData(element, first, second) {
 function updateDataAttribute(element, key, value2) {
   updateElementValue(element, `data-${key}`, value2, element.setAttribute, element.removeAttribute, true);
 }
+// src/style.ts
+function getStyle(element, property) {
+  return element.style[property];
+}
+function getStyles(element, properties) {
+  const styles = {};
+  const { length } = properties;
+  for (let index = 0;index < length; index += 1) {
+    const property = properties[index];
+    styles[property] = element.style[property];
+  }
+  return styles;
+}
+function setStyle(element, property, value2) {
+  setElementValues(element, property, value2, updateStyleProperty);
+}
+function setStyles(element, styles) {
+  setElementValues(element, styles, null, updateStyleProperty);
+}
+function updateStyleProperty(element, key, value2) {
+  updateElementValue(element, key, value2, function(property, value3) {
+    this.style[property] = value3;
+  }, function(property) {
+    this.style[property] = "";
+  }, false);
+}
 export {
+  setStyles,
+  setStyle,
   setData,
   setAttributes,
   setAttribute,
@@ -155,6 +183,8 @@ export {
   isEmptyNonBooleanAttribute,
   isBooleanAttribute,
   isBadAttribute,
+  getStyles,
+  getStyle,
   getData,
   booleanAttributes
 };

package/dist/index.mjs

@@ -1,3 +1,4 @@
 // src/index.ts
 export * from "./attribute";
 export * from "./data";
+export * from "./style";

package/dist/style.js

@@ -0,0 +1,77 @@
+// node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
+function getString(value2) {
+  if (typeof value2 === "string") {
+    return value2;
+  }
+  if (typeof value2 !== "object" || value2 == null) {
+    return String(value2);
+  }
+  const valueOff = value2.valueOf?.() ?? value2;
+  const asString = valueOff?.toString?.() ?? String(valueOff);
+  return asString.startsWith("[object ") ? JSON.stringify(value2) : asString;
+}
+// node_modules/@oscarpalmer/atoms/dist/js/is.mjs
+function isNullableOrWhitespace(value2) {
+  return value2 == null || /^\s*$/.test(getString(value2));
+}
+function isPlainObject(value2) {
+  if (typeof value2 !== "object" || value2 === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value2);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value2) && !(Symbol.iterator in value2);
+}
+
+// src/internal/element-value.ts
+function setElementValues(element, first, second, callback) {
+  if (isPlainObject(first)) {
+    const entries = Object.entries(first);
+    const { length } = entries;
+    for (let index = 0;index < length; index += 1) {
+      const [key, value2] = entries[index];
+      callback(element, key, value2);
+    }
+  } else if (first != null) {
+    callback(element, first, second);
+  }
+}
+function updateElementValue(element, key, value2, set3, remove, json) {
+  if (isNullableOrWhitespace(value2)) {
+    remove.call(element, key);
+  } else {
+    set3.call(element, key, json ? JSON.stringify(value2) : String(value2));
+  }
+}
+
+// src/style.ts
+function getStyle(element, property) {
+  return element.style[property];
+}
+function getStyles(element, properties) {
+  const styles = {};
+  const { length } = properties;
+  for (let index = 0;index < length; index += 1) {
+    const property = properties[index];
+    styles[property] = element.style[property];
+  }
+  return styles;
+}
+function setStyle(element, property, value2) {
+  setElementValues(element, property, value2, updateStyleProperty);
+}
+function setStyles(element, styles) {
+  setElementValues(element, styles, null, updateStyleProperty);
+}
+function updateStyleProperty(element, key, value2) {
+  updateElementValue(element, key, value2, function(property, value3) {
+    this.style[property] = value3;
+  }, function(property) {
+    this.style[property] = "";
+  }, false);
+}
+export {
+  setStyles,
+  setStyle,
+  getStyles,
+  getStyle
+};

package/dist/style.mjs

@@ -0,0 +1,33 @@
+// src/style.ts
+import {setElementValues, updateElementValue} from "./internal/element-value";
+function getStyle(element, property) {
+  return element.style[property];
+}
+function getStyles(element, properties) {
+  const styles = {};
+  const { length } = properties;
+  for (let index = 0;index < length; index += 1) {
+    const property = properties[index];
+    styles[property] = element.style[property];
+  }
+  return styles;
+}
+function setStyle(element, property, value) {
+  setElementValues(element, property, value, updateStyleProperty);
+}
+function setStyles(element, styles) {
+  setElementValues(element, styles, null, updateStyleProperty);
+}
+function updateStyleProperty(element, key, value) {
+  updateElementValue(element, key, value, function(property, value2) {
+    this.style[property] = value2;
+  }, function(property) {
+    this.style[property] = "";
+  }, false);
+}
+export {
+  setStyles,
+  setStyle,
+  getStyles,
+  getStyle
+};

package/package.json

@@ -32,6 +32,18 @@
 			"bun": "./src/attribute.ts",
 			"import": "./dist/attribute.mjs",
 			"require": "./dist/attribute.js"
+		},
+		"./data": {
+			"types": "./types/data.d.ts",
+			"bun": "./src/data.ts",
+			"import": "./dist/data.mjs",
+			"require": "./dist/data.js"
+		},
+		"./style": {
+			"types": "./types/style.d.ts",
+			"bun": "./src/style.ts",
+			"import": "./dist/style.mjs",
+			"require": "./dist/style.js"
 		}
 	},
 	"files": ["dist", "src", "types"],
@@ -56,5 +68,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.4.0"
+	"version": "0.5.0"
 }

package/src/data.ts

@@ -3,7 +3,7 @@ import {parse} from '@oscarpalmer/atoms/string';
 import {setElementValues, updateElementValue} from './internal/element-value';
 
 /**
- * Get data values from an element as an object
+ * Get data values from an element
  */
 export function getData<Value extends PlainObject>(
 	element: HTMLElement,

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './attribute';
 export * from './data';
+export * from './style';

package/src/style.ts

@@ -0,0 +1,70 @@
+import {setElementValues, updateElementValue} from './internal/element-value';
+
+/**
+ * Get a style from an element
+ */
+export function getStyle(
+	element: HTMLElement,
+	property: keyof CSSStyleDeclaration,
+): string {
+	return element.style[property as never];
+}
+
+/**
+ * Get styles from an element
+ */
+export function getStyles<Property extends keyof CSSStyleDeclaration>(
+	element: HTMLElement,
+	properties: Property[],
+): Pick<CSSStyleDeclaration, Property> {
+	const styles = {} as Pick<CSSStyleDeclaration, Property>;
+	const {length} = properties;
+
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+
+		styles[property] = element.style[property as never] as never;
+	}
+
+	return styles;
+}
+
+/**
+ * Set a style on an element
+ */
+export function setStyle(
+	element: HTMLElement,
+	property: keyof CSSStyleDeclaration,
+	value?: string,
+): void {
+	setElementValues(element, property as string, value, updateStyleProperty);
+}
+
+/**
+ * Set styles on an element
+ */
+export function setStyles(
+	element: HTMLElement,
+	styles: Partial<CSSStyleDeclaration>,
+): void {
+	setElementValues(element, styles as string, null, updateStyleProperty);
+}
+
+function updateStyleProperty(
+	element: HTMLElement,
+	key: string,
+	value: unknown,
+): void {
+	updateElementValue(
+		element,
+		key,
+		value,
+		function (this: HTMLElement, property: string, value: string) {
+			this.style[property as never] = value;
+		},
+		function (this: HTMLElement, property: string) {
+			this.style[property as never] = '';
+		},
+		false,
+	);
+}

package/types/data.d.ts

@@ -1,6 +1,6 @@
 import type { PlainObject } from '@oscarpalmer/atoms/models';
 /**
- * Get data values from an element as an object
+ * Get data values from an element
  */
 export declare function getData<Value extends PlainObject>(element: HTMLElement, keys: string[]): Value;
 /**

package/types/index.d.cts

@@ -74,7 +74,7 @@ isObject('hello');
 export type UnknownRecord = Record<PropertyKey, unknown>;
 export type PlainObject = UnknownRecord;
 /**
- * Get data values from an element as an object
+ * Get data values from an element
  */
 export declare function getData<Value extends PlainObject>(element: HTMLElement, keys: string[]): Value;
 /**
@@ -89,5 +89,21 @@ export declare function setData(element: HTMLElement, data: PlainObject): void;
  * Set a data value on an element
  */
 export declare function setData(element: HTMLElement, key: string, value: unknown): void;
+/**
+ * Get a style from an element
+ */
+export declare function getStyle(element: HTMLElement, property: keyof CSSStyleDeclaration): string;
+/**
+ * Get styles from an element
+ */
+export declare function getStyles<Property extends keyof CSSStyleDeclaration>(element: HTMLElement, properties: Property[]): Pick<CSSStyleDeclaration, Property>;
+/**
+ * Set a style on an element
+ */
+export declare function setStyle(element: HTMLElement, property: keyof CSSStyleDeclaration, value?: string): void;
+/**
+ * Set styles on an element
+ */
+export declare function setStyles(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
 
 export {};

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './attribute';
 export * from './data';
+export * from './style';

package/types/style.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Get a style from an element
+ */
+export declare function getStyle(element: HTMLElement, property: keyof CSSStyleDeclaration): string;
+/**
+ * Get styles from an element
+ */
+export declare function getStyles<Property extends keyof CSSStyleDeclaration>(element: HTMLElement, properties: Property[]): Pick<CSSStyleDeclaration, Property>;
+/**
+ * Set a style on an element
+ */
+export declare function setStyle(element: HTMLElement, property: keyof CSSStyleDeclaration, value?: string): void;
+/**
+ * Set styles on an element
+ */
+export declare function setStyles(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;