@studiometa/js-toolkit 2.5.0 → 2.6.0

package/utils/css/index.cjs

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/index.js
+// packages/js-toolkit/utils/css/index.ts
 var css_exports = {};
 __export(css_exports, {
   addClass: () => import_classes.add,

package/utils/css/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./animate.js";
-export { default as getOffsetSizes } from "./getOffsetSizes.js";
-export { default as matrix } from "./matrix.js";
-export { default as transform } from "./transform.js";
-export { default as transition } from "./transition.js";
-export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
-export { add as addStyle, remove as removeStyle } from "./styles.js";
+export * from './animate.js';
+export { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';
+export { add as addStyle, remove as removeStyle } from './styles.js';
+export { default as getOffsetSizes } from './getOffsetSizes.js';
+export { default as matrix } from './matrix.js';
+export { default as transform } from './transform.js';
+export { default as transition } from './transition.js';

package/utils/css/styles.cjs

@@ -24,18 +24,21 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var import_is = require("../is.cjs");
-function setStyles(element, styles, method = "add") {
-  if (!element || !styles || !(0, import_is.isObject)(styles)) {
+var import_utils = require("./utils.cjs");
+function setStyles(elementOrElements, styles, method = "add") {
+  if (!elementOrElements || !styles || !(0, import_is.isObject)(styles)) {
     return;
   }
-  Object.entries(styles).forEach(([prop, value]) => {
-    element.style[prop] = method === "add" ? value : "";
+  (0, import_utils.eachElements)(elementOrElements, (el) => {
+    Object.entries(styles).forEach(([prop, value]) => {
+      el.style[prop] = method === "add" ? value : "";
+    });
   });
 }
-function add(element, styles) {
-  setStyles(element, styles);
+function add(elementOrElements, styles) {
+  setStyles(elementOrElements, styles);
 }
-function remove(element, styles) {
-  setStyles(element, styles, "remove");
+function remove(elementOrElements, styles) {
+  setStyles(elementOrElements, styles, "remove");
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/styles.d.ts

@@ -1,16 +1,16 @@
 /**
  * Add styles to an element.
  *
- * @param {HTMLElement}                  element The element to update.
+ * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
  * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @returns {void}
  */
-export function add(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
+export function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement}                  element The element to update.
+ * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
  * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @returns {void}
  */
-export function remove(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
+export function remove(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;

package/utils/css/styles.js

@@ -1,17 +1,20 @@
 import { isObject } from "../is.js";
-function setStyles(element, styles, method = "add") {
-  if (!element || !styles || !isObject(styles)) {
+import { eachElements } from "./utils.js";
+function setStyles(elementOrElements, styles, method = "add") {
+  if (!elementOrElements || !styles || !isObject(styles)) {
     return;
   }
-  Object.entries(styles).forEach(([prop, value]) => {
-    element.style[prop] = method === "add" ? value : "";
+  eachElements(elementOrElements, (el) => {
+    Object.entries(styles).forEach(([prop, value]) => {
+      el.style[prop] = method === "add" ? value : "";
+    });
   });
 }
-function add(element, styles) {
-  setStyles(element, styles);
+function add(elementOrElements, styles) {
+  setStyles(elementOrElements, styles);
 }
-function remove(element, styles) {
-  setStyles(element, styles, "remove");
+function remove(elementOrElements, styles) {
+  setStyles(elementOrElements, styles, "remove");
 }
 export {
   add,

package/utils/css/transform.cjs

@@ -24,6 +24,7 @@ __export(transform_exports, {
 });
 module.exports = __toCommonJS(transform_exports);
 var import_is = require("../is.cjs");
+var import_utils = require("./utils.cjs");
 var TRANSFORM_PROPS = [
   "x",
   "y",
@@ -40,7 +41,7 @@ var TRANSFORM_PROPS = [
   "skewX",
   "skewY"
 ];
-function transform(element, props) {
+function transform(elementOrElements, props) {
   var _a, _b, _c;
   let value = "";
   if ((0, import_is.isDefined)(props.x) || (0, import_is.isDefined)(props.y) || (0, import_is.isDefined)(props.z)) {
@@ -82,7 +83,9 @@ function transform(element, props) {
       value += `skewY(${props.skewY}deg) `;
     }
   }
-  element.style.transform = value;
+  (0, import_utils.eachElements)(elementOrElements, (element) => {
+    element.style.transform = value;
+  });
   return value;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transform.d.ts

@@ -1,11 +1,11 @@
 /**
  * Generate a CSS transform.
  *
- * @param   {HTMLElement} element
+ * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
  * @param   {TransformProps} props
  * @returns {string}
  */
-export default function transform(element: HTMLElement, props: TransformProps): string;
+export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;
 /**
  * @typedef {Partial<{
  *  x: number;

package/utils/css/transform.js

@@ -1,4 +1,5 @@
 import { isDefined } from "../is.js";
+import { eachElements } from "./utils.js";
 const TRANSFORM_PROPS = [
   "x",
   "y",
@@ -15,7 +16,7 @@ const TRANSFORM_PROPS = [
   "skewX",
   "skewY"
 ];
-function transform(element, props) {
+function transform(elementOrElements, props) {
   var _a, _b, _c;
   let value = "";
   if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
@@ -57,7 +58,9 @@ function transform(element, props) {
       value += `skewY(${props.skewY}deg) `;
     }
   }
-  element.style.transform = value;
+  eachElements(elementOrElements, (element) => {
+    element.style.transform = value;
+  });
   return value;
 }
 export {

package/utils/css/transition.cjs

@@ -39,6 +39,7 @@ var classes = __toESM(require("./classes.cjs"), 1);
 var styles = __toESM(require("./styles.cjs"), 1);
 var import_is = require("../is.cjs");
 var import_has = require("../has.cjs");
+var import_utils = require("./utils.cjs");
 var cache = /* @__PURE__ */ new WeakMap();
 var Transition = class {
   constructor(element) {
@@ -101,7 +102,7 @@ function end(element, classesOrStyles, mode = "remove") {
   trs.isTransitioning = false;
   trs.transitionEndHandler = null;
 }
-async function transition(element, name, endMode = "remove") {
+async function singleTransition(element, name, endMode = "remove") {
   const classesOrStyles = (0, import_is.isString)(name) ? {
     from: `${name}-from`,
     active: `${name}-active`,
@@ -121,4 +122,9 @@ async function transition(element, name, endMode = "remove") {
   end(element, classesOrStyles, endMode);
   return Promise.resolve();
 }
+async function transition(elementOrElements, name, endMode = "remove") {
+  await Promise.all(
+    (0, import_utils.eachElements)(elementOrElements, (element) => singleTransition(element, name, endMode))
+  );
+}
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transition.d.ts

@@ -9,15 +9,12 @@ export function setClassesOrStyles(element: HTMLElement, classesOrStyles: Classe
 /**
  * Manage CSS transition with class.
  *
- * This is heavily inspired by the Vue `<transition>` component
- * and the `@barba/css` package, many thanks to them!
- *
- * @param  {HTMLElement}             element The target element.
- * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.
- * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles
- * @returns {Promise<void>}                   A promise resolving at the end of the transition.
+ * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.
+ * @param  {string|TransitionStyles}            name    The name of the transition or an object with the hooks classesOrStyles.
+ * @param  {string}                             endMode Whether to remove or keep the `to` classes/styles
+ * @returns {Promise<void>}                             A promise resolving at the end of the transition.
  */
-export default function transition(element: HTMLElement, name: string | TransitionStyles, endMode?: string): Promise<void>;
+export default function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: string): Promise<void>;
 export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
 export type TransitionStyles = {
     from?: ClassesOrStyles;

package/utils/css/transition.js

@@ -9,6 +9,7 @@ import * as classes from "./classes.js";
 import * as styles from "./styles.js";
 import { isArray, isString } from "../is.js";
 import { hasWindow } from "../has.js";
+import { eachElements } from "./utils.js";
 const cache = /* @__PURE__ */ new WeakMap();
 class Transition {
   constructor(element) {
@@ -71,7 +72,7 @@ function end(element, classesOrStyles, mode = "remove") {
   trs.isTransitioning = false;
   trs.transitionEndHandler = null;
 }
-async function transition(element, name, endMode = "remove") {
+async function singleTransition(element, name, endMode = "remove") {
   const classesOrStyles = isString(name) ? {
     from: `${name}-from`,
     active: `${name}-active`,
@@ -91,6 +92,11 @@ async function transition(element, name, endMode = "remove") {
   end(element, classesOrStyles, endMode);
   return Promise.resolve();
 }
+async function transition(elementOrElements, name, endMode = "remove") {
+  await Promise.all(
+    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode))
+  );
+}
 export {
   transition as default,
   setClassesOrStyles

package/utils/css/utils.cjs

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  eachElements: () => eachElements
+});
+module.exports = __toCommonJS(utils_exports);
+function eachElements(elementOrElements, callback) {
+  if (elementOrElements instanceof Node) {
+    return [callback(elementOrElements)];
+  }
+  return Array.from(elementOrElements).map(callback);
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/utils.d.ts

@@ -0,0 +1 @@
+export declare function eachElements<S extends Node = Node, T = void>(elementOrElements: S | S[] | NodeListOf<S>, callback: (element: S, index?: number, elements?: S[]) => T): T[];

package/utils/css/utils.js

@@ -0,0 +1,9 @@
+function eachElements(elementOrElements, callback) {
+  if (elementOrElements instanceof Node) {
+    return [callback(elementOrElements)];
+  }
+  return Array.from(elementOrElements).map(callback);
+}
+export {
+  eachElements
+};

package/utils/index.cjs

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/index.js
+// packages/js-toolkit/utils/index.ts
 var utils_exports = {};
 __export(utils_exports, {
   debounce: () => import_debounce.default,

package/utils/index.d.ts

@@ -1,19 +1,19 @@
-export { default as debounce } from "./debounce.js";
-export { default as focusTrap } from "./focusTrap.js";
-export { default as keyCodes } from "./keyCodes.js";
-export { default as memoize } from "./memoize.js";
-export { nextFrame } from "./nextFrame.js";
-export { default as nextTick } from "./nextTick.js";
-export { default as nextMicrotask } from "./nextMicrotask.js";
-export { default as throttle } from "./throttle.js";
-export { default as scrollTo } from "./scrollTo.js";
-export * from "./is.js";
-export * from "./has.js";
-export * from "./css/index.js";
-export * from "./collide/index.js";
-export * from "./math/index.js";
-export * from "./string/index.js";
-export * from "./scheduler.js";
-export * from "./noop.js";
-export { tween } from "./tween.js";
-export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";
+export { default as debounce } from './debounce.js';
+export { default as focusTrap } from './focusTrap.js';
+export { default as keyCodes } from './keyCodes.js';
+export { default as memoize } from './memoize.js';
+export { nextFrame } from './nextFrame.js';
+export { default as nextTick } from './nextTick.js';
+export { default as nextMicrotask } from './nextMicrotask.js';
+export { default as throttle } from './throttle.js';
+export { default as scrollTo } from './scrollTo.js';
+export * from './is.js';
+export * from './has.js';
+export * from './css/index.js';
+export { objectToURLSearchParams, push as historyPush, replace as historyReplace, } from './history.js';
+export * from './collide/index.js';
+export * from './math/index.js';
+export * from './string/index.js';
+export * from './scheduler.js';
+export * from './noop.js';
+export { tween } from './tween.js';