npm - bootstrap-input-spinner - Versions diffs - 4.1.2 → 5.0.1 - Mend

bootstrap-input-spinner 4.1.2 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,8 +1,10 @@
 # bootstrap-input-spinner
-A Bootstrap 5 extension to create input spinner elements for number input.
+A Bootstrap 5 extension to create input spinner elements for number input. Zero dependencies other than Bootstrap 5 — **no jQuery required** since v5.0.0.
-> Note: bootstrap-input-spinner is now an ES6 module. The legacy ES5 version has been removed; if you still need it, pin to npm `3.x`.
+> **Unofficial third-party component** — `bootstrap-input-spinner` is maintained by [shaack.com](https://shaack.com) and is not affiliated with or endorsed by the Bootstrap team.
+> Note: bootstrap-input-spinner is now an ES6 module. The legacy ES5 version has been removed; if you still need it, pin to npm `3.x`. If you still need jQuery integration, pin to `4.x`.
 ![bootstrap-input-spinner](https://shaack.com/projekte/assets/img/bootstrap-input-spinner-floatingpoint-and-i18n.png)
 *Examples with floating-point and german localization*
@@ -72,7 +74,7 @@ Create the element in HTML. The attributes are compatible to the native `input[t
 </script>
 ```
-That's it. **No extra css needed**, just Bootstrap 5 and jQuery. jQuery is still a runtime dependency and is planned to be removed in a future release.
+That's it. **No extra css needed**, just Bootstrap 5.
 ## API Reference
@@ -225,19 +227,14 @@ To modify the look completely, you can use the template parameter. There is an e
 ### Programmatic change and read of value
-In vanilla JavaScript, read via `element.value` and write via `element.setValue(newValue)`:
+Read via `element.value`, write via `element.setValue(newValue)`:
 ```javascript
 const currentValue = element.value       // read
 element.setValue(newValue)                // write
 ```
-The jQuery `val()` function also works in both directions:
-```javascript
-const currentValue = $(element).val()     // read
-$(element).val(newValue)                  // write
-```
+> Writing directly with `element.value = 5` bypasses the editor rendering, so always use `setValue` to update the spinner value programmatically.
 ### Handling attributes
@@ -252,21 +249,11 @@ is dynamically set to `input-group-sm` or `input-group-lg`.
 ### Events
-The InputSpinner handles `input` and `change` events like the native element.
-#### Event handling with vanilla JavaScript
+The InputSpinner dispatches native `input` and `change` events on the original element, just like a native number input.
 ```javascript
 element.addEventListener("change", function (event) {
-    newValue = this.value
-})
-```
-#### Event handling with jQuery syntax
-```javascript
-$(element).on("change", function (event) {
-    newValue = $(this).val()
+    const newValue = event.target.value
 })
 ```

package/index.html CHANGED Viewed

@@ -22,23 +22,19 @@
             max-width: 250px;
         }
     </style>
-    <!-- TODO remove jQuery -->
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
-            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <script src="src/custom-editors.js"></script>
     <script src="./node_modules/prismjs/prism.js"></script>
 </head>
 <body>
 <section class="container py-5">
     <h1>bootstrap-input-spinner</h1>
     <p>
-        A Bootstrap / jQuery plugin to create input spinner elements for number input, by
-        <a href="https://shaack.com/en">shaack.com</a> engineering. For now it needs jQuery, but I am working on it.
+        A Bootstrap 5 plugin to create input spinner elements for number input, by
+        <a href="https://shaack.com/en">shaack.com</a> engineering. Zero dependencies other than Bootstrap 5.
     </p>
-    <p>This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch
-        <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>.
-        npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
+    <p>This version is compatible with Bootstrap 5. For Bootstrap 4 use the
+        <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>
+        branch. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
     <p>
         License: <a href="https://github.com/shaack/bootstrap-input-spinner/blob/master/LICENSE">MIT</a>
     </p>
@@ -58,10 +54,7 @@
             allows setting a <b>prefix</b> or <b>suffix</b> text in the input,
         </li>
         <li>
-            handles <code>val()</code> like the native element,
-        </li>
-        <li>
-            <b>dynamically handles</b> changing <b>attribute values</b> like <code>disabled</code> oder
+            <b>dynamically handles</b> changing <b>attribute values</b> like <code>disabled</code> or
             <code>class</code>,
         </li>
         <li>
@@ -77,9 +70,11 @@
         This script enables the InputSpinner for all inputs with <code>type='number'</code>.
         <b>No extra css needed</b>, just Bootstrap 5.
     </p>
-    <pre><code class="language-html">&lt;script src="./src/InputSpinner.js">&lt;/script>
-&lt;script>
-    $("input[type='number']").inputSpinner()
+    <pre><code class="language-html">&lt;script type="module">
+    import {InputSpinner} from "./src/InputSpinner.js"
+    for (const el of document.querySelectorAll("input[type='number']")) {
+        new InputSpinner(el)
+    }
 &lt;/script></code></pre>
     <h2>Repository, documentation and npm package</h2>
     <p>Find the source code, more documentation and the npm package at</p>
@@ -109,8 +104,7 @@
             class="language-html">&lt;input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/></code></pre>
     <h3>Handle <code>change</code> and <code>input</code> events and
-        read the value from JavaScript
-        with <code>val()</code></h3>
+        read the value from JavaScript</h3>
     <p>
         Type in a number to see the difference between <code>change</code> and <code>input</code> events.
     </p>
@@ -122,32 +116,21 @@
         Value on change: <span id="valueOnChange"></span>
     </p>
     <script>
-        var $changedInput = $("#changedInput")
-        var $valueOnInput = $("#valueOnInput")
-        var $valueOnChange = $("#valueOnChange")
-        $changedInput.on("input", function (event) {
-            console.log("on input", event)
-            $valueOnInput.html($(event.target).val())
-            // or $valueOnInput.html(event.target.value) // in vanilla js
-            // or $valueOnInput.html($changedInput.val())
+        document.getElementById("changedInput").addEventListener("input", function (event) {
+            document.getElementById("valueOnInput").textContent = event.target.value
         })
-        $changedInput.on("change", function (event) {
-            console.log("on change", event)
-            $valueOnChange.html($(event.target).val())
+        document.getElementById("changedInput").addEventListener("change", function (event) {
+            document.getElementById("valueOnChange").textContent = event.target.value
         })
     </script>
-    <pre><code class="language-javascript">var $changedInput = $("#changedInput")
-var $valueOnInput = $("#valueOnInput")
-var $valueOnChange = $("#valueOnChange")
-$changedInput.on("input", function (event) {
-    $valueOnInput.html($(event.target).val())
-    // or $valueOnInput.html(event.target.value) // in vanilla js
-    // or $valueOnInput.html($changedInput.val())
+    <pre><code class="language-javascript">const changedInput = document.getElementById("changedInput")
+changedInput.addEventListener("input", function (event) {
+    document.getElementById("valueOnInput").textContent = event.target.value
 })
-$changedInput.on("change", function (event) {
-    $valueOnChange.html($(event.target).val())
+changedInput.addEventListener("change", function (event) {
+    document.getElementById("valueOnChange").textContent = event.target.value
 })</code></pre>
-    <h3>Programmatic changing the value with <code>val()</code></h3>
+    <h3>Programmatic changing the value</h3>
     <p>
         <label for="inputNet">Net</label>
         <input type="number" id="inputNet" value="100" min="0" max="10000" step="0.01" data-decimals="2"/>
@@ -157,24 +140,23 @@ $changedInput.on("change", function (event) {
         <input type="number" id="inputGross" value="100" min="0" max="11900" step="0.01" data-decimals="2"/>
     </p>
     <script>
-        var $inputNet = $("#inputNet")
-        var $inputGross = $("#inputGross")
-        $inputNet.on("input", function (event) {
-            $inputGross.val($(event.target).val() * 1.19)
-        })
-        $inputGross.on("input", function (event) {
-            $inputNet.val($(event.target).val() / 1.19)
+        window.addEventListener("load", function () {
+            const inputNet = document.getElementById("inputNet")
+            const inputGross = document.getElementById("inputGross")
+            inputNet.addEventListener("input", function (event) {
+                inputGross.setValue(event.target.value * 1.19)
+            })
+            inputGross.addEventListener("input", function (event) {
+                inputNet.setValue(event.target.value / 1.19)
+            })
+            inputGross.setValue(inputNet.value * 1.19)
         })
-        $inputGross.val($inputNet.val() * 1.19)
     </script>
-    <pre><code class="language-javascript">$inputNet.on("input", function (event) {
-    $inputGross.val($(event.target).val() * 1.19)
-    // or $inputGross[0].setValue(event.target.value * 1.19) // in vanilla js
-    // or $inputGross.val($inputNet.val() * 1.19)
-    // do all the same
+    <pre><code class="language-javascript">inputNet.addEventListener("input", function (event) {
+    inputGross.setValue(event.target.value * 1.19)
 })
-$inputGross.on("input", function (event) {
-    $inputNet.val($(event.target).val() / 1.19)
+inputGross.addEventListener("input", function (event) {
+    inputNet.setValue(event.target.value / 1.19)
 })</code></pre>
     <h3>Attributes <code>placeholder</code> and <code>required</code></h3>
     <form>
@@ -197,10 +179,8 @@ $inputGross.on("input", function (event) {
             <label class="form-check-label" for="disabledSwitch">Disabled</label>
         </div>
         <script>
-            var $inputDisabled = $("#inputDisabled")
-            var $disabledSwitch = $("#disabledSwitch")
-            $disabledSwitch.on("change", function () {
-                $inputDisabled.prop("disabled", $(this).prop("checked"))
+            document.getElementById("disabledSwitch").addEventListener("change", function (event) {
+                document.getElementById("inputDisabled").disabled = event.target.checked
             })
         </script>
         <pre><code class="language-html">&lt;input id="inputDisabled" disabled type="number" value="50"/>
@@ -209,10 +189,8 @@ $inputGross.on("input", function (event) {
     &lt;label class="form-check-label" for="disabledSwitch">Disabled&lt;/label>
 &lt;/div>
 &lt;script>
-    var $inputDisabled = $("#inputDisabled")
-    var $disabledSwitch = $("#disabledSwitch")
-    $disabledSwitch.on("change", function () {
-        $inputDisabled.prop("disabled", $(this).prop("checked"))
+    document.getElementById("disabledSwitch").addEventListener("change", function (event) {
+        document.getElementById("inputDisabled").disabled = event.target.checked
     })
 &lt;/script></code></pre>
     </form>
@@ -229,11 +207,10 @@ $inputGross.on("input", function (event) {
     </p>
     <script type="module">
         import {InputSpinner} from "./src/InputSpinner.js"
-        const element = document.getElementById("buttons-only")
-        new InputSpinner(element,
+        new InputSpinner(document.getElementById("buttons-only"),
             {buttonsOnly: true, autoInterval: undefined})
     </script>
-    <pre><code class="language-js">$(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined})</code></pre>
+    <pre><code class="language-js">new InputSpinner(element, {buttonsOnly: true, autoInterval: undefined})</code></pre>
     <h3>Dynamically handling of the <code>class</code> attribute</h3>
     <p>
@@ -245,20 +222,16 @@ $inputGross.on("input", function (event) {
         Try to change the class to "is-invalid" or "text-info".
     </p>
     <script>
-        var $inputChangeClass = $("#inputChangeClass")
-        var $classInput = $("#classInput")
-        $classInput.on("input", function () {
-            $inputChangeClass.prop("class", this.value)
+        document.getElementById("classInput").addEventListener("input", function (event) {
+            document.getElementById("inputChangeClass").className = event.target.value
         })
     </script>
     <pre><code class="language-html">&lt;input id="inputChangeClass" class="is-valid" type="number" value="50"/>
 &lt;label for="classInput">CSS Class&lt;/label>
 &lt;input id="classInput" type="text" class="form-control" value="is-valid"/>
 &lt;script>
-    var $inputChangeClass = $("#inputChangeClass")
-    var $classInput = $("#classInput")
-    $classInput.on("input", function() {
-        $inputChangeClass.prop("class", this.value);
+    document.getElementById("classInput").addEventListener("input", function (event) {
+        document.getElementById("inputChangeClass").className = event.target.value
     })
 &lt;/script></code></pre>
@@ -313,45 +286,24 @@ $inputGross.on("input", function (event) {
         <input id="minMaxTester" type="number" value="50" min="0" max="100" step="0.05" data-decimals="2"/>
     </p>
     <script>
-        var $minInput = $("#minInput")
-        var $maxInput = $("#maxInput")
-        var $stepInput = $("#stepInput")
-        var $dataDecimalsInput = $("#dataDecimalsInput")
-        var $minMaxTester = $("#minMaxTester")
-        $minInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("min", $minInput.val())
-        })
-        $maxInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("max", $maxInput.val())
-        })
-        $stepInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("step", $stepInput.val())
-        })
-        $dataDecimalsInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
-        })
+        (function () {
+            const tester = document.getElementById("minMaxTester")
+            const bindAttr = function (inputId, attrName) {
+                document.getElementById(inputId).addEventListener("change", function (event) {
+                    tester.setAttribute(attrName, event.target.value)
+                })
+            }
+            bindAttr("minInput", "min")
+            bindAttr("maxInput", "max")
+            bindAttr("stepInput", "step")
+            bindAttr("dataDecimalsInput", "data-decimals")
+        })()
     </script>
-    <pre><code class="language-javascript">var $minInput = $("#minInput")
-var $maxInput = $("#maxInput")
-var $stepInput = $("#stepInput")
-var $dataDecimalsInput = $("#dataDecimalsInput")
-var $minMaxTester = $("#minMaxTester")
-$minInput.on("change", function (event) {
-    $minMaxTester.attr("min", $minInput.val())
-})
-$maxInput.on("change", function (event) {
-    $minMaxTester.attr("max", $maxInput.val())
-})
-$stepInput.on("change", function (event) {
-    $minMaxTester.attr("step", $stepInput.val())
-})
-$dataDecimalsInput.on("change", function (event) {
-    $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
+    <pre><code class="language-javascript">const tester = document.getElementById("minMaxTester")
+document.getElementById("minInput").addEventListener("change", function (event) {
+    tester.setAttribute("min", event.target.value)
 })
+// ...same for max, step, data-decimals
 </code></pre>
     <h3>Prefix and Suffix</h3>
@@ -375,30 +327,32 @@ $dataDecimalsInput.on("change", function (event) {
         <input type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360" step="10"/>
     </p>
     <script>
-        var $inputLoop = $("#inputLoop")
-        $inputLoop.on("input", function (ignored) {
-            var value = $inputLoop.val()
-            value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
-            $inputLoop.val(value)
+        window.addEventListener("load", function () {
+            const inputLoop = document.getElementById("inputLoop")
+            inputLoop.addEventListener("input", function () {
+                let value = parseInt(inputLoop.value, 10)
+                value = (value < 0) ? 360 + value : value % 360
+                inputLoop.setValue(value)
+            })
         })
     </script>
     <pre><code class="language-html">&lt;input step="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/&gt;</code></pre>
-    <p>"Loop" the value between 0 and 360 with the <code>change</code> event in JavaScript.</p>
-    <pre><code class="language-javascript">var $inputLoop = $("#inputLoop")
-$inputLoop.on("input", function(event) {
-    var value = $inputLoop.val()
-    value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
-    $inputLoop.val(value)
+    <p>"Loop" the value between 0 and 360 with the <code>input</code> event in JavaScript.</p>
+    <pre><code class="language-javascript">const inputLoop = document.getElementById("inputLoop")
+inputLoop.addEventListener("input", function () {
+    let value = parseInt(inputLoop.value, 10)
+    value = (value < 0) ? 360 + value : value % 360
+    inputLoop.setValue(value)
 })</code></pre>
     <h3>Custom Editors</h3>
-    <p>An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in
-        <code>/src/custom-editors.js</code>.</p>
+    <p>An Editor defines how the input is parsed and rendered. The inputSpinner ships some custom Editors in
+        <code>/src/custom-editors.js</code>, available as named ES exports.</p>
     <h4>RawEditor</h4>
-    <p>The simplest custom Editor is the <code>RawEditor</code>, it renders just the value und parses just the value,
+    <p>The simplest custom Editor is the <code>RawEditor</code>, it renders just the value and parses just the value,
         without any
         changes, like a native number input. No internationalization, no digit grouping.</p>
     <p>
@@ -406,12 +360,12 @@ $inputLoop.on("input", function(event) {
     </p>
     <script type="module">
         import {InputSpinner} from "./src/InputSpinner.js"
-        new InputSpinner(document.getElementById("rawEditor"),
-            {editor: customEditors.RawEditor})
+        import {RawEditor} from "./src/custom-editors.js"
+        new InputSpinner(document.getElementById("rawEditor"), {editor: RawEditor})
     </script>
-    <pre><code
-            class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.RawEditor})</code></pre>
+    <pre><code class="language-js">import {InputSpinner} from "./src/InputSpinner.js"
+import {RawEditor} from "./src/custom-editors.js"
+new InputSpinner(document.getElementById("rawEditor"), {editor: RawEditor})</code></pre>
     <h4>TimeEditor</h4>
@@ -420,19 +374,21 @@ $inputLoop.on("input", function(event) {
     <div class="mt-1">value: <span id="timeValue"></span></div>
     <script type="module">
         import {InputSpinner} from "./src/InputSpinner.js"
+        import {TimeEditor} from "./src/custom-editors.js"
         const element = document.getElementById("timeEditor")
-        new InputSpinner(element, {editor: customEditors.TimeEditor})
+        new InputSpinner(element, {editor: TimeEditor})
         element.addEventListener("input", () => {
             document.getElementById("timeValue").textContent = element.value
         })
         document.getElementById("timeValue").textContent = element.value
     </script>
-    <pre><code
-            class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.TimeEditor})</code></pre>
+    <pre><code class="language-js">import {InputSpinner} from "./src/InputSpinner.js"
+import {TimeEditor} from "./src/custom-editors.js"
+new InputSpinner(document.getElementById("timeEditor"), {editor: TimeEditor})</code></pre>
-    <h3>Styling with templates (<i>new!</i>)</h3>
-    <p>With the new templating feature, you can almost do <b>anything, when it comes to layout</b>.</p>
+    <h3>Styling with templates</h3>
+    <p>With the templating feature, you can almost do <b>anything, when it comes to layout</b>.</p>
     <h5>How about... buttons right</h5>
     <p>
         <input data-prefix="¥" id="templateButtonsRight" value="1000"/>
@@ -468,11 +424,11 @@ $inputLoop.on("input", function(event) {
         <li>${incrementButton}</li>
     </ul>
     <p>Provide the template as configuration parameter:</p>
-    <pre><code class="language-js">$(element).inputSpinner({template: '&lt;div class...'})</code></pre>
+    <pre><code class="language-js">new InputSpinner(element, {template: '&lt;div class...'})</code></pre>
     <h3>Destroying the spinner</h3>
-    <p>To Remove the InputSpinner and show the original input element, use</p>
-    <pre><code class="language-javascript">$(element).inputSpinner("destroy")</code></pre>
+    <p>To remove the InputSpinner and show the original input element, use</p>
+    <pre><code class="language-javascript">element.destroyInputSpinner()</code></pre>
     <div class="mb-3">
         <label for="inputDestroyCreate">Label `for` switches dynamically:</label>
         <input type="number" id="inputDestroyCreate" value="50"/>
@@ -481,18 +437,18 @@ $inputLoop.on("input", function(event) {
     <button id="buttonCreate" disabled="disabled" class="btn btn-primary">re-create</button>
     <script type="module">
         import {InputSpinner} from "./src/InputSpinner.js"
-        var $buttonDestroy = $("#buttonDestroy")
-        var $buttonCreate = $("#buttonCreate")
-        var $inputDestroyCreate = $("#inputDestroyCreate")
-        $buttonDestroy.click(function () {
-            $inputDestroyCreate[0].destroyInputSpinner()
-            $buttonDestroy.attr("disabled", true)
-            $buttonCreate.attr("disabled", false)
+        const buttonDestroy = document.getElementById("buttonDestroy")
+        const buttonCreate = document.getElementById("buttonCreate")
+        const inputDestroyCreate = document.getElementById("inputDestroyCreate")
+        buttonDestroy.addEventListener("click", function () {
+            inputDestroyCreate.destroyInputSpinner()
+            buttonDestroy.disabled = true
+            buttonCreate.disabled = false
         })
-        $buttonCreate.click(function () {
-            new InputSpinner($inputDestroyCreate[0])
-            $buttonDestroy.attr("disabled", false)
-            $buttonCreate.attr("disabled", true)
+        buttonCreate.addEventListener("click", function () {
+            new InputSpinner(inputDestroyCreate)
+            buttonDestroy.disabled = false
+            buttonCreate.disabled = true
         })
     </script>
@@ -510,13 +466,11 @@ $inputLoop.on("input", function(event) {
         <a href="https://github.com/shaack/bootstrap-input-spinner/issues">issue</a>.</p>
     <br/><br/>
 </section>
-<!-- bootstrap needs jQuery -->
 <script type="module">
     import {InputSpinner} from "./src/InputSpinner.js"
-    const inputSpinnerElements = document.querySelectorAll("input[type='number']")
-    for (const inputSpinnerElement of inputSpinnerElements) {
-        new InputSpinner(inputSpinnerElement)
+    for (const el of document.querySelectorAll("input[type='number']")) {
+        new InputSpinner(el)
     }
 </script>
 </body>

package/package.json CHANGED Viewed

@@ -1,8 +1,13 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "4.1.2",
-  "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
-  "browser": "./src/bootstrap-input-spinner.js",
+  "version": "5.0.1",
+  "description": "A Bootstrap 5 plugin to create input spinner elements for number input.",
+  "browser": "./src/InputSpinner.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/InputSpinner.js",
+    "./custom-editors": "./src/custom-editors.js"
+  },
   "scripts": {
     "test": "tput setaf 4;echo open test/index.html in your browser for testing."
   },

package/src/InputSpinner.js CHANGED Viewed

@@ -6,45 +6,45 @@
 // the default editor for parsing and rendering
 const I18nEditor = function (props, element) {
-        const locale = props.locale || "en-US"
-        this.parse = function (customFormat) {
-            const numberFormat = new Intl.NumberFormat(locale)
-            const thousandSeparator = numberFormat.format(11111).replace(/1/g, '') || '.'
-            const decimalSeparator = numberFormat.format(1.1).replace(/1/g, '')
-            return parseFloat(customFormat
-                .replace(new RegExp(' ', 'g'), '')
-                .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
-                .replace(new RegExp('\\' + decimalSeparator), '.')
-            )
-        }
+    const locale = props.locale || "en-US"
+    this.parse = function (customFormat) {
+        const numberFormat = new Intl.NumberFormat(locale)
+        const thousandSeparator = numberFormat.format(11111).replace(/1/g, '') || '.'
+        const decimalSeparator = numberFormat.format(1.1).replace(/1/g, '')
+        return parseFloat(customFormat
+            .replace(new RegExp(' ', 'g'), '')
+            .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
+            .replace(new RegExp('\\' + decimalSeparator), '.')
+        )
+    }
-        this.render = function (number) {
-            const decimals = parseInt(element.getAttribute("data-decimals")) || 0
-            const digitGrouping = !(element.getAttribute("data-digit-grouping") === "false")
-            const numberFormat = new Intl.NumberFormat(locale, {
-                minimumFractionDigits: decimals,
-                maximumFractionDigits: decimals,
-                useGrouping: digitGrouping
-            })
-            return numberFormat.format(number)
-        }
+    this.render = function (number) {
+        const decimals = parseInt(element.getAttribute("data-decimals")) || 0
+        const digitGrouping = !(element.getAttribute("data-digit-grouping") === "false")
+        const numberFormat = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+            useGrouping: digitGrouping
+        })
+        return numberFormat.format(number)
     }
+}
 let triggerKeyPressed = false
-const originalVal = $.fn.val
-$.fn.val = function (value) {
-    if (arguments.length >= 1) {
-        for (let i = 0; i < this.length; i++) {
-            if (this[i]["bootstrap-input-spinner"] && this[i].setValue) {
-                const element = this[i]
-                setTimeout(function () {
-                    element.setValue(value)
-                })
-            }
-        }
+function parseTemplate(html) {
+    const tpl = document.createElement("template")
+    tpl.innerHTML = html.trim()
+    return tpl.content.firstElementChild
+}
+function parseNumberAttr(el, name, fallback) {
+    const raw = el.getAttribute(name)
+    if (raw === null || raw === "" || isNaN(parseFloat(raw))) {
+        return fallback
     }
-    return originalVal.apply(this, arguments)
+    return parseFloat(raw)
 }
 export class InputSpinner {
@@ -53,18 +53,6 @@ export class InputSpinner {
         const self = this
         this.element = element
-        /*
-        if (props === "destroy") { // todo replace with method
-            this.each(function () {
-                if (this["bootstrap-input-spinner"]) {
-                    this.destroyInputSpinner()
-                } else {
-                    console.warn("element", this, "is no bootstrap-input-spinner")
-                }
-            })
-            return this
-        }
-         */
         this.props = {
             decrementButton: "<strong>&minus;</strong>", // button text
@@ -97,168 +85,190 @@ export class InputSpinner {
             .replace(/\${incrementButton}/g, this.props.incrementButton)
             .replace(/\${textAlign}/g, this.props.textAlign)
-        if (this.element["bootstrap-input-spinner"]) {
-            console.warn("element", this.element, "is already a bootstrap-input-spinner")
-        } else {
-            this.$original = $(this.element)
-            this.$original[0]["bootstrap-input-spinner"] = true
-            this.$original.hide()
-            this.$original[0].inputSpinnerEditor = new this.props.editor(this.props, this.element)
-            this.autoDelayHandler = null
-            this.autoIntervalHandler = null
-            this.$inputGroup = $(html)
-            this.$buttonDecrement = this.$inputGroup.find(".btn-decrement")
-            this.$buttonIncrement = this.$inputGroup.find(".btn-increment")
-            this.$input = this.$inputGroup.find("input")
-            this.$label = $("label[for='" + this.$original.attr("id") + "']")
-            if (!this.$label[0]) {
-                this.$label = this.$original.closest("label")
-            }
+        if (element["bootstrap-input-spinner"]) {
+            console.warn("element", element, "is already a bootstrap-input-spinner")
+            return
+        }
-            this.min = null
-            this.max = null
-            this.step = null
+        this.original = element
+        this.original["bootstrap-input-spinner"] = true
+        this.original.style.display = "none"
+        this.original.inputSpinnerEditor = new this.props.editor(this.props, element)
-            updateAttributes()
+        this.autoDelayHandler = null
+        this.autoIntervalHandler = null
-            this.value = parseFloat(this.$original[0].value)
-            let pointerState = false
+        this.inputGroup = parseTemplate(html)
+        this.buttonDecrement = this.inputGroup.querySelector(".btn-decrement")
+        this.buttonIncrement = this.inputGroup.querySelector(".btn-increment")
+        this.input = this.inputGroup.querySelector("input")
-            const prefix = this.$original.attr("data-prefix") || ""
-            const suffix = this.$original.attr("data-suffix") || ""
+        this.label = null
+        if (this.original.id) {
+            this.label = document.querySelector("label[for='" + this.original.id + "']")
+        }
+        if (!this.label) {
+            this.label = this.original.closest("label")
+        }
-            if (prefix) {
-                const prefixElement = $('<span class="input-group-text">' + prefix + '</span>')
-                this.$inputGroup.find("input").before(prefixElement)
-            }
-            if (suffix) {
-                const suffixElement = $('<span class="input-group-text">' + suffix + '</span>')
-                this.$inputGroup.find("input").after(suffixElement)
-            }
+        this.min = null
+        this.max = null
+        this.step = null
-            this.$original[0].setValue = function (newValue) {
-                setValue(newValue)
-            }
-            this.$original[0].destroyInputSpinner = function () {
-                destroy()
-            }
+        updateAttributes()
-            this.observer = new MutationObserver(function () {
-                updateAttributes()
-                setValue(self.value, true)
-            })
-            this.observer.observe(this.$original[0], {attributes: true})
+        this.value = parseFloat(this.original.value)
+        let pointerState = false
-            this.$original.after(this.$inputGroup)
+        const prefix = this.original.getAttribute("data-prefix") || ""
+        const suffix = this.original.getAttribute("data-suffix") || ""
-            setValue(this.value)
+        if (prefix) {
+            const prefixElement = document.createElement("span")
+            prefixElement.className = "input-group-text"
+            prefixElement.textContent = prefix
+            this.input.parentNode.insertBefore(prefixElement, this.input)
+        }
+        if (suffix) {
+            const suffixElement = document.createElement("span")
+            suffixElement.className = "input-group-text"
+            suffixElement.textContent = suffix
+            this.input.parentNode.insertBefore(suffixElement, this.input.nextSibling)
+        }
-            this.$input.on("paste input change focusout", function (event) {
-                let newValue = self.$input[0].value
-                const focusOut = event.type === "focusout"
-                if(!self.props.buttonsOnly) {
-                    newValue = self.$original[0].inputSpinnerEditor.parse(newValue)
-                    setValue(newValue, focusOut)
-                    dispatchEvent(self.$original, event.type)
-                }
-                if (self.props.keyboardStepping && focusOut) { // stop stepping
-                    resetTimer()
-                }
-            }).on("keydown", function (event) {
-                if (self.props.keyboardStepping) {
-                    if (event.which === 38) { // up arrow pressed
-                        event.preventDefault()
-                        if (!self.$buttonDecrement.prop("disabled")) {
-                            stepHandling(self.step)
-                        }
-                    } else if (event.which === 40) { // down arrow pressed
-                        event.preventDefault()
-                        if (!self.$buttonIncrement.prop("disabled")) {
-                            stepHandling(-self.step)
-                        }
-                    }
-                }
-            }).on("keyup", function (event) {
-                // up/down arrow released
-                if (self.props.keyboardStepping && (event.which === 38 || event.which === 40)) {
-                    event.preventDefault()
-                    resetTimer()
-                }
-            })
+        this.original.setValue = function (newValue) {
+            setValue(newValue)
+        }
+        this.original.destroyInputSpinner = function () {
+            destroy()
+        }
-            // decrement button
-            onPointerDown(self.$buttonDecrement[0], function () {
-                if (!self.$buttonDecrement.prop("disabled")) {
-                    pointerState = true
-                    stepHandling(-self.step)
-                }
+        this.observer = new MutationObserver(function () {
+            updateAttributes()
+            setValue(self.value, true)
+        })
+        this.observer.observe(this.original, {attributes: true})
+        this.original.parentNode.insertBefore(this.inputGroup, this.original.nextSibling)
+        setValue(this.value)
+        // Track listeners so destroy() can detach them cleanly.
+        this._teardown = []
+        const bind = function (target, type, handler, options) {
+            target.addEventListener(type, handler, options)
+            self._teardown.push(function () {
+                target.removeEventListener(type, handler, options)
             })
-            // increment button
-            onPointerDown(self.$buttonIncrement[0], function () {
-                if (!self.$buttonIncrement.prop("disabled")) {
-                    pointerState = true
+        }
+        const onInputEvent = function (event) {
+            let newValue = self.input.value
+            const focusOut = event.type === "focusout"
+            if (!self.props.buttonsOnly) {
+                newValue = self.original.inputSpinnerEditor.parse(newValue)
+                setValue(newValue, focusOut)
+                dispatchEvent(self.original, event.type)
+            }
+            if (self.props.keyboardStepping && focusOut) { // stop stepping
+                resetTimer()
+            }
+        }
+        bind(this.input, "paste", onInputEvent)
+        bind(this.input, "input", onInputEvent)
+        bind(this.input, "change", onInputEvent)
+        bind(this.input, "focusout", onInputEvent)
+        bind(this.input, "keydown", function (event) {
+            if (!self.props.keyboardStepping) return
+            if (event.key === "ArrowUp" || event.keyCode === 38) {
+                event.preventDefault()
+                if (!self.buttonIncrement.disabled) {
                     stepHandling(self.step)
                 }
-            })
-            onPointerUp(document.body, function () {
-                if (pointerState === true) {
-                    resetTimer()
-                    dispatchEvent(self.$original, "change")
-                    pointerState = false
+            } else if (event.key === "ArrowDown" || event.keyCode === 40) {
+                event.preventDefault()
+                if (!self.buttonDecrement.disabled) {
+                    stepHandling(-self.step)
                 }
-            })
-        }
+            }
+        })
+        bind(this.input, "keyup", function (event) {
+            if (self.props.keyboardStepping &&
+                (event.key === "ArrowUp" || event.key === "ArrowDown" ||
+                    event.keyCode === 38 || event.keyCode === 40)) {
+                event.preventDefault()
+                resetTimer()
+            }
+        })
+        // decrement button
+        onPointerDown(self.buttonDecrement, function () {
+            if (!self.buttonDecrement.disabled) {
+                pointerState = true
+                stepHandling(-self.step)
+            }
+        })
+        // increment button
+        onPointerDown(self.buttonIncrement, function () {
+            if (!self.buttonIncrement.disabled) {
+                pointerState = true
+                stepHandling(self.step)
+            }
+        })
+        onPointerUp(document.body, function () {
+            if (pointerState === true) {
+                resetTimer()
+                dispatchEvent(self.original, "change")
+                pointerState = false
+            }
+        })
         function setValue(newValue, updateInput) {
             if (updateInput === undefined) {
                 updateInput = true
             }
             if (isNaN(newValue) || newValue === "") {
-                self.$original[0].value = ""
+                self.original.value = ""
                 if (updateInput) {
-                    self.$input[0].value = ""
+                    self.input.value = ""
                 }
                 self.value = NaN
             } else {
                 newValue = parseFloat(newValue)
                 newValue = Math.min(Math.max(newValue, self.min), self.max)
-                self.$original[0].value = newValue
+                self.original.value = newValue
                 if (updateInput) {
-                    self.$input[0].value = self.$original[0].inputSpinnerEditor.render(newValue)
+                    self.input.value = self.original.inputSpinnerEditor.render(newValue)
                 }
                 self.value = newValue
             }
         }
         function destroy() {
-            self.$original.prop("required", self.$input.prop("required"))
+            if (self.input.required) {
+                self.original.required = true
+            }
             self.observer.disconnect()
             resetTimer()
-            self.$input.off("paste input change focusout")
-            self.$inputGroup.remove()
-            self.$original.show()
-            self.$original[0]["bootstrap-input-spinner"] = undefined
-            if (self.$label[0]) {
-                self.$label.attr("for", self.$original.attr("id"))
+            for (const off of self._teardown) off()
+            self._teardown = []
+            self.inputGroup.remove()
+            self.original.style.display = ""
+            self.original["bootstrap-input-spinner"] = undefined
+            delete self.original.setValue
+            delete self.original.destroyInputSpinner
+            delete self.original.inputSpinnerEditor
+            if (self.label) {
+                self.label.setAttribute("for", self.original.id || "")
             }
         }
-        function dispatchEvent($element, type) {
-            if (type) {
-                setTimeout(function () {
-                    let event
-                    if (typeof (Event) === 'function') {
-                        event = new Event(type, {bubbles: true})
-                    } else { // IE todo remove
-                        event = document.createEvent('Event')
-                        event.initEvent(type, true, true)
-                    }
-                    $element[0].dispatchEvent(event)
-                })
-            }
+        function dispatchEvent(target, type) {
+            if (!type) return
+            setTimeout(function () {
+                target.dispatchEvent(new Event(type, {bubbles: true}))
+            })
         }
         function stepHandling(step) {
@@ -278,68 +288,67 @@ export class InputSpinner {
                 self.value = 0
             }
             setValue(Math.round(self.value / step) * step + step)
-            dispatchEvent(self.$original, "input")
+            dispatchEvent(self.original, "input")
         }
         function resetTimer() {
             clearTimeout(self.autoDelayHandler)
-            clearTimeout(self.autoIntervalHandler)
+            clearInterval(self.autoIntervalHandler)
         }
         function updateAttributes() {
             // copy properties from original to the new input
-            if (self.$original.prop("required")) {
-                self.$input.prop("required", self.$original.prop("required"))
-                self.$original.removeAttr('required')
+            if (self.original.required) {
+                self.input.required = true
+                self.original.removeAttribute("required")
             }
-            self.$input.prop("placeholder", self.$original.prop("placeholder"))
-            self.$input.attr("inputmode", self.$original.attr("inputmode") || "decimal")
-            const disabled = self.$original.prop("disabled")
-            const readonly = self.$original.prop("readonly")
-            self.$input.prop("disabled", disabled)
-            self.$input.prop("readonly", readonly || self.props.buttonsOnly)
-            self.$buttonIncrement.prop("disabled", disabled || readonly)
-            self.$buttonDecrement.prop("disabled", disabled || readonly)
+            self.input.placeholder = self.original.placeholder
+            self.input.setAttribute("inputmode", self.original.getAttribute("inputmode") || "decimal")
+            const disabled = self.original.disabled
+            const readonly = self.original.readOnly
+            self.input.disabled = disabled
+            self.input.readOnly = readonly || self.props.buttonsOnly
+            self.buttonIncrement.disabled = disabled || readonly
+            self.buttonDecrement.disabled = disabled || readonly
             if (disabled || readonly) {
                 resetTimer()
             }
-            const originalClass = self.$original.prop("class")
+            const originalClass = self.original.className || ""
             let groupClass = ""
-            // sizing
             if (/form-control-sm/g.test(originalClass)) {
                 groupClass = "input-group-sm"
             } else if (/form-control-lg/g.test(originalClass)) {
                 groupClass = "input-group-lg"
             }
             const inputClass = originalClass.replace(/form-control(-(sm|lg))?/g, "")
-            self.$inputGroup.prop("class", "input-group " + groupClass + " " + self.props.groupClass)
-            self.$input.prop("class", "form-control " + inputClass)
-            // update the main attributes
-            self.min = isNaN(self.$original.prop("min")) || self.$original.prop("min") === "" ? -Infinity : parseFloat(self.$original.prop("min"))
-            self.max = isNaN(self.$original.prop("max")) || self.$original.prop("max") === "" ? Infinity : parseFloat(self.$original.prop("max"))
-            self.step = parseFloat(self.$original.prop("step")) || 1
-            if (self.$original.attr("hidden")) {
-                self.$inputGroup.attr("hidden", self.$original.attr("hidden"))
+            self.inputGroup.className = "input-group " + groupClass + " " + self.props.groupClass
+            self.input.className = "form-control " + inputClass
+            self.min = parseNumberAttr(self.original, "min", -Infinity)
+            self.max = parseNumberAttr(self.original, "max", Infinity)
+            self.step = parseNumberAttr(self.original, "step", 1) || 1
+            if (self.original.hasAttribute("hidden")) {
+                self.inputGroup.setAttribute("hidden", self.original.getAttribute("hidden") || "")
             } else {
-                self.$inputGroup.removeAttr("hidden")
+                self.inputGroup.removeAttribute("hidden")
             }
-            if (self.$original.attr("id")) {
-                self.$input.attr("id", self.$original.attr("id") + ":input_spinner") // give the spinner a unique id...
-                if (self.$label[0]) {
-                    self.$label.attr("for", self.$input.attr("id")) // ...to rewire the label
+            if (self.original.id) {
+                self.input.id = self.original.id + ":input_spinner" // give the spinner a unique id...
+                if (self.label) {
+                    self.label.setAttribute("for", self.input.id) // ...to rewire the label
                 }
             }
         }
-        function onPointerUp(element, callback) {
-            element.addEventListener("mouseup", function (e) {
+        function onPointerUp(el, callback) {
+            bind(el, "mouseup", function (e) {
                 callback(e)
             })
-            element.addEventListener("touchend", function (e) {
+            bind(el, "touchend", function (e) {
                 callback(e)
             })
-            element.addEventListener("keyup", function (e) {
+            bind(el, "keyup", function (e) {
                 if ((e.keyCode === 32 || e.keyCode === 13)) {
                     triggerKeyPressed = false
                     callback(e)
@@ -347,20 +356,20 @@ export class InputSpinner {
             })
         }
-        function onPointerDown(element, callback) {
-            element.addEventListener("mousedown", function (e) {
+        function onPointerDown(el, callback) {
+            bind(el, "mousedown", function (e) {
                 if (e.button === 0) {
                     e.preventDefault()
                     callback(e)
                 }
             })
-            element.addEventListener("touchstart", function (e) {
+            bind(el, "touchstart", function (e) {
                 if (e.cancelable) {
                     e.preventDefault()
                 }
                 callback(e)
             }, {passive: false})
-            element.addEventListener("keydown", function (e) {
+            bind(el, "keydown", function (e) {
                 if ((e.keyCode === 32 || e.keyCode === 13) && !triggerKeyPressed) {
                     triggerKeyPressed = true
                     callback(e)
@@ -368,6 +377,4 @@ export class InputSpinner {
             })
         }
     }
 }

package/test/TestInputSpinner.js CHANGED Viewed

@@ -125,10 +125,9 @@ describe("InputSpinner setValue", () => {
         assert.equal(group.querySelector("input").value, "")
         clear()
     })
-    it("is reachable via jQuery val() monkey patch", async () => {
+    it("element.setValue updates both the original and the visible input", () => {
         const {el, group} = spin({value: "1", min: "0", max: "100"})
-        window.$(el).val(42)
-        await wait()
+        el.setValue(42)
         assert.equal(el.value, "42")
         assert.equal(group.querySelector("input").value, "42")
         clear()
@@ -170,15 +169,19 @@ describe("InputSpinner stepping", () => {
         assert.equal(el.value, "0")
         clear()
     })
-    it("arrow-up key steps the value", async () => {
+    it("arrow-up key steps the value", () => {
         const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"})
-        window.$(group.querySelector("input")).trigger(window.$.Event("keydown", {which: 38}))
+        group.querySelector("input").dispatchEvent(
+            new KeyboardEvent("keydown", {key: "ArrowUp", bubbles: true, cancelable: true})
+        )
         assert.equal(el.value, "6")
         clear()
     })
-    it("arrow-down key steps the value", async () => {
+    it("arrow-down key steps the value", () => {
         const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"})
-        window.$(group.querySelector("input")).trigger(window.$.Event("keydown", {which: 40}))
+        group.querySelector("input").dispatchEvent(
+            new KeyboardEvent("keydown", {key: "ArrowDown", bubbles: true, cancelable: true})
+        )
         assert.equal(el.value, "4")
         clear()
     })

package/test/index.html CHANGED Viewed

@@ -6,10 +6,10 @@
     <link rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
           crossorigin="anonymous">
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
     <style>
         body { font-family: sans-serif; padding: 1rem; }
         #fixture { position: absolute; left: -10000px; top: -10000px; }
+        h2 { margin-top: 1rem; }
     </style>
 </head>
 <body>