[format] Pass additional arguments to underlying formatDate() and `…

…formatNumberAsStyle()` functions
techniq · Sep 28, 2023 · ebdb2c8 · ebdb2c8 · vercel · Sep 28, 2023
1 parent 4438954
commit ebdb2c8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/ten-otters-push.md b/.changeset/ten-otters-push.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[format] Pass additional arguments to underlying `formatDate()` and `formatNumberAsStyle()` functions
diff --git a/src/lib/utils/format.ts b/src/lib/utils/format.ts
@@ -9,16 +9,16 @@ export type FormatType = FormatNumberStyle | PeriodType | ((value: any, ...extra
 /**
  * Generic format which can handle Dates, Numbers, or custom format function
  */
-export function format(value: any, format?: FormatType, ...extraFuncArgs) {
+export function format(value: any, format?: FormatType, ...extraFuncArgs: any[]) {
   let formattedValue = value ?? ''; // Do not render `null`
 
   if (format) {
     if (isFunction(format)) {
       formattedValue = format(value, ...extraFuncArgs);
     } else if (format in PeriodType) {
-      formattedValue = formatDate(value, format as PeriodType);
+      formattedValue = formatDate(value, format as PeriodType, ...extraFuncArgs);
     } else if (typeof value === 'number') {
-      formattedValue = formatNumberAsStyle(value, format as FormatNumberStyle);
+      formattedValue = formatNumberAsStyle(value, format as FormatNumberStyle, ...extraFuncArgs);
     }
   }
 

diff --git a/src/routes/docs/utils/format/+page.md b/src/routes/docs/utils/format/+page.md
@@ -26,6 +26,7 @@
   <div>{format(.5678, 'percentRound')}</div>
   <div>{format(1_234_567, 'metric')}</div>
   <div>{format(1_200_000, 'metric')}</div>
+  <div>{format(.5678, 'percent', 1)}</div>
 </Preview>
 
 <h2>Period formats</h2>
@@ -34,4 +35,5 @@
   <div>{format(date, PeriodType.Day)}</div>
   <div>{format(date, PeriodType.Month)}</div>
   <div>{format(date, PeriodType.CalendarYear)}</div>
+  <div>{format(date, PeriodType.Day, 'short')}</div>
 </Preview>