From ebd429e4965ce7f681eb5f0d6933c7258ff333fb Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 14 Nov 2023 22:30:41 -0500
Subject: [PATCH] Add `romanize()` string util and ScrollingValue example

---
 .changeset/fresh-bugs-nail.md                 |  5 ++++
 packages/svelte-ux/src/lib/utils/string.ts    | 29 +++++++++++++++++++
 .../components/ScrollingValue/+page.svelte    | 14 +++++++--
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fresh-bugs-nail.md

diff --git a/.changeset/fresh-bugs-nail.md b/.changeset/fresh-bugs-nail.md
new file mode 100644
index 000000000..ddb3df97a
--- /dev/null
+++ 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
index dc165d6cc..c823382fd 100644
--- 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
index 33b7c71bb..43acd490a 100644
--- 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">