bootstrap-input-spinner 4.1.1 → 5.0.0

package/README.md

@@ -1,8 +1,8 @@
 # bootstrap-input-spinner
 
-A Bootstrap 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 a ES6 module. You find the old ES5 version in the folder `es5-deprecated`. The ES5 version is not maintained anymore and will be removed in the future.
+> 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 +72,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. (Note: jQuery will be removed in the future)
+That's it. **No extra css needed**, just Bootstrap 5.
 
 ## API Reference
 
@@ -98,11 +98,13 @@ The InputSpinner also handles the standard input attributes `required`, `disable
 
 ### Create an instance in JavaScript
 
-Use JavaScript to create the instance as a jQuery plugin. You may provide additional configuration in an object as a
-config parameter.
+Instantiate the `InputSpinner` class on any `<input type="number">` element. You may provide additional configuration
+in an object as a second parameter.
 
 ```js
-$(element).inputSpinner(config);
+import {InputSpinner} from "bootstrap-input-spinner/src/InputSpinner.js"
+
+new InputSpinner(element, config)
 ```
 
 #### Configuration (props)
@@ -177,12 +179,20 @@ step.
 Used to format the number in the UI. Detected automatically from the user's browser, can be set to "de", "en",… or "
 de_DE", "en_GB",….
 
-##### editor (*new!*)
+##### editor
+
+An Editor defines how the input is parsed and rendered. The default editor is the internal `I18nEditor`, which
+parses and renders an internationalized number. Additional editors live in `src/custom-editors.js` and are available
+as named ES exports:
+
+```js
+import {RawEditor, TimeEditor} from "bootstrap-input-spinner/src/custom-editors.js"
+
+new InputSpinner(element, {editor: TimeEditor})
+```
 
-An Editor defines, how the input is parsed and rendered. The default editor of the spinner is the `I18nEditor`, which
-renders and parses an internationalized number value. There are custom editors in `/src/custom-editors.js`. An Editor
-must implement the two functions `parse(customValue)`, to parse the input to a number and `render(number)` to render the
-number to the spinner input.
+An Editor must implement two functions: `parse(customFormat)` to turn the input string into a number, and
+`render(number)` to format the number back for display.
 
 The simplest custom Editor is the `RawEditor`, it renders just the value und parses just the value, without any changes,
 like a native number input. It looks like this:
@@ -215,14 +225,14 @@ To modify the look completely, you can use the template parameter. There is an e
 
 ### Programmatic change and read of value
 
-To change or read the value just use the jQuery `val()` function on the input, like this
+Read via `element.value`, write via `element.setValue(newValue)`:
 
 ```javascript
-var currentValue = $(element).val() // read
-$(element).val(newValue) // write
+const currentValue = element.value       // read
+element.setValue(newValue)                // write
 ```
 
-> **Hint:** Reading the value in vanilla JS with `element.value` will also work, but to set the value you have to use `element.setValue(newValue)` or `$(element).val(newValue)`
+> Writing directly with `element.value = 5` bypasses the editor rendering, so always use `setValue` to update the spinner value programmatically.
 
 ### Handling attributes
 
@@ -237,34 +247,22 @@ 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
 })
 ```
 
 ### Methods
 
-Methods are passed as string values instead of the options object.
-
 #### destroy
 
 Removes the InputSpinner and shows the original input element.
 
 ```javascript
-$(element).inputSpinner("destroy")
+element.destroyInputSpinner()
 ```
 
 ## Minified version
@@ -280,21 +278,27 @@ Just install uglify
 npm install uglify-js -g
 ```
 
-and then in the src-folder
+and then in the `src` folder
 
 ```bash
-uglifyjs bootstrap-input-spinner.js --compress --mangle > bootstrap-input-spinner.min.js
+uglifyjs InputSpinner.js --compress --mangle > InputSpinner.min.js
 ```
 
 Violà! :)
 
-## Browser support
+## Testing
+
+There is a [Teevi](https://github.com/shaack/teevi) based browser test suite under `test/`. Serve the repo with any
+static server and open `test/index.html` in a browser to run it:
 
-The spinner works in all modern browsers and Internet Explorer. Not tested with IE < 11.
+```bash
+npx http-server -p 8080
+# then open http://localhost:8080/test/
+```
+
+## Browser support
 
-For older browsers (IE 9 or so), that doesn't support `Intl`, when you get an error message like
-**"Intl is not defined"** (See [issue #34](https://github.com/shaack/bootstrap-input-spinner/issues/34)), just use a
-shim or polyfill like [Intl.js](https://github.com/andyearnshaw/Intl.js), and it works.
+The spinner works in all modern browsers that support ES modules.
 
 ---
 

package/index.html

@@ -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

@@ -1,8 +1,13 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "4.1.1",
-  "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
-  "browser": "./src/bootstrap-input-spinner.js",
+  "version": "5.0.0",
+  "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

@@ -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

@@ -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

@@ -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>