bootstrap-input-spinner 4.1.0 → 4.1.2

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.
 
-> 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`.
 
 ![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 and jQuery. jQuery is still a runtime dependency and is planned to be removed in a future release.
 
 ## 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,19 @@ 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
+In vanilla JavaScript, read via `element.value` and 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)`
+The jQuery `val()` function also works in both directions:
+
+```javascript
+const currentValue = $(element).val()     // read
+$(element).val(newValue)                  // write
+```
 
 ### Handling attributes
 
@@ -257,14 +272,12 @@ $(element).on("change", function (event) {
 
 ### 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 +293,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
   "browser": "./src/bootstrap-input-spinner.js",
   "scripts": {
@@ -25,7 +25,7 @@
   },
   "homepage": "https://shaack.com/en/open-source-components",
   "devDependencies": {
-    "prismjs": "^1.29.0",
-    "teevi": "^2.2.4"
+    "prismjs": "^1.30.0",
+    "teevi": "^2.3.0"
   }
 }

package/src/custom-editors.js

@@ -3,49 +3,69 @@
  * Repository: https://github.com/shaack/bootstrap-input-spinner
  * License: MIT, see file 'LICENSE'
  */
-const customEditors = {
-    RawEditor: function (props, element) {
-        this.parse = function (customFormat) {
-            // parse nothing
-            return customFormat
+
+export const RawEditor = function (props, element) {
+    this.parse = function (customFormat) {
+        // parse nothing
+        return customFormat
+    }
+    this.render = function (number) {
+        // render raw
+        return number
+    }
+}
+
+export const TimeEditor = function (props, element) {
+    // could be implemented more elegant maybe, but works
+    this.parse = function (customFormat) {
+        let trimmed = customFormat.trim()
+        let sign = 1
+        if (trimmed.charAt(0) === "-") {
+            sign = -1
+            trimmed = trimmed.replace("-", "")
         }
-        this.render = function (number) {
-            // render raw
-            return number
+        const parts = trimmed.split(":")
+        let hours = 0, minutes
+        if (parts[1]) {
+            hours = parseInt(parts[0], 10)
+            minutes = parseInt(parts[1], 10)
+        } else {
+            minutes = parseInt(parts[0], 10)
         }
-    },
-    TimeEditor: function (props, element) {
-        // could be implemented more elegant maybe, but works
-        this.parse = function (customFormat) {
-            let trimmed = customFormat.trim()
-            let sign = 1
-            if (trimmed.charAt(0) === "-") {
-                sign = -1
-                trimmed = trimmed.replace("-", "")
-            }
-            const parts = trimmed.split(":")
-            let hours = 0, minutes
-            if (parts[1]) {
-                hours = parseInt(parts[0], 10)
-                minutes = parseInt(parts[1], 10)
-            } else {
-                minutes = parseInt(parts[0], 10)
-            }
-            return (hours * 60 + minutes) * sign
+        return (hours * 60 + minutes) * sign
+    }
+    this.render = function (number) {
+        let minutes = Math.abs(number % 60)
+        if (minutes < 10) {
+            minutes = "0" + minutes
         }
-        this.render = function (number) {
-            let minutes = Math.abs(number % 60)
-            if (minutes < 10) {
-                minutes = "0" + minutes
-            }
-            let hours
-            if (number >= 0) {
-                hours = Math.floor(number / 60)
-                return hours + ":" + minutes
-            } else {
-                hours = Math.ceil(number / 60)
-                return "-" + Math.abs(hours) + ":" + minutes
-            }
+        let hours
+        if (number >= 0) {
+            hours = Math.floor(number / 60)
+            return hours + ":" + minutes
+        } else {
+            hours = Math.ceil(number / 60)
+            return "-" + Math.abs(hours) + ":" + minutes
         }
     }
 }
+
+// Deprecated: global `window.customEditors` is kept for backwards compatibility
+// with users who load this file via a classic <script> tag. Prefer the named
+// ES module exports above.
+if (typeof window !== "undefined") {
+    let warned = false
+    const editors = {RawEditor, TimeEditor}
+    window.customEditors = new Proxy(editors, {
+        get(target, prop) {
+            if (!warned && prop in target) {
+                warned = true
+                console.warn(
+                    "bootstrap-input-spinner: window.customEditors is deprecated, " +
+                    "import {RawEditor, TimeEditor} from 'bootstrap-input-spinner/src/custom-editors.js' instead."
+                )
+            }
+            return target[prop]
+        }
+    })
+}

package/test/TestCustomEditors.js

@@ -0,0 +1,54 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/bootstrap-input-spinner
+ * License: MIT, see file 'LICENSE'
+ */
+import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
+import {RawEditor, TimeEditor} from "../src/custom-editors.js"
+
+describe("RawEditor", () => {
+    it("parses input unchanged", () => {
+        const editor = new RawEditor({}, document.createElement("input"))
+        assert.equal(editor.parse("42"), "42")
+        assert.equal(editor.parse("abc"), "abc")
+    })
+    it("renders number unchanged", () => {
+        const editor = new RawEditor({}, document.createElement("input"))
+        assert.equal(editor.render(3.14), 3.14)
+        assert.equal(editor.render(0), 0)
+    })
+})
+
+describe("TimeEditor", () => {
+    const editor = new TimeEditor({}, document.createElement("input"))
+
+    it("parses H:MM into total minutes", () => {
+        assert.equal(editor.parse("1:30"), 90)
+        assert.equal(editor.parse("0:05"), 5)
+        assert.equal(editor.parse("10:00"), 600)
+    })
+    it("parses bare minutes", () => {
+        assert.equal(editor.parse("45"), 45)
+    })
+    it("parses negative times", () => {
+        assert.equal(editor.parse("-1:30"), -90)
+        assert.equal(editor.parse("-0:15"), -15)
+    })
+    it("renders positive total minutes as H:MM", () => {
+        assert.equal(editor.render(90), "1:30")
+        assert.equal(editor.render(5), "0:05")
+        assert.equal(editor.render(600), "10:00")
+    })
+    it("renders zero", () => {
+        assert.equal(editor.render(0), "0:00")
+    })
+    it("renders negative total minutes with leading minus", () => {
+        assert.equal(editor.render(-90), "-1:30")
+        assert.equal(editor.render(-15), "-0:15")
+    })
+    it("is round-trip stable for positive values", () => {
+        for (const v of [0, 5, 59, 60, 61, 125, 600]) {
+            assert.equal(editor.parse(editor.render(v)), v)
+        }
+    })
+})

package/test/TestInputSpinner.js

@@ -0,0 +1,301 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/bootstrap-input-spinner
+ * License: MIT, see file 'LICENSE'
+ */
+import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
+import {InputSpinner} from "../src/InputSpinner.js"
+import {RawEditor} from "../src/custom-editors.js"
+
+const fixture = document.getElementById("fixture")
+
+function createInput(attrs = {}) {
+    const input = document.createElement("input")
+    input.type = "number"
+    for (const [k, v] of Object.entries(attrs)) {
+        input.setAttribute(k, String(v))
+    }
+    fixture.appendChild(input)
+    return input
+}
+
+function spin(attrs = {}, props) {
+    const el = createInput(attrs)
+    const spinner = new InputSpinner(el, props)
+    return {el, spinner, group: el.nextElementSibling}
+}
+
+function clear() {
+    fixture.innerHTML = ""
+}
+
+function wait(ms = 0) {
+    return new Promise(r => setTimeout(r, ms))
+}
+
+function pressButton(btn) {
+    btn.dispatchEvent(new MouseEvent("mousedown", {button: 0, cancelable: true, bubbles: true}))
+    document.body.dispatchEvent(new MouseEvent("mouseup", {button: 0, bubbles: true}))
+}
+
+describe("InputSpinner construction", () => {
+    it("inserts an input-group after the original element", () => {
+        const {el, group} = spin({value: "5"})
+        assert.true(group !== null)
+        assert.true(group.classList.contains("input-group"))
+        assert.equal(group.querySelectorAll("button").length, 2)
+        assert.equal(group.querySelectorAll("input").length, 1)
+        clear()
+    })
+    it("hides the original input", () => {
+        const {el} = spin({value: "5"})
+        assert.equal(el.style.display, "none")
+        clear()
+    })
+    it("marks the original element as a spinner", () => {
+        const {el} = spin({value: "5"})
+        assert.equal(el["bootstrap-input-spinner"], true)
+        assert.equal(typeof el.setValue, "function")
+        assert.equal(typeof el.destroyInputSpinner, "function")
+        clear()
+    })
+    it("sets the initial value from the value attribute", () => {
+        const {el, group} = spin({value: "7"})
+        assert.equal(el.value, "7")
+        assert.equal(group.querySelector("input").value, "7")
+        clear()
+    })
+    it("leaves value empty (NaN) when no value attribute is given", () => {
+        const {el, group} = spin()
+        assert.equal(el.value, "")
+        assert.equal(group.querySelector("input").value, "")
+        clear()
+    })
+})
+
+describe("InputSpinner I18n rendering (default editor)", () => {
+    it("renders with data-decimals", () => {
+        const {group} = spin({value: "4.5", "data-decimals": "2"}, {locale: "en-US"})
+        assert.equal(group.querySelector("input").value, "4.50")
+        clear()
+    })
+    it("uses thousands grouping by default", () => {
+        const {group} = spin({value: "12345"}, {locale: "en-US"})
+        assert.equal(group.querySelector("input").value, "12,345")
+        clear()
+    })
+    it("disables grouping when data-digit-grouping=false", () => {
+        const {group} = spin({value: "12345", "data-digit-grouping": "false"}, {locale: "en-US"})
+        assert.equal(group.querySelector("input").value, "12345")
+        clear()
+    })
+    it("honors the German locale separators", () => {
+        const {group} = spin({value: "1234.5", "data-decimals": "1"}, {locale: "de-DE"})
+        // German: '.' thousands, ',' decimal
+        assert.equal(group.querySelector("input").value, "1.234,5")
+        clear()
+    })
+})
+
+describe("InputSpinner setValue", () => {
+    it("clamps above max", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10"})
+        el.setValue(99)
+        assert.equal(el.value, "10")
+        assert.equal(group.querySelector("input").value, "10")
+        clear()
+    })
+    it("clamps below min", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10"})
+        el.setValue(-99)
+        assert.equal(el.value, "0")
+        assert.equal(group.querySelector("input").value, "0")
+        clear()
+    })
+    it("accepts floats", () => {
+        const {el} = spin({value: "0", "data-decimals": "2"}, {locale: "en-US"})
+        el.setValue(3.14)
+        assert.equal(el.value, "3.14")
+        clear()
+    })
+    it("clears value on NaN", () => {
+        const {el, group} = spin({value: "5"})
+        el.setValue(NaN)
+        assert.equal(el.value, "")
+        assert.equal(group.querySelector("input").value, "")
+        clear()
+    })
+    it("is reachable via jQuery val() monkey patch", async () => {
+        const {el, group} = spin({value: "1", min: "0", max: "100"})
+        window.$(el).val(42)
+        await wait()
+        assert.equal(el.value, "42")
+        assert.equal(group.querySelector("input").value, "42")
+        clear()
+    })
+})
+
+describe("InputSpinner stepping", () => {
+    it("increments on the plus button", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "100", step: "1"})
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "6")
+        clear()
+    })
+    it("decrements on the minus button", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "100", step: "1"})
+        pressButton(group.querySelector(".btn-decrement"))
+        assert.equal(el.value, "4")
+        clear()
+    })
+    it("honors a custom step size", () => {
+        const {el, group} = spin({value: "0", min: "0", max: "100", step: "10"})
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "10")
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "20")
+        clear()
+    })
+    it("does not step past max", () => {
+        const {el, group} = spin({value: "9", min: "0", max: "10", step: "1"})
+        pressButton(group.querySelector(".btn-increment"))
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "10")
+        clear()
+    })
+    it("does not step below min", () => {
+        const {el, group} = spin({value: "1", min: "0", max: "10", step: "1"})
+        pressButton(group.querySelector(".btn-decrement"))
+        pressButton(group.querySelector(".btn-decrement"))
+        assert.equal(el.value, "0")
+        clear()
+    })
+    it("arrow-up key steps the value", async () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"})
+        window.$(group.querySelector("input")).trigger(window.$.Event("keydown", {which: 38}))
+        assert.equal(el.value, "6")
+        clear()
+    })
+    it("arrow-down key steps the value", async () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"})
+        window.$(group.querySelector("input")).trigger(window.$.Event("keydown", {which: 40}))
+        assert.equal(el.value, "4")
+        clear()
+    })
+})
+
+describe("InputSpinner events", () => {
+    it("dispatches 'input' when stepping", async () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10"})
+        let fired = 0
+        el.addEventListener("input", () => fired++)
+        pressButton(group.querySelector(".btn-increment"))
+        await wait()
+        assert.true(fired >= 1)
+        clear()
+    })
+    it("dispatches 'change' on pointer release", async () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10"})
+        let fired = 0
+        el.addEventListener("change", () => fired++)
+        pressButton(group.querySelector(".btn-increment"))
+        await wait()
+        assert.equal(fired, 1)
+        clear()
+    })
+})
+
+describe("InputSpinner attribute observation", () => {
+    it("reflects min/max changes", async () => {
+        const {el} = spin({value: "5", min: "0", max: "10"})
+        el.setAttribute("max", "7")
+        await wait()
+        el.setValue(99)
+        assert.equal(el.value, "7")
+        clear()
+    })
+    it("reflects disabled attribute", async () => {
+        const {el, group} = spin({value: "5"})
+        el.setAttribute("disabled", "disabled")
+        await wait()
+        assert.true(group.querySelector(".btn-increment").disabled)
+        assert.true(group.querySelector(".btn-decrement").disabled)
+        assert.true(group.querySelector("input").disabled)
+        clear()
+    })
+    it("reflects readonly attribute on visible input", async () => {
+        const {el, group} = spin({value: "5"})
+        el.setAttribute("readonly", "readonly")
+        await wait()
+        assert.true(group.querySelector("input").readOnly)
+        assert.true(group.querySelector(".btn-increment").disabled)
+        clear()
+    })
+    it("maps form-control-sm to input-group-sm", async () => {
+        const el = createInput({value: "5"})
+        el.className = "form-control form-control-sm"
+        new InputSpinner(el)
+        await wait()
+        assert.true(el.nextElementSibling.classList.contains("input-group-sm"))
+        clear()
+    })
+    it("maps form-control-lg to input-group-lg", async () => {
+        const el = createInput({value: "5"})
+        el.className = "form-control form-control-lg"
+        new InputSpinner(el)
+        await wait()
+        assert.true(el.nextElementSibling.classList.contains("input-group-lg"))
+        clear()
+    })
+})
+
+describe("InputSpinner prefix/suffix", () => {
+    it("renders a prefix element", () => {
+        const {group} = spin({value: "5", "data-prefix": "$"})
+        const prefix = group.querySelector(".input-group-text")
+        assert.true(prefix !== null)
+        assert.equal(prefix.textContent, "$")
+        clear()
+    })
+    it("renders a suffix element", () => {
+        const {group} = spin({value: "5", "data-suffix": "kg"})
+        const suffix = group.querySelector(".input-group-text")
+        assert.true(suffix !== null)
+        assert.equal(suffix.textContent, "kg")
+        clear()
+    })
+})
+
+describe("InputSpinner buttonsOnly mode", () => {
+    it("makes the input readonly", () => {
+        const {group} = spin({value: "5"}, {buttonsOnly: true})
+        assert.true(group.querySelector("input").readOnly)
+        clear()
+    })
+    it("still allows button stepping", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10"}, {buttonsOnly: true})
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "6")
+        clear()
+    })
+})
+
+describe("InputSpinner custom editor", () => {
+    it("uses the supplied editor for rendering", () => {
+        const {group} = spin({value: "3.14159"}, {editor: RawEditor})
+        assert.equal(group.querySelector("input").value, "3.14159")
+        clear()
+    })
+})
+
+describe("InputSpinner destroy", () => {
+    it("removes the input-group and un-hides the original", () => {
+        const {el, group} = spin({value: "5"})
+        assert.true(group.isConnected)
+        el.destroyInputSpinner()
+        assert.false(group.isConnected)
+        assert.notEqual(el.style.display, "none")
+        assert.equal(el["bootstrap-input-spinner"], undefined)
+        clear()
+    })
+})

package/test/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>bootstrap-input-spinner tests</title>
+    <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; }
+    </style>
+</head>
+<body>
+<h1>bootstrap-input-spinner tests</h1>
+<div id="fixture"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/es-module-shims@1.7.2/dist/es-module-shims.min.js"></script>
+<script type="importmap">
+    {
+        "imports": {
+            "teevi/": "../node_modules/teevi/"
+        }
+    }
+</script>
+<script type="module">
+    import {teevi} from "teevi/src/teevi.js"
+    import "./TestInputSpinner.js"
+    import "./TestCustomEditors.js"
+    teevi.run()
+</script>
+</body>
+</html>