From 2961c7a370b9fc6607ebadfa669a5490b959b4a0 Mon Sep 17 00:00:00 2001 From: Larra Su Date: Tue, 7 Oct 2025 22:21:25 -0700 Subject: [PATCH 01/10] feat(UEmpty): new component --- docs/content/docs/2.components/empty.md | 35 +++++ .../nuxt/app/composables/useNavigation.ts | 1 + .../nuxt/app/pages/components/empty.vue | 135 ++++++++++++++++++ src/runtime/components/Empty.vue | 94 ++++++++++++ src/runtime/types/index.ts | 3 +- src/theme/empty.ts | 48 +++++++ src/theme/index.ts | 1 + test/components/Empty.spec.ts | 18 +++ 8 files changed, 334 insertions(+), 1 deletion(-) create mode 100644 docs/content/docs/2.components/empty.md create mode 100644 playgrounds/nuxt/app/pages/components/empty.vue create mode 100644 src/runtime/components/Empty.vue create mode 100644 src/theme/empty.ts create mode 100644 test/components/Empty.spec.ts diff --git a/docs/content/docs/2.components/empty.md b/docs/content/docs/2.components/empty.md new file mode 100644 index 0000000000..efb03d1ba2 --- /dev/null +++ b/docs/content/docs/2.components/empty.md @@ -0,0 +1,35 @@ +--- +title: Empty +description: '' +links: + - label: GitHub + icon: i-simple-icons-github + to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Empty.vue +navigation.badge: Soon +--- + +## Usage + +## Examples + +## API + +### Props + +:component-props + +### Slots + +:component-slots + +### Emits + +:component-emits + +## Theme + +:component-theme + +## Changelog + +:component-changelog diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts index b09aed56e9..6248b38e9c 100644 --- a/playgrounds/nuxt/app/composables/useNavigation.ts +++ b/playgrounds/nuxt/app/composables/useNavigation.ts @@ -27,6 +27,7 @@ const components = [ 'context-menu', 'drawer', 'dropdown-menu', + 'empty', 'error', 'field-group', 'file-upload', diff --git a/playgrounds/nuxt/app/pages/components/empty.vue b/playgrounds/nuxt/app/pages/components/empty.vue new file mode 100644 index 0000000000..59f534f174 --- /dev/null +++ b/playgrounds/nuxt/app/pages/components/empty.vue @@ -0,0 +1,135 @@ + + + diff --git a/src/runtime/components/Empty.vue b/src/runtime/components/Empty.vue new file mode 100644 index 0000000000..7f2b2cab98 --- /dev/null +++ b/src/runtime/components/Empty.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts index 85108d4498..015f48fc9e 100644 --- a/src/runtime/types/index.ts +++ b/src/runtime/types/index.ts @@ -40,6 +40,7 @@ export * from '../components/DashboardSidebarToggle.vue' export * from '../components/DashboardToolbar.vue' export * from '../components/Drawer.vue' export * from '../components/DropdownMenu.vue' +export * from '../components/Empty.vue' export * from '../components/Error.vue' export * from '../components/FieldGroup.vue' export * from '../components/FileUpload.vue' @@ -76,10 +77,10 @@ export * from '../components/PageLogos.vue' export * from '../components/PageSection.vue' export * from '../components/Pagination.vue' export * from '../components/PinInput.vue' +export * from '../components/Popover.vue' export * from '../components/PricingPlan.vue' export * from '../components/PricingPlans.vue' export * from '../components/PricingTable.vue' -export * from '../components/Popover.vue' export * from '../components/Progress.vue' export * from '../components/RadioGroup.vue' export * from '../components/Select.vue' diff --git a/src/theme/empty.ts b/src/theme/empty.ts new file mode 100644 index 0000000000..cba9ce7857 --- /dev/null +++ b/src/theme/empty.ts @@ -0,0 +1,48 @@ +export default { + slots: { + root: 'relative isolate rounded-lg', + container: 'flex flex-col items-center gap-6 p-4 sm:p-6', + content: 'mx-auto', + wrapper: 'max-w-sm flex flex-col items-center gap-y-2 text-center', + icon: 'size-8', + title: 'text-2xl font-pretty font-bold text-highlighted tracking-tight', + description: 'text-base text-muted text-balance', + actions: 'flex flex-wrap items-center justify-center gap-x-2 gap-y-3' + }, + variants: { + variant: { + solid: { + root: 'bg-inverted text-inverted', + title: 'text-inverted', + description: 'text-dimmed' + }, + outline: { + root: 'bg-default ring ring-default', + description: 'text-muted' + }, + soft: { + root: 'bg-elevated/50', + description: 'text-toned' + }, + subtle: { + root: 'bg-elevated/50 ring ring-default', + description: 'text-toned' + }, + ghost: { + description: 'text-muted' + }, + naked: { + container: 'p-0 sm:p-0', + description: 'text-muted' + } + }, + content: { + default: '', + icon: '' + } + }, + defaultVariants: { + variant: 'subtle', + content: 'icon' + } +} diff --git a/src/theme/index.ts b/src/theme/index.ts index f27b4d0414..2d40b33607 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -39,6 +39,7 @@ export { default as dashboardSidebarToggle } from './dashboard-sidebar-toggle' export { default as dashboardToolbar } from './dashboard-toolbar' export { default as drawer } from './drawer' export { default as dropdownMenu } from './dropdown-menu' +export { default as empty } from './empty' export { default as error } from './error' export { default as fieldGroup } from './field-group' export { default as fileUpload } from './file-upload' diff --git a/test/components/Empty.spec.ts b/test/components/Empty.spec.ts new file mode 100644 index 0000000000..bd6a4203bc --- /dev/null +++ b/test/components/Empty.spec.ts @@ -0,0 +1,18 @@ +import { describe, it, expect } from 'vitest' +import Empty from '../../src/runtime/components/Empty.vue' +import type { EmptyProps, EmptySlots } from '../../src/runtime/components/Empty.vue' +import ComponentRender from '../component-render' + +describe('Empty', () => { + it.each([ + // Props + ['with as', { props: { as: 'section' } }], + ['with class', { props: { class: '' } }], + ['with ui', { props: { ui: {} } }], + // Slots + ['with default slot', { slots: { default: () => 'Default slot' } }] + ])('renders %s correctly', async (nameOrHtml: string, options: { props?: EmptyProps, slots?: Partial }) => { + const html = await ComponentRender(nameOrHtml, options, Empty) + expect(html).toMatchSnapshot() + }) +}) From 142788adfc8e96da3d00aef332578a7ebb06fdc7 Mon Sep 17 00:00:00 2001 From: Larra Su Date: Fri, 10 Oct 2025 17:16:26 -0700 Subject: [PATCH 02/10] up --- .../content/examples/empty/EmptyExample.vue | 114 + docs/content/docs/2.components/empty.md | 152 +- .../nuxt/app/pages/components/empty.vue | 110 +- src/runtime/components/Empty.vue | 20 +- src/theme/empty.ts | 16 +- test/components/Empty.spec.ts | 11 +- .../__snapshots__/BlogPost-vue.spec.ts.snap | 34 +- .../__snapshots__/BlogPost.spec.ts.snap | 34 +- .../__snapshots__/Calendar-vue.spec.ts.snap | 2612 ++++++++--------- .../__snapshots__/Calendar.spec.ts.snap | 2612 ++++++++--------- .../ChangelogVersion-vue.spec.ts.snap | 4 +- .../ChangelogVersion.spec.ts.snap | 4 +- .../__snapshots__/Empty-vue.spec.ts.snap | 171 ++ .../__snapshots__/Empty.spec.ts.snap | 171 ++ 14 files changed, 3282 insertions(+), 2783 deletions(-) create mode 100644 docs/app/components/content/examples/empty/EmptyExample.vue create mode 100644 test/components/__snapshots__/Empty-vue.spec.ts.snap create mode 100644 test/components/__snapshots__/Empty.spec.ts.snap diff --git a/docs/app/components/content/examples/empty/EmptyExample.vue b/docs/app/components/content/examples/empty/EmptyExample.vue new file mode 100644 index 0000000000..3eaecd82f2 --- /dev/null +++ b/docs/app/components/content/examples/empty/EmptyExample.vue @@ -0,0 +1,114 @@ + + + diff --git a/docs/content/docs/2.components/empty.md b/docs/content/docs/2.components/empty.md index efb03d1ba2..6b6ad99019 100644 --- a/docs/content/docs/2.components/empty.md +++ b/docs/content/docs/2.components/empty.md @@ -1,17 +1,161 @@ --- title: Empty -description: '' +description: 'A component used to display a placeholder when no data is available.' +category: data links: - label: GitHub icon: i-simple-icons-github to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Empty.vue -navigation.badge: Soon +navigation.badge: New --- ## Usage +::component-preview +:::u-empty +--- +icon: i-lucide-file +title: No projects found +description: Get started by creating a new project. +actions: + - icon: i-lucide-plus + label: New Project + - icon: i-lucide-refresh-cw + label: Refresh + color: neutral + variant: subtle +--- +::: +:: + +### Title + +Use the `title` prop to set the title of the empty state. + +::component-code +--- +props: + title: No projects found +--- +:: + +### Description + +Use the `description` prop to set the description of the empty state. + +::component-code +--- +prettier: true +ignore: + - title +props: + title: No projects found + description: Get started by creating a new project. +--- +:: + +### Icon + +Use the `icon` prop to set the icon of the empty state. + +::component-code +--- +prettier: true +ignore: + - title + - description +props: + icon: i-lucide-file + title: No projects found + description: Get started by creating a new project. +--- +:: + +### Content + +Use the `default` slot to add content to the empty state. + +::component-code +--- +prettier: true +ignore: + - icon + - title + - description + - actions +props: + title: No projects found + description: Get started by creating a new project. + actions: + - icon: i-lucide-plus + label: New Project +slots: + default: | + + +--- +:placeholder{.w-52.h-32} +:: + +### Actions + +Use the `actions` prop to add some [Button](/docs/components/button) actions to the empty state. + +::component-code +--- +prettier: true +ignore: + - icon + - title + - description + - actions +props: + icon: i-lucide-file + title: No projects found + description: Get started by creating a new project. + actions: + - icon: i-lucide-plus + label: New Project +--- +:: + +### Variant + +Use the `variant` prop to change the variant of the empty state. + +::component-code +--- +prettier: true +ignore: + - icon + - title + - description + - actions +props: + variant: ghost + icon: i-lucide-bell + title: No notifications + description: You're all caught up. New notifications will appear here. + actions: + - icon: i-lucide-refresh-cw + label: Refresh + variant: subtle + color: neutral +--- +:: + ## Examples +::component-example +--- +collapse: true +name: 'empty-example' +class: '!p-0' +props: + autofocus: false +--- +:: + ## API ### Props @@ -22,10 +166,6 @@ navigation.badge: Soon :component-slots -### Emits - -:component-emits - ## Theme :component-theme diff --git a/playgrounds/nuxt/app/pages/components/empty.vue b/playgrounds/nuxt/app/pages/components/empty.vue index 59f534f174..28813ca29f 100644 --- a/playgrounds/nuxt/app/pages/components/empty.vue +++ b/playgrounds/nuxt/app/pages/components/empty.vue @@ -9,6 +9,8 @@ const attrs = reactive({ variant: [theme.defaultVariants.variant] }) +const title = 'No projects found' +const description = 'It looks like you haven\'t added any projects. Create one to get started.' const actions: ButtonProps[] = [{ icon: 'i-lucide-plus', label: 'Add Data' @@ -26,110 +28,10 @@ const actions: ButtonProps[] = [{ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/src/runtime/components/Empty.vue b/src/runtime/components/Empty.vue index 7f2b2cab98..d3d8aa6a2f 100644 --- a/src/runtime/components/Empty.vue +++ b/src/runtime/components/Empty.vue @@ -16,10 +16,6 @@ export interface EmptyProps { * @defaultValue 'subtle' */ variant?: Empty['variants']['variant'] - /** - * @defaultValue 'icon' - */ - content?: Empty['variants']['content'] /** * The icon displayed above the title. * @IconifyIcon @@ -51,9 +47,7 @@ import { Primitive } from 'reka-ui' import { useAppConfig } from '#imports' import { tv } from '../utils/tv' -const props = withDefaults(defineProps(), { - content: 'icon' -}) +const props = defineProps() const slots = defineSlots() const appConfig = useAppConfig() as Empty['AppConfig'] @@ -65,10 +59,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {}) diff --git a/src/theme/empty.ts b/src/theme/empty.ts index cba9ce7857..f5f60c7a1a 100644 --- a/src/theme/empty.ts +++ b/src/theme/empty.ts @@ -1,10 +1,11 @@ export default { slots: { - root: 'relative isolate rounded-lg', - container: 'flex flex-col items-center gap-6 p-4 sm:p-6', + root: 'relative isolate w-full rounded-lg space-y-8 p-4 sm:p-6', + container: 'flex flex-col items-center gap-6', content: 'mx-auto', wrapper: 'max-w-sm flex flex-col items-center gap-y-2 text-center', icon: 'size-8', + iconWrapper: 'size-14', title: 'text-2xl font-pretty font-bold text-highlighted tracking-tight', description: 'text-base text-muted text-balance', actions: 'flex flex-wrap items-center justify-center gap-x-2 gap-y-3' @@ -30,19 +31,10 @@ export default { }, ghost: { description: 'text-muted' - }, - naked: { - container: 'p-0 sm:p-0', - description: 'text-muted' } - }, - content: { - default: '', - icon: '' } }, defaultVariants: { - variant: 'subtle', - content: 'icon' + variant: 'subtle' } } diff --git a/test/components/Empty.spec.ts b/test/components/Empty.spec.ts index bd6a4203bc..738d298c27 100644 --- a/test/components/Empty.spec.ts +++ b/test/components/Empty.spec.ts @@ -7,10 +7,19 @@ describe('Empty', () => { it.each([ // Props ['with as', { props: { as: 'section' } }], + ['with icon', { props: { icon: 'i-lucide-file' } }], + ['with title', { props: { title: 'Title' } }], + ['with description', { props: { description: 'Description' } }], + ['with actions', { props: { actions: [{ icon: 'i-lucide-plus', label: 'Add' }] } }], ['with class', { props: { class: '' } }], ['with ui', { props: { ui: {} } }], // Slots - ['with default slot', { slots: { default: () => 'Default slot' } }] + ['with top slot', { slots: { top: () => 'Top slot' } }], + ['with default slot', { slots: { default: () => 'Default slot' } }], + ['with title slot', { slots: { title: () => 'Title slot' } }], + ['with description slot', { slots: { description: () => 'Description slot' } }], + ['with actions slot', { slots: { actions: () => 'Actions slot' } }], + ['with bottom slot', { slots: { bottom: () => 'Bottom slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: EmptyProps, slots?: Partial }) => { const html = await ComponentRender(nameOrHtml, options, Empty) expect(html).toMatchSnapshot() diff --git a/test/components/__snapshots__/BlogPost-vue.spec.ts.snap b/test/components/__snapshots__/BlogPost-vue.spec.ts.snap index fc8a5f7f8f..213c622888 100644 --- a/test/components/__snapshots__/BlogPost-vue.spec.ts.snap +++ b/test/components/__snapshots__/BlogPost-vue.spec.ts.snap @@ -5,7 +5,7 @@ exports[`BlogPost > renders with as correctly 1`] = `
Title
Badge - +

Title

Description
@@ -68,7 +68,7 @@ exports[`BlogPost > renders with authors slot correctly 1`] = `
Title
Badge - +

Title

Description
@@ -116,7 +116,7 @@ exports[`BlogPost > renders with badge slot correctly 1`] = ` "
Title
-
Badge slot
+
Badge slot

Title

Description
@@ -146,7 +146,7 @@ exports[`BlogPost > renders with class correctly 1`] = `
Title
Badge - +

Title

Description
@@ -170,7 +170,7 @@ exports[`BlogPost > renders with date correctly 1`] = `
- +
@@ -222,7 +222,7 @@ exports[`BlogPost > renders with description slot correctly 1`] = `
Title
Badge - +

Title

Description slot
@@ -245,7 +245,7 @@ exports[`BlogPost > renders with footer slot correctly 1`] = `
Title
Badge - +

Title

Description
@@ -268,7 +268,7 @@ exports[`BlogPost > renders with header slot correctly 1`] = `
Header slot
Badge - +

Title

Description
@@ -305,7 +305,7 @@ exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
Title
Badge - +

Title

Description
@@ -328,7 +328,7 @@ exports[`BlogPost > renders with orientation vertical correctly 1`] = `
Title
Badge - +

Title

Description
@@ -365,7 +365,7 @@ exports[`BlogPost > renders with title slot correctly 1`] = `
Title
Badge - +

Title slot

Description
@@ -414,7 +414,7 @@ exports[`BlogPost > renders with ui correctly 1`] = `
Title
Badge - +

Title

Description
@@ -437,7 +437,7 @@ exports[`BlogPost > renders with variant ghost correctly 1`] = `
Title
Badge - +

Title

Description
@@ -460,7 +460,7 @@ exports[`BlogPost > renders with variant naked correctly 1`] = `
Title
Badge - +

Title

Description
@@ -483,7 +483,7 @@ exports[`BlogPost > renders with variant outline correctly 1`] = `
Title
Badge - +

Title

Description
@@ -506,7 +506,7 @@ exports[`BlogPost > renders with variant soft correctly 1`] = `
Title
Badge - +

Title

Description
@@ -529,7 +529,7 @@ exports[`BlogPost > renders with variant subtle correctly 1`] = `
Title
Badge - +

Title

Description
diff --git a/test/components/__snapshots__/BlogPost.spec.ts.snap b/test/components/__snapshots__/BlogPost.spec.ts.snap index 54f4ec9829..4c743d4a06 100644 --- a/test/components/__snapshots__/BlogPost.spec.ts.snap +++ b/test/components/__snapshots__/BlogPost.spec.ts.snap @@ -5,7 +5,7 @@ exports[`BlogPost > renders with as correctly 1`] = `
Title
Badge - +

Title

Description
@@ -68,7 +68,7 @@ exports[`BlogPost > renders with authors slot correctly 1`] = `
Title
Badge - +

Title

Description
@@ -116,7 +116,7 @@ exports[`BlogPost > renders with badge slot correctly 1`] = ` "
Title
-
Badge slot
+
Badge slot

Title

Description
@@ -146,7 +146,7 @@ exports[`BlogPost > renders with class correctly 1`] = `
Title
Badge - +

Title

Description
@@ -170,7 +170,7 @@ exports[`BlogPost > renders with date correctly 1`] = `
- +
@@ -222,7 +222,7 @@ exports[`BlogPost > renders with description slot correctly 1`] = `
Title
Badge - +

Title

Description slot
@@ -245,7 +245,7 @@ exports[`BlogPost > renders with footer slot correctly 1`] = `
Title
Badge - +

Title

Description
@@ -268,7 +268,7 @@ exports[`BlogPost > renders with header slot correctly 1`] = `
Header slot
Badge - +

Title

Description
@@ -305,7 +305,7 @@ exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
Title
Badge - +

Title

Description
@@ -328,7 +328,7 @@ exports[`BlogPost > renders with orientation vertical correctly 1`] = `
Title
Badge - +

Title

Description
@@ -365,7 +365,7 @@ exports[`BlogPost > renders with title slot correctly 1`] = `
Title
Badge - +

Title slot

Description
@@ -414,7 +414,7 @@ exports[`BlogPost > renders with ui correctly 1`] = `
Title
Badge - +

Title

Description
@@ -437,7 +437,7 @@ exports[`BlogPost > renders with variant ghost correctly 1`] = `
Title
Badge - +

Title

Description
@@ -460,7 +460,7 @@ exports[`BlogPost > renders with variant naked correctly 1`] = `
Title
Badge - +

Title

Description
@@ -483,7 +483,7 @@ exports[`BlogPost > renders with variant outline correctly 1`] = `
Title
Badge - +

Title

Description
@@ -506,7 +506,7 @@ exports[`BlogPost > renders with variant soft correctly 1`] = `
Title
Badge - +

Title

Description
@@ -529,7 +529,7 @@ exports[`BlogPost > renders with variant subtle correctly 1`] = `
Title
Badge - +

Title

Description
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap index 897d37eae8..6c639606ba 100644 --- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap +++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Calendar > renders with as correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with class correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with color neutral correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with day slot correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -751,10 +751,10 @@ exports[`Calendar > renders with default value correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -891,7 +891,7 @@ exports[`Calendar > renders with default value correctly 1`] = ` `; exports[`Calendar > renders with disabled correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with heading slot correctly 1`] = ` -"
+"
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with isDateDisabled correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with isDateUnavailable correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -1641,10 +1641,10 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -1781,7 +1781,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = ` `; exports[`Calendar > renders with multiple correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with nextMonth correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with nextYear correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with numberOfMonths correctly 1`] = ` -"
+"
-
January - February 2025
-
Event Date, January - February 2025
+
Event Date, December 2024 - January 2025
" `; exports[`Calendar > renders with prevMonth correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with prevYear correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with range correctly 1`] = ` -"
+"
-
Event Date, January 2025
+
Event Date, December 2024
-
January 2025
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size lg correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size md correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size sm correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size xl correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size xs correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with ui correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -4464,10 +4464,10 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4642,10 +4642,10 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4820,10 +4820,10 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4998,10 +4998,10 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -5138,7 +5138,7 @@ exports[`Calendar > renders with variant subtle correctly 1`] = ` `; exports[`Calendar > renders with week-day slot correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with weekStartsOn correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with weekdayFormat correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without fixedWeeks correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without monthControls correctly 1`] = ` -"
+"
-
January 2025
+
December 2024
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without yearControls correctly 1`] = ` -"
+"
-
January 2025
@@ -6029,147 +6029,147 @@ exports[`Calendar > renders without yearControls correctly 1`] = ` -
29
+
1
-
30
+
2
-
31
+
3
-
1
+
4
-
2
+
5
-
3
+
6
-
4
+
7
-
5
+
8
-
6
+
9
-
7
+
10
-
8
+
11
-
9
+
12
-
10
+
13
-
11
+
14
-
12
+
15
-
13
+
16
-
14
+
17
-
15
+
18
-
16
+
19
-
17
+
20
-
18
+
21
-
19
+
22
-
20
+
23
-
21
+
24
-
22
+
25
-
23
+
26
-
24
+
27
-
25
+
28
-
26
+
29
-
27
+
30
-
28
+
31
-
29
+
1
-
30
+
2
-
31
+
3
-
1
+
4
-
2
+
5
-
3
+
6
-
4
+
7
-
5
+
8
-
6
+
9
-
7
+
10
-
8
+
11
-
Event Date, January 2025
+
Event Date, December 2024
" `; diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap index ecb114b894..559d9c05e7 100644 --- a/test/components/__snapshots__/Calendar.spec.ts.snap +++ b/test/components/__snapshots__/Calendar.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Calendar > renders with as correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with class correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with color neutral correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with day slot correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -751,10 +751,10 @@ exports[`Calendar > renders with default value correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -891,7 +891,7 @@ exports[`Calendar > renders with default value correctly 1`] = ` `; exports[`Calendar > renders with disabled correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with heading slot correctly 1`] = ` -"
+"
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with isDateDisabled correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with isDateUnavailable correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -1641,10 +1641,10 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -1781,7 +1781,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = ` `; exports[`Calendar > renders with multiple correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with nextMonth correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with nextYear correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with numberOfMonths correctly 1`] = ` -"
+"
-
January - February 2025
-
Event Date, January - February 2025
+
Event Date, December 2024 - January 2025
" `; exports[`Calendar > renders with prevMonth correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with prevYear correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with range correctly 1`] = ` -"
+"
-
Event Date, January 2025
+
Event Date, December 2024
-
January 2025
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size lg correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size md correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size sm correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size xl correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with size xs correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with ui correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; @@ -4464,10 +4464,10 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4642,10 +4642,10 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4820,10 +4820,10 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -4998,10 +4998,10 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
30
-
31
+
31
-
1
+
1
2
@@ -5138,7 +5138,7 @@ exports[`Calendar > renders with variant subtle correctly 1`] = ` `; exports[`Calendar > renders with week-day slot correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with weekStartsOn correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders with weekdayFormat correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without fixedWeeks correctly 1`] = ` -"
+"
-
January 2025
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without monthControls correctly 1`] = ` -"
+"
-
January 2025
+
December 2024
-
Event Date, January 2025
+
Event Date, December 2024
" `; exports[`Calendar > renders without yearControls correctly 1`] = ` -"
+"
-
January 2025
@@ -6029,147 +6029,147 @@ exports[`Calendar > renders without yearControls correctly 1`] = ` -
29
+
1
-
30
+
2
-
31
+
3
-
1
+
4
-
2
+
5
-
3
+
6
-
4
+
7
-
5
+
8
-
6
+
9
-
7
+
10
-
8
+
11
-
9
+
12
-
10
+
13
-
11
+
14
-
12
+
15
-
13
+
16
-
14
+
17
-
15
+
18
-
16
+
19
-
17
+
20
-
18
+
21
-
19
+
22
-
20
+
23
-
21
+
24
-
22
+
25
-
23
+
26
-
24
+
27
-
25
+
28
-
26
+
29
-
27
+
30
-
28
+
31
-
29
+
1
-
30
+
2
-
31
+
3
-
1
+
4
-
2
+
5
-
3
+
6
-
4
+
7
-
5
+
8
-
6
+
9
-
7
+
10
-
8
+
11
-
Event Date, January 2025
+
Event Date, December 2024
" `; diff --git a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap index a20c16ad77..0e4eb42e96 100644 --- a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap +++ b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap @@ -174,7 +174,7 @@ exports[`ChangelogVersion > renders with class correctly 1`] = ` exports[`ChangelogVersion > renders with date correctly 1`] = ` "
-