@massimo-cassandro/minimo 1.8.1 → 1.8.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Massimo Cassandro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -54,9 +54,9 @@
     }
   },
   "devDependencies": {
-    "@massimo-cassandro/dev-updater": "^3.0.6",
-    "@massimo-cassandro/eslint-config": "^3.0.9",
-    "@massimo-cassandro/stylelint-config": "^2.3.9",
-    "style-dictionary": "^5.4.4"
+    "@massimo-cassandro/dev-updater": "^3.0.7",
+    "@massimo-cassandro/eslint-config": "^3.0.11",
+    "@massimo-cassandro/stylelint-config": "^2.3.11",
+    "style-dictionary": "^5.5.0"
   }
 }

package/src/components/modal-popup/modal-popup.js

@@ -40,14 +40,16 @@ function closeDialog(el) {
  * @param {Object} params
  * @param {string | null} [params.dialogExtraClassName=null] - Extra class added to the dialog element.
  * @param {string | null} [params.contentExtraClassName=null] - Extra class added to the content wrapper.
+ * @param {string | null} [params.headerExtraClassName=null] - Extra class added to the header wrapper.
+ * @param {string | null} [params.footerExtraClassName=null] - Extra class added to the footer wrapper.
  * @param {string | null} [params.iframeUrl=null] - URL to load in an iframe.
  * @param {string | any[] | null} [params.content=null] - Plain text, HTML, or a domBuilder array.
  * @param {string | null} [params.ajaxUrl=null] - URL for Ajax content loading.
  * @param {((data: *, el: Element) => void) | null} [params.ajaxCallback=null] - Called with the Ajax response and the content element.
  * @param {((el: HTMLDialogElement) => void) | null} [params.closeCallback=null] - Called with the dialog element just before it is removed.
  * @param {boolean} [params.addScrollbarPadding=false] - Adds right padding to compensate for the scrollbar.
- * @param {string | null} [params.headerContent=null] - Header content: plain text or HTML.
- * @param {string | null} [params.footerContent=null] - Footer content: plain text or HTML.
+ * @param {string | any[] | null} [params.headerContent=null] - Header content: plain text, HTML, or a domBuilder array.
+ * @param {string | any[] | null} [params.footerContent=null] - Footer content: plain text, HTML, or a domBuilder array.
  * @returns {HTMLDialogElement} The dialog element.
  */
 export function modalPopup({
@@ -58,6 +60,12 @@ export function modalPopup({
   /** extra classname added to dialogInner */
   contentExtraClassName = null,
 
+  /** extra classname added to header */
+  headerExtraClassName = null,
+
+  /** extra classname added to footer */
+  footerExtraClassName = null,
+
   /** iframe url */
   iframeUrl = null,
 
@@ -78,10 +86,10 @@ export function modalPopup({
   closeCallback = null,
   addScrollbarPadding = false, // adds extra right padding to compensate for the scrollbar
 
-  /** header content: plain text or HTML */
+  /** header content: plain text, HTML or domBuilder array */
   headerContent = null,
 
-  /** footer content: plain text or HTML  */
+  /** footer content: plain text, HTML or domBuilder array */
   footerContent = null,
 }) {
 
@@ -129,13 +137,13 @@ export function modalPopup({
           className: styles.contentWrapper,
           children: [
             {
-              className: styles.header,
+              className: classnames(styles.header, headerExtraClassName),
               condition: headerContent != null,
-              content: headerContent
+              content: Array.isArray(headerContent) ? null : headerContent,
+              children: Array.isArray(headerContent) ? headerContent : undefined
             },
             {
               className: classnames(styles.content, contentExtraClassName),
-
               content: mode === 'html'
                 ? content
                 : mode === 'ajax'
@@ -177,9 +185,10 @@ export function modalPopup({
               },
             },
             {
-              className: styles.footer,
+              className: classnames(styles.footer, footerExtraClassName),
               condition: footerContent != null,
-              content: footerContent
+              content: Array.isArray(footerContent) ? null : footerContent,
+              children: Array.isArray(footerContent) ? footerContent : undefined
             },
           ]
         }

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

@@ -6,8 +6,12 @@ example:
 
 const form = document.getElementById('form-__xxxx___');
 form.addEventListener('submit', e => {
+
+  // TODO disableBtnOnSubmit ??
+
   form.querySelectorAll('.is-invalid').forEach(item => {
     item.classList.remove('is-invalid');
+    item.setCustomValidity('');
   });
   form.classList.add('was-validated');
   try {
@@ -16,12 +20,22 @@ form.addEventListener('submit', e => {
     }
   } catch( error ) {
     e.preventDefault();
-    form.querySelector('[type="submit"]').disabled = false;
+    enableSubmitBtns();
 
     if (error instanceof ValidationError) {
 
       (error.fields??[]).forEach(field => {
         field.classList.add('is-invalid');
+        field.setCustomValidity(error.message);
+
+        // rimuove il setCustomValidity alla modifica del campo
+        field.addEventListener('input', () => {
+          field.setCustomValidity('');
+          field.classList.remove('is-invalid');
+
+          // rimuove la classe che attiva la visualizzaione
+          form.classList.remove('was-validated');
+        }, {once: true});
       });
 
       error.fields[0]?.focus({preventScroll:false});