@massimo-cassandro/minimo 1.9.1 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/utilities/dom-builder/dom-builder.js

@@ -64,18 +64,23 @@ import { parseDomString } from './parseDomString.js';
  *
  * @function domBuilder
  * @param {Array<DomBuilderItem|string>} [structureArray=[]] - Configuration array. Accepts strings (shorthand per `parseDomString`) and/or configuration objects.
- * @param {HTMLElement} [parent] - Parent element to append the structure to.
+ * @param {HTMLElement} [parent] - Parent element the structure is attached to (see `options.insertMode`).
  * @param {Object} [options={}] - Configuration options.
  * @param {boolean} [options.emptyParent=false] - When true, the parent element is emptied before building.
+ * @param {'append'|'before'|'after'} [options.insertMode='append'] - How each root element of `structureArray` is attached to `parent`: `append` inserts it as a child (default), `before`/`after` insert it as a previous/next sibling of `parent`, preserving `structureArray` order. Only applies to the elements produced by this call — nested `domBuilder` calls (`content`, `children`) always append.
  * @returns {HTMLElement|null} The first created element, or null if nothing was created.
  */
 export function domBuilder(structureArray = [], parent, options = {}) {
 
   options = {
     emptyParent: false,
+    insertMode: 'append',
     ...options
   };
 
+  /** @type {Map<HTMLElement, HTMLElement>} tracks, for `insertMode: 'after'`, the last inserted sibling per parent node */
+  const afterAnchors = new Map();
+
   /** @type {HTMLElement | null} */
   let mainElement = null;
   /** @type {HTMLElement} */
@@ -166,7 +171,7 @@ export function domBuilder(structureArray = [], parent, options = {}) {
 
       if (safeItem.children != null && !Array.isArray(safeItem.children)) {
         // eslint-disable-next-line no-console
-        console.error('Error: `item.children` must be an array → ' + safeItem.children);
+        console.error('[domBuilder]: `item.children` must be an array → ' + safeItem.children);
       }
       if (safeItem.children && Array.isArray(safeItem.children)) {
         domBuilder(safeItem.children, el, {emptyParent: false});
@@ -177,7 +182,17 @@ export function domBuilder(structureArray = [], parent, options = {}) {
       }
 
       if (parent) {
-        parent.appendChild(el);
+        if (options.insertMode === 'before') {
+          parent.parentNode?.insertBefore(el, parent);
+
+        } else if (options.insertMode === 'after') {
+          const anchor = afterAnchors.get(parent) ?? parent;
+          anchor.parentNode?.insertBefore(el, anchor.nextSibling);
+          afterAnchors.set(parent, el);
+
+        } else {
+          parent.appendChild(el);
+        }
       }
 
       // TODO callbacks that act on the element's children may not run when no parent is set

package/src/utilities/dom-builder/parseDomString.js

@@ -7,8 +7,9 @@
  *
  * Where:
  * * `tag` is the element name; defaults to `div` if omitted
- * * `#id` is the optional element id; must immediately follow the tag
+ * * `#id` is the optional element id, preceded by `#`
  * * `.class1, .class2...` are optional CSS classes, each preceded by `.`
+ * * `#id` and `.class` tokens can appear in any order and interleaved (e.g. `.class1#id.class2`)
  * * `(...)` is the optional attribute block; can also use `[...]` or `{...}`.
  *   Each name–value pair is separated by `:` or `=`. A bare name (no value) defaults to `true`.
  * * Text content follows after a space
@@ -26,24 +27,11 @@
 
 export function parseDomString(domString) {
 
-  // version using named capture groups (kept for reference)
-  // const regex = new RegExp(
-  //   /^(?<tag>[a-zA-Z][a-zA-Z0-9-]*)?/.source +    // tag
-  //   /(?:#(?<id>[a-zA-Z0-9_-]+))?/.source +        // id
-  //   /(?<classes>(?:\.[a-zA-Z0-9_-]+)*)?/.source + // classes
-  //   /(?<attrs>[([{].*?[)\]}])?/.source +          // attrs
-  //   /(?: +(?<content>.*))?$/.source               // content
-  // );
-
-
-// FIX: does not work when id follows classes: <TAG>.<CLASS>#<ID>; id must precede classes
-
   const regex = new RegExp(
-    /^([a-zA-Z][a-zA-Z0-9-]*)?/.source +  // tag (also accepts web component names)
-    /(?:#([a-zA-Z0-9_-]+))?/.source +     // id
-    /((?:\.[a-zA-Z0-9_-]+)*)?/.source +   // classes
-    /([([{].*?[)\]}])?/.source +          // attrs
-    /(?: +(.*))?$/.source                 // content
+    /^([a-zA-Z][a-zA-Z0-9-]*)?/.source +    // tag (also accepts web component names)
+    /((?:[#.][a-zA-Z0-9_-]+)*)?/.source +   // id and classes, in any order
+    /([([{].*?[)\]}])?/.source +            // attrs
+    /(?: +(.*))?$/.source                   // content
   );
 
   const matches = domString.match(regex);
@@ -53,29 +41,24 @@ export function parseDomString(domString) {
     return null;
   }
 
-  // Capture group indices:
+  // Capture group indexes:
   // [0]: full match
   // [1]: tag
-  // [2]: id
-  // [3]: classes
-  // [4]: raw attributes
-  // [5]: content
+  // [2]: id and classes (e.g. "#id.class1.class2" or ".class1#id.class2")
+  // [3]: raw attributes
+  // [4]: content
+
+  const idAndClasses = matches[2] || '',
+    idMatch = idAndClasses.match(/#([a-zA-Z0-9_-]+)/),
+    classMatches = [...idAndClasses.matchAll(/\.([a-zA-Z0-9_-]+)/g)];
 
   const tag = (matches[1] || 'div').toLowerCase(),
-    id = matches[2]?.trim() || null,
-    classes = matches[3] ? matches[3].slice(1).split('.').map(c => c.trim()) : [],
-    rawAttrs = matches[4]?.trim() || null,
-    content =  matches[5]?.trim() || null
+    id = idMatch?.[1] || null,
+    classes = classMatches.map(m => m[1]),
+    rawAttrs = matches[3]?.trim() || null,
+    content =  matches[4]?.trim() || null
   ;
 
-  // version using named capture groups (kept for reference)
-  // const tag = (matches.groups.tag || 'div').toLowerCase(),
-  //   id = matches.groups.id?.trim() || null,
-  //   classes = matches.groups.classes? matches[3].slice(1).split('.').map(c => c.trim()) : [],
-  //   rawAttrs = matches.groups.attrs?.trim() || null,
-  //   content =  matches.groups.content?.trim() || null
-  // ;
-
   /** @type {Record<string, string | true>} */
   const attrs = {};
   if (rawAttrs) {

package/src/utilities/validation-error-class.js

@@ -16,7 +16,7 @@ form.addEventListener('submit', e => {
   form.classList.add('was-validated');
   try {
     if( ... ) {
-      throw new ValidationError('__message__', [errorFields, ...] );
+      throw new ValidationError('__message__', [errorFields, ...] ); // errorFields is optional
     }
   } catch( error ) {
     e.preventDefault();
@@ -38,7 +38,7 @@ form.addEventListener('submit', e => {
         }, {once: true});
       });
 
-      error.fields[0]?.focus({preventScroll:false});
+      error.fields?.[0]?.focus({preventScroll:false});
     }
     mAlert({
       type  : 'error',