From 55961201918a2f76025552507851679cda5b5549 Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Wed, 20 Mar 2024 12:21:16 +0100 Subject: [PATCH 1/8] fix: added pre-check for decimal deletion --- src/NumberInput/NumberInput.svelte | 70 +++++++++++++++++++++++++++--- 1 file changed, 63 insertions(+), 7 deletions(-) diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 59009775..0d7536d0 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -18,6 +18,8 @@ */ export let value = null; + let previousValue = null; + /** Specify the step increment */ export let step = 1; @@ -99,12 +101,12 @@ /** Obtain a reference to the input HTML element */ export let ref = null; - import { createEventDispatcher } from "svelte"; - import Add from "../icons/Add.svelte"; - import Subtract from "../icons/Subtract.svelte"; - import WarningFilled from "../icons/WarningFilled.svelte"; - import WarningAltFilled from "../icons/WarningAltFilled.svelte"; - import EditOff from "../icons/EditOff.svelte"; + import { createEventDispatcher, tick } from "svelte"; + import Add from "carbon-components-svelte/src/icons/Add.svelte"; + import Subtract from "carbon-components-svelte/src/icons/Subtract.svelte"; + import WarningFilled from "carbon-components-svelte/src/icons/WarningFilled.svelte"; + import WarningAltFilled from "carbon-components-svelte/src/icons/WarningAltFilled.svelte"; + import EditOff from "carbon-components-svelte/src/icons/EditOff.svelte"; const defaultTranslations = { [translationIds.increment]: "Increment number", @@ -119,6 +121,8 @@ } else { ref.stepDown(); } + + previousValue = ref.value; value = +ref.value; dispatch("input", value); @@ -137,16 +141,67 @@ $$props["aria-label"] || "Numeric input field with increment and decrement buttons"; + //$: value && !!changeCaretPosition; + function parse(raw) { return raw != "" ? Number(raw) : null; } - function onInput({ target }) { + function updatePreviousValue() { + previousValue = parse(value); + } + + async function onInput({ target, inputType, data }) { + const possibleNewValue = parse(target.value); value = parse(target.value); + const isIntegerTransition = + !data && + !Number.isInteger(previousValue) && + Number.isInteger(possibleNewValue); + + if (isIntegerTransition && value < previousValue) { + await setSelectionAfterTick(target.value.length); + } else if (isIntegerTransition && previousValue && value > previousValue) { + let parts = previousValue.toString().split("."); + + if (inputType === "deleteContentForward" && parts[1]) { + parts[1] = parts[1].substring(1); + } else if (inputType === "deleteContentBackward") { + parts[0] = parts[0].slice(0, -1); + } + + const chars = + parts[0].length + (inputType === "deleteContentBackward" ? 1 : 0); + value = parse(parts.join(".")); + await setSelectionAfterTick(chars); + } else if ( + !isIntegerTransition && + previousValue && + value === previousValue && + inputType === "deleteContentForward" + ) { + value = parse(0); + await setSelectionAfterTick(0); + } else { + value = possibleNewValue; + } + dispatch("input", value); } + function setSelection(position) { + ref.focus(); + ref.type = "text"; + ref.setSelectionRange(position, position); + ref.type = "number"; + } + + async function setSelectionAfterTick(position) { + await tick(); + setSelection(position); + } + function onChange({ target }) { dispatch("change", parse(target.value)); } @@ -201,6 +256,7 @@ max="{max}" min="{min}" step="{step}" + on:input="{updatePreviousValue}" value="{value ?? ''}" readonly="{readonly}" {...$$restProps} From d7a2e8047133843a8988f53018485b537f59dad7 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 23 Mar 2024 15:22:02 -0700 Subject: [PATCH 2/8] docs: update guidance on `carbon-preprocess-svelte` --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9301fd29..c2bbd6d0 100644 --- a/README.md +++ b/README.md @@ -192,6 +192,7 @@ pnpm i -D carbon-preprocess-svelte ### `optimizeImports` +`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code. `optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code. The preprocessor optimizes imports from the following packages: From 7d8a08b67bfc6c6ef0ae6ac9f27cefb4b9e2208c Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 23 Mar 2024 15:22:02 -0700 Subject: [PATCH 3/8] docs: update guidance on `carbon-preprocess-svelte` --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c2bbd6d0..c1c33633 100644 --- a/README.md +++ b/README.md @@ -176,8 +176,8 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon. -> [!NOTE] -> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. +> [!INFO] +> Using `carbon-preprocess-svelte` is optional and not a prerequisite to using this library. It's designed for better developer experience in addition to CSS build performance. ```sh # Yarn From 199c211e1ddab6ebfa1b18f639a00a55b9f2a89f Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Thu, 28 Mar 2024 13:38:37 +0100 Subject: [PATCH 4/8] cleanup --- README.md | 1 - src/NumberInput/NumberInput.svelte | 2 -- 2 files changed, 3 deletions(-) diff --git a/README.md b/README.md index c1c33633..0dd5d0d4 100644 --- a/README.md +++ b/README.md @@ -192,7 +192,6 @@ pnpm i -D carbon-preprocess-svelte ### `optimizeImports` -`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code. `optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code. The preprocessor optimizes imports from the following packages: diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 0d7536d0..e950aba6 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -141,8 +141,6 @@ $$props["aria-label"] || "Numeric input field with increment and decrement buttons"; - //$: value && !!changeCaretPosition; - function parse(raw) { return raw != "" ? Number(raw) : null; } From 4646364a5a59a3796acd75df40b863403834f57b Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Thu, 28 Mar 2024 13:43:21 +0100 Subject: [PATCH 5/8] revert location --- src/NumberInput/NumberInput.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index e950aba6..28a452d5 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -101,12 +101,12 @@ /** Obtain a reference to the input HTML element */ export let ref = null; - import { createEventDispatcher, tick } from "svelte"; - import Add from "carbon-components-svelte/src/icons/Add.svelte"; - import Subtract from "carbon-components-svelte/src/icons/Subtract.svelte"; - import WarningFilled from "carbon-components-svelte/src/icons/WarningFilled.svelte"; - import WarningAltFilled from "carbon-components-svelte/src/icons/WarningAltFilled.svelte"; - import EditOff from "carbon-components-svelte/src/icons/EditOff.svelte"; + import { createEventDispatcher } from "svelte"; + import Add from "../icons/Add.svelte"; + import Subtract from "../icons/Subtract.svelte"; + import WarningFilled from "../icons/WarningFilled.svelte"; + import WarningAltFilled from "../icons/WarningAltFilled.svelte"; + import EditOff from "../icons/EditOff.svelte"; const defaultTranslations = { [translationIds.increment]: "Increment number", From 6b0ed4cc05dabaddd9157e7ee11cf7d48c46437b Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Thu, 28 Mar 2024 14:38:16 +0100 Subject: [PATCH 6/8] cleaning --- src/NumberInput/NumberInput.svelte | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 28a452d5..3e106d89 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -101,6 +101,7 @@ /** Obtain a reference to the input HTML element */ export let ref = null; + import { tick } from "svelte"; import { createEventDispatcher } from "svelte"; import Add from "../icons/Add.svelte"; import Subtract from "../icons/Subtract.svelte"; @@ -145,11 +146,8 @@ return raw != "" ? Number(raw) : null; } - function updatePreviousValue() { - previousValue = parse(value); - } - async function onInput({ target, inputType, data }) { + previousValue = parse(value); const possibleNewValue = parse(target.value); value = parse(target.value); @@ -254,7 +252,6 @@ max="{max}" min="{min}" step="{step}" - on:input="{updatePreviousValue}" value="{value ?? ''}" readonly="{readonly}" {...$$restProps} From 28baee93b1ab6a332228875ce568da6565b00976 Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Thu, 28 Mar 2024 15:02:06 +0100 Subject: [PATCH 7/8] getting previous value before changes are made --- src/NumberInput/NumberInput.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 3e106d89..dae630cf 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -117,13 +117,14 @@ const dispatch = createEventDispatcher(); function updateValue(isIncrementing) { + previousValue = ref.value; + if (isIncrementing) { ref.stepUp(); } else { ref.stepDown(); } - previousValue = ref.value; value = +ref.value; dispatch("input", value); @@ -141,6 +142,10 @@ $: ariaLabel = $$props["aria-label"] || "Numeric input field with increment and decrement buttons"; + $: { + console.log("previousValue / value", previousValue, value); + console.log(); + } function parse(raw) { return raw != "" ? Number(raw) : null; From 11b484255937cc79bc26c20362743112ef76b690 Mon Sep 17 00:00:00 2001 From: Andreas Henriksson Date: Thu, 28 Mar 2024 15:10:24 +0100 Subject: [PATCH 8/8] cleanup --- src/NumberInput/NumberInput.svelte | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index dae630cf..ddee519b 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -142,10 +142,6 @@ $: ariaLabel = $$props["aria-label"] || "Numeric input field with increment and decrement buttons"; - $: { - console.log("previousValue / value", previousValue, value); - console.log(); - } function parse(raw) { return raw != "" ? Number(raw) : null;