bootstrap-input-spinner 4.1.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "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>