feat: granular number and date formatting options for tags

.changeset/fast-onions-march.md

@@ -0,0 +1,5 @@
+---
+'@finsweet/attributes-list': minor
+---
+
+feat: granular number and date formatting options for tags

packages/list/src/filter/tags.ts

@@ -1,9 +1,9 @@
-import { addListener, cloneNode, isDate, isNotEmpty, isNumber } from '@finsweet/attributes-utils';
+import { addListener, cloneNode, type FormFieldType, isDate, isNotEmpty, isNumber } from '@finsweet/attributes-utils';
 import { watch } from '@vue/reactivity';
 
 import type { List } from '../components/List';
 import { SETTINGS } from '../utils/constants';
-import { getAttribute, getElementSelector, queryElement } from '../utils/selectors';
+import { getAttribute, getElementSelector, hasAttributeValue, queryElement } from '../utils/selectors';
 import type { FilterOperator, Filters, FiltersCondition } from './types';
 import { parseFilterValue } from './utils';
 
@@ -275,31 +275,54 @@ const populateTag = (condition: FiltersCondition, tagData: TagData) => {
       const formatDisplay = getAttribute(valueElement, 'formatdisplay');
       if (formatDisplay) {
         const locale = formatDisplay === 'true' ? undefined : formatDisplay;
+        const options: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions = {
+          calendar: getAttribute(valueElement, 'formatcalendar'),
+          compactDisplay: getAttribute(valueElement, 'formatcompactdisplay'),
+          currency: getAttribute(valueElement, 'formatcurrency'),
+          currencyDisplay: getAttribute(valueElement, 'formatcurrencydisplay'),
+          currencySign: getAttribute(valueElement, 'formatcurrencysign'),
+          dateStyle: getAttribute(valueElement, 'formatdatestyle'),
+          day: getAttribute(valueElement, 'formatday'),
+          dayPeriod: getAttribute(valueElement, 'formatdayperiod'),
+          era: getAttribute(valueElement, 'formatera'),
+          formatMatcher: getAttribute(valueElement, 'formatformatmatcher'),
+          fractionalSecondDigits: getAttribute(valueElement, 'formatfractionalseconddigits'),
+          hour: getAttribute(valueElement, 'formathour'),
+          hour12: getAttribute(valueElement, 'formathour12')
+            ? hasAttributeValue(valueElement, 'formathour12', 'true')
+            : undefined,
+          hourCycle: getAttribute(valueElement, 'formathourcycle'),
+          localeMatcher: getAttribute(valueElement, 'formatlocalematcher'),
+          maximumFractionDigits: getAttribute(valueElement, 'formatmaximumfractiondigits'),
+          maximumSignificantDigits: getAttribute(valueElement, 'formatmaximumsignificantdigits'),
+          minimumFractionDigits: getAttribute(valueElement, 'formatminimumfractiondigits'),
+          minimumIntegerDigits: getAttribute(valueElement, 'formatminimumintegerdigits'),
+          minimumSignificantDigits: getAttribute(valueElement, 'formatminimumsignificantdigits'),
+          minute: getAttribute(valueElement, 'formatminute'),
+          month: getAttribute(valueElement, 'formatmonth'),
+          notation: getAttribute(valueElement, 'formatnotation'),
+          numberingSystem: getAttribute(valueElement, 'formatnumberingsystem'),
+          roundingIncrement: getAttribute(valueElement, 'formatroundingincrement'),
+          roundingMode: getAttribute(valueElement, 'formatroundingmode'),
+          roundingPriority: getAttribute(valueElement, 'formatroundingpriority'),
+          second: getAttribute(valueElement, 'formatsecond'),
+          signDisplay: getAttribute(valueElement, 'formatsigndisplay'),
+          style: getAttribute(valueElement, 'formatstyle'),
+          timeStyle: getAttribute(valueElement, 'formattimestyle'),
+          timeZone: getAttribute(valueElement, 'formattimezone'),
+          timeZoneName: getAttribute(valueElement, 'formattimezonename'),
+          trailingZeroDisplay: getAttribute(valueElement, 'formattrailingzerodisplay'),
+          unit: getAttribute(valueElement, 'formatunit'),
+          unitDisplay: getAttribute(valueElement, 'formatunitdisplay'),
+          useGrouping: getAttribute(valueElement, 'formatusegrouping'),
+          weekday: getAttribute(valueElement, 'formatweekday'),
+          year: getAttribute(valueElement, 'formatyear'),
+        };
 
         if (Array.isArray(condition.value)) {
-          formattedValue = condition.value.map((value) => {
-            const parsedValue = parseFilterValue(value, condition.type);
-
-            if (isNumber(parsedValue)) {
-              return parsedValue.toLocaleString(locale);
-            }
-
-            if (isDate(parsedValue)) {
-              return parsedValue.toLocaleDateString(locale);
-            }
-
-            return value;
-          });
+          formattedValue = condition.value.map((value) => formatValue(value, condition.type, locale, options));
         } else {
-          const parsedValue = parseFilterValue(condition.value, condition.type);
-
-          if (isNumber(parsedValue)) {
-            formattedValue = parsedValue.toLocaleString(locale);
-          }
-
-          if (isDate(parsedValue)) {
-            formattedValue = parsedValue.toLocaleDateString(locale);
-          }
+          formattedValue = formatValue(condition.value, condition.type, locale, options);
         }
       }
 
@@ -312,3 +335,39 @@ const populateTag = (condition: FiltersCondition, tagData: TagData) => {
     }
   }
 };
+
+/**
+ * Formats a value based on the locale and options.
+ * @param value
+ * @param type
+ * @param rawLocale
+ * @param options
+ * @returns The formatted value
+ */
+const formatValue = (
+  value: string,
+  type: FormFieldType,
+  rawLocale: string | undefined,
+  options: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions
+) => {
+  const locale = rawLocale === 'true' ? undefined : rawLocale;
+  const parsedValue = parseFilterValue(value, type);
+
+  if (isNumber(parsedValue)) {
+    try {
+      return new Intl.NumberFormat(locale, options).format(parsedValue);
+    } catch {
+      return new Intl.NumberFormat(window.navigator?.language || undefined, options).format(parsedValue);
+    }
+  }
+
+  if (isDate(parsedValue)) {
+    try {
+      return new Intl.DateTimeFormat(locale, options).format(parsedValue);
+    } catch {
+      return new Intl.DateTimeFormat(window.navigator?.language || undefined, options).format(parsedValue);
+    }
+  }
+
+  return value;
+};

packages/list/src/utils/constants.ts

@@ -587,6 +587,45 @@ export const SETTINGS = {
    * A specific locale can be forced using IETF BCP 47 language tags like "en-US".
    */
   formatdisplay: { key: 'formatdisplay', values: ['true'] },
+  formatcompactdisplay: { key: 'formatcompactdisplay' },
+  formatcurrency: { key: 'formatcurrency' },
+  formatcurrencydisplay: { key: 'formatcurrencydisplay' },
+  formatcurrencysign: { key: 'formatcurrencysign' },
+  formatcalendar: { key: 'formatcalendar' },
+  formatdatestyle: { key: 'formatdatestyle' },
+  formatday: { key: 'formatday' },
+  formatdayperiod: { key: 'formatdayperiod' },
+  formatera: { key: 'formatera' },
+  formatformatmatcher: { key: 'formatformatmatcher' },
+  formatfractionalseconddigits: { key: 'formatfractionalseconddigits', isNumeric: true },
+  formathour: { key: 'formathour' },
+  formathour12: { key: 'formathour12', values: ['true'] },
+  formathourcycle: { key: 'formathourcycle' },
+  formatlocalematcher: { key: 'formatlocalematcher' },
+  formatminute: { key: 'formatminute' },
+  formatmonth: { key: 'formatmonth' },
+  formatmaximumsignificantdigits: { key: 'formatmaximumsignificantdigits', isNumeric: true },
+  formatmaximumfractiondigits: { key: 'formatmaximumfractiondigits', isNumeric: true },
+  formatminimumfractiondigits: { key: 'formatminimumfractiondigits', isNumeric: true },
+  formatminimumintegerdigits: { key: 'formatminimumintegerdigits', isNumeric: true },
+  formatminimumsignificantdigits: { key: 'formatminimumsignificantdigits', isNumeric: true },
+  formatnotation: { key: 'formatnotation' },
+  formatnumberingsystem: { key: 'formatnumberingsystem' },
+  formatroundingpriority: { key: 'formatroundingpriority' },
+  formatroundingincrement: { key: 'formatroundingincrement', isNumeric: true },
+  formatroundingmode: { key: 'formatroundingmode' },
+  formatsecond: { key: 'formatsecond' },
+  formatsigndisplay: { key: 'formatsigndisplay' },
+  formatstyle: { key: 'formatstyle' },
+  formattimestyle: { key: 'formattimestyle' },
+  formattimezone: { key: 'formattimezone' },
+  formattimezonename: { key: 'formattimezonename' },
+  formattrailingzerodisplay: { key: 'formattrailingzerodisplay' },
+  formatunit: { key: 'formatunit' },
+  formatunitdisplay: { key: 'formatunitdisplay' },
+  formatusegrouping: { key: 'formatusegrouping' },
+  formatweekday: { key: 'formatweekday' },
+  formatyear: { key: 'formatyear' },
 
   /**
    * Defines the position for a static list item.