[ScrollingValue] Add single prop to enable individual number displa…

…y (proper handling of 9)
techniq · Nov 12, 2023 · a730969 · a730969 · vercel · Nov 12, 2023
1 parent 32c1e88
commit a730969
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/.changeset/sixty-mangos-melt.md b/.changeset/sixty-mangos-melt.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[ScrollingValue] Add `single` prop to enable individual number display (proper handling of 9)
diff --git a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
@@ -6,6 +6,7 @@
   import { getComponentTheme } from './theme';
 
   export let value = 0;
+  export let single = false;
   export let format: (value: number) => string | number = (value) => value;
 
   export let classes: {
@@ -33,7 +34,7 @@
     class={cls('col-span-full row-span-full', theme.value, classes.value)}
     style:transform="translateY({-100 + 100 * offset}%)"
   >
-    {format(Math.floor($displayValue + 1))}
+    {format(Math.floor(single && $displayValue >= 9 ? 0 : $displayValue + 1))}
   </div>
   <div
     class={cls('col-span-full row-span-full', theme.value, classes.value)}

diff --git a/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
@@ -67,6 +67,14 @@
   <ScrollingValue bind:value />
 </Preview>
 
+<h2>Individual numbers</h2>
+
+<Preview>
+  {#each Math.abs(value).toString().split('') as num}
+    <ScrollingValue value={Number(num)} single class="text-3xl tabular-nums" />
+  {/each}
+</Preview>
+
 <h2>Formatted</h2>
 
 <Preview>
@@ -86,12 +94,6 @@
   </span>
 </Preview>
 
-<h2>Font-size</h2>
-
-<Preview>
-  <ScrollingValue bind:value class="text-6xl" />
-</Preview>
-
 <h2>Field</h2>
 <h3>With label and appended actions</h3>