@massimo-cassandro/minimo 1.19.11 → 1.19.12

package/design-tokens/_src/form.minimo.tokens.mjs

@@ -172,13 +172,39 @@ export default {
         }
       },
       required: {
-        'flag-color': {
-          $value: '#c00',
-          $type: 'color'
+        label: {
+          padding: {
+            inline: {
+              start: {
+                $type: 'dimension',
+                $value: '{size.xxs}',
+              }
+            }
+          },
         },
-        'flag-content': {
-          $value: '\'\\002A\'',
-          $type: 'string'
+        flag: {
+          color: {
+            $type: 'color',
+            $value: '#c00',
+          },
+          content: {
+            $type: 'string',
+            $value: '\'\\002A\'',
+          },
+          top: {
+            $type: 'dimension',
+            $value: '-.15em',
+          },
+          left: {
+            $type: 'dimension',
+            $value: '0em',
+          },
+          font: {
+            size: {
+              $type: 'dimension',
+              $value: '2em',
+            }
+          }
         }
       },
       focus: {

package/design-tokens/tokens/design-tokens/_src/form.minimo.tokens.jsonc

@@ -168,13 +168,39 @@
         }
       },
       "required": {
-        "flag-color": {
-          "$type": "color",
-          "$value": "#c00"
+        "label": {
+          "padding": {
+            "inline": {
+              "start": {
+                "$type": "dimension",
+                "$value": "{size.xxs}"
+              }
+            }
+          }
         },
-        "flag-content": {
-          "$type": "string",
-          "$value": "'\\002A'"
+        "flag": {
+          "color": {
+            "$type": "color",
+            "$value": "#c00"
+          },
+          "content": {
+            "$type": "string",
+            "$value": "'\\002A'"
+          },
+          "top": {
+            "$type": "dimension",
+            "$value": "-.15em"
+          },
+          "left": {
+            "$type": "dimension",
+            "$value": "0em"
+          },
+          "font": {
+            "size": {
+              "$type": "dimension",
+              "$value": "2em"
+            }
+          }
         }
       },
       "focus": {

package/package.json

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

package/src/css/forms/forms.css

@@ -4,20 +4,20 @@
 /* TODO classe grid specifica per i form ?? (.form-grid?) */
 /* TODO customizable select */
 /* TODO form-check: rifare come flex, separare? */
+/* TODO abbreviare prefisso  */
 
 .form-group:has([required]):not(:has([disabled])) {
 
   /* `>` excludes labels within form-collections  */
   > .form-label {
     position: relative;
-    padding-inline-start: var(--size-base);
+    padding-inline-start: var(--form-control-required-label-padding-inline-start);
     &::before {
       position: absolute;
-      top: -.15em;
-      left: 0;
+      top: var(--form-control-required-flag-top);
+      left: var(--form-control-required-flag-left);
       display: inline-block;
-      padding-inline-end: var(--size-xxs);
-      font-size: 2em;
+      font-size: var(--form-control-required-flag-font-size);
       color: var(--form-control-required-flag-color);
       content: var(--form-control-required-flag-content);
     }

package/src/custom-properties.css

@@ -162,6 +162,10 @@
   --form-control-readonly-opacity: 1;
   --form-control-required-flag-color: #c00;
   --form-control-required-flag-content: '\002A';
+  --form-control-required-flag-font-size: .125rem;
+  --form-control-required-flag-left: 0rem;
+  --form-control-required-flag-top: -.009375rem;
+  --form-control-required-label-padding-inline-start: var(--size-xxs);
   --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
   --form-control-sm-font-size: var(--font-size-sm);
   --form-control-sm-padding-block: var(--size-xxs);

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

@@ -18,7 +18,7 @@ import { parseDomString } from './parseDomString.js';
  *   treated as markup: sanitized and inserted via the native Sanitizer API (`Element.setHTML`) where
  *   supported, falling back to raw `innerHTML` on browsers without it.
  * @property {boolean} [condition=true] - When false, the element is skipped.
- * @property {function(HTMLElement): void} [callback] - Callback invoked after the element is created.
+ * @property {(function(HTMLElement): void) | null} [callback] - Callback invoked after the element is created.
  * @property {Array<DomBuilderItem|string>} [children] - Configuration array for child elements. Accepts strings (shorthand per `parseDomString`) and/or configuration objects.
  */
 

package/src/utilities/dom-builder-helpers/form-tags.js

@@ -1,40 +1,93 @@
 import { classnames } from '../classnames.js';
 import { randomId } from '../random-id.js';
 
+/**
+ * Shared `.form-group` wrapper for the tag builders below: handles the
+ * `condition` guard, `wrapperClass`, optional help text and `callback` in
+ * one place, so each builder only needs to provide its own `children`
+ * (typically the label + control).
+ *
+ * @param {Object} args
+ * @param {boolean} [args.condition=true] - When false, returns `null` without building anything.
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
+ * @param {string | HTMLElement | null} [args.help=null] - Optional help text.
+ * @param {Array} args.children - domBuilder children to render inside the `.form-group` (before the help text).
+ * @returns {DomBuilderItem|null} The `.form-group` domBuilder item, or `null` when `condition` is false.
+ */
+function buildFormGroup({
+  condition = true,
+  wrapperClass = null,
+  help = null,
+  children
+}) {
+
+  if(!condition) {
+    return null;
+  }
+
+  return {
+    className: classnames('form-group', wrapperClass),
+    children: [
+      ...children,
+      {
+        className: 'form-help-text',
+        condition: help != null,
+        content: help
+      }
+    ]
+  };
+}
+
+
 /**
  * Input tag builder
  *
  * @param {Object} args
  * @param {string} args.label - input label.
  * @param {string | null} args.name - input `name` attribute.
- * @param {string | number | null} args.defaultValue - input `value` attribute.
+ * @param {string | number | null} args.value - input `value` attribute.
  * @param {string | null} [args.type='text'] - input `type` attribute.
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {string | HTMLElement | null} args.help - Optional help text.
+ * @param {(function(HTMLElement): void) | null} args.callback - Optional callback function.
+ * @param {object | null}  [args.attrs={}] - Optional attributes object.
  * @returns {DomBuilderItem|null} The `input` domBuilder item, or `null` when `condition` is false.
  */
 export function buildInputTag({
   label,
   name,
-  defaultValue,
+  value = null,
   type = 'text',
   wrapperClass = null,
-  condition = true
+  condition = true,
+  help = null,
+  attrs = {},
+  callback = null
 }){
 
-  if(!condition) {
-    return null;
-  }
-
   const id = randomId();
 
-  return {
-    className: classnames('form-group', wrapperClass),
+  return buildFormGroup({
+    condition,
+    wrapperClass,
+    help,
     children: [
       `label.form-label[for:${id}] ${label}`,
-      `input#${id}.form-control[type: ${type}, name: ${name}, value: ${defaultValue}]`
+      {
+        tag: 'input',
+        className: 'form-control',
+        id: id,
+        attrs: {
+          ...(attrs??{}),
+          type: type,
+          name: name,
+          value: value
+        },
+        callback: callback
+      }
     ]
-  };
+  });
 }
 
 
@@ -49,6 +102,9 @@ export function buildInputTag({
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper (used only when `addFormGroup` is true).
  * @param {boolean} [args.addFormGroup=true] - When true, wraps the checkbox in a `.form-group` element.
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {string | HTMLElement | null} args.help - Optional help text.
+ * @param {(function(HTMLElement): void) | null} args.callback - Optional callback function.
+ * @param {object | null}  [args.attrs={}] - Optional attributes object.
  * @returns {DomBuilderItem|null} The `.form-check` (or `.form-group`-wrapped) domBuilder item, or `null` when `condition` is false.
  */
 export function buildCheckboxTag({
@@ -58,7 +114,10 @@ export function buildCheckboxTag({
   checked = false,
   wrapperClass = null,
   addFormGroup = true,
-  condition = true
+  condition = true,
+  help = null,
+  attrs = {},
+  callback = null
 }) {
 
   if(!condition) {
@@ -76,32 +135,34 @@ export function buildCheckboxTag({
   const id = randomId();
 
   const tag = {
-    className: classnames('form-check', !addFormGroup && wrapperClass),
+    className: classnames('form-check', !addFormGroup && !help && wrapperClass),
     children: [
       {
         tag: 'input',
         className: 'form-check-input',
         id: id,
         attrs: {
+          ...(attrs??{}),
           type: 'checkbox',
           value: value,
           name: name,
           checked: checked
-        }
+        },
+        callback: callback
       },
       `label.form-label[for:${id}] ${label}`,
     ]
   };
 
   if(addFormGroup) {
-    return {
-      className: classnames('form-group', wrapperClass),
-      children: [ tag ]
-    };
+    return buildFormGroup({
+      wrapperClass,
+      help,
+      children: [tag]
+    });
 
   } else {
     return tag;
-
   }
 
 }
@@ -113,30 +174,44 @@ export function buildCheckboxTag({
  * @param {Object} args
  * @param {string} args.label - textarea label.
  * @param {string | null} args.name - textarea `name` attribute.
- * @param {string | number | null} args.defaultValue - textarea content.
+ * @param {string | number | null} args.value - textarea content.
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {string | HTMLElement | null} args.help - Optional help text.
+ * @param {(function(HTMLElement): void) | null} args.callback - Optional callback function.
+ * @param {object | null}  [args.attrs={}] - Optional attributes object.
  * @returns {DomBuilderItem|null} The `textarea` domBuilder item, or `null` when `condition` is false.
  */
 export function buildTextareaTag({
   label,
   name,
-  defaultValue,
+  value = null,
   wrapperClass = null,
-  condition = true
+  condition = true,
+  help = null,
+  callback = null,
+  attrs = {}
 }) {
 
-  if(!condition) {
-    return null;
-  }
-
   const id = randomId();
 
-  return {
-    className: classnames('form-group', wrapperClass),
+  return buildFormGroup({
+    condition,
+    wrapperClass,
+    help,
     children: [
       `label.form-label[for:${id}] ${label}`,
-      `textarea#${id}.form-control[name: ${name}] ${defaultValue}`
+      {
+        tag: 'textarea',
+        className: 'form-control',
+        id: id,
+        attrs: {
+          ...(attrs??{}),
+          name: name,
+          value: value
+        },
+        callback: callback
+      }
     ]
-  };
+  });
 }