semantic-forms 5.1.2 → 5.1.3

package/docs/statics/pages/usage.html

@@ -503,6 +503,26 @@
         </dl>
       </form>
 
+      <h4 id="rangeInputsThatDisplayValues">Range inputs that display values</h4>
+
+      <p>Add a class of <code>displayValue</code> to any <code><!--#<input type="range">--></code> element to make its value display on the label:</p>
+
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms">
+  <dl>
+    <dt><label for="rangeValue">Range value</label></dt>
+    <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+  </dl>
+</form>
+      </escape></code></pre>
+
+      <form class="semanticForms">
+        <dl>
+          <dt><label for="rangeValue">Range value</label></dt>
+          <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+        </dl>
+      </form>
+
       <h3 id="lightanddarkmode">Light mode and dark mode</h3>
 
       <p>Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of <code>light</code> or <code>dark</code> to your <code><!--#<form>--></code> elements to force the mode.</p>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.2",
+  "version": "5.1.3",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "@playwright/test": "1.54.2",
-    "eslint": "9.32.0",
+    "eslint": "9.33.0",
     "eslint-plugin-html": "8.1.3",
     "express": "5.1.0",
     "nodemon": "3.1.10",

package/semanticForms.js

@@ -149,7 +149,7 @@ const semanticForms = () => {
             clearBtn.innerHTML = '<svg viewBox="0 0 16 16" width="18" height="18"><path d="M 1 1 L 15 15 M 1 15 L 15 1" fill="none" stroke-width="2" stroke="currentColor" />'
             clearBtn.classList.add('clear')
             clearBtn.id = `semanticFormsClearButton_${input.id}`
-            clearBtn.addEventListener('click', (event) => {
+            clearBtn.addEventListener('click', () => {
               input.previousValue = input.value
               input.value = ''
               input.focus()
@@ -157,7 +157,7 @@ const semanticForms = () => {
             })
             insertAfter(clearBtn, dd.querySelector('label'))
           }
-          input.addEventListener('focus', (event) => {
+          input.addEventListener('focus', event => {
             if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target
           })
           // #endregion
@@ -179,14 +179,24 @@ const semanticForms = () => {
         // handle file input clear btn, cannot be handled with CSS
         if (type === 'file') {
           const clearBtn = input.parentElement.querySelector('.clear')
-          input.addEventListener('input', e => {
-            clearBtn.style.display = e.target.files.length ? 'flex' : 'none'
+          input.addEventListener('input', event => {
+            clearBtn.style.display = event.target.files.length ? 'flex' : 'none'
           })
           clearBtn.addEventListener('click', () => {
             clearBtn.style.display = 'none'
           })
         }
 
+        // handle range inputs with a class to display the value
+        if (type === 'range' && input.classList.contains('displayValue')) {
+          const label = input.parentNode.parentNode.querySelector('dd label')
+          label.innerHTML += `<span class="seperator">: </span><output>${input.value}</output>`
+          input.addEventListener('input', event => {
+            const output = event.target.parentNode.parentNode.querySelector('output')
+            output.innerHTML = event.target.value
+          })
+        }
+
         // #region show password button
         if (type === 'password' && input.getAttribute('data-no-reveal') === null) {
           const showBtn = document.createElement('button')
@@ -202,7 +212,7 @@ const semanticForms = () => {
             console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
             continue
           }
-          showBtn.addEventListener('click', (event) => {
+          showBtn.addEventListener('click', () => {
             if (input.type === 'password') {
               showBtn.innerHTML = passwordHide
               showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'
@@ -248,7 +258,7 @@ const semanticForms = () => {
   // handle undo/redo
   let lastFocusedInput
   let lastClearFieldPressed
-  document.addEventListener('keydown', (event) => {
+  document.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
       // undo clearing a field
       if (lastFocusedInput) {
@@ -274,7 +284,7 @@ const semanticForms = () => {
 
   // monitor changes to the DOM and enhance new semanticForms forms that get added
   if (!window.semanticFormsObserver) {
-    window.semanticFormsObserver = new window.MutationObserver((mutations) => {
+    window.semanticFormsObserver = new window.MutationObserver(mutations => {
       let stop = false
       for (const mutation of mutations) {
         for (const node of mutation.addedNodes) {
@@ -289,7 +299,7 @@ const semanticForms = () => {
     window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })
   }
 
-  semanticForms.reinitialize = (form) => {
+  semanticForms.reinitialize = form => {
     form.classList.remove('semanticFormsActive')
     semanticForms()
   }

package/semanticForms.scss

@@ -81,9 +81,9 @@ html:not(.light) {
 }
 // #endregion
 
-form.semanticForms, 
-form.semanticForms.light, 
-table.semanticForms, 
+form.semanticForms,
+form.semanticForms.light,
+table.semanticForms,
 table.semanticForms.light {
   font-family: var(--semanticFormsFontFamily);
   width: 100%;
@@ -193,7 +193,7 @@ table.semanticForms.light {
 
   select {
     cursor: pointer;
-    
+
     &:not([multiple]) {
       // custom dropdown graphic on select element
       background-image: var(--semanticFormsSelectIcon);
@@ -240,7 +240,7 @@ table.semanticForms.light {
     & + label.floatLabelFormAnimatedLabel {
       left: 32px !important; // override float label
     }
-    
+
     &:focus,
     &:not(:placeholder-shown) {
       & + label.floatLabelFormAnimatedLabel {
@@ -310,6 +310,7 @@ table.semanticForms.light {
     padding: 5px 25px;
     font-size: 100%;
     line-height: 1;
+    user-select: none;
 
     &:active {
       background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientDark) 0%, var(--semanticFormsButtonGradientLight) 100%);
@@ -409,7 +410,7 @@ table.semanticForms.light {
   @supports (scrollbar-color: auto) {
     textarea {
       scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-      
+
       &::-webkit-resizer {
         border: none;
         background-image: var(--semanticFormsCustomResizer);
@@ -419,7 +420,7 @@ table.semanticForms.light {
         margin: 0 2px 2px 0;
       }
     }
-    
+
     select[multiple] {
       scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
     }
@@ -1167,7 +1168,7 @@ table.semanticForms {
   th:last-of-type, td:last-of-type {
     border-right: none;
   }
-  
+
   tbody {
     tr:last-of-type {
       th, td {
@@ -1180,6 +1181,6 @@ table.semanticForms {
   menu:has(li > input, li > label, li > button, li > select, li > textarea) {
     width: max-content;
   }
-  
+
 }
 // #endregion