From 05e4c8c76cf1c37db8a4d461dd9ce74b9f4b1a96 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Tue, 2 Jan 2024 23:24:12 -0500 Subject: [PATCH 01/88] Link npm downloads badge to npm package page --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f9bd09131..2b9b81372 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ![](https://img.shields.io/github/license/techniq/svelte-ux?style=flat) [![](https://img.shields.io/github/actions/workflow/status/techniq/svelte-ux/ci.yml?style=flat)](https://github.com/techniq/svelte-ux/actions/workflows/ci.yml) [![](https://img.shields.io/npm/v/svelte-ux?style=flat)](https://www.npmjs.com/package/svelte-ux) -![npm](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange) +[![](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange)](https://www.npmjs.com/package/svelte-ux) [![](https://img.shields.io/badge/Open_in-SvelteLab-black?logo=svelte&color=%23FF3E00)](https://www.sveltelab.dev/?provider=github&owner=techniq&repo=svelte-ux&branch=main&path=%2Fpackages%2Fcreate-svelte-ux%2Ftemplates%2Fstarter) [![](https://img.shields.io/badge/Open_in-StackBlitz-black?logo=stackblitz&color=%231269D3)](https://stackblitz.com/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter) [![](https://img.shields.io/badge/Open_in-CodeSandbox-black?logo=codesandbox&color=%23151515)](https://codesandbox.io/p/sandbox/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter) From ed57bd0b83df20f5eae2f28ce27c4ef4c92f3c12 Mon Sep 17 00:00:00 2001 From: JYC Date: Wed, 3 Jan 2024 05:31:54 +0100 Subject: [PATCH 02/88] =?UTF-8?q?=F0=9F=95=B0=EF=B8=8F=20NEW:=20formatDate?= =?UTF-8?q?=20(#137)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * re init my mess dates * update for consistency * moving format to intl * tests with also fr local * dico * dateDisplay update * Humm * tmp rename to format_fns * realignement & doc update * add a playground * Month & monthYear * DateField * Date Range * Month done * rmv all usage of dateDisplay * Nice nice nice * casing * enums casing * oups, need to comment fr for now in the doc * formats * okay with date of week * update docs * add changeset * rmv dateDisplay * cleanup * dico * keep Day default * rmv useless * Okay, adding DayTime & TimeOnly * of course, updating doc is always good :) * Swtich default to use Tokens enum --- .changeset/light-ways-dress.md | 5 + .changeset/ninety-carpets-cross.md | 5 + .gitignore | 1 + packages/svelte-ux/package.json | 6 +- .../src/lib/components/DateButton.svelte | 55 +- .../src/lib/components/DateField.svelte | 18 +- .../src/lib/components/DatePickerField.svelte | 34 +- .../src/lib/components/DateRange.svelte | 53 +- .../lib/components/DateRangeDisplay.svelte | 75 ++- .../src/lib/components/DateRangeField.svelte | 3 +- .../svelte-ux/src/lib/components/Month.svelte | 27 +- .../svelte-ux/src/lib/components/index.ts | 2 +- .../svelte-ux/src/lib/components/settings.ts | 236 ++++++++- packages/svelte-ux/src/lib/index.ts | 1 + packages/svelte-ux/src/lib/utils/date.test.ts | 483 ++++++++++++++++++ packages/svelte-ux/src/lib/utils/date.ts | 426 ++++++++++++--- .../svelte-ux/src/lib/utils/dateDisplay.ts | 34 -- .../svelte-ux/src/lib/utils/dictionary.ts | 20 + packages/svelte-ux/src/lib/utils/format.ts | 18 +- packages/svelte-ux/src/lib/utils/index.ts | 3 +- packages/svelte-ux/src/lib/utils/number.ts | 4 +- packages/svelte-ux/src/routes/+layout.svelte | 28 + packages/svelte-ux/src/routes/+page.md | 8 - packages/svelte-ux/src/routes/_NavMenu.svelte | 1 - .../src/routes/customization/+page.md | 33 ++ .../docs/components/dateDisplay/+page.svelte | 139 ----- .../docs/components/dateDisplay/+page.ts | 16 - .../src/routes/docs/utils/format/+page.svelte | 369 ++++++++++++- .../src/routes/docs/utils/format/+page.ts | 7 +- packages/svelte-ux/vite.config.js | 3 + pnpm-lock.yaml | 128 ++++- 31 files changed, 1808 insertions(+), 433 deletions(-) create mode 100644 .changeset/light-ways-dress.md create mode 100644 .changeset/ninety-carpets-cross.md create mode 100644 packages/svelte-ux/src/lib/utils/date.test.ts delete mode 100644 packages/svelte-ux/src/lib/utils/dateDisplay.ts create mode 100644 packages/svelte-ux/src/lib/utils/dictionary.ts delete mode 100644 packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.svelte delete mode 100644 packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.ts diff --git a/.changeset/light-ways-dress.md b/.changeset/light-ways-dress.md new file mode 100644 index 000000000..1e024620a --- /dev/null +++ b/.changeset/light-ways-dress.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +BREAKING: removed `dateDisplay()` in favor of `format()` diff --git a/.changeset/ninety-carpets-cross.md b/.changeset/ninety-carpets-cross.md new file mode 100644 index 000000000..04b6556c5 --- /dev/null +++ b/.changeset/ninety-carpets-cross.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +add locale management of date leveraging intl diff --git a/.gitignore b/.gitignore index d3f118eb4..5535d8867 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,6 @@ coverage/ .idea/ .svelte-kit/ .env +.DS_Store test-* \ No newline at end of file diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index 5d4faf58a..cab923bd7 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -13,7 +13,7 @@ "prepublishOnly": "svelte-package", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", - "test:unit": "vitest", + "test:unit": "TZ=UTC+4 vitest --coverage", "lint": "prettier --ignore-path ../../.gitignore --check .", "format": "prettier --ignore-path ../../.gitignore --write .", "typedoc": "typedoc", @@ -29,6 +29,7 @@ "@types/lodash-es": "^4.17.11", "@types/marked": "^6.0.0", "@types/prismjs": "^1.26.3", + "@vitest/coverage-v8": "^0.34.6", "autoprefixer": "^10.4.16", "execa": "^8.0.1", "marked": "^10.0.0", @@ -56,8 +57,7 @@ "clsx": "^2.0.0", "d3-array": "^3.2.4", "d3-scale": "^4.0.2", - "d3-time": "^3.1.0", - "date-fns": "^2.30.0", + "date-fns": "^3.0.5", "immer": "^10.0.3", "lodash-es": "^4.17.21", "posthog-js": "^1.95.1", diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte index 7a8b35aa5..2ec7be7cc 100644 --- a/packages/svelte-ux/src/lib/components/DateButton.svelte +++ b/packages/svelte-ux/src/lib/components/DateButton.svelte @@ -1,12 +1,13 @@ {#if value?.from} - {dateDisplay(value.from, { periodType, format, variant, utc })} + {format_ux(value.from, getPeriodType(value), { variant: 'long' })} {:else}
 
{/if} {#if value?.to && showToValue} - - {dateDisplay(value.to, { periodType, format, variant, utc })} + {format_ux(value.to, getPeriodType(value), { variant: 'long' })} {/if} diff --git a/packages/svelte-ux/src/lib/components/DateRangeField.svelte b/packages/svelte-ux/src/lib/components/DateRangeField.svelte index 573c9c0bb..0c8306442 100644 --- a/packages/svelte-ux/src/lib/components/DateRangeField.svelte +++ b/packages/svelte-ux/src/lib/components/DateRangeField.svelte @@ -53,7 +53,6 @@ export let icon: string | null = null; let open: boolean = false; - let format: string = undefined; let currentValue = value; @@ -104,7 +103,7 @@ on:click={() => (open = true)} {id} > - +
diff --git a/packages/svelte-ux/src/lib/components/Month.svelte b/packages/svelte-ux/src/lib/components/Month.svelte index 1348874f9..3175243ae 100644 --- a/packages/svelte-ux/src/lib/components/Month.svelte +++ b/packages/svelte-ux/src/lib/components/Month.svelte @@ -6,7 +6,6 @@ endOfDay as endOfDayFunc, startOfMonth as startOfMonthFunc, endOfMonth as endOfMonthFunc, - format, addMonths, isSameDay, isWithinInterval, @@ -16,10 +15,12 @@ import { getMonthDaysByWeek, PeriodType } from '../utils/date'; import type { SelectedDate } from '../utils/date'; + import { format } from '../utils'; import { hasKeyOf } from '../types/typeGuards'; import Button from './Button.svelte'; import DateButton from './DateButton.svelte'; + import { getSettings } from '.'; export let selected: SelectedDate | undefined = undefined; @@ -33,7 +34,7 @@ startOfMonthFunc(new Date()); $: endOfMonth = endOfMonthFunc(startOfMonth); - $: monthDaysByWeek = getMonthDaysByWeek(startOfMonth); + $: monthDaysByWeek = getMonthDaysByWeek(startOfMonth, getSettings().formats?.dates?.weekStartsOn); /** * Hide controls and date. Useful to control externally @@ -54,15 +55,15 @@ return disabledDays instanceof Function ? disabledDays(date) : disabledDays instanceof Date - ? isSameDay(date, disabledDays) - : disabledDays instanceof Array - ? disabledDays.some((d) => isSameDay(date, d)) - : disabledDays instanceof Object - ? isWithinInterval(date, { - start: startOfDayFunc(disabledDays.from), - end: endOfDayFunc(disabledDays.to || disabledDays.from), - }) - : false; + ? isSameDay(date, disabledDays) + : disabledDays instanceof Array + ? disabledDays.some((d) => isSameDay(date, d)) + : disabledDays instanceof Object + ? isWithinInterval(date, { + start: startOfDayFunc(disabledDays.from), + end: endOfDayFunc(disabledDays.to || disabledDays.from), + }) + : false; }; $: isDayHidden = (day: Date) => { @@ -91,7 +92,7 @@ />
- {format(startOfMonth, 'MMMM yyyy')} + {format(startOfMonth, PeriodType.MonthYear)}
diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts index 2db586d8c..c1fbbdb81 100644 --- a/packages/svelte-ux/src/lib/components/index.ts +++ b/packages/svelte-ux/src/lib/components/index.ts @@ -92,5 +92,5 @@ export { default as TreeList } from './TreeList.svelte'; export { default as TweenedValue } from './TweenedValue.svelte'; export { default as ViewportCenter } from './ViewportCenter.svelte'; export { default as YearList } from './YearList.svelte'; -export { settings, getFormatNumberOptions, getSettings } from './settings'; +export { settings, getFormatNumber, getSettings, getDictionary } from './settings'; export { getTheme, getComponentTheme } from './theme'; diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts index fd943e754..c6d862db4 100644 --- a/packages/svelte-ux/src/lib/components/settings.ts +++ b/packages/svelte-ux/src/lib/components/settings.ts @@ -2,6 +2,15 @@ import type { FormatNumberOptions, FormatNumberStyle } from '$lib/utils/number'; import { getContext, setContext } from 'svelte'; import type { Theme } from './theme'; import type { Prettify } from '$lib/types/typeHelpers'; +import { + type FormatDateOptions, + DayOfWeek, + type DateFormatVariant, + type CustomIntlDateTimeFormatOptions, + type OrdinalSuffixes, + DateToken, +} from '$lib/utils/date'; +import type { DictionaryMessages, DictionaryMessagesOptions } from '$lib/utils/dictionary'; type ExcludeNone = T extends 'none' ? never : T; export type Settings = { @@ -13,7 +22,9 @@ export type Settings = { [key in ExcludeNone]?: FormatNumberOptions; } >; + dates?: FormatDateOptions; }; + dictionary?: DictionaryMessagesOptions; theme?: Theme; }; @@ -32,7 +43,7 @@ export function getSettings() { } } -export function getFormatNumberOptions(style?: FormatNumberStyle) { +export function getFormatNumber(style?: FormatNumberStyle) { let toRet = { locales: 'en', currency: 'USD', @@ -49,3 +60,226 @@ export function getFormatNumberOptions(style?: FormatNumberStyle) { return toRet; } + +export function getFormatDate(options?: FormatDateOptions) { + // if custom is set && variant is not set, let's put custom as variant + const variant: FormatDateOptions['variant'] = + options?.custom && options?.variant === undefined ? 'custom' : options?.variant ?? 'default'; + + const settings = getSettings(); + + const baseParsing = options?.baseParsing ?? settings.formats?.dates?.baseParsing ?? 'MM/dd/yyyy'; + + const custom = options?.custom ?? ''; + + let toRet: { + locales: string; + baseParsing: string; + weekStartsOn: DayOfWeek; + variant: DateFormatVariant; + custom: CustomIntlDateTimeFormatOptions; + presets: { + day: Record; + dayTime: Record; + timeOnly: Record; + week: Record; + month: Record; + monthYear: Record; + year: Record; + }; + ordinalSuffixes: Record; + dictionaryDate: DictionaryMessages['Date']; + } = { + locales: options?.locales ?? settings.formats?.dates?.locales ?? 'en', + baseParsing, + weekStartsOn: + options?.weekStartsOn ?? settings.formats?.dates?.weekStartsOn ?? DayOfWeek.Sunday, + variant, + custom, + + // keep always the en fallback + ordinalSuffixes: { + en: { + one: 'st', + two: 'nd', + few: 'rd', + other: 'th', + }, + ...settings.formats?.dates?.ordinalSuffixes, + ...options?.ordinalSuffixes, + }, + + presets: { + day: { + short: options?.presets?.day?.short ?? + settings.formats?.dates?.presets?.day?.short ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + ], + default: options?.presets?.day?.default ?? + settings.formats?.dates?.presets?.day?.default ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + ], + long: options?.presets?.day?.long ?? + settings.formats?.dates?.presets?.day?.long ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_short, + DateToken.Year_numeric, + ], + custom, + }, + dayTime: { + short: options?.presets?.dayTime?.short ?? + settings.formats?.dates?.presets?.dayTime?.short ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + DateToken.Hour_numeric, + DateToken.Minute_numeric, + ], + default: options?.presets?.dayTime?.default ?? + settings.formats?.dates?.presets?.dayTime?.default ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + DateToken.Hour_2Digit, + DateToken.Minute_2Digit, + ], + long: options?.presets?.dayTime?.long ?? + settings.formats?.dates?.presets?.dayTime?.long ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + DateToken.Hour_2Digit, + DateToken.Minute_2Digit, + DateToken.Second_2Digit, + ], + custom, + }, + + timeOnly: { + short: options?.presets?.timeOnly?.short ?? + settings.formats?.dates?.presets?.timeOnly?.short ?? [ + DateToken.Hour_numeric, + DateToken.Minute_numeric, + ], + default: options?.presets?.timeOnly?.default ?? + settings.formats?.dates?.presets?.timeOnly?.default ?? [ + DateToken.Hour_2Digit, + DateToken.Minute_2Digit, + DateToken.Second_2Digit, + ], + long: options?.presets?.timeOnly?.long ?? + settings.formats?.dates?.presets?.timeOnly?.long ?? [ + DateToken.Hour_2Digit, + DateToken.Minute_2Digit, + DateToken.Second_2Digit, + DateToken.MiliSecond_3, + ], + custom, + }, + + week: { + short: options?.presets?.week?.short ?? + settings.formats?.dates?.presets?.week?.short ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + ], + default: options?.presets?.week?.default ?? + settings.formats?.dates?.presets?.week?.default ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + ], + long: options?.presets?.week?.long ?? + settings.formats?.dates?.presets?.week?.long ?? [ + DateToken.DayOfMonth_numeric, + DateToken.Month_numeric, + DateToken.Year_numeric, + ], + custom, + }, + month: { + short: + options?.presets?.month?.short ?? + settings.formats?.dates?.presets?.month?.short ?? + DateToken.Month_short, + default: + options?.presets?.month?.default ?? + settings.formats?.dates?.presets?.month?.default ?? + DateToken.Month_short, + long: + options?.presets?.month?.long ?? + settings.formats?.dates?.presets?.month?.long ?? + DateToken.Month_long, + custom, + }, + monthYear: { + short: options?.presets?.monthsYear?.short ?? + settings.formats?.dates?.presets?.monthsYear?.short ?? [ + DateToken.Month_short, + DateToken.Year_2Digit, + ], + default: options?.presets?.monthsYear?.default ?? + settings.formats?.dates?.presets?.monthsYear?.default ?? [ + DateToken.Month_long, + DateToken.Year_numeric, + ], + long: options?.presets?.monthsYear?.long ?? + settings.formats?.dates?.presets?.monthsYear?.long ?? [ + DateToken.Month_long, + DateToken.Year_numeric, + ], + custom, + }, + year: { + short: + options?.presets?.year?.short ?? + settings.formats?.dates?.presets?.year?.short ?? + DateToken.Year_2Digit, + default: + options?.presets?.year?.default ?? + settings.formats?.dates?.presets?.year?.default ?? + DateToken.Year_numeric, + long: + options?.presets?.year?.long ?? + settings.formats?.dates?.presets?.year?.long ?? + DateToken.Year_numeric, + custom, + }, + }, + + // dico + dictionaryDate: getDictionary().Date, + }; + + return toRet; +} + +export function getDictionary(options?: DictionaryMessagesOptions) { + // if custom is set && variant is not set, let's put custom as variant + const settings = getSettings(); + + let toRet: DictionaryMessages = { + Ok: options?.Ok ?? settings.dictionary?.Ok ?? 'Ok', + Cancel: options?.Cancel ?? settings.dictionary?.Cancel ?? 'Cancel', + + Date: { + Day: options?.Date?.Day ?? settings.dictionary?.Date?.Day ?? 'Day', + Week: options?.Date?.Week ?? settings.dictionary?.Date?.Week ?? 'Week', + BiWeek: options?.Date?.BiWeek ?? settings.dictionary?.Date?.BiWeek ?? 'Bi-Week', + Month: options?.Date?.Month ?? settings.dictionary?.Date?.Month ?? 'Month', + Quarter: options?.Date?.Quarter ?? settings.dictionary?.Date?.Quarter ?? 'Quarter', + CalendarYear: + options?.Date?.CalendarYear ?? settings.dictionary?.Date?.CalendarYear ?? 'Calendar Year', + FiscalYearOct: + options?.Date?.FiscalYearOct ?? + settings.dictionary?.Date?.FiscalYearOct ?? + 'Fiscal Year (Oct)', + }, + }; + + return toRet; +} diff --git a/packages/svelte-ux/src/lib/index.ts b/packages/svelte-ux/src/lib/index.ts index 180dd4045..3e5b71788 100644 --- a/packages/svelte-ux/src/lib/index.ts +++ b/packages/svelte-ux/src/lib/index.ts @@ -2,4 +2,5 @@ export * from './actions'; export * from './components'; export * from './stores'; export * from './types'; +// TODO: Conflic Duration Component & Type export * from './utils'; diff --git a/packages/svelte-ux/src/lib/utils/date.test.ts b/packages/svelte-ux/src/lib/utils/date.test.ts new file mode 100644 index 000000000..09e8447d1 --- /dev/null +++ b/packages/svelte-ux/src/lib/utils/date.test.ts @@ -0,0 +1,483 @@ +import { describe, it, expect } from 'vitest'; +import { + PeriodType, + formatDate, + getMonthDaysByWeek, + localToUtcDate, + utcToLocalDate, + DayOfWeek, + formatIntl, + type CustomIntlDateTimeFormatOptions, + type FormatDateOptions, + DateToken, +} from './date'; +import { format } from '.'; + +const DATE = '2023-11-21'; // "good" default date as the day (21) is bigger than 12 (number of months). And november is a good month1 (because why not?) +const dt_2M_2d = new Date(2023, 10, 21); +const dt_2M_1d = new Date(2023, 10, 7); +const dt_1M_1d = new Date(2023, 2, 7); + +const dt_1M_1d_time_pm = new Date(2023, 2, 7, 14, 2, 3, 4); +const dt_1M_1d_time_am = new Date(2023, 2, 7, 1, 2, 3, 4); + +const fr: FormatDateOptions = { + locales: 'fr', + ordinalSuffixes: { + fr: { + one: 'er', + two: '', + few: '', + other: '', + }, + }, +}; + +describe('formatDate()', () => { + it('should return empty string for null or undefined date', () => { + expect(formatDate(null)).equal(''); + expect(formatDate(undefined)).equal(''); + }); + + it('should return empty string for invalid date', () => { + expect(formatDate('invalid date')).equal(''); + }); + + describe('should format date for PeriodType.Day', () => { + const localDate = new Date(2023, 10, 21); + const combi = [ + ['short', undefined, '11/21'], + ['short', 'fr', '21/11'], + ['long', undefined, 'Nov 21, 2023'], + ['long', 'fr', '21 nov. 2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(localDate, PeriodType.Day, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date string for PeriodType.Day', () => { + const combi = [ + ['short', undefined, '11/21'], + ['short', 'fr', '21/11'], + ['long', undefined, 'Nov 21, 2023'], + ['long', 'fr', '21 nov. 2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.Day, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date string for DayTime, TimeOnly', () => { + const combi: [Date, PeriodType, FormatDateOptions, string[]][] = [ + [ + dt_1M_1d_time_pm, + PeriodType.DayTime, + { variant: 'short' }, + ['3/7/2023, 2:02 PM', '07/03/2023 14:02'], + ], + [ + dt_1M_1d_time_pm, + PeriodType.DayTime, + { variant: 'default' }, + ['3/7/2023, 02:02 PM', '07/03/2023 14:02'], + ], + [ + dt_1M_1d_time_pm, + PeriodType.DayTime, + { variant: 'long' }, + ['3/7/2023, 02:02:03 PM', '07/03/2023 14:02:03'], + ], + [dt_1M_1d_time_pm, PeriodType.TimeOnly, { variant: 'short' }, ['2:02 PM', '14:02']], + [dt_1M_1d_time_pm, PeriodType.TimeOnly, { variant: 'default' }, ['02:02:03 PM', '14:02:03']], + [ + dt_1M_1d_time_pm, + PeriodType.TimeOnly, + { variant: 'long' }, + ['02:02:03.004 PM', '14:02:03,004'], + ], + ]; + + for (const c of combi) { + const [date, periodType, options, [expected_default, expected_fr]] = c; + it(c.toString(), () => { + expect(format(date, periodType, options)).equal(expected_default); + }); + + it(c.toString() + 'fr', () => { + expect(format(date, periodType, { ...options, ...fr })).equal(expected_fr); + }); + } + }); + + describe('should format date for PeriodType.WeekSun / Mon', () => { + const combi = [ + [PeriodType.WeekSun, 'short', undefined, '11/19 - 11/25'], + [PeriodType.WeekSun, 'short', 'fr', '19/11 - 25/11'], + [PeriodType.WeekSun, 'long', undefined, '11/19/2023 - 11/25/2023'], + [PeriodType.WeekSun, 'long', 'fr', '19/11/2023 - 25/11/2023'], + [PeriodType.WeekMon, 'long', undefined, '11/20/2023 - 11/26/2023'], + [PeriodType.WeekMon, 'long', 'fr', '20/11/2023 - 26/11/2023'], + ] as const; + + for (const c of combi) { + const [periodType, variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, periodType, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.Week', () => { + const combi = [ + [PeriodType.Week, 'short', undefined, DayOfWeek.Sunday, '11/19 - 11/25'], + [PeriodType.Week, 'short', 'fr', DayOfWeek.Sunday, '19/11 - 25/11'], + [PeriodType.Week, 'long', undefined, DayOfWeek.Sunday, '11/19/2023 - 11/25/2023'], + [PeriodType.Week, 'long', 'fr', DayOfWeek.Sunday, '19/11/2023 - 25/11/2023'], + + [PeriodType.Week, 'short', undefined, DayOfWeek.Monday, '11/20 - 11/26'], + [PeriodType.Week, 'short', 'fr', DayOfWeek.Monday, '20/11 - 26/11'], + [PeriodType.Week, 'long', undefined, DayOfWeek.Monday, '11/20/2023 - 11/26/2023'], + [PeriodType.Week, 'long', 'fr', DayOfWeek.Monday, '20/11/2023 - 26/11/2023'], + ] as const; + + for (const c of combi) { + const [periodType, variant, locales, weekStartsOn, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, periodType, { variant, locales, weekStartsOn })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.Month', () => { + const combi = [ + ['short', undefined, 'Nov'], + ['short', 'fr', 'nov.'], + ['long', undefined, 'November'], + ['long', 'fr', 'novembre'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.Month, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.MonthYear', () => { + const combi = [ + ['short', undefined, 'Nov 23'], + ['short', 'fr', 'nov. 23'], + ['long', undefined, 'November 2023'], + ['long', 'fr', 'novembre 2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.MonthYear, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.Quarter', () => { + const combi = [ + ['short', undefined, 'Oct - Dec 23'], + ['short', 'fr', 'oct. - déc. 23'], + ['long', undefined, 'October - December 2023'], + ['long', 'fr', 'octobre - décembre 2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.Quarter, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.CalendarYear', () => { + const combi = [ + ['short', undefined, '23'], + ['short', 'fr', '23'], + ['long', undefined, '2023'], + ['long', 'fr', '2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.CalendarYear, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.FiscalYearOctober', () => { + const combi = [ + ['short', undefined, '24'], + ['short', 'fr', '24'], + ['long', undefined, '2024'], + ['long', 'fr', '2024'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.FiscalYearOctober, { variant, locales })).equal( + expected + ); + }); + } + }); + + describe('should format date for PeriodType.BiWeek1Sun', () => { + const combi = [ + ['short', undefined, '11/12 - 11/25'], + ['short', 'fr', '12/11 - 25/11'], + ['long', undefined, '11/12/2023 - 11/25/2023'], + ['long', 'fr', '12/11/2023 - 25/11/2023'], + ] as const; + + for (const c of combi) { + const [variant, locales, expected] = c; + it(c.toString(), () => { + expect(formatDate(DATE, PeriodType.BiWeek1Sun, { variant, locales })).equal(expected); + }); + } + }); + + describe('should format date for PeriodType.undefined', () => { + const expected = '2023-11-21T00:00:00-04:00'; + const combi = [ + ['short', undefined], + ['short', 'fr'], + ['long', undefined], + ['long', 'fr'], + ] as const; + + for (const c of combi) { + const [variant, locales] = c; + it(c.toString(), () => { + expect(formatDate(DATE, undefined, { variant, locales })).equal(expected); + }); + } + }); +}); + +describe('formatIntl() tokens', () => { + const combi: [Date, CustomIntlDateTimeFormatOptions, string[]][] = [ + [dt_1M_1d, 'MM/dd/yyyy', ['03/07/2023', '07/03/2023']], + [dt_2M_2d, 'M/d/yyyy', ['11/21/2023', '21/11/2023']], + [dt_2M_1d, 'M/d/yyyy', ['11/7/2023', '07/11/2023']], + [dt_2M_1d, 'M/dd/yyyy', ['11/07/2023', '07/11/2023']], + [dt_1M_1d, 'M/d/yyyy', ['3/7/2023', '07/03/2023']], + [dt_1M_1d, 'MM/d/yyyy', ['03/7/2023', '7/03/2023']], + [dt_2M_2d, 'M/d', ['11/21', '21/11']], + [dt_2M_2d, 'MMM d, yyyy', ['Nov 21, 2023', '21 nov. 2023']], + [dt_2M_1d, 'MMM d, yyyy', ['Nov 7, 2023', '7 nov. 2023']], + [dt_2M_1d, 'MMM do, yyyy', ['Nov 7th, 2023', '7 nov. 2023']], + [dt_2M_2d, 'MMM', ['Nov', 'nov.']], + [dt_2M_2d, 'MMMM', ['November', 'novembre']], + [dt_2M_2d, 'MMM yy', ['Nov 23', 'nov. 23']], + [dt_2M_2d, 'MMMM yyyy', ['November 2023', 'novembre 2023']], + [dt_2M_2d, 'yy', ['23', '23']], + [dt_2M_2d, 'yyyy', ['2023', '2023']], + [dt_2M_2d, { dateStyle: 'full' }, ['Tuesday, November 21, 2023', 'mardi 21 novembre 2023']], + [dt_2M_2d, { dateStyle: 'long' }, ['November 21, 2023', '21 novembre 2023']], + [dt_2M_2d, { dateStyle: 'medium' }, ['Nov 21, 2023', '21 nov. 2023']], + [dt_2M_2d, { dateStyle: 'medium', withOrdinal: true }, ['Nov 21st, 2023', '21 nov. 2023']], + [dt_2M_2d, { dateStyle: 'short' }, ['11/21/23', '21/11/2023']], + [dt_1M_1d, { dateStyle: 'short' }, ['3/7/23', '07/03/2023']], + + // time + [dt_1M_1d_time_pm, [DateToken.Hour_numeric, DateToken.Minute_numeric], ['2:02 PM', '14:02']], + [dt_1M_1d_time_am, [DateToken.Hour_numeric, DateToken.Minute_numeric], ['1:02 AM', '01:02']], + [ + dt_1M_1d_time_am, + [DateToken.Hour_numeric, DateToken.Minute_numeric, DateToken.Hour_wAMPM], + ['1:02 AM', '1:02 AM'], + ], + [ + dt_1M_1d_time_am, + [DateToken.Hour_2Digit, DateToken.Minute_2Digit, DateToken.Hour_woAMPM], + ['01:02', '01:02'], + ], + [ + dt_1M_1d_time_am, + [DateToken.Hour_numeric, DateToken.Minute_numeric, DateToken.Second_numeric], + ['1:02:03 AM', '01:02:03'], + ], + [ + dt_1M_1d_time_am, + [ + DateToken.Hour_numeric, + DateToken.Minute_numeric, + DateToken.Second_numeric, + DateToken.MiliSecond_3, + ], + ['1:02:03.004 AM', '01:02:03,004'], + ], + ]; + + for (const c of combi) { + const [date, tokens, [expected_default, expected_fr]] = c; + it(c.toString(), () => { + expect(formatIntl(date, tokens)).equal(expected_default); + }); + + it(c.toString() + 'fr', () => { + expect(formatIntl(date, tokens, fr)).equal(expected_fr); + }); + } +}); + +describe('utcToLocalDate()', () => { + it('in with offset -00 => local', () => { + const utcDate = '2023-11-21T00:00:00-00:00'; + const localDate = utcToLocalDate(utcDate); + expect(localDate.toISOString()).equal('2023-11-21T04:00:00.000Z'); + }); + + it('in without offset, the utc is already +4, to local: another +4', () => { + const utcDate = '2023-11-21T00:00:00'; + const localDate = utcToLocalDate(utcDate); + expect(localDate.toISOString()).equal('2023-11-21T08:00:00.000Z'); + }); +}); + +describe('localToUtcDate()', () => { + it('in with offset -04 => UTC', () => { + const localDate = '2023-11-21T00:00:00-04:00'; + const utcDate = localToUtcDate(localDate); + expect(utcDate.toISOString()).equal('2023-11-21T00:00:00.000Z'); + }); + + it('in with offset -00 => UTC', () => { + const localDate = '2023-11-21T04:00:00-00:00'; + const utcDate = localToUtcDate(localDate); + expect(utcDate.toISOString()).equal('2023-11-21T00:00:00.000Z'); + }); + + it('in without offset == UTC', () => { + const localDate = '2023-11-21T04:00:00'; + const utcDate = localToUtcDate(localDate); + expect(utcDate.toISOString()).equal('2023-11-21T04:00:00.000Z'); + }); +}); + +describe('getMonthDaysByWeek()', () => { + it('default starting Week: Sunday', () => { + const dates = getMonthDaysByWeek(new Date(DATE)); + expect(dates).toMatchInlineSnapshot(` + [ + [ + 2023-10-29T04:00:00.000Z, + 2023-10-30T04:00:00.000Z, + 2023-10-31T04:00:00.000Z, + 2023-11-01T04:00:00.000Z, + 2023-11-02T04:00:00.000Z, + 2023-11-03T04:00:00.000Z, + 2023-11-04T04:00:00.000Z, + ], + [ + 2023-11-05T04:00:00.000Z, + 2023-11-06T04:00:00.000Z, + 2023-11-07T04:00:00.000Z, + 2023-11-08T04:00:00.000Z, + 2023-11-09T04:00:00.000Z, + 2023-11-10T04:00:00.000Z, + 2023-11-11T04:00:00.000Z, + ], + [ + 2023-11-12T04:00:00.000Z, + 2023-11-13T04:00:00.000Z, + 2023-11-14T04:00:00.000Z, + 2023-11-15T04:00:00.000Z, + 2023-11-16T04:00:00.000Z, + 2023-11-17T04:00:00.000Z, + 2023-11-18T04:00:00.000Z, + ], + [ + 2023-11-19T04:00:00.000Z, + 2023-11-20T04:00:00.000Z, + 2023-11-21T04:00:00.000Z, + 2023-11-22T04:00:00.000Z, + 2023-11-23T04:00:00.000Z, + 2023-11-24T04:00:00.000Z, + 2023-11-25T04:00:00.000Z, + ], + [ + 2023-11-26T04:00:00.000Z, + 2023-11-27T04:00:00.000Z, + 2023-11-28T04:00:00.000Z, + 2023-11-29T04:00:00.000Z, + 2023-11-30T04:00:00.000Z, + 2023-12-01T04:00:00.000Z, + 2023-12-02T04:00:00.000Z, + ], + ] + `); + }); + + it('Starting Week: Monday', () => { + const dates = getMonthDaysByWeek(new Date(DATE), 1); + expect(dates).toMatchInlineSnapshot(` + [ + [ + 2023-10-30T04:00:00.000Z, + 2023-10-31T04:00:00.000Z, + 2023-11-01T04:00:00.000Z, + 2023-11-02T04:00:00.000Z, + 2023-11-03T04:00:00.000Z, + 2023-11-04T04:00:00.000Z, + 2023-11-05T04:00:00.000Z, + ], + [ + 2023-11-06T04:00:00.000Z, + 2023-11-07T04:00:00.000Z, + 2023-11-08T04:00:00.000Z, + 2023-11-09T04:00:00.000Z, + 2023-11-10T04:00:00.000Z, + 2023-11-11T04:00:00.000Z, + 2023-11-12T04:00:00.000Z, + ], + [ + 2023-11-13T04:00:00.000Z, + 2023-11-14T04:00:00.000Z, + 2023-11-15T04:00:00.000Z, + 2023-11-16T04:00:00.000Z, + 2023-11-17T04:00:00.000Z, + 2023-11-18T04:00:00.000Z, + 2023-11-19T04:00:00.000Z, + ], + [ + 2023-11-20T04:00:00.000Z, + 2023-11-21T04:00:00.000Z, + 2023-11-22T04:00:00.000Z, + 2023-11-23T04:00:00.000Z, + 2023-11-24T04:00:00.000Z, + 2023-11-25T04:00:00.000Z, + 2023-11-26T04:00:00.000Z, + ], + [ + 2023-11-27T04:00:00.000Z, + 2023-11-28T04:00:00.000Z, + 2023-11-29T04:00:00.000Z, + 2023-11-30T04:00:00.000Z, + 2023-12-01T04:00:00.000Z, + 2023-12-02T04:00:00.000Z, + 2023-12-03T04:00:00.000Z, + ], + ] + `); + }); +}); diff --git a/packages/svelte-ux/src/lib/utils/date.ts b/packages/svelte-ux/src/lib/utils/date.ts index 581354e18..37277dc92 100644 --- a/packages/svelte-ux/src/lib/utils/date.ts +++ b/packages/svelte-ux/src/lib/utils/date.ts @@ -1,5 +1,4 @@ import { - format, startOfDay, endOfDay, startOfWeek, @@ -31,11 +30,10 @@ import { formatISO, } from 'date-fns'; -import { timeDays } from 'd3-time'; - import { hasKeyOf } from '../types/typeGuards'; import { chunk } from './array'; import type { DateRange } from './dateRange'; +import { getFormatDate } from '$lib/components/settings'; export type SelectedDate = Date | Date[] | DateRange | null; @@ -46,7 +44,11 @@ export type Period = { }; export enum PeriodType { + Custom = 1, + Day = 10, + DayTime = 11, + TimeOnly = 15, WeekSun = 20, WeekMon = 21, @@ -55,8 +57,10 @@ export enum PeriodType { WeekThu = 24, WeekFri = 25, WeekSat = 26, + Week = 27, // will be replaced by WeekSun, WeekMon, etc depending on weekStartsOn Month = 30, + MonthYear = 31, Quarter = 40, CalendarYear = 50, FiscalYearOctober = 60, @@ -68,6 +72,7 @@ export enum PeriodType { BiWeek1Thu = 74, BiWeek1Fri = 75, BiWeek1Sat = 76, + BiWeek1 = 77, // will be replaced by BiWeek1Sun, BiWeek1Mon, etc depending on weekStartsOn BiWeek2Sun = 80, BiWeek2Mon = 81, @@ -76,76 +81,89 @@ export enum PeriodType { BiWeek2Thu = 84, BiWeek2Fri = 85, BiWeek2Sat = 86, + BiWeek2 = 87, // will be replaced by BiWeek2Sun, BiWeek2Mon, etc depending on weekStartsOn } export enum DayOfWeek { - SUN, - MON, - TUE, - WED, - THU, - FRI, - SAT, + Sunday = 0, + Monday = 1, + Tuesday = 2, + Wednesday = 3, + Thursday = 4, + Friday = 5, + Saturday = 6, } -export function getPeriodTypeName(periodType: PeriodType) { +export function getDayOfWeekName(weekStartsOn: DayOfWeek, locales: string) { + // Create a date object for a specific day (0 = Sunday, 1 = Monday, etc.) + // And "7 of Jan 2024" is a Sunday + const date = new Date(2024, 0, 7 + weekStartsOn); + const formatter = new Intl.DateTimeFormat(locales, { weekday: 'short' }); + return formatter.format(date); +} + +export function getPeriodTypeName(periodType: PeriodType, options: FormatDateOptions = {}) { + const { locales, dictionaryDate: dico } = getFormatDate(options); + switch (periodType) { case PeriodType.Day: - return 'Day'; + return dico.Day; case PeriodType.WeekSun: - return 'Week (Sun)'; + return `${dico.Week} (${getDayOfWeekName(DayOfWeek.Sunday, locales)})`; case PeriodType.WeekMon: - return 'Week (Mon)'; + return `${dico.Week} (${getDayOfWeekName(1, locales)})`; case PeriodType.WeekTue: - return 'Week (Tue)'; + return `${dico.Week} (${getDayOfWeekName(2, locales)})`; case PeriodType.WeekWed: - return 'Week (Wed)'; + return `${dico.Week} (${getDayOfWeekName(3, locales)})`; case PeriodType.WeekThu: - return 'Week (Thu)'; + return `${dico.Week} (${getDayOfWeekName(4, locales)})`; case PeriodType.WeekFri: - return 'Week (Fri)'; + return `${dico.Week} (${getDayOfWeekName(5, locales)})`; case PeriodType.WeekSat: - return 'Week (Sat)'; + return `${dico.Week} (${getDayOfWeekName(6, locales)})`; case PeriodType.Month: - return 'Month'; + return dico.Month; + case PeriodType.MonthYear: + return dico.Month; case PeriodType.Quarter: - return 'Quarter'; + return dico.Quarter; case PeriodType.CalendarYear: - return 'Calendar Year'; + return dico.CalendarYear; case PeriodType.FiscalYearOctober: - return 'Fiscal Year (Oct)'; + return dico.FiscalYearOct; case PeriodType.BiWeek1Sun: - return 'Bi-Week (Sun)'; + return `${dico.BiWeek} (${getDayOfWeekName(0, locales)})`; case PeriodType.BiWeek1Mon: - return 'Bi-Week (Mon)'; + return `${dico.BiWeek} (${getDayOfWeekName(1, locales)})`; case PeriodType.BiWeek1Tue: - return 'Bi-Week (Tue)'; + return `${dico.BiWeek} (${getDayOfWeekName(2, locales)})`; case PeriodType.BiWeek1Wed: - return 'Bi-Week (Wed)'; + return `${dico.BiWeek} (${getDayOfWeekName(3, locales)})`; case PeriodType.BiWeek1Thu: - return 'Bi-Week (Thu)'; + return `${dico.BiWeek} (${getDayOfWeekName(4, locales)})`; case PeriodType.BiWeek1Fri: - return 'Bi-Week (Fri)'; + return `${dico.BiWeek} (${getDayOfWeekName(5, locales)})`; case PeriodType.BiWeek1Sat: - return 'Bi-Week (Sat)'; + return `${dico.BiWeek} (${getDayOfWeekName(6, locales)})`; case PeriodType.BiWeek2Sun: - return 'Bi-Week 2 (Sun)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(0, locales)})`; case PeriodType.BiWeek2Mon: - return 'Bi-Week 2 (Mon)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(1, locales)})`; case PeriodType.BiWeek2Tue: - return 'Bi-Week 2 (Tue)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(2, locales)})`; case PeriodType.BiWeek2Wed: - return 'Bi-Week 2 (Wed)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(3, locales)})`; case PeriodType.BiWeek2Thu: - return 'Bi-Week 2 (Thu)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(4, locales)})`; case PeriodType.BiWeek2Fri: - return 'Bi-Week 2 (Fri)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(5, locales)})`; case PeriodType.BiWeek2Sat: - return 'Bi-Week 2 (Sat)'; + return `${dico.BiWeek} 2 (${getDayOfWeekName(6, locales)})`; default: return 'Unknown'; @@ -292,12 +310,22 @@ export function getMonths(year = new Date().getFullYear()) { return Array.from({ length: 12 }, (_, i) => new Date(year, i, 1)); } -export function getMonthDaysByWeek(startOfMonth: Date): Date[][] { - const startOfFirstWeek = startOfWeek(startOfMonth); - const endOfLastWeek = endOfWeek(endOfMonth(startOfMonth)); - const monthDaysByWeek = chunk(timeDays(startOfFirstWeek, endOfLastWeek), 7); +export function getMonthDaysByWeek( + dateInTheMonth: Date, + weekStartsOn: DayOfWeek = DayOfWeek.Sunday +): Date[][] { + const startOfFirstWeek = startOfWeek(startOfMonth(dateInTheMonth), { weekStartsOn }); + const endOfLastWeek = endOfWeek(endOfMonth(dateInTheMonth), { weekStartsOn }); - return monthDaysByWeek; + const list = []; + + let valueToAdd = startOfFirstWeek; + while (valueToAdd <= endOfLastWeek) { + list.push(valueToAdd); + valueToAdd = addDays(valueToAdd, 1); + } + + return chunk(list, 7) as Date[][]; } export function getMinSelectedDate(date: SelectedDate | null | undefined) { @@ -549,11 +577,223 @@ export function formatISODate( return formatISO(date, { representation }); } +export enum DateToken { + /** `1982, 1986, 2024` */ + Year_numeric = 'yyy', + /** `82, 86, 24` */ + Year_2Digit = 'yy', + + /** `January, February, ..., December` */ + Month_long = 'MMMM', + /** `Jan, Feb, ..., Dec` */ + Month_short = 'MMM', + /** `01, 02, ..., 12` */ + Month_2Digit = 'MM', + /** `1, 2, ..., 12` */ + Month_numeric = 'M', + + /** `1, 2, ..., 11, 12` */ + Hour_numeric = 'h', + /** `01, 02, ..., 11, 12` */ + Hour_2Digit = 'hh', + /** You should probably not use this. Force with AM/PM (and the good locale), not specifying this will automatically take the good local */ + Hour_wAMPM = 'a', + /** You should probably not use this. Force without AM/PM (and the good locale), not specifying this will automatically take the good local */ + Hour_woAMPM = 'aaaaaa', + + /** `0, 1, ..., 59` */ + Minute_numeric = 'm', + /** `00, 01, ..., 59` */ + Minute_2Digit = 'mm', + + /** `0, 1, ..., 59` */ + Second_numeric = 's', + /** `00, 01, ..., 59` */ + Second_2Digit = 'ss', + + /** `000, 001, ..., 999` */ + MiliSecond_3 = 'SSS', + + /** Minimize digit: `1, 2, 11, ...` */ + DayOfMonth_numeric = 'd', + /** `01, 02, 11, ...` */ + DayOfMonth_2Digit = 'dd', + /** `1st, 2nd, 11th, ...` You can have your local ordinal by passing `ordinalSuffixes` in options / settings */ + DayOfMonth_withOrdinal = 'do', + + /** `M, T, W, T, F, S, S` */ + DayOfWeek_narrow = 'eeeee', + /** `Monday, Tuesday, ..., Sunday` */ + DayOfWeek_long = 'eeee', + /** `Mon, Tue, Wed, ..., Sun` */ + DayOfWeek_short = 'eee', +} + +export function formatIntl( + dt: Date, + tokens_or_intlOptions: CustomIntlDateTimeFormatOptions, + options: FormatDateOptions = {} +) { + const { locales, ordinalSuffixes } = getFormatDate(options); + + function formatIntlOrdinal(formatter: Intl.DateTimeFormat, with_ordinal = false) { + if (with_ordinal) { + const suffixes = ordinalSuffixes[locales] ?? ordinalSuffixes['en']; + const rules = new Intl.PluralRules(locales, { type: 'ordinal' }); + + const splited = formatter.formatToParts(dt); + return splited + .map((c) => { + if (c.type === 'day') { + const ordinal = rules.select(parseInt(c.value, 10)); + const suffix = suffixes[ordinal]; + return `${c.value}${suffix}`; + } + return c.value; + }) + .join(''); + } + + return formatter.format(dt); + } + + if (typeof tokens_or_intlOptions !== 'string' && !Array.isArray(tokens_or_intlOptions)) { + return formatIntlOrdinal( + new Intl.DateTimeFormat(locales, tokens_or_intlOptions), + tokens_or_intlOptions.withOrdinal + ); + } + + const tokens = Array.isArray(tokens_or_intlOptions) + ? tokens_or_intlOptions.join('') + : tokens_or_intlOptions; + + // Order of includes check is important! (longest first) + const formatter = new Intl.DateTimeFormat(locales, { + year: tokens.includes(DateToken.Year_numeric) + ? 'numeric' + : tokens.includes(DateToken.Year_2Digit) + ? '2-digit' + : undefined, + + month: tokens.includes(DateToken.Month_long) + ? 'long' + : tokens.includes(DateToken.Month_short) + ? 'short' + : tokens.includes(DateToken.Month_2Digit) + ? '2-digit' + : tokens.includes(DateToken.Month_numeric) + ? 'numeric' + : undefined, + + day: tokens.includes(DateToken.DayOfMonth_2Digit) + ? '2-digit' + : tokens.includes(DateToken.DayOfMonth_numeric) + ? 'numeric' + : undefined, + + hour: tokens.includes(DateToken.Hour_2Digit) + ? '2-digit' + : tokens.includes(DateToken.Hour_numeric) + ? 'numeric' + : undefined, + hour12: tokens.includes(DateToken.Hour_woAMPM) + ? false + : tokens.includes(DateToken.Hour_wAMPM) + ? true + : undefined, + + minute: tokens.includes(DateToken.Minute_2Digit) + ? '2-digit' + : tokens.includes(DateToken.Minute_numeric) + ? 'numeric' + : undefined, + + second: tokens.includes(DateToken.Second_2Digit) + ? '2-digit' + : tokens.includes(DateToken.Second_numeric) + ? 'numeric' + : undefined, + + fractionalSecondDigits: tokens.includes(DateToken.MiliSecond_3) ? 3 : undefined, + + weekday: tokens.includes(DateToken.DayOfWeek_narrow) + ? 'narrow' + : tokens.includes(DateToken.DayOfWeek_long) + ? 'long' + : tokens.includes(DateToken.DayOfWeek_short) + ? 'short' + : undefined, + }); + + return formatIntlOrdinal(formatter, tokens.includes(DateToken.DayOfMonth_withOrdinal)); +} + +function range( + date: Date, + weekStartsOn: DayOfWeek, + options: FormatDateOptions, + formats: Record, + variant: DateFormatVariant, + biWeek: undefined | 1 | 2 = undefined // undefined means that it's not a bi-week +) { + const start = + biWeek === undefined + ? startOfWeek(date, { weekStartsOn }) + : startOfBiWeek(date, biWeek, weekStartsOn); + const end = + biWeek === undefined + ? endOfWeek(date, { weekStartsOn }) + : endOfBiWeek(date, biWeek, weekStartsOn); + + const formatToUse = formats[variant]; + + return formatIntl(start, formatToUse, options) + ' - ' + formatIntl(end, formatToUse, options); +} + +export type OrdinalSuffixes = { + one: string; + two: string; + few: string; + other: string; + zero?: string; + many?: string; +}; +export type DateFormatVariant = 'short' | 'default' | 'long' | 'custom'; +type DateFormatVariantPreset = { + short?: CustomIntlDateTimeFormatOptions; + default?: CustomIntlDateTimeFormatOptions; + long?: CustomIntlDateTimeFormatOptions; +}; +export type CustomIntlDateTimeFormatOptions = + | string + | string[] + | (Intl.DateTimeFormatOptions & { withOrdinal?: boolean }); +export type FormatDateOptions = { + locales?: string | undefined; + baseParsing?: string; + weekStartsOn?: DayOfWeek; + variant?: DateFormatVariant; + custom?: CustomIntlDateTimeFormatOptions; + presets?: { + day?: DateFormatVariantPreset; + dayTime?: DateFormatVariantPreset; + timeOnly?: DateFormatVariantPreset; + week?: DateFormatVariantPreset; + month?: DateFormatVariantPreset; + monthsYear?: DateFormatVariantPreset; + year?: DateFormatVariantPreset; + }; + ordinalSuffixes?: Record; +}; + export function formatDate( date: Date | string | null | undefined, periodType?: PeriodType | null | undefined, - variant?: 'short' | 'long' // TODO: Support x-long, etc (maybe call it sm, md, lg, xl, etc) -) { + options: FormatDateOptions = {} +): string { + periodType = periodType ?? undefined; + if (typeof date === 'string') { date = parseISO(date); } @@ -564,49 +804,118 @@ export function formatDate( return ''; } + const { variant, weekStartsOn, custom, presets } = getFormatDate(options); + const { day, dayTime, timeOnly, week, month, monthYear, year } = presets; + + if (periodType === PeriodType.Week) { + periodType = [ + PeriodType.WeekSun, + PeriodType.WeekMon, + PeriodType.WeekTue, + PeriodType.WeekWed, + PeriodType.WeekThu, + PeriodType.WeekFri, + PeriodType.WeekSat, + ][weekStartsOn]; + } else if (periodType === PeriodType.BiWeek1) { + periodType = [ + PeriodType.BiWeek1Sun, + PeriodType.BiWeek1Mon, + PeriodType.BiWeek1Tue, + PeriodType.BiWeek1Wed, + PeriodType.BiWeek1Thu, + PeriodType.BiWeek1Fri, + PeriodType.BiWeek1Sat, + ][weekStartsOn]; + } else if (periodType === PeriodType.BiWeek2) { + periodType = [ + PeriodType.BiWeek2Sun, + PeriodType.BiWeek2Mon, + PeriodType.BiWeek2Tue, + PeriodType.BiWeek2Wed, + PeriodType.BiWeek2Thu, + PeriodType.BiWeek2Fri, + PeriodType.BiWeek2Sat, + ][weekStartsOn]; + } + switch (periodType) { + case PeriodType.Custom: + return formatIntl(date, custom, options); + case PeriodType.Day: - return variant === 'short' ? format(date, 'M/d') : format(date, 'MMM d, yyyy'); + return formatIntl(date, day[variant], options); + + case PeriodType.DayTime: + return formatIntl(date, dayTime[variant], options); + + case PeriodType.TimeOnly: + return formatIntl(date, timeOnly[variant], options); case PeriodType.WeekSun: + return range(date, 0, options, week, variant); case PeriodType.WeekMon: + return range(date, 1, options, week, variant); case PeriodType.WeekTue: + return range(date, 2, options, week, variant); case PeriodType.WeekWed: + return range(date, 3, options, week, variant); case PeriodType.WeekThu: + return range(date, 4, options, week, variant); case PeriodType.WeekFri: + return range(date, 5, options, week, variant); case PeriodType.WeekSat: - return variant === 'short' - ? format(date, 'M/d') + ' - ' + format(addDays(date, 6), 'M/d') - : format(date, 'M/d/yyyy') + ' - ' + format(addDays(date, 6), 'M/d/yyyy'); + return range(date, 6, options, week, variant); case PeriodType.Month: - return variant === 'short' ? format(date, 'MMM yyyy') : format(date, 'MMMM yyyy'); + return formatIntl(date, month[variant], options); + + case PeriodType.MonthYear: + return formatIntl(date, monthYear[variant], options); + case PeriodType.Quarter: - return variant === 'short' - ? format(date, 'MMM') + ' - ' + format(addMonths(date, 2), 'MMM yyyy') - : format(date, 'MMMM') + ' - ' + format(addMonths(date, 2), 'MMMM yyyy'); + return [ + formatIntl(startOfQuarter(date), month[variant], options), + formatIntl(endOfQuarter(date), monthYear[variant], options), + ].join(' - '); + case PeriodType.CalendarYear: - return variant === 'short' ? format(date, 'yy') : format(date, 'yyyy'); + return formatIntl(date, year[variant], options); + case PeriodType.FiscalYearOctober: - return variant === 'short' ? `${getFiscalYear(date)}`.substring(2) : `${getFiscalYear(date)}`; + const fDate = new Date(getFiscalYear(date), 0, 1); + return formatIntl(fDate, year[variant], options); case PeriodType.BiWeek1Sun: + return range(date, 0, options, week, variant, 1); case PeriodType.BiWeek1Mon: + return range(date, 1, options, week, variant, 1); case PeriodType.BiWeek1Tue: + return range(date, 2, options, week, variant, 1); case PeriodType.BiWeek1Wed: + return range(date, 3, options, week, variant, 1); case PeriodType.BiWeek1Thu: + return range(date, 4, options, week, variant, 1); case PeriodType.BiWeek1Fri: + return range(date, 5, options, week, variant, 1); case PeriodType.BiWeek1Sat: + return range(date, 6, options, week, variant, 1); + case PeriodType.BiWeek2Sun: + return range(date, 0, options, week, variant, 2); case PeriodType.BiWeek2Mon: + return range(date, 1, options, week, variant, 2); case PeriodType.BiWeek2Tue: + return range(date, 2, options, week, variant, 2); case PeriodType.BiWeek2Wed: + return range(date, 3, options, week, variant, 2); case PeriodType.BiWeek2Thu: + return range(date, 4, options, week, variant, 2); case PeriodType.BiWeek2Fri: + return range(date, 5, options, week, variant, 2); case PeriodType.BiWeek2Sat: - return variant === 'short' - ? format(date, 'M/d') + ' - ' + format(addDays(date, 13), 'M/d') - : format(date, 'M/d/yyyy') + ' - ' + format(addDays(date, 13), 'M/d/yyyy'); + return range(date, 6, options, week, variant, 2); + default: return formatISO(date); } @@ -620,9 +929,6 @@ export function utcToLocalDate(date: Date | string | null | undefined) { // https://github.com/date-fns/date-fns/issues/376#issuecomment-454163253 // return new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000); - - // This approach seems to work more reliably with dates before 11/18/1883 @ 12:00 - // https://github.com/d3/d3-time/issues/29#issuecomment-396415951 const d = new Date( date.getUTCFullYear(), date.getUTCMonth(), diff --git a/packages/svelte-ux/src/lib/utils/dateDisplay.ts b/packages/svelte-ux/src/lib/utils/dateDisplay.ts deleted file mode 100644 index 6ca714f8b..000000000 --- a/packages/svelte-ux/src/lib/utils/dateDisplay.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { format as dateFormat } from 'date-fns'; -import { formatDate, utcToLocalDate, PeriodType } from './date'; - -export type DateDisplayOptions = { - periodType?: PeriodType | null; - variant?: Parameters[2]; - format?: string; - utc?: boolean; -}; - -export function dateDisplay( - value: Date | string | number | null | undefined, - options?: DateDisplayOptions -) { - let date = value != null ? (value instanceof Date ? value : new Date(value)) : null; - - // Offset for UTC - if (options?.utc) { - date = utcToLocalDate(date); - } - - let formattedDate = ''; - if (date) { - if (options?.format) { - formattedDate = dateFormat(date, options?.format); - } else if (options?.periodType) { - formattedDate = formatDate(date, options?.periodType, options?.variant); - } else { - formattedDate = date.toLocaleString(); - } - } - - return formattedDate; -} diff --git a/packages/svelte-ux/src/lib/utils/dictionary.ts b/packages/svelte-ux/src/lib/utils/dictionary.ts new file mode 100644 index 000000000..ad59883e0 --- /dev/null +++ b/packages/svelte-ux/src/lib/utils/dictionary.ts @@ -0,0 +1,20 @@ +export type DictionaryMessagesOptions = { + Ok?: string; + Cancel?: string; + + Date?: { + Day?: string; + Week?: string; + BiWeek?: string; + Month?: string; + Quarter?: string; + CalendarYear?: string; + FiscalYearOct?: string; + }; +}; + +type DeepRequired = Required<{ + [K in keyof T]: T[K] extends Required ? Required : DeepRequired; +}>; + +export type DictionaryMessages = DeepRequired; diff --git a/packages/svelte-ux/src/lib/utils/format.ts b/packages/svelte-ux/src/lib/utils/format.ts index e066c986c..6a2c2a157 100644 --- a/packages/svelte-ux/src/lib/utils/format.ts +++ b/packages/svelte-ux/src/lib/utils/format.ts @@ -1,6 +1,6 @@ import { isFunction } from 'lodash-es'; -import { formatDate, PeriodType } from './date'; +import { formatDate, PeriodType, type FormatDateOptions } from './date'; import { formatNumber } from './number'; import type { FormatNumberOptions, FormatNumberStyle } from './number'; @@ -14,15 +14,19 @@ export type FormatType = */ export function format( value: null | undefined, - format?: FormatNumberStyle, - extraFuncArgs?: FormatNumberOptions + format?: FormatNumberStyle | PeriodType, + extraFuncArgs?: FormatNumberOptions | FormatDateOptions ): string; export function format( value: number, format?: FormatNumberStyle, extraFuncArgs?: FormatNumberOptions ): string; -export function format(value: string | Date, format?: PeriodType, ...extraFuncArgs: any[]): string; +export function format( + value: string | Date, + format?: PeriodType, + extraFuncArgs?: FormatDateOptions +): string; export function format(value: any, format?: FormatType, ...extraFuncArgs: any[]): any { let formattedValue = value ?? ''; // Do not render `null` @@ -30,7 +34,11 @@ export function format(value: any, format?: FormatType, ...extraFuncArgs: any[]) if (isFunction(format)) { formattedValue = format(value, ...extraFuncArgs); } else if (format in PeriodType) { - formattedValue = formatDate(value, format as PeriodType, ...extraFuncArgs); + formattedValue = formatDate( + value, + format as PeriodType, + extraFuncArgs.length > 0 ? extraFuncArgs[0] : undefined + ); } else if (typeof value === 'number') { formattedValue = formatNumber(value, { style: format, diff --git a/packages/svelte-ux/src/lib/utils/index.ts b/packages/svelte-ux/src/lib/utils/index.ts index 991bf1d6a..6429b6577 100644 --- a/packages/svelte-ux/src/lib/utils/index.ts +++ b/packages/svelte-ux/src/lib/utils/index.ts @@ -1,6 +1,5 @@ // top-level exports -export { formatDate, PeriodType } from './date'; -export * from './dateDisplay'; +export { formatDate, PeriodType, DayOfWeek, DateToken } from './date'; export * from './duration'; export * from './file'; export * from './format'; diff --git a/packages/svelte-ux/src/lib/utils/number.ts b/packages/svelte-ux/src/lib/utils/number.ts index e2be0ec1d..a91b026f1 100644 --- a/packages/svelte-ux/src/lib/utils/number.ts +++ b/packages/svelte-ux/src/lib/utils/number.ts @@ -1,4 +1,4 @@ -import { getFormatNumberOptions } from '$lib/components/settings'; +import { getFormatNumber } from '$lib/components/settings'; export type FormatNumberStyle = | 'decimal' // from Intl.NumberFormat options.style NumberFormatOptions @@ -32,7 +32,7 @@ export function formatNumber(number: number | null | undefined, options: FormatN return `${number}`; } - const defaults = getFormatNumberOptions(options.style); + const defaults = getFormatNumber(options.style); const formatter = Intl.NumberFormat(options.locales ?? defaults.locales ?? undefined, { // Let's always starts with all defaults diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte index 4c102bbb6..40b717317 100644 --- a/packages/svelte-ux/src/routes/+layout.svelte +++ b/packages/svelte-ux/src/routes/+layout.svelte @@ -17,6 +17,7 @@ import { settings } from '$lib'; import type { PageData } from './$types'; + import { DateToken } from '$lib/utils/date'; export let data: PageData; @@ -26,6 +27,7 @@ $: title = data.pr_id ? `🚧 (pr:${data.pr_id}) - ${baseTitle}` : baseTitle; settings({ + // Usefull to test different locales with the docs // formats: { // numbers: { // defaults: { @@ -33,6 +35,32 @@ // currency: 'EUR', // }, // }, + // dates: { + // locales: 'fr', + // weekStartsOn: 1, + // presets: { + // days: { + // long: { dateStyle: 'full' }, + // }, + // months: { + // default: [DateToken.Month_long], + // }, + // }, + // ordinalSuffixes: { + // fr: { + // one: 'er', + // two: '', + // few: '', + // other: '', + // }, + // }, + // }, + // }, + // dictionary: { + // Cancel: 'Annuler', + // Date: { + // Day: 'Jour', + // }, // }, // theme: { // AppBar: 'bg-red-500 text-white shadow-md', diff --git a/packages/svelte-ux/src/routes/+page.md b/packages/svelte-ux/src/routes/+page.md index a433e7ef9..2fc78b552 100644 --- a/packages/svelte-ux/src/routes/+page.md +++ b/packages/svelte-ux/src/routes/+page.md @@ -110,12 +110,4 @@ Using `components`, `actions`, or `stores` is as simple as importing from `svelt ``` -Currently, `utils` are not exposed as top-level exports to not polute the namespace, although this may change in the future. For now, you can import them using the full path. - -```js -import { dateDisplay } from 'svelte-ux/utils/dateDisplay'; -``` - -See each component page for detailed usage examples. - diff --git a/packages/svelte-ux/src/routes/_NavMenu.svelte b/packages/svelte-ux/src/routes/_NavMenu.svelte index 8104a66d6..1636ffa41 100644 --- a/packages/svelte-ux/src/routes/_NavMenu.svelte +++ b/packages/svelte-ux/src/routes/_NavMenu.svelte @@ -52,7 +52,6 @@ ], Feedback: ['Badge', 'Progress', 'ProgressCircle'], Date: [ - 'dateDisplay', 'DateField', 'DatePickerField', 'DateRange', diff --git a/packages/svelte-ux/src/routes/customization/+page.md b/packages/svelte-ux/src/routes/customization/+page.md index 4cb1e15f9..c20c68d58 100644 --- a/packages/svelte-ux/src/routes/customization/+page.md +++ b/packages/svelte-ux/src/routes/customization/+page.md @@ -80,6 +80,39 @@ settings({ fractionDigits: 4, }, }, + + dates: { + // This is the default, but you can override it here for your app + locales: 'en', + weekStartsOn: DayOfWeek.Sunday, + + presets: { + day: { + long: { dateStyle: 'full' }, + }, + month: { + default: [DateToken.Month_long], + }, + }, + + ordinalSuffixes: { + en: { + one: 'st', + two: 'nd', + few: 'rd', + }, + }, + + dico: { + Day: 'Day', + Week: 'Week', + BiWeek: 'Bi-Week', + Month: 'Month', + Quarter: 'Quarter', + CalendarYear: 'Calendar Year', + FiscalYearOct: 'Fiscal Year (Oct)', + }, + }, }, }); ``` diff --git a/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.svelte b/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.svelte deleted file mode 100644 index f151cfe41..000000000 --- a/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.svelte +++ /dev/null @@ -1,139 +0,0 @@ - - -

Examples

- -

No format

- - - {dateDisplay(new Date('1982-03-30T00:00:00'))} - - -

Custom format

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { format: 'EEE, MMMM do' })} - - -

PeriodType Day w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Day, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Day, - variant: 'short', - })} - - -

PeriodType WeekSun w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.WeekSun, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.WeekSun, - variant: 'short', - })} - - -

PeriodType BiWeek1Sun w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.BiWeek1Sun, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.BiWeek1Sun, - variant: 'short', - })} - - -

PeriodType Month w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Month, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Month, - variant: 'short', - })} - - -

PeriodType Quarter w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Quarter, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.Quarter, - variant: 'short', - })} - - -

PeriodType CalendarYear w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.CalendarYear, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.CalendarYear, - variant: 'short', - })} - - -

PeriodType FiscalYearOctober w/ long (default)

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.FiscalYearOctober, - })} - - -

short

- - - {dateDisplay(new Date('1982-03-30T00:00:00'), { - periodType: PeriodType.FiscalYearOctober, - variant: 'short', - })} - diff --git a/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.ts b/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.ts deleted file mode 100644 index 6d4abe1dd..000000000 --- a/packages/svelte-ux/src/routes/docs/components/dateDisplay/+page.ts +++ /dev/null @@ -1,16 +0,0 @@ -import source from '$lib/utils/dateDisplay.ts?raw'; -import pageSource from './+page.svelte?raw'; - -export async function load() { - return { - meta: { - source, - pageSource, - features: [ - 'Pass `periodType` along with `variant` for quick formatting', - 'Pass `format` for greater control', - 'By default, will be formatted using `date.toLocaleString()`', - ], - }, - }; -} diff --git a/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte b/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte index e1839e59e..d5379abe3 100644 --- a/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte @@ -1,30 +1,37 @@

Usage

-

Examples

- -

Playground

+

Playgrounds

+

Playground numbers

- + + + ({ label: value, value }))} + /> - ({ label: value, value }))} - /> - {format(value, style, { locales, currency })}
+

Playground dates

+ +
+ + + ({ label: value, value }))} + /> +
+ + +
{format(myDate, PeriodType.Day, { locales })}
+ + +

Numbers

+

number formats (defaut settings)

@@ -83,13 +102,323 @@
{format(0.5678, 'percent', { locales: 'fr', fractionDigits: 1 })}
 -

Period formats

+

Dates

+ +

Custom format

+ +
+
+

With random string

+ + {format(myDate, PeriodType.Custom, { + custom: 'eee, MMMM do', + })} + +
+
+

With descriptive tokens

+ + {format(myDate, PeriodType.Custom, { + custom: [DateToken.DayOfWeek_short, DateToken.Month_long, DateToken.DayOfMonth_withOrdinal], + })} + +
+
+

With full intl

+ + {format(myDate, PeriodType.Custom, { + custom: { weekday: 'short', month: 'long', day: 'numeric', withOrdinal: true }, + })} + +
+
+ +

PeriodType Day

+ +
+
+

short

+ + {format(myDate, PeriodType.Day, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.Day, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.Day, { + variant: 'long', + })} + +
+
+ +

PeriodType DayTime

+ +
+
+

short

+ + {format(myDate, PeriodType.DayTime, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.DayTime, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.DayTime, { + variant: 'long', + })} + +
+
+ +

PeriodType TimeOnly

+ +
+
+

short

+ + {format(myDate, PeriodType.TimeOnly, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.TimeOnly, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.TimeOnly, { + variant: 'long', + })} + +
+
+ +

PeriodType Week

+ + It will take your default weekStartsOn + settings, if you want to be + specific, you can also use + PeriodType.WeekSun + +
+
+

short

+ + {format(myDate, PeriodType.Week, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.Week, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.Week, { + variant: 'long', + })} + +
+
+ +

PeriodType BiWeek1

+ + It will take your default weekStartsOn + settings, if you want to be + specific, you can also use + PeriodType.BiWeek1Sun + +
+
+

short

+ + {format(myDate, PeriodType.BiWeek1, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.BiWeek1, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.BiWeek1, { + variant: 'long', + })} + +
+
+ +

PeriodType Month

+ +
+
+

short

+ + {format(myDate, PeriodType.Month, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.Month, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.Month, { + variant: 'long', + })} + +
+
+ +

PeriodType Quarter

+ +
+
+

short

+ + {format(myDate, PeriodType.Quarter, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.Quarter, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.Quarter, { + variant: 'long', + })} + +
+
+ +

PeriodType CalendarYear

+ +
+
+

short

+ + {format(myDate, PeriodType.CalendarYear, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.CalendarYear, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.CalendarYear, { + variant: 'long', + })} + +
+
+ +

PeriodType FiscalYearOctober

+ +
+
+

short

+ + {format(myDate, PeriodType.FiscalYearOctober, { + variant: 'short', + })} + +
+
+

default

+ + {format(myDate, PeriodType.FiscalYearOctober, { + // variant: 'default', + })} + +
+
+

long

+ + {format(myDate, PeriodType.FiscalYearOctober, { + variant: 'long', + })} + +
+
+ +

Date / Period formats (local settings)

+ + + You can customize numbers with the 3rd arg. You can pass for example locales like fr, + de, ... You can also to that globally in the + Settings. + -
{format(date, PeriodType.Day)}
-
{format(date, PeriodType.Month)}
-
{format(date, PeriodType.CalendarYear)}
-
{format(date, PeriodType.Day, 'short')}
-
{format(date, PeriodType.Month, 'short')}
-
{format(date, PeriodType.CalendarYear, 'short')}
+
{format(myDate, PeriodType.Day, { locales: 'fr' })}
+
{format(myDate, PeriodType.Month, { locales: 'fr' })}
+
{format(myDate, PeriodType.CalendarYear, { locales: 'fr' })}
+
{format(myDate, PeriodType.Day, { variant: 'short', locales: 'fr' })}
+
{format(myDate, PeriodType.Month, { variant: 'short', locales: 'fr' })}
+
+ {format(myDate, PeriodType.CalendarYear, { variant: 'short', locales: 'fr' })} +
diff --git a/packages/svelte-ux/src/routes/docs/utils/format/+page.ts b/packages/svelte-ux/src/routes/docs/utils/format/+page.ts index 74db8cf11..7c3cef134 100644 --- a/packages/svelte-ux/src/routes/docs/utils/format/+page.ts +++ b/packages/svelte-ux/src/routes/docs/utils/format/+page.ts @@ -6,7 +6,12 @@ export async function load() { meta: { source, pageSource, - description: 'Easily format numbers and dates to a variety of formats', + description: 'Easily format numbers and dates to a variety of formats and locales', + features: [ + 'Number: Pass `style` for quick formatting', + 'Date: Pass `periodType` along with `variant` for quick formatting', + 'Date: Pass `custom` for greater control', + ], }, }; } diff --git a/packages/svelte-ux/vite.config.js b/packages/svelte-ux/vite.config.js index 97ce538e7..578e7fdd5 100644 --- a/packages/svelte-ux/vite.config.js +++ b/packages/svelte-ux/vite.config.js @@ -6,5 +6,8 @@ export default defineConfig({ plugins: [sveltekit(), sveld()], test: { include: ['src/**/*.{test,spec}.{js,ts}'], + coverage: { + reporter: ['html'], + }, }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf7f5eaed..12b69f6ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,12 +66,9 @@ importers: d3-scale: specifier: ^4.0.2 version: 4.0.2 - d3-time: - specifier: ^3.1.0 - version: 3.1.0 date-fns: - specifier: ^2.30.0 - version: 2.30.0 + specifier: ^3.0.5 + version: 3.0.5 immer: specifier: ^10.0.3 version: 10.0.3 @@ -80,7 +77,7 @@ importers: version: 4.17.21 posthog-js: specifier: ^1.95.1 - version: 1.95.1 + version: 1.96.1 prism-svelte: specifier: ^0.5.0 version: 0.5.0 @@ -130,6 +127,9 @@ importers: '@types/prismjs': specifier: ^1.26.3 version: 1.26.3 + '@vitest/coverage-v8': + specifier: ^0.34.6 + version: 0.34.6(vitest@0.33.0) autoprefixer: specifier: ^10.4.16 version: 10.4.16(postcss@8.4.31) @@ -228,6 +228,10 @@ packages: dependencies: regenerator-runtime: 0.14.0 + /@bcoe/v8-coverage@0.2.3: + resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} + dev: true + /@changesets/apply-release-plan@6.1.4: resolution: {integrity: sha512-FMpKF1fRlJyCZVYHr3CbinpZZ+6MwvOtWUuO8uo+svcATEoc1zRDcj23pAurJ2TZ/uVz1wFHH6K3NlACy0PLew==} dependencies: @@ -883,6 +887,11 @@ packages: wrap-ansi-cjs: /wrap-ansi@7.0.0 dev: true + /@istanbuljs/schema@0.1.3: + resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==} + engines: {node: '>=8'} + dev: true + /@jest/schemas@29.6.3: resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -1173,6 +1182,10 @@ packages: ci-info: 3.9.0 dev: false + /@types/istanbul-lib-coverage@2.0.6: + resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==} + dev: true + /@types/lodash-es@4.17.11: resolution: {integrity: sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==} dependencies: @@ -1227,6 +1240,27 @@ packages: /@types/unist@3.0.2: resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} + /@vitest/coverage-v8@0.34.6(vitest@0.33.0): + resolution: {integrity: sha512-fivy/OK2d/EsJFoEoxHFEnNGTg+MmdZBAVK9Ka4qhXR2K3J0DS08vcGVwzDtXSuUMabLv4KtPcpSKkcMXFDViw==} + peerDependencies: + vitest: '>=0.32.0 <1' + dependencies: + '@ampproject/remapping': 2.2.1 + '@bcoe/v8-coverage': 0.2.3 + istanbul-lib-coverage: 3.2.2 + istanbul-lib-report: 3.0.1 + istanbul-lib-source-maps: 4.0.1 + istanbul-reports: 3.1.6 + magic-string: 0.30.5 + picocolors: 1.0.0 + std-env: 3.4.3 + test-exclude: 6.0.0 + v8-to-istanbul: 9.1.3 + vitest: 0.33.0 + transitivePeerDependencies: + - supports-color + dev: true + /@vitest/expect@0.33.0: resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==} dependencies: @@ -1629,6 +1663,10 @@ packages: /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + /convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + dev: true + /cookie@0.5.0: resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} engines: {node: '>= 0.6'} @@ -1734,11 +1772,8 @@ packages: resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==} dev: true - /date-fns@2.30.0: - resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} - engines: {node: '>=0.11'} - dependencies: - '@babel/runtime': 7.23.2 + /date-fns@3.0.5: + resolution: {integrity: sha512-Q4Tq5c5s/Zl/zbgdWf6pejn9ru7UwdIlLfvEEg1hVsQNQ7LKt76qIduagIT9OPK7+JCv1mAKherdU6bOqGYDnw==} dev: false /debug@4.3.4: @@ -2289,6 +2324,10 @@ packages: /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} + /html-escaper@2.0.2: + resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + dev: true + /human-id@1.0.2: resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==} @@ -2504,6 +2543,39 @@ packages: /isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + /istanbul-lib-coverage@3.2.2: + resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==} + engines: {node: '>=8'} + dev: true + + /istanbul-lib-report@3.0.1: + resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==} + engines: {node: '>=10'} + dependencies: + istanbul-lib-coverage: 3.2.2 + make-dir: 4.0.0 + supports-color: 7.2.0 + dev: true + + /istanbul-lib-source-maps@4.0.1: + resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==} + engines: {node: '>=10'} + dependencies: + debug: 4.3.4 + istanbul-lib-coverage: 3.2.2 + source-map: 0.6.1 + transitivePeerDependencies: + - supports-color + dev: true + + /istanbul-reports@3.1.6: + resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==} + engines: {node: '>=8'} + dependencies: + html-escaper: 2.0.2 + istanbul-lib-report: 3.0.1 + dev: true + /jackspeak@2.3.6: resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} engines: {node: '>=14'} @@ -2656,6 +2728,13 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + /make-dir@4.0.0: + resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} + engines: {node: '>=10'} + dependencies: + semver: 7.5.4 + dev: true + /map-obj@1.0.1: resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==} engines: {node: '>=0.10.0'} @@ -3126,8 +3205,8 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 - /posthog-js@1.95.1: - resolution: {integrity: sha512-79HPLoBqENBEEGFhn+hueKliYH66Qbu4WcRTEd8WaqtvqHrK9qAQkcrShZNkg1V5vM4kHp0iMIkJYBXg1sq06Q==} + /posthog-js@1.96.1: + resolution: {integrity: sha512-kv1vQqYMt2BV3YHS+wxsbGuP+tz+M3y1AzNhz8TfkpY1HT8W/ONT0i0eQpeRr9Y+d4x/fZ6M4cXG5GMvi9lRCA==} dependencies: fflate: 0.4.8 dev: false @@ -3510,6 +3589,11 @@ packages: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} + /source-map@0.6.1: + resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} + engines: {node: '>=0.10.0'} + dev: true + /spawndamnit@2.0.0: resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==} dependencies: @@ -3833,6 +3917,15 @@ packages: resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==} engines: {node: '>=8'} + /test-exclude@6.0.0: + resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} + engines: {node: '>=8'} + dependencies: + '@istanbuljs/schema': 0.1.3 + glob: 7.2.3 + minimatch: 3.1.2 + dev: true + /thenify-all@1.6.0: resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} engines: {node: '>=0.8'} @@ -4063,6 +4156,15 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true + /v8-to-istanbul@9.1.3: + resolution: {integrity: sha512-9lDD+EVI2fjFsMWXc6dy5JJzBsVTcQ2fVkfBvncZ6xJWG9wtBhOldG+mHkSL0+V1K/xgZz0JDO5UT5hFwHUghg==} + engines: {node: '>=10.12.0'} + dependencies: + '@jridgewell/trace-mapping': 0.3.20 + '@types/istanbul-lib-coverage': 2.0.6 + convert-source-map: 2.0.0 + dev: true + /validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} dependencies: From f97a8494c7940626b534afef8c0e47bfe48bc7b1 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 3 Jan 2024 01:37:28 -0500 Subject: [PATCH 03/88] Design tokens / Theme support (with dark mode) (#146) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Squash all theme changes into single commit * Add changeset * Enter prerelease mode and version packages * Add Kbd component. Show keyboard shortcuts on ThemeButton menu * Read themes/colors from tailwind config, including Daisy UI (with mapping). Supports generating optional colors and further extension and flexability. * Process daisy themes to generate lightThemes/darkThemes based on color-scheme value * Add changeset * Version bump to 0.58.0-next.1 * Add styles (with daisy) as top-level export * Version bump to 0.58.0-next.2 * Add commonjs and esm versions of daisy module * Version bump to 0.58.0-next.3 * Remove daisy from top-level exports * Version bump to 0.58.0-next.4 * Rename `error` / `error-content` to `danger` / `danger-content` * Fix pnpm-lock.yaml using `pnpm install` (ERR_PNPM_ERR_PNPM_UNEXPECTED_PKG_CONTENT_IN_STORE  The lockfile is broken! Resolution step will be performed to fix it.) * Add `accent` and `neutral` theme colors * Cleanup * Update some leftover `error` => `danger` color references * Extra tailwind plugin into multiple files for better readability * Use darker "-content" color for default `fill` variant (distinguish from `fill-light`) * Simplify naming and impl. of foregroundColor() and add lightenColor() (to match darkenColor()) * Register 100-900 shades for all semantic and state colors. Replace color-mix() usage (including Tailwind *-mix-* utils) with new shades * Use lib/styles/themes for types as well * Replace SvelteComponentTyped with SvelteComponent * Version bump to 0.58.0-next.5 * Cleanup * Remove unused css files * Simplify * Support changing colorSpace (rgb, hsl, or oklch) * Improve theme page preview and add menu item * Improve default border color * Fix handling of hsl() color space by clamping to RGB values (to not exceed 100% saturation or lightness). Matches rgb() color * Version bump to 0.58.0-next.6 * Use same surface-content/20% outline color as border color * Remove explicit border colors that match default (border-surface-content/20) and replace some border-surface-### with default (surface-content/20) * Version bump to 0.58.0-next.7 --- .changeset/angry-zebras-remember.md | 5 + .changeset/pre.json | 14 + .changeset/strong-flies-provide.md | 5 + .changeset/yellow-oranges-fly.md | 6 + packages/create-svelte-ux/CHANGELOG.md | 6 + packages/create-svelte-ux/package.json | 8 +- .../layerchart/src/routes/+layout.svelte | 4 +- .../layerchart/src/routes/+page.svelte | 4 +- .../layerchart/src/routes/chart/+page.svelte | 2 +- .../templates/layerchart/tailwind.config.cjs | 6 +- .../templates/minimal/tailwind.config.cjs | 6 +- .../starter/src/routes/+layout.svelte | 4 +- .../templates/starter/src/routes/+page.svelte | 4 +- .../templates/starter/tailwind.config.cjs | 6 +- packages/svelte-ux/CHANGELOG.md | 21 +- packages/svelte-ux/package.json | 42 +- packages/svelte-ux/src/docs/Blockquote.svelte | 8 +- packages/svelte-ux/src/docs/Link.svelte | 2 +- .../src/docs/ViewSourceButton.svelte | 10 +- .../src/lib/actions/dataBackground.ts | 4 +- .../src/lib/components/ApiDocs.svelte | 59 +- .../src/lib/components/AppBar.svelte | 2 +- .../src/lib/components/Backdrop.svelte | 2 +- .../svelte-ux/src/lib/components/Badge.svelte | 34 +- .../src/lib/components/Button.svelte | 489 +++++++++++----- .../src/lib/components/ButtonGroup.svelte | 4 +- .../svelte-ux/src/lib/components/Card.svelte | 2 +- .../src/lib/components/Checkbox.svelte | 8 +- .../svelte-ux/src/lib/components/Code.svelte | 16 +- .../src/lib/components/DateButton.svelte | 8 +- .../src/lib/components/DateField.svelte | 2 +- .../src/lib/components/DatePickerField.svelte | 14 +- .../src/lib/components/DateRange.svelte | 25 +- .../src/lib/components/DateRangeField.svelte | 10 +- .../src/lib/components/Dialog.svelte | 4 +- .../src/lib/components/Drawer.svelte | 15 +- .../src/lib/components/EmptyMessage.svelte | 6 +- .../lib/components/ErrorNotification.svelte | 8 +- .../src/lib/components/ExpansionPanel.svelte | 4 +- .../svelte-ux/src/lib/components/Field.svelte | 26 +- .../src/lib/components/Header.svelte | 4 +- .../svelte-ux/src/lib/components/Input.svelte | 2 +- .../svelte-ux/src/lib/components/Kbd.svelte | 37 ++ .../src/lib/components/ListItem.svelte | 6 +- .../svelte-ux/src/lib/components/Menu.svelte | 4 +- .../src/lib/components/MenuField.svelte | 4 +- .../src/lib/components/MenuItem.svelte | 6 +- .../svelte-ux/src/lib/components/Month.svelte | 4 +- .../src/lib/components/MultiSelect.svelte | 10 +- .../lib/components/MultiSelectField.svelte | 6 +- .../lib/components/MultiSelectOption.svelte | 2 +- .../src/lib/components/NavItem.svelte | 2 +- .../src/lib/components/Notification.svelte | 6 +- .../src/lib/components/Overlay.svelte | 4 +- .../src/lib/components/Preview.svelte | 27 +- .../src/lib/components/Progress.svelte | 4 +- .../src/lib/components/QuickSearch.svelte | 8 +- .../svelte-ux/src/lib/components/Radio.svelte | 14 +- .../src/lib/components/RangeField.svelte | 2 +- .../src/lib/components/RangeSlider.svelte | 24 +- .../src/lib/components/SectionDivider.svelte | 6 +- .../src/lib/components/SelectField.svelte | 170 ++++-- .../svelte-ux/src/lib/components/Steps.svelte | 2 +- .../src/lib/components/Switch.svelte | 51 +- .../svelte-ux/src/lib/components/Tab.svelte | 12 +- .../src/lib/components/TableOfContents.svelte | 6 +- .../src/lib/components/TextField.svelte | 48 +- .../src/lib/components/ThemeButton.svelte | 150 +++++ .../src/lib/components/ToggleGroup.svelte | 42 +- .../src/lib/components/Tooltip.svelte | 2 +- .../lib/components/_SelectListOptions.svelte | 124 ++-- .../svelte-ux/src/lib/components/index.ts | 2 + .../svelte-ux/src/lib/plugins/tailwind.cjs | 230 +++----- .../src/lib/plugins/tailwind/colorMix.cjs | 38 ++ .../src/lib/plugins/tailwind/elevation.cjs | 129 +++++ .../src/lib/plugins/tailwind/theme.cjs | 194 +++++++ packages/svelte-ux/src/lib/styles/daisy.cjs | 47 ++ packages/svelte-ux/src/lib/styles/daisy.ts | 47 ++ packages/svelte-ux/src/lib/styles/theme.ts | 22 + .../svelte-ux/src/lib/types/typeHelpers.ts | 12 +- packages/svelte-ux/src/routes/+error.svelte | 14 +- packages/svelte-ux/src/routes/+layout.svelte | 139 ++--- packages/svelte-ux/src/routes/+page.md | 2 +- packages/svelte-ux/src/routes/_NavMenu.svelte | 5 +- .../src/routes/changelog/+page.svelte | 6 +- .../src/routes/customization/+layout.svelte | 2 +- .../svelte-ux/src/routes/docs/+layout.svelte | 28 +- .../docs/actions/dataBackground/+page.svelte | 7 +- .../routes/docs/actions/layout/+page.svelte | 6 +- .../routes/docs/actions/mouse/+page.svelte | 4 +- .../routes/docs/actions/observer/+page.svelte | 6 +- .../routes/docs/actions/scroll/+page.svelte | 7 +- .../docs/actions/spotlight/+page.svelte | 79 +-- .../docs/components/AppBar/+page.svelte | 6 +- .../docs/components/Avatar/+page.svelte | 14 +- .../routes/docs/components/Badge/+page.svelte | 48 +- .../docs/components/Breadcrumb/+page.svelte | 16 +- .../docs/components/Button/+page.svelte | 235 +++----- .../docs/components/ButtonGroup/+page.svelte | 78 +-- .../routes/docs/components/Card/+page.svelte | 4 +- .../src/routes/docs/components/Card/+page.ts | 1 + .../docs/components/Collapse/+page.svelte | 6 +- .../docs/components/CopyButton/+page.svelte | 20 +- .../docs/components/Dialog/+page.svelte | 26 +- .../docs/components/Drawer/+page.svelte | 59 +- .../components/ExpansionPanel/+page.svelte | 16 +- .../routes/docs/components/Field/+page.svelte | 23 +- .../routes/docs/components/Gooey/+page.svelte | 34 +- .../routes/docs/components/Icon/+page.svelte | 2 +- .../docs/components/ListItem/+page.svelte | 22 +- .../routes/docs/components/Menu/+page.svelte | 16 +- .../docs/components/MenuButton/+page.svelte | 2 +- .../docs/components/MenuField/+page.svelte | 4 +- .../docs/components/MultiSelect/+page.svelte | 2 +- .../components/MultiSelectField/+page.svelte | 11 +- .../components/MultiSelectMenu/+page.svelte | 2 +- .../docs/components/NavItem/+page.svelte | 2 +- .../docs/components/Notification/+page.svelte | 6 +- .../docs/components/Overflow/+page.svelte | 4 +- .../docs/components/Overlay/+page.svelte | 2 +- .../docs/components/Pagination/+page.md | 2 +- .../docs/components/Popover/+page.svelte | 26 +- .../docs/components/Progress/+page.svelte | 22 +- .../components/ProgressCircle/+page.svelte | 30 +- .../components/ResponsiveMenu/+page.svelte | 29 +- .../components/ScrollContainer/+page.svelte | 4 +- .../components/ScrollingValue/+page.svelte | 8 +- .../docs/components/SelectField/+page.svelte | 41 +- .../docs/components/Settings/+page.svelte | 2 +- .../routes/docs/components/Shine/+page.svelte | 15 +- .../docs/components/SpringValue/+page.svelte | 2 +- .../routes/docs/components/Stack/+page.svelte | 16 +- .../components/StackTailwind/+page.svelte | 16 +- .../routes/docs/components/Steps/+page.svelte | 18 +- .../docs/components/Switch/+page.svelte | 34 +- .../routes/docs/components/Table/+page.svelte | 44 +- .../routes/docs/components/Tabs/+page.svelte | 4 +- .../docs/components/TextField/+page.svelte | 34 +- .../docs/components/ToggleButton/+page.svelte | 13 +- .../docs/components/ToggleGroup/+page.svelte | 6 +- .../docs/components/Tooltip/+page.svelte | 10 +- .../docs/components/TweenedValue/+page.svelte | 2 +- .../routes/docs/stores/matchMedia/+page.md | 38 +- .../src/routes/docs/utils/format/+page.svelte | 2 +- .../svelte-ux/src/routes/theme/+page.svelte | 143 +++++ packages/svelte-ux/tailwind.config.cjs | 44 +- pnpm-lock.yaml | 541 ++++++------------ 147 files changed, 2656 insertions(+), 1871 deletions(-) create mode 100644 .changeset/angry-zebras-remember.md create mode 100644 .changeset/pre.json create mode 100644 .changeset/strong-flies-provide.md create mode 100644 .changeset/yellow-oranges-fly.md create mode 100644 packages/svelte-ux/src/lib/components/Kbd.svelte create mode 100644 packages/svelte-ux/src/lib/components/ThemeButton.svelte create mode 100644 packages/svelte-ux/src/lib/plugins/tailwind/colorMix.cjs create mode 100644 packages/svelte-ux/src/lib/plugins/tailwind/elevation.cjs create mode 100644 packages/svelte-ux/src/lib/plugins/tailwind/theme.cjs create mode 100644 packages/svelte-ux/src/lib/styles/daisy.cjs create mode 100644 packages/svelte-ux/src/lib/styles/daisy.ts create mode 100644 packages/svelte-ux/src/lib/styles/theme.ts create mode 100644 packages/svelte-ux/src/routes/theme/+page.svelte diff --git a/.changeset/angry-zebras-remember.md b/.changeset/angry-zebras-remember.md new file mode 100644 index 000000000..958213932 --- /dev/null +++ b/.changeset/angry-zebras-remember.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Add styles (with daisy) as top-level export diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..db8e7b817 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,14 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "create-svelte-ux": "0.2.1", + "svelte-ux": "0.57.1" + }, + "changesets": [ + "angry-zebras-remember", + "quick-avocados-hope", + "strong-flies-provide", + "yellow-oranges-fly" + ] +} diff --git a/.changeset/strong-flies-provide.md b/.changeset/strong-flies-provide.md new file mode 100644 index 000000000..92c7c9f5e --- /dev/null +++ b/.changeset/strong-flies-provide.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +Support `ux.themes` tailwind config, including Daisy UI diff --git a/.changeset/yellow-oranges-fly.md b/.changeset/yellow-oranges-fly.md new file mode 100644 index 000000000..e1e3126c2 --- /dev/null +++ b/.changeset/yellow-oranges-fly.md @@ -0,0 +1,6 @@ +--- +'create-svelte-ux': minor +'svelte-ux': minor +--- + +Theme support diff --git a/packages/create-svelte-ux/CHANGELOG.md b/packages/create-svelte-ux/CHANGELOG.md index 1fac8d9b7..9405fda5f 100644 --- a/packages/create-svelte-ux/CHANGELOG.md +++ b/packages/create-svelte-ux/CHANGELOG.md @@ -1,5 +1,11 @@ # create-svelte-ux +## 0.3.0-next.0 + +### Minor Changes + +- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146)) + ## 0.2.1 ### Patch Changes diff --git a/packages/create-svelte-ux/package.json b/packages/create-svelte-ux/package.json index 03a0e2f54..8bcc0c693 100644 --- a/packages/create-svelte-ux/package.json +++ b/packages/create-svelte-ux/package.json @@ -1,6 +1,6 @@ { "name": "create-svelte-ux", - "version": "0.2.1", + "version": "0.3.0-next.0", "description": "A CLI for creating new Svelte UX projects", "repository": { "type": "git", @@ -18,12 +18,12 @@ }, "dependencies": { "@clack/prompts": "^0.7.0", - "@kitql/helpers": "^0.8.3", + "@kitql/helpers": "^0.8.8", "commander": "^11.1.0" }, "devDependencies": { - "@types/node": "^20.9.2", - "prettier": "^3.1.0" + "@types/node": "^20.10.6", + "prettier": "^3.1.1" }, "files": [ "fragments", diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte index 53c3f6f7e..f822e60c4 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + theme: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte index 277eabe17..85d199a07 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte @@ -22,7 +22,7 @@ format(d, PeriodType.Day, 'short')} rule /> - + diff --git a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs index 9ddbe378d..962e73513 100644 --- a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs @@ -9,11 +9,7 @@ const config = { './node_modules/layerchart/**/*.{svelte,js}' ], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte index d68d9c3d0..8bc3c7a48 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + theme: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md index 0cd7122bd..08ee0cd9a 100644 --- a/packages/svelte-ux/CHANGELOG.md +++ b/packages/svelte-ux/CHANGELOG.md @@ -1,17 +1,32 @@ # svelte-ux -## 0.58.1 +## 0.58.0-next.2 ### Patch Changes -- Move `sveld` from peerDependencies to dependencies to fix install (and match next release) ([`7539e467edbb4506c1930f3fad0a4efd7e457ff0`](https://github.com/techniq/svelte-ux/commit/7539e467edbb4506c1930f3fad0a4efd7e457ff0)) +- Add styles (with daisy) as top-level export ([#146](https://github.com/techniq/svelte-ux/pull/146)) -## 0.58.0 +## 0.58.0-next.1 + +### Minor Changes + +- Support `ux.themes` tailwind config, including Daisy UI ([#146](https://github.com/techniq/svelte-ux/pull/146)) + +## 0.58.0-next.0 ### Minor Changes +- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146)) - Removes SelectList. Updates SelectField features to support SelectList's use case via property/attribute overrides. Updates QuickSearch to use SelectField. Defines MenuOption type & updates MenuField & SelectField to use it; this results in renaming of SelectField options' `name` field to become `label`, standardizing the API across the two. Also adds `activeOptionIcon` to SelectField so users can opt-in to dynamically updating the field icon based on the selected option. Also fixed a bug with the `scrollIntoView` action related to its `onlyIfNeeded` flag. ([#127](https://github.com/techniq/svelte-ux/pull/127)) +## 0.58.1 + +### Patch Changes + +- Move `sveld` from peerDependencies to dependencies to fix install (and match next release) ([`7539e467edbb4506c1930f3fad0a4efd7e457ff0`](https://github.com/techniq/svelte-ux/commit/7539e467edbb4506c1930f3fad0a4efd7e457ff0)) + +## 0.58.0 + ### Patch Changes - [SelectList] Add `type="button"` to ` +
{label}
-
{href}
+
{href}
{#if href} - {/if} @@ -38,13 +38,13 @@
- +
{:else if href} - diff --git a/packages/svelte-ux/src/lib/actions/dataBackground.ts b/packages/svelte-ux/src/lib/actions/dataBackground.ts index fad06ca3a..23b5e8012 100644 --- a/packages/svelte-ux/src/lib/actions/dataBackground.ts +++ b/packages/svelte-ux/src/lib/actions/dataBackground.ts @@ -95,8 +95,8 @@ export const dataBackground: Action = (node, linear-gradient( to right, transparent var(--baseline), - #999 var(--baseline), - #999 calc(var(--baseline) + 1px), + currentColor var(--baseline), + currentColor calc(var(--baseline) + 1px), transparent 0%, transparent 100% ), diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte index 938f55f9c..ab69bcfe6 100644 --- a/packages/svelte-ux/src/lib/components/ApiDocs.svelte +++ b/packages/svelte-ux/src/lib/components/ApiDocs.svelte @@ -25,17 +25,19 @@
-

Props

-
+

+ Props +

+
{#each api.props as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -46,7 +48,7 @@
{#if prop.isRequired}
Required
@@ -54,7 +56,7 @@
{prop.value}
@@ -62,7 +64,7 @@
{prop.type ?? 'unknown'}
@@ -75,7 +77,7 @@
{#if api.rest_props} -
+
Remaining props are passed to underlying @@ -84,7 +86,7 @@ href="/docs/components/{api.rest_props.name}#props" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border px-2 rounded-full" > <{api.rest_props.name}> @@ -95,7 +97,7 @@ .name}#attributes" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border px-2 rounded-full" > <{api.rest_props.name}> @@ -107,8 +109,10 @@
-

Slots

-
+

+ Slots +

+
{#each api.slots as slot} -
+
{slot.description ?? ''}
@@ -132,7 +136,7 @@ {#each parseSlotProps(slot.slot_props) as { key, value }}
{key}: {value}
@@ -148,8 +152,10 @@
-

Events

-
+

+ Events +

+
{#each api.events as event} {#if event.element != null}
{event.element}
{/if}
{event.type}
@@ -180,19 +186,22 @@
-

+

Module Exports

-
+
{#each api.moduleExports as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -203,7 +212,7 @@
{#if prop.isRequired}
Required
@@ -211,7 +220,7 @@
{prop.value}
@@ -219,7 +228,7 @@
{prop.type ?? 'unknown'}
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte index 9995b9afc..bb5471921 100644 --- a/packages/svelte-ux/src/lib/components/AppBar.svelte +++ b/packages/svelte-ux/src/lib/components/AppBar.svelte @@ -32,7 +32,7 @@ {#if $$slots.title} {:else} -
+
{#if typeof title === 'string' || typeof title === 'number'} {title} {:else} diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte index ff13bd0da..0c87f02fb 100644 --- a/packages/svelte-ux/src/lib/components/Backdrop.svelte +++ b/packages/svelte-ux/src/lib/components/Backdrop.svelte @@ -16,7 +16,7 @@
- import type { ComponentProps } from 'svelte'; import { slide } from 'svelte/transition'; import Icon from './Icon.svelte'; @@ -7,7 +6,7 @@ import { cls } from '../utils/styles'; import { multi } from '../actions/multi'; import type { Actions } from '../actions/multi'; - import type { TailwindColors } from '$lib/types'; + import type { ThemeColors } from '$lib/types'; import { getComponentTheme } from './theme'; import { getButtonGroup } from './ButtonGroup.svelte'; import { asIconData, type IconInput } from '$lib/utils/icons'; @@ -33,7 +32,7 @@ | 'none' | undefined = undefined; // default in reactive groupContext below export let size: 'sm' | 'md' | 'lg' | undefined = undefined; // default in reactive groupContext below - export let color: TailwindColors | 'default' | undefined = undefined; // default in reactive groupContext below + export let color: ThemeColors | 'default' | undefined = undefined; // default in reactive groupContext below /** @type {{root?: string, icon?: string, loading?: string}} */ export let classes: { @@ -52,7 +51,7 @@ $: _class = cls( 'Button', - 'transition duration-200 ring-black/20', + 'transition duration-200 ring-surface-content/60', 'focus:outline-none focus-visible:ring-1', fullWidth ? 'flex w-full' : 'inline-flex', loading ? 'gap-2' : 'gap-1', @@ -84,153 +83,366 @@ text: 'p-0', none: '', }[variant ?? 'none'], + // Variant specific colors { default: { - default: 'hover:bg-black/5 ring-black/10', - accent: 'text-accent-500 hover:bg-accent-500/10 ring-accent-500/60', - red: 'text-red-500 hover:bg-red-500/10 ring-red-500/60', - orange: 'text-orange-500 hover:bg-orange-500/10 ring-orange-500/60', - amber: 'text-amber-500 hover:bg-amber-500/10 ring-amber-500/60', - yellow: 'text-yellow-500 hover:bg-yellow-500/10 ring-yellow-500/60', - lime: 'text-lime-500 hover:bg-lime-500/10 ring-lime-500/60', - green: 'text-green-500 hover:bg-green-500/10 ring-green-500/60', - emerald: 'text-emerald-500 hover:bg-emerald-500/10 ring-emerald-500/60', - teal: 'text-teal-500 hover:bg-teal-500/10 ring-teal-500/60', - cyan: 'text-cyan-500 hover:bg-cyan-500/10 ring-cyan-500/60', - sky: 'text-sky-500 hover:bg-sky-500/10 ring-sky-500/60', - blue: 'text-blue-500 hover:bg-blue-500/10 ring-blue-500/60', - indigo: 'text-indigo-500 hover:bg-indigo-500/10 ring-indigo-500/60', - violet: 'text-violet-500 hover:bg-violet-500/10 ring-violet-500/60', - purple: 'text-purple-500 hover:bg-purple-500/10 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 hover:bg-fuchsia-500/10 ring-fuchsia-500/60', - pink: 'text-pink-500 hover:bg-pink-500/10 ring-pink-500/60', - rose: 'text-rose-500 hover:bg-rose-500/10 ring-rose-500/60', - gray: 'text-gray-500 hover:bg-gray-500/10 ring-gray-500/60', + default: [ + 'hover:[--bg-color:theme(colors.surface-content/10%)]', + // '[--text-color:theme(colors.surface-content)]', // inherit + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + 'hover:[--bg-color:theme(colors.primary/10%)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + 'hover:[--bg-color:theme(colors.secondary/10%)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + 'hover:[--bg-color:theme(colors.accent/10%)]', + '[--text-color:theme(colors.accent)]', + '[--ring-color:theme(colors.accent/60%)]', + ], + neutral: [ + 'hover:[--bg-color:theme(colors.neutral/10%)]', + '[--text-color:theme(colors.neutral)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + 'hover:[--bg-color:theme(colors.info/10%)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + 'hover:[--bg-color:theme(colors.success/10%)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + 'hover:[--bg-color:theme(colors.warning/10%)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + 'hover:[--bg-color:theme(colors.danger/10%)]', + '[--text-color:theme(colors.danger)]', + '[--ring-color:theme(colors.danger/60%)]', + ], }, outline: { - default: 'bg-white hover:bg-black/5 ring-black/10', - accent: 'text-accent-500 border-accent-500 hover:bg-accent-500/10 ring-accent-500/60', - red: 'text-red-500 border-red-500 hover:bg-red-500/10 ring-red-500/60', - orange: 'text-orange-500 border-orange-500 hover:bg-orange-500/10 ring-orange-500/60', - amber: 'text-amber-500 border-amber-500 hover:bg-amber-500/10 ring-amber-500/60', - yellow: 'text-yellow-500 border-yellow-500 hover:bg-yellow-500/10 ring-yellow-500/60', - lime: 'text-lime-500 border-lime-500 hover:bg-lime-500/10 ring-lime-500/60', - green: 'text-green-500 border-green-500 hover:bg-green-500/10 ring-green-500/60', - emerald: 'text-emerald-500 border-emerald-500 hover:bg-emerald-500/10 ring-emerald-500/60', - teal: 'text-teal-500 border-teal-500 hover:bg-teal-500/10 ring-teal-500/60', - cyan: 'text-cyan-500 border-cyan-500 hover:bg-cyan-500/10 ring-cyan-500/60', - sky: 'text-sky-500 border-sky-500 hover:bg-sky-500/10 ring-sky-500/60', - blue: 'text-blue-500 border-blue-500 hover:bg-blue-500/10 ring-blue-500/60', - indigo: 'text-indigo-500 border-indigo-500 hover:bg-indigo-500/10 ring-indigo-500/60', - violet: 'text-violet-500 border-violet-500 hover:bg-violet-500/10 ring-violet-500/60', - purple: 'text-purple-500 border-purple-500 hover:bg-purple-500/10 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 border-fuchsia-500 hover:bg-fuchsia-500/10 ring-fuchsia-500/60', - pink: 'text-pink-500 border-pink-500 hover:bg-pink-500/10 ring-pink-500/60', - rose: 'text-rose-500 border-rose-500 hover:bg-rose-500/10 ring-rose-500/60', - gray: 'text-gray-500 border-gray-500 hover:bg-gray-500/10 ring-gray-500/60', + default: [ + 'hover:[--bg-color:theme(colors.surface-content/10%)]', + '[--border-color:theme(colors.surface-content)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + 'hover:[--bg-color:theme(colors.primary/10%)]', + '[--border-color:theme(colors.primary)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + 'hover:[--bg-color:theme(colors.secondary/10%)]', + '[--border-color:theme(colors.secondary)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + 'hover:[--bg-color:theme(colors.accent/10%)]', + '[--border-color:theme(colors.accent)]', + '[--text-color:theme(colors.accent)]', + '[--ring-color:theme(colors.accent/60%)]', + ], + neutral: [ + 'hover:[--bg-color:theme(colors.neutral/10%)]', + '[--border-color:theme(colors.neutral)]', + '[--text-color:theme(colors.neutral)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + 'hover:[--bg-color:theme(colors.info/10%)]', + '[--border-color:theme(colors.info)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + 'hover:[--bg-color:theme(colors.success/10%)]', + '[--border-color:theme(colors.success)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + 'hover:[--bg-color:theme(colors.warning/10%)]', + '[--border-color:theme(colors.warning)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + 'hover:[--bg-color:theme(colors.danger/10%)]', + '[--border-color:theme(colors.danger)]', + '[--text-color:theme(colors.danger)]', + '[--ring-color:theme(colors.danger/60%)]', + ], }, fill: { - default: 'text-black bg-black/5 hover:bg-black/10 ring-black/10', - accent: 'text-white bg-accent-500 hover:bg-accent-600 ring-accent-500/60', - red: 'text-white bg-red-500 hover:bg-red-600 ring-red-500/60', - orange: 'text-white bg-orange-500 hover:bg-orange-600 ring-orange-500/60', - amber: 'text-white bg-amber-500 hover:bg-amber-600 ring-amber-500/60', - yellow: 'text-white bg-yellow-500 hover:bg-yellow-600 ring-yellow-500/60', - lime: 'text-white bg-lime-500 hover:bg-lime-600 ring-lime-500/60', - green: 'text-white bg-green-500 hover:bg-green-600 ring-green-500/60', - emerald: 'text-white bg-emerald-500 hover:bg-emerald-600 ring-emerald-500/60', - teal: 'text-white bg-teal-500 hover:bg-teal-600 ring-teal-500/60', - cyan: 'text-white bg-cyan-500 hover:bg-cyan-600 ring-cyan-500/60', - sky: 'text-white bg-sky-500 hover:bg-sky-600 ring-sky-500/60', - blue: 'text-white bg-blue-500 hover:bg-blue-600 ring-blue-500/60', - indigo: 'text-white bg-indigo-500 hover:bg-indigo-600 ring-indigo-500/60', - violet: 'text-white bg-violet-500 hover:bg-violet-600 ring-violet-500/60', - purple: 'text-white bg-purple-500 hover:bg-purple-600 ring-purple-500/60', - fuchsia: 'text-white bg-fuchsia-500 hover:bg-fuchsia-600 ring-fuchsia-500/60', - pink: 'text-white bg-pink-500 hover:bg-pink-600 ring-pink-500/60', - rose: 'text-white bg-rose-500 hover:bg-rose-600 ring-rose-500/60', - gray: 'text-white bg-gray-500 hover:bg-gray-600 ring-gray-500/60', + default: [ + `[--bg-color:theme(colors.surface-content)]`, + 'hover:[--bg-color:theme(colors.surface-content/80%)]', + '[--text-color:theme(colors.surface-200)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + `[--bg-color:theme(colors.primary)]`, + 'hover:[--bg-color:theme(colors.primary-600)]', + '[--text-color:theme(colors.primary-content)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary)]', + 'hover:[--bg-color:theme(colors.secondary-600)]', + '[--text-color:theme(colors.secondary-content)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + '[--bg-color:theme(colors.accent)]', + 'hover:[--bg-color:theme(colors.accent-600)]', + '[--text-color:theme(colors.accent-content)]', + '[--ring-color:theme(colors.accent/60%)]', + ], + neutral: [ + '[--bg-color:theme(colors.neutral)]', + 'hover:[--bg-color:theme(colors.neutral-600)]', + '[--text-color:theme(colors.neutral-content)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + `[--bg-color:theme(colors.info)]`, + 'hover:[--bg-color:theme(colors.info-600)]', + '[--text-color:theme(colors.info-content)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + `[--bg-color:theme(colors.success)]`, + 'hover:[--bg-color:theme(colors.success-600)]', + '[--text-color:theme(colors.success-content)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + `[--bg-color:theme(colors.warning)]`, + 'hover:[--bg-color:theme(colors.warning-600)]', + '[--text-color:theme(colors.warning-content)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + `[--bg-color:theme(colors.danger)]`, + 'hover:[--bg-color:theme(colors.danger-600)]', + '[--text-color:theme(colors.danger-content)]', + '[--ring-color:theme(colors.danger/60%)]', + ], }, 'fill-light': { - default: 'text-black bg-black/5 hover:bg-black/10 ring-black/20', - accent: - 'text-accent-500 bg-accent-500/10 hover:bg-accent-500/20 ring-accent-400 ring-accent-500/60', - red: 'text-red-500 bg-red-500/10 hover:bg-red-500/20 ring-red-500/60', - orange: 'text-orange-500 bg-orange-500/10 hover:bg-orange-500/20 ring-orange-500/60', - amber: 'text-amber-500 bg-amber-500/10 hover:bg-amber-500/20 ring-amber-500/60', - yellow: 'text-yellow-500 bg-yellow-500/10 hover:bg-yellow-500/20 ring-yellow-500/60', - lime: 'text-lime-500 bg-lime-500/10 hover:bg-lime-500/20 ring-lime-500/60', - green: 'text-green-500 bg-green-500/10 hover:bg-green-500/20 ring-green-500/60', - emerald: 'text-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/20 ring-emerald-500/60', - teal: 'text-teal-500 bg-teal-500/10 hover:bg-teal-500/20 ring-teal-500/60', - cyan: 'text-cyan-500 bg-cyan-500/10 hover:bg-cyan-500/20 ring-cyan-500/60', - sky: 'text-sky-500 bg-sky-500/10 hover:bg-sky-500/20 ring-sky-500/60', - blue: 'text-blue-500 bg-blue-500/10 hover:bg-blue-500/20 ring-blue-500/60', - indigo: 'text-indigo-500 bg-indigo-500/10 hover:bg-indigo-500/20 ring-indigo-500/60', - violet: 'text-violet-500 bg-violet-500/10 hover:bg-violet-500/20 ring-violet-500/60', - purple: 'text-purple-500 bg-purple-500/10 hover:bg-purple-500/20 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 bg-fuchsia-500/10 hover:bg-fuchsia-500/20 ring-fuchsia-500/60', - pink: 'text-pink-500 bg-pink-500/10 hover:bg-pink-500/20 ring-pink-500/60', - rose: 'text-rose-500 bg-rose-500/10 hover:bg-rose-500/20 ring-rose-500/60', - gray: 'text-gray-500 bg-gray-500/10 hover:bg-gray-500/20 ring-gray-500/60', + default: [ + '[--bg-color:theme(colors.surface-content/10%)]', + 'hover:[--bg-color:theme(colors.surface-content/20%)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--bg-color:theme(colors.primary/10%)]', + 'hover:[--bg-color:theme(colors.primary/20%)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary/10%)]', + 'hover:[--bg-color:theme(colors.secondary/20%)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + '[--bg-color:theme(colors.accent/10%)]', + 'hover:[--bg-color:theme(colors.accent/20%)]', + '[--text-color:theme(colors.accent)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + neutral: [ + '[--bg-color:theme(colors.neutral/10%)]', + 'hover:[--bg-color:theme(colors.neutral/20%)]', + '[--text-color:theme(colors.neutral)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + '[--bg-color:theme(colors.info/10%)]', + 'hover:[--bg-color:theme(colors.info/20%)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--bg-color:theme(colors.success/10%)]', + 'hover:[--bg-color:theme(colors.success/20%)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--bg-color:theme(colors.warning/10%)]', + 'hover:[--bg-color:theme(colors.warning/20%)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + '[--bg-color:theme(colors.danger/10%)]', + 'hover:[--bg-color:theme(colors.danger/20%)]', + '[--text-color:theme(colors.danger)]', + '[--ring-color:theme(colors.danger/60%)]', + ], }, 'fill-outline': { - default: 'text-black bg-black/5 hover:bg-black/10 border-black/20 ring-black/10', - accent: - 'text-accent-500 border-accent-500 bg-accent-500/10 hover:bg-accent-500/20 ring-accent-500/60', - red: 'text-red-500 border-red-500 bg-red-500/10 hover:bg-red-500/20 ring-red-500/60', - orange: - 'text-orange-500 border-orange-500 bg-orange-500/10 hover:bg-orange-500/20 ring-orange-500/60', - amber: - 'text-amber-500 border-amber-500 bg-amber-500/10 hover:bg-amber-500/20 ring-amber-500/60', - yellow: - 'text-yellow-500 border-yellow-500 bg-yellow-500/10 hover:bg-yellow-500/20 ring-yellow-500/60', - lime: 'text-lime-500 border-lime-500 bg-lime-500/10 hover:bg-lime-500/20 ring-lime-500/60', - green: - 'text-green-500 border-green-500 bg-green-500/10 hover:bg-green-500/20 ring-green-500/60', - emerald: - 'text-emerald-500 border-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/20 ring-emerald-500/60', - teal: 'text-teal-500 border-teal-500 bg-teal-500/10 hover:bg-teal-500/20 ring-teal-500/60', - cyan: 'text-cyan-500 border-cyan-500 bg-cyan-500/10 hover:bg-cyan-500/20 ring-cyan-500/60', - sky: 'text-sky-500 border-sky-500 bg-sky-500/10 hover:bg-sky-500/20 ring-sky-500/60', - blue: 'text-blue-500 border-blue-500 bg-blue-500/10 hover:bg-blue-500/20 ring-blue-500/60', - indigo: - 'text-indigo-500 border-indigo-500 bg-indigo-500/10 hover:bg-indigo-500/20 ring-indigo-500/60', - violet: - 'text-violet-500 border-violet-500 bg-violet-500/10 hover:bg-violet-500/20 ring-violet-500/60', - purple: - 'text-purple-500 border-purple-500 bg-purple-500/10 hover:bg-purple-500/20 ring-purple-500/60', - fuchsia: - 'text-fuchsia-500 border-fuchsia-500 bg-fuchsia-500/10 hover:bg-fuchsia-500/20 ring-fuchsia-500/60', - pink: 'text-pink-500 border-pink-500 bg-pink-500/10 hover:bg-pink-500/20 ring-pink-500/60', - rose: 'text-rose-500 border-rose-500 bg-rose-500/10 hover:bg-rose-500/20 ring-rose-500/60', - gray: 'text-gray-500 border-gray-500 bg-gray-500/10 hover:bg-gray-500/20 ring-gray-500/60', + default: [ + '[--bg-color:theme(colors.surface-content/10%)]', + 'hover:[--bg-color:theme(colors.surface-content/20%)]', + '[--border-color:theme(colors.surface-content)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--bg-color:theme(colors.primary/10%)]', + 'hover:[--bg-color:theme(colors.primary/20%)]', + '[--border-color:theme(colors.primary)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary/10%)]', + 'hover:[--bg-color:theme(colors.secondary/20%)]', + '[--border-color:theme(colors.secondary)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + '[--bg-color:theme(colors.accent/10%)]', + 'hover:[--bg-color:theme(colors.accent/20%)]', + '[--border-color:theme(colors.accent)]', + '[--text-color:theme(colors.accent)]', + '[--ring-color:theme(colors.accent/60%)]', + ], + neutral: [ + '[--bg-color:theme(colors.neutral/10%)]', + 'hover:[--bg-color:theme(colors.neutral/20%)]', + '[--border-color:theme(colors.neutral)]', + '[--text-color:theme(colors.neutral)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + '[--bg-color:theme(colors.info/10%)]', + 'hover:[--bg-color:theme(colors.info/20%)]', + '[--border-color:theme(colors.info)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--bg-color:theme(colors.success/10%)]', + 'hover:[--bg-color:theme(colors.success/20%)]', + '[--border-color:theme(colors.success)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--bg-color:theme(colors.warning/10%)]', + 'hover:[--bg-color:theme(colors.warning/20%)]', + '[--border-color:theme(colors.warning)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + '[--bg-color:theme(colors.danger/10%)]', + 'hover:[--bg-color:theme(colors.danger/20%)]', + '[--border-color:theme(colors.danger)]', + '[--text-color:theme(colors.danger)]', + '[--ring-color:theme(colors.danger/60%)]', + ], }, text: { - default: 'hover:text-black/70 ring-black/10', - accent: 'text-accent-500 hover:text-accent-700 ring-accent-500/60', - red: 'text-red-500 hover:text-red-700 ring-red-500/60', - orange: 'text-orange-500 hover:text-orange-700 ring-orange-500/60', - amber: 'text-amber-500 hover:text-amber-700 ring-amber-500/60', - yellow: 'text-yellow-500 hover:text-yellow-700 ring-yellow-500/60', - lime: 'text-lime-500 hover:text-lime-700 ring-lime-500/60', - green: 'text-green-500 hover:text-green-700 ring-green-500/60', - emerald: 'text-emerald-500 hover:text-emerald-700 ring-emerald-500/60', - teal: 'text-teal-500 hover:text-teal-700 ring-teal-500/60', - cyan: 'text-cyan-500 hover:text-cyan-700 ring-cyan-500/60', - sky: 'text-sky-500 hover:text-sky-700 ring-sky-500/60', - blue: 'text-blue-500 hover:text-blue-700 ring-blue-500/60', - indigo: 'text-indigo-500 hover:text-indigo-700 ring-indigo-500/60', - violet: 'text-violet-500 hover:text-violet-700 ring-violet-500/60', - purple: 'text-purple-500 hover:text-purple-700 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 hover:text-fuchsia-700 ring-fuchsia-500/60', - pink: 'text-pink-500 hover:text-pink-700 ring-pink-500/60', - rose: 'text-rose-500 hover:text-rose-700 ring-rose-500/60', - gray: 'text-gray-500 hover:text-gray-700 ring-gray-500/60', + default: [ + '[--text-color:theme(colors.surface-content)]', + 'hover:[--text-color:theme(colors.surface-content/80%)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--text-color:theme(colors.primary)]', + 'hover:[--text-color:theme(colors.primary-700)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--text-color:theme(colors.secondary)]', + 'hover:[--text-color:theme(colors.secondary-700)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + accent: [ + '[--text-color:theme(colors.accent)]', + 'hover:[--text-color:theme(colors.accent-700)]', + '[--ring-color:theme(colors.accent/60%)]', + ], + neutral: [ + '[--text-color:theme(colors.neutral)]', + 'hover:[--text-color:theme(colors.neutral-700)]', + '[--ring-color:theme(colors.neutral/60%)]', + ], + info: [ + '[--text-color:theme(colors.info)]', + 'hover:[--text-color:theme(colors.info-700)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--text-color:theme(colors.success)]', + 'hover:[--text-color:theme(colors.success-700)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--text-color:theme(colors.warning)]', + 'hover:[--text-color:theme(colors.warning-700)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + danger: [ + '[--text-color:theme(colors.danger)]', + 'hover:[--text-color:theme(colors.danger-700)]', + '[--ring-color:theme(colors.danger/60%)]', + ], + }, + none: { + default: '', + primary: '', + secondary: '', + accent: '', + neutral: '', + info: '', + success: '', + warning: '', + danger: '', }, - none: {}, }[variant ?? 'none']?.[color ?? 'default'], + + // text color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light', 'text'].includes( + variant ?? 'none' + ) && 'text-[--text-color]', + + // background color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light'].includes(variant ?? 'none') && + 'bg-[--bg-color] ', + + // border color + ['outline', 'fill-outline'].includes(variant ?? 'none') && 'border-[--border-color]', + + // ring color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light', 'text'].includes( + variant ?? 'none' + ) && 'ring-[--ring-color]', + theme.root, classes?.root, $$props.class @@ -262,7 +474,10 @@ {#if typeof icon === 'string' || 'icon' in icon} - + {:else} {/if} diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte index 8fafc4195..0978a64d8 100644 --- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte +++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte @@ -1,7 +1,7 @@ -
+
{#if source}
- 
-          {@html highlightedSource}
+      
+          {@html highlightedSource}
       

 
       

         
       

diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
index 2ec7be7cc..f360d830c 100644
--- a/packages/svelte-ux/src/lib/components/DateButton.svelte
+++ b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -78,10 +78,8 @@
     'inline-flex items-center justify-center',
     isSelectedStart
       ? '[--tw-gradient-from:transparent]'
-      : '[--tw-gradient-from:theme(colors.accent.500)]',
-    isSelectedEnd
-      ? '[--tw-gradient-to:transparent]'
-      : '[--tw-gradient-to:theme(colors.accent.500)]',
+      : '[--tw-gradient-from:theme(colors.primary)]',
+    isSelectedEnd ? '[--tw-gradient-to:transparent]' : '[--tw-gradient-to:theme(colors.primary)]',
     isSelected && (isVerticalSelection ? 'bg-gradient-to-b' : 'bg-gradient-to-r'),
     hidden && 'opacity-0 pointer-events-none',
     theme.root,
@@ -96,7 +94,7 @@
       isCurrent ? 'font-bold' : 'font-normal'
     )}
     variant={isSelected ? 'fill' : 'default'}
-    color={isSelected || isCurrent ? 'accent' : 'default'}
+    color={isSelected || isCurrent ? 'primary' : 'default'}
     {disabled}
     on:click={() => {
       // Do not set selected date as this is causing issues with controlled selected (ex. date ranges, arrays, etc) / changing from date to { from: ..., to: ... }
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 803df34d8..338e690fb 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -78,7 +78,7 @@
           value = e.detail;
           dispatch('change', { value });
         }}
-        class="p-1 text-black/50"
+        class="p-1 text-surface-content/50"
       />
     {/if}
   
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
index 256835178..85364769c 100644
--- a/packages/svelte-ux/src/lib/components/DatePickerField.svelte
+++ b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -105,7 +105,7 @@
       {#if clearable && value}
         {getDictionary().Ok}
     
       {/if}
-      
+
@@ -61,7 +61,7 @@
{#if stackTrace}
-
Stacktrace:
+
Stacktrace:
             {stackTrace ?? ''}
@@ -70,7 +70,7 @@
- +
diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte index e58b769b0..960208987 100644 --- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte +++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte @@ -29,7 +29,7 @@ classes={{ root: cls( 'ExpansionPanel', - 'bg-white elevation-1 border-t', + 'bg-surface-100 elevation-1 border-t', 'relative', // Match ListItem (used for loading) so Stacking Context is consistent (else causes a solid line between ExpansionPanel and ListItem) list === 'type' && 'first-of-type:border-t-0 first-of-type:rounded-t last-of-type:rounded-b', list === 'parent' && 'first:border-t-0 first:rounded-t last:rounded-b', @@ -38,7 +38,7 @@ classes.root, $$props.class ), - icon: cls('text-gray-500 px-2', !enabled && 'hidden'), + icon: cls('text-surface-content/30 px-2', !enabled && 'hidden'), }} popout {list} diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte index 4ccc88161..4b4d29316 100644 --- a/packages/svelte-ux/src/lib/components/Field.svelte +++ b/packages/svelte-ux/src/lib/components/Field.svelte @@ -61,7 +61,7 @@ 'Field', 'group flex gap-1', labelPlacement !== 'left' ? 'flex-col' : 'items-center', - error ? '[--color:theme(colors.red.500)]' : '[--color:theme(colors.accent.500)]', + error ? '[--color:theme(colors.danger)]' : '[--color:theme(colors.primary)]', disabled && 'opacity-50 pointer-events-none', !base && (rounded ? 'rounded-full' : 'rounded'), theme.root, @@ -73,8 +73,8 @@
@@ -127,9 +127,9 @@ {#if label && ['inset', 'float'].includes(labelPlacement)}
{/if} @@ -190,7 +190,7 @@ class={cls( error ? 'error' : 'hint', 'text-xs ml-2 transition-transform ease-out overflow-hidden origin-top transform group-focus-within:scale-y-100', - error ? 'text-red-500' : 'text-black/50 scale-y-0', + error ? 'text-danger' : 'text-surface-content/50 scale-y-0', theme.error, classes.error )} diff --git a/packages/svelte-ux/src/lib/components/Header.svelte b/packages/svelte-ux/src/lib/components/Header.svelte index d1396280e..f2449d6e1 100644 --- a/packages/svelte-ux/src/lib/components/Header.svelte +++ b/packages/svelte-ux/src/lib/components/Header.svelte @@ -26,9 +26,9 @@ {#if subheading} {#if Array.isArray(subheading)} - + {:else} -
{subheading}
+
{subheading}
{/if} {/if} diff --git a/packages/svelte-ux/src/lib/components/Input.svelte b/packages/svelte-ux/src/lib/components/Input.svelte index 62c9b6018..fdf2f6bd0 100644 --- a/packages/svelte-ux/src/lib/components/Input.svelte +++ b/packages/svelte-ux/src/lib/components/Input.svelte @@ -126,7 +126,7 @@ {...$$restProps} class={cls( 'Input', - 'text-sm w-full outline-none bg-transparent selection:bg-gray-500/30', + 'text-sm w-full outline-none bg-transparent placeholder-surface/50 selection:bg-surface-content/10', mask && (mask == placeholder || isFocused || value) && 'font-mono', theme.root, $$props.class diff --git a/packages/svelte-ux/src/lib/components/Kbd.svelte b/packages/svelte-ux/src/lib/components/Kbd.svelte new file mode 100644 index 000000000..f1aa66f0e --- /dev/null +++ b/packages/svelte-ux/src/lib/components/Kbd.svelte @@ -0,0 +1,37 @@ + + + + {#if control} + ⌃ + {/if} + + {#if option} + ⌥ + {/if} + + {#if shift} + ⇧ + {/if} + + {#if command} + ⌘ + {/if} + + + diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte index ce230a55c..fae01ba79 100644 --- a/packages/svelte-ux/src/lib/components/ListItem.svelte +++ b/packages/svelte-ux/src/lib/components/ListItem.svelte @@ -53,13 +53,13 @@
  • {#if subheading != null} -
    +
    {subheading}
    {/if} diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte index ddb9cd017..86c939f2a 100644 --- a/packages/svelte-ux/src/lib/components/Menu.svelte +++ b/packages/svelte-ux/src/lib/components/Menu.svelte @@ -22,7 +22,7 @@ export let resize = false; export let disableTransition = false; export let transition = disableTransition - ? (node: HTMLElement, params: TransitionParams) => ({} as TransitionConfig) + ? (node: HTMLElement, params: TransitionParams) => ({}) as TransitionConfig : slide; export let transitionParams: TransitionParams = {}; export let explicitClose = false; @@ -62,7 +62,7 @@ {open} class={cls( 'Menu', - 'bg-white rounded shadow border overflow-auto', + 'bg-surface-100 rounded shadow border overflow-auto', theme.root, classes.root, $$props.class diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte index e028a8e66..307c84a74 100644 --- a/packages/svelte-ux/src/lib/components/MenuField.svelte +++ b/packages/svelte-ux/src/lib/components/MenuField.svelte @@ -89,7 +89,7 @@ &]:bg-black/5', + icon: 'text-surface-content/50', + selected: 'font-semibold [:not(.group:hover)>&]:bg-surface-content/5', }; const theme = getComponentTheme('MenuItem'); @@ -41,7 +41,7 @@ {...$$restProps} class={cls( 'MenuItem', - 'text-left items-center p-2 hover:bg-black/5 rounded duration-75', + 'text-left items-center p-2 hover:bg-surface-content/5 rounded duration-75', selected && classes?.selected, theme.root, classes?.root, diff --git a/packages/svelte-ux/src/lib/components/Month.svelte b/packages/svelte-ux/src/lib/components/Month.svelte index 3175243ae..2551741d6 100644 --- a/packages/svelte-ux/src/lib/components/Month.svelte +++ b/packages/svelte-ux/src/lib/components/Month.svelte @@ -106,7 +106,9 @@
    {#each monthDaysByWeek[0] ?? [] as day (day.getDate())}
    - {format(day, PeriodType.Day, { custom: 'eee' })} + + {format(day, PeriodType.Day, { custom: 'eee' })} +
    {/each}
    diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte index 35bbf2545..0ac5a2550 100644 --- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte +++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte @@ -111,7 +111,7 @@ {#if inlineSearch} -
    +
    -
    +
    {/if} @@ -208,7 +208,7 @@
    {:else} {#if !filteredSelectedOptions.length} -
    There are no matching items.
    +
    There are no matching items.
    {/if} {/each} @@ -216,7 +216,7 @@
    -
    +
    @@ -238,7 +238,7 @@
    diff --git a/packages/svelte-ux/src/lib/components/Overlay.svelte b/packages/svelte-ux/src/lib/components/Overlay.svelte index fb3becc83..92f685f93 100644 --- a/packages/svelte-ux/src/lib/components/Overlay.svelte +++ b/packages/svelte-ux/src/lib/components/Overlay.svelte @@ -8,7 +8,7 @@ export let center = false; export let transition = [fade, { duration: 100 }] as [ (node: Element, options: any) => TransitionConfig, - object + object, ]; const theme = getComponentTheme('Overlay'); @@ -19,7 +19,7 @@
    -
    +
    {#if code && showCode} -
    - 
    -          {@html highlightedCode}
-
    - -
    - -
    +
    +
    {/if}
    {#if code} - {/if} diff --git a/packages/svelte-ux/src/lib/components/Progress.svelte b/packages/svelte-ux/src/lib/components/Progress.svelte index 471a24200..adaa69666 100644 --- a/packages/svelte-ux/src/lib/components/Progress.svelte +++ b/packages/svelte-ux/src/lib/components/Progress.svelte @@ -17,12 +17,12 @@ 'h-2 w-full', // bar color - '[--color:theme(colors.accent.500)]', + '[--color:theme(colors.primary)]', '[&::-webkit-progress-value]:bg-[--color]', '[&::-moz-progress-bar]:bg-[--color]', // track color - '[--track-color:theme(colors.gray.100)]', + '[--track-color:theme(colors.surface-200)]', '[&::-webkit-progress-bar]:bg-[--track-color]', 'bg-[--track-color]', diff --git a/packages/svelte-ux/src/lib/components/QuickSearch.svelte b/packages/svelte-ux/src/lib/components/QuickSearch.svelte index 4e1ce196a..8e55049d3 100644 --- a/packages/svelte-ux/src/lib/components/QuickSearch.svelte +++ b/packages/svelte-ux/src/lib/components/QuickSearch.svelte @@ -3,6 +3,7 @@ import Button from '$lib/components/Button.svelte'; import Dialog from '$lib/components/Dialog.svelte'; + import Kbd from './Kbd.svelte'; import SelectField from '$lib/components/SelectField.svelte'; import { getComponentTheme } from './theme'; import { cls } from '$lib/utils/styles'; @@ -52,17 +53,14 @@ )} > Search - - ⌘ - K - + K
    diff --git a/packages/svelte-ux/src/lib/components/Radio.svelte b/packages/svelte-ux/src/lib/components/Radio.svelte index 6457e3ae3..bbfe64c09 100644 --- a/packages/svelte-ux/src/lib/components/Radio.svelte +++ b/packages/svelte-ux/src/lib/components/Radio.svelte @@ -39,12 +39,16 @@
    @@ -34,7 +34,7 @@
    Are you sure you want to do that?
    - +
    @@ -58,7 +58,7 @@ }, 1000); }} variant="fill" - color="accent" + color="primary" > Save @@ -86,7 +86,7 @@ }, 1000); }} variant="fill" - color="accent" + color="primary" > Save @@ -100,7 +100,7 @@ - +
    Are you sure?
    This will permanently delete the item and can not be undone.
    @@ -110,7 +110,7 @@ console.log('Deleting item...'); }} variant="fill" - color="red" + color="danger" > Yes, delete item @@ -124,7 +124,7 @@ - +
    Delete this item ?
    This will permanently delete the item
    @@ -136,7 +136,7 @@ e.stopPropagation(); toggleConfirm(); }} - color="red" + color="danger" variant="fill" > Yes @@ -154,7 +154,7 @@ toggleDelete(); }} variant="fill" - color="red" + color="danger" > Yes, delete item @@ -177,7 +177,7 @@
    Are you sure you want to do that?
    - +
    @@ -191,7 +191,7 @@
    Are you sure you want to do that?
    - +
    @@ -209,7 +209,7 @@
    - +
    @@ -224,7 +224,7 @@
    Are you sure you want to do that?
    - +
    diff --git a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte index 752320dc9..80af768fa 100644 --- a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte @@ -23,10 +23,7 @@

    Contents

    -
    +
    @@ -34,10 +31,7 @@

    Contents

    -
    +
    @@ -45,10 +39,7 @@

    Contents

    -
    +
    @@ -56,10 +47,7 @@

    Contents

    -
    +
    @@ -72,10 +60,7 @@

    Contents

    -
    +
    @@ -89,10 +74,7 @@

    Contents

    -
    +
    @@ -108,10 +90,7 @@
    -
    +
    @@ -130,15 +109,12 @@
    Are you sure you want to do that?
    - +
    -
    +
    @@ -160,10 +136,7 @@ ]} />
    -
    +
    @@ -192,10 +165,7 @@
    -
    +
    @@ -212,7 +182,7 @@ isChanged = false; }} variant="fill" - color="red" + color="danger" > Yes, lose changes @@ -237,10 +207,7 @@ portal={{ target: '#portal' }} >

    Contents

    -
    +
    diff --git a/packages/svelte-ux/src/routes/docs/components/ExpansionPanel/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ExpansionPanel/+page.svelte index 2b9e063ee..477e3630e 100644 --- a/packages/svelte-ux/src/routes/docs/components/ExpansionPanel/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ExpansionPanel/+page.svelte @@ -28,7 +28,7 @@ {#each Array(5) as _, i} - +
    Item {i + 1}
    @@ -68,7 +68,7 @@ title="Item {i + 1}" subheading="List Item" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow /> @@ -92,7 +92,7 @@ title="Item 1" subheading="Expansion Panel" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow /> @@ -106,7 +106,7 @@ title="Item 2" subheading="List Item" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} /> @@ -135,7 +135,7 @@ title="Item 1" subheading="List Item" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} /> @@ -157,6 +157,6 @@ title="Item 3" subheading="List Item" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} /> diff --git a/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte index edf463135..0be42d3da 100644 --- a/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Field/+page.svelte @@ -67,7 +67,7 @@
    ToggleGroup
    -
    default width
    +
    default width
    @@ -81,7 +81,7 @@
    ToggleGroup
    -
    full width
    +
    full width
    @@ -95,7 +95,9 @@
    ToggleGroup
    -
    full rounded and small
    +
    + full rounded and small +
    @@ -109,7 +111,7 @@
    ToggleGroup
    -
    with icons
    +
    with icons
    @@ -140,7 +142,7 @@ - + @@ -148,7 +150,14 @@ - + @@ -164,7 +173,7 @@ - diff --git a/packages/svelte-ux/src/routes/docs/components/Gooey/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Gooey/+page.svelte index fe23bd367..6709d5da0 100644 --- a/packages/svelte-ux/src/routes/docs/components/Gooey/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Gooey/+page.svelte @@ -43,15 +43,9 @@
    - Inspiration: - Text Morph - + Inspiration: Text Morph by - Valgo + Valgo

    Morphing emoji

    @@ -79,11 +73,11 @@
    - +
    This is an example of a simple headline
    or text with rounded corners
    using a gooey SVG filter.
    You can edit me! @@ -92,11 +86,11 @@
    - Inspiration: + Inspiration: Gooey text background with SVG filters by - Ines Montani + Ines Montani
    @@ -126,15 +120,11 @@
    - Inspiration: + Inspiration: Spinner with Glowing, Gooey Effect by - Lou + Lou
    @@ -165,15 +155,11 @@
    - Inspiration: + Inspiration: Loader/Scanner with Gooey Effect by - Lou + Lou
    diff --git a/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte index 120059917..521de9f95 100644 --- a/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Icon/+page.svelte @@ -61,7 +61,7 @@ - + '} diff --git a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte index fa57dbfa7..56c9c4951 100644 --- a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte @@ -67,7 +67,7 @@ title="Title" subheading="Subheading" icon={mdiAccount} - avatar={{ class: 'bg-gray-400 text-white/90' }} + avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} /> @@ -76,7 +76,7 @@
    -
    @@ -112,8 +112,8 @@ on:click={() => (selectedId = choice.id)} class={cls( 'cursor-pointer', - 'hover:bg-accent-50', - selectedId == choice.id ? 'bg-accent-50' : '' + 'hover:bg-primary/5', + selectedId == choice.id ? 'bg-primary/5' : '' )} >
    @@ -138,9 +138,9 @@ on:click={() => (selectedId = choice.id)} class={cls( 'px-8 py-4', - 'cursor-pointer ring ring-inset ring-accent-500 transition-shadow duration-100', - 'hover:bg-accent-50', - selectedId == choice.id ? 'ring-1 bg-accent-50' : 'ring-0' + 'cursor-pointer ring ring-inset ring-primary transition-shadow duration-100', + 'hover:bg-primary/5', + selectedId == choice.id ? 'ring-1 bg-primary/5' : 'ring-0' )} noShadow /> @@ -152,7 +152,7 @@

    example 3

    -
    +
    {#each choices as choice}
    (selectedId = choice.id)} class={cls( 'px-8 py-4', - 'cursor-pointer transition-shadow duration-100 border', - 'hover:bg-white', - selectedId == choice.id ? 'bg-white shadow-md' : '' + 'cursor-pointer transition-shadow duration-100', + 'hover:bg-surface-100 hover:outline', + selectedId == choice.id ? 'bg-surface-100 shadow-md' : '' )} noBackground noShadow diff --git a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte index 8ab50a839..fd734220c 100644 --- a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte @@ -67,7 +67,7 @@
    Are you sure you want to do that?
    - +
    @@ -77,7 +77,7 @@
    Are you sure you want to do that?
    - +
    @@ -85,9 +85,7 @@ Open Drawer... -
    +
    @@ -96,9 +94,7 @@ Open Persistent Drawer... -
    +
    @@ -118,9 +114,7 @@ -
    +
    diff --git a/packages/svelte-ux/src/routes/docs/components/MenuButton/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MenuButton/+page.svelte index 92bc9f9f0..9a0f736c0 100644 --- a/packages/svelte-ux/src/routes/docs/components/MenuButton/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MenuButton/+page.svelte @@ -48,7 +48,7 @@

    Variant

    - +

    Size

    diff --git a/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte index 711b47cc0..3ace992b0 100644 --- a/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte @@ -121,7 +121,7 @@
    -
    @@ -137,6 +137,6 @@ diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte index 7c3b6a562..8443cd0b9 100644 --- a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte @@ -109,7 +109,7 @@
    (value = e.detail.value)} inlineSearch>
    - +
    diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte index cd4b914ff..51d4c9172 100644 --- a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte @@ -95,7 +95,7 @@ (value = e.detail.value)}>
    - +
    @@ -115,16 +115,13 @@

    within Drawer

    - + Open Drawer - +
    (value = e.detail.value)} />
    -
    +
    diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte index 7fb41c36e..e1d664cf4 100644 --- a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte @@ -133,7 +133,7 @@ inlineSearch >
    - +
    diff --git a/packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte b/packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte index bd26d0857..f898bfcc8 100644 --- a/packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte @@ -20,6 +20,6 @@ text="NavItem" currentUrl={$page.url} path="/docs/components/NavItem" - classes={{ root: 'pl-3', active: 'bg-accent-50 text-accent-500' }} + classes={{ root: 'pl-3', active: 'bg-primary/10 text-primary' }} /> diff --git a/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte index f55e727c8..04cc2aa54 100644 --- a/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Notification/+page.svelte @@ -30,7 +30,7 @@
    Discussion archived
    - +
    @@ -49,7 +49,7 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.
    - +
    @@ -65,7 +65,7 @@
    Notifications may include alerts, sounds, and badges
    - +
    diff --git a/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte index c102abc87..f6188b03e 100644 --- a/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte @@ -20,7 +20,7 @@
    overflowX: {overflowX}
    overflowY: {overflowY}
    -
    +
    {#each { length: overflowItems } as _}
    Resize the window to see text truncate and watch values
    {/each} @@ -44,7 +44,7 @@ +
    diff --git a/packages/svelte-ux/src/routes/docs/components/Popover/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Popover/+page.svelte index 43fd7c363..6e78179c0 100644 --- a/packages/svelte-ux/src/routes/docs/components/Popover/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Popover/+page.svelte @@ -16,7 +16,7 @@
    -
    Example contents
    +
    Example contents
    @@ -31,7 +31,7 @@
    -
    Contents
    +
    Contents
    @@ -41,7 +41,7 @@
    -
    Contents
    +
    Contents
    @@ -51,7 +51,7 @@
    -
    Contents
    +
    Contents
    @@ -61,7 +61,7 @@
    -
    Contents
    +
    Contents
    @@ -71,7 +71,7 @@
    -
    Contents
    +
    Contents
    @@ -81,7 +81,7 @@
    -
    Contents
    +
    Contents
    @@ -91,7 +91,7 @@
    -
    Contents
    +
    Contents
    @@ -101,7 +101,7 @@
    -
    Contents
    +
    Contents
    @@ -111,7 +111,7 @@
    -
    Contents
    +
    Contents
    @@ -121,7 +121,7 @@
    -
    Contents
    +
    Contents
    @@ -131,7 +131,7 @@
    -
    Contents
    +
    Contents
    @@ -141,7 +141,7 @@
    -
    Contents
    +
    Contents
    diff --git a/packages/svelte-ux/src/routes/docs/components/Progress/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Progress/+page.svelte index d494e32b2..093c4c115 100644 --- a/packages/svelte-ux/src/routes/docs/components/Progress/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Progress/+page.svelte @@ -29,26 +29,26 @@

    Color

    - - - + + +

    Track color

    - + @@ -59,10 +59,10 @@ bind:value class={cls( value > 90 - ? '[--color:theme(colors.red.500)]' - : value > 70 - ? '[--color:theme(colors.yellow.500)]' - : '[--color:theme(colors.green.500)]' + ? '[--color:theme(colors.danger)]' + : value > 50 + ? '[--color:theme(colors.warning)]' + : '[--color:theme(colors.success)]' )} max={100} /> diff --git a/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte index b0c4c77e8..a8b3d679e 100644 --- a/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.svelte @@ -15,16 +15,16 @@

    Demo

    -
    +
    {#if label} - + {#if indeterminate}Loading...{:else}{value}%{/if} {/if} -
    +