Add romanize() string util and ScrollingValue example

techniq · Nov 15, 2023 · ebd429e · ebd429e · vercel · Nov 15, 2023
1 parent 8fc9472
commit ebd429e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/.changeset/fresh-bugs-nail.md b/.changeset/fresh-bugs-nail.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add `romanize()` string util and ScrollingValue example
diff --git a/packages/svelte-ux/src/lib/utils/string.ts b/packages/svelte-ux/src/lib/utils/string.ts
@@ -47,3 +47,32 @@ export function truncate(text: string, totalChars: number, endChars: number = 0)
     return text;
   }
 }
+
+export function romanize(value: number) {
+  const lookup = {
+    M: 1000,
+    CM: 900,
+    D: 500,
+    CD: 400,
+    C: 100,
+    XC: 90,
+    L: 50,
+    XL: 40,
+    X: 10,
+    IX: 9,
+    V: 5,
+    IV: 4,
+    I: 1,
+  };
+
+  let result = '';
+  let i;
+  for (i in lookup) {
+    while (value >= lookup[i]) {
+      result += i;
+      value -= lookup[i];
+    }
+  }
+
+  return result;
+}
diff --git a/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
@@ -5,7 +5,7 @@
   import Field from '$lib/components/Field.svelte';
   import { mdiMinus, mdiPlus } from '@mdi/js';
   import ButtonGroup from '$lib/components/ButtonGroup.svelte';
-  import { timerStore } from '$lib';
+  import { romanize, timerStore } from '$lib';
 
   let value = 0;
 
@@ -75,7 +75,17 @@
   {/each}
 </Preview>
 
-<h2>Formatted</h2>
+<h2>Formatted (roman numerals)</h2>
+
+<Preview>
+  <ScrollingValue
+    bind:value
+    format={(value) => romanize(Math.abs(value)) || 0}
+    class="text-3xl tabular-nums"
+  />
+</Preview>
+
+<h2>Formatted (list)</h2>
 
 <Preview>
   <span class="text-3xl">