semantic-forms 5.1.2 → 5.1.4

package/docs/statics/pages/fullDemo.html

@@ -144,8 +144,11 @@
 
               <dt><label for="range">Range field</label></dt>
               <dd><input id="range" name="range" type="range"></dd>
+
+              <dt><label for="rangeValue">Range value</label></dt>
+              <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
             </dl>
-            
+
             <h3>Selects</h3>
             <dl>
               <dt><label for="selectbox">Select box</label></dt>
@@ -236,15 +239,15 @@
               <dd class="checkboxes">
                 <ul id="extra-text-checkboxes">
                   <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked> 
+                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
                     <label for="extra-text-checkboxes_one">One</label>
                   </li>
                   <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two"> 
+                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
                     <label for="extra-text-checkboxes_two">Two</label>
                   </li>
                   <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked> 
+                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
                     <label for="extra-text-checkboxes_three">Three</label></li>
                 </ul>
                 <label data-for="extra-text-checkboxes">This is some additional text.</label>
@@ -267,7 +270,7 @@
                 <label for="additional-text-checkbox">This is some additional text.</label>
               </dd>
             </dl>
-              
+
 
             <h3>Radios</h3>
             <dl>
@@ -305,15 +308,15 @@
               <dd class="radios">
                 <ul id="radios-with-additional-text">
                   <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_one"> 
+                    <input type="radio" name="radios-with-additional-text" id="a_r_one">
                     <label for="a_r_one">One</label>
                   </li>
                   <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_two"> 
+                    <input type="radio" name="radios-with-additional-text" id="a_r_two">
                     <label for="a_r_two">Two</label>
                   </li>
                   <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_three"> 
+                    <input type="radio" name="radios-with-additional-text" id="a_r_three">
                     <label for="a_r_three">Three</label>
                   </li>
                 </ul>
@@ -1229,11 +1232,6 @@
     </main>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
-        document.body.insertAdjacentHTML('afterbegin', '<p id="mode"><button></button></p>')
-        document.querySelector('#mode button').addEventListener('click', (event) => toggleDarkMode())
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) toggleDarkMode('dark')
-        else toggleDarkMode('light')
-
         const forms = document.querySelectorAll('form')
         for (const form of forms) {
           form.addEventListener('submit', e => e.preventDefault())
@@ -1247,28 +1245,6 @@
           })
         }
       })
-
-      function toggleDarkMode (mode) {
-        if (mode === 'light' || document.body.className === 'dark') {
-          document.documentElement.className = 'light'
-          document.body.className = 'light'
-          document.querySelector('#mode button').innerHTML = 'Switch to dark mode'
-          const forms = document.querySelectorAll('form')
-          for (const form of forms) {
-            form.classList.add('light')
-            form.classList.remove('dark')
-          }
-        } else {
-          document.documentElement.className = 'dark'
-          document.body.className = 'dark'
-          document.querySelector('#mode button').innerHTML = 'Switch to light mode'
-          const forms = document.querySelectorAll('form')
-          for (const form of forms) {
-            form.classList.add('dark')
-            form.classList.remove('light')
-          }
-        }
-      }
     </script>
   </body>
 </html>

package/docs/statics/pages/layouts/main.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Describe your website here">
     <!--! this inline script makes it possible for check-if-CSS-is-disabled to listen for any CSS files that fail to load -->
     <script>window.addEventListener('error', (event) => { if (event?.target?.tagName === 'LINK') { window.linkTagError = true } }, true)</script>
-    <link rel="preload" href="/css/styles.css" as="style">
-    <link rel="preload" href="/js/main.js" as="script">
-    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="preload" href="/css/semantic-forms-styles.css" as="style">
+    <link rel="preload" href="/js/semantic-forms-main.js" as="script">
+    <link rel="stylesheet" href="/css/semantic-forms-styles.css">
     <link rel="stylesheet" href="/css/highlight.js.light.css">
     <link rel="stylesheet" href="/css/highlight.js.dark.css" media="(prefers-color-scheme: dark)">
-    <script src="/js/main.js" defer></script>
+    <script src="/js/semantic-forms-main.js" defer></script>
   </head>
   <body class="no-js" id="semantic-forms-usage">
     <main>

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.4",
   "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

@@ -7,7 +7,7 @@ const semanticForms = () => {
 
   const passwordShow = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>'
   const passwordHide = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>'
-  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" viewBox="0 0 16 16" version="1.1"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
+  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;margin-top:1px;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
 
   const nodeNameLookup = ['TEXTAREA', 'SELECT']
   const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']
@@ -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