From 7d51a9e479cb6105ea37759c5cd67ff9f7702c49 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 6 May 2025 17:36:46 +0200 Subject: [PATCH 01/24] fix(Calendar): wrong color for today date with `neutral` color Resolves #4084 Possible regression of #3629 --- src/theme/calendar.ts | 2 +- .../__snapshots__/Calendar-vue.spec.ts.snap | 84 +++++++++---------- .../__snapshots__/Calendar.spec.ts.snap | 84 +++++++++---------- 3 files changed, 85 insertions(+), 85 deletions(-) diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts index ba3ec638..4b192c1b 100644 --- a/src/theme/calendar.ts +++ b/src/theme/calendar.ts @@ -22,7 +22,7 @@ export default (options: Required) => ({ }])), neutral: { headCell: 'text-highlighted', - cellTrigger: 'focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-inverted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10' + cellTrigger: 'focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10' } }, size: { diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap index 84a7eae3..a54e4f64 100644 --- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap +++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap @@ -389,140 +389,140 @@ exports[`Calendar > renders with color neutral correctly 1`] = ` -
29
+
29
-
30
+
30
-
31
+
31
-
1
+
1
-
2
+
2
-
3
+
3
-
4
+
4
-
5
+
5
-
6
+
6
-
7
+
7
-
8
+
8
-
9
+
9
-
10
+
10
-
11
+
11
-
12
+
12
-
13
+
13
-
14
+
14
-
15
+
15
-
16
+
16
-
17
+
17
-
18
+
18
-
19
+
19
-
20
+
20
-
21
+
21
-
22
+
22
-
23
+
23
-
24
+
24
-
25
+
25
-
26
+
26
-
27
+
27
-
28
+
28
-
29
+
29
-
30
+
30
-
31
+
31
-
1
+
1
-
2
+
2
-
3
+
3
-
4
+
4
-
5
+
5
-
6
+
6
-
7
+
7
-
8
+
8
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap index de8a4096..83df242f 100644 --- a/test/components/__snapshots__/Calendar.spec.ts.snap +++ b/test/components/__snapshots__/Calendar.spec.ts.snap @@ -389,140 +389,140 @@ exports[`Calendar > renders with color neutral correctly 1`] = ` -
29
+
29
-
30
+
30
-
31
+
31
-
1
+
1
-
2
+
2
-
3
+
3
-
4
+
4
-
5
+
5
-
6
+
6
-
7
+
7
-
8
+
8
-
9
+
9
-
10
+
10
-
11
+
11
-
12
+
12
-
13
+
13
-
14
+
14
-
15
+
15
-
16
+
16
-
17
+
17
-
18
+
18
-
19
+
19
-
20
+
20
-
21
+
21
-
22
+
22
-
23
+
23
-
24
+
24
-
25
+
25
-
26
+
26
-
27
+
27
-
28
+
28
-
29
+
29
-
30
+
30
-
31
+
31
-
1
+
1
-
2
+
2
-
3
+
3
-
4
+
4
-
5
+
5
-
6
+
6
-
7
+
7
-
8
+
8
From 4c1093bde470c61a891921b6f09e9ee44a03f5c8 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 7 May 2025 10:51:46 +0200 Subject: [PATCH 02/24] docs(examples): add missing `@vueuse/core` imports --- .../command-palette/CommandPaletteIgnoreFilterExample.vue | 2 ++ .../examples/input-menu/InputMenuIgnoreFilterExample.vue | 1 + .../examples/select-menu/SelectMenuIgnoreFilterExample.vue | 1 + 3 files changed, 4 insertions(+) diff --git a/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue b/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue index fac49f95..2a7afdc0 100644 --- a/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue +++ b/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue @@ -1,4 +1,6 @@ + + diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md index 5a5c01de..f74e4ed3 100644 --- a/docs/content/3.components/table.md +++ b/docs/content/3.components/table.md @@ -260,6 +260,30 @@ You can use the `expanded` prop to control the expandable state of the rows (can You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column. :: +### With grouped rows + +You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping). + +#### Important parts: + +* Add prop `grouping` to `UTable` component with an array of column ids you want to group by. +* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own. +* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot. +* Use `aggregateFn` on column definition to define how to aggregate the rows. +* `agregatedCell` renderer on column definition only works if there is no `cell` renderer. + +::component-example +--- +prettier: true +collapse: true +name: 'table-grouped-rows-example' +highlights: + - 159 + - 169 +class: '!p-0' +--- +:: + ### With row selection You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection). From 404359a6ca09d1d0163def892db11f2729d61df2 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 7 May 2025 15:57:12 +0200 Subject: [PATCH 05/24] chore(github): improve v3 issue templates --- .github/ISSUE_TEMPLATE/bug-report-v3.yml | 4 ++-- .github/ISSUE_TEMPLATE/feature-request-v3.yml | 2 +- .github/ISSUE_TEMPLATE/question-v3.yml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report-v3.yml b/.github/ISSUE_TEMPLATE/bug-report-v3.yml index e662c767..1e1cf964 100644 --- a/.github/ISSUE_TEMPLATE/bug-report-v3.yml +++ b/.github/ISSUE_TEMPLATE/bug-report-v3.yml @@ -5,7 +5,7 @@ body: - type: markdown attributes: value: | - Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). + Before reporting a bug, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). - type: textarea id: env attributes: @@ -44,7 +44,7 @@ body: id: reproduction attributes: label: Reproduction - description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it. + description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided, it will be closed automatically after a while. placeholder: https://github.com/my/reproduction validations: required: true diff --git a/.github/ISSUE_TEMPLATE/feature-request-v3.yml b/.github/ISSUE_TEMPLATE/feature-request-v3.yml index ee6dba5e..89596ac7 100644 --- a/.github/ISSUE_TEMPLATE/feature-request-v3.yml +++ b/.github/ISSUE_TEMPLATE/feature-request-v3.yml @@ -5,7 +5,7 @@ body: - type: markdown attributes: value: | - Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). + Before requesting a feature, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). - type: textarea id: description attributes: diff --git a/.github/ISSUE_TEMPLATE/question-v3.yml b/.github/ISSUE_TEMPLATE/question-v3.yml index e05cf13e..149c749b 100644 --- a/.github/ISSUE_TEMPLATE/question-v3.yml +++ b/.github/ISSUE_TEMPLATE/question-v3.yml @@ -5,7 +5,7 @@ body: - type: markdown attributes: value: | - Before asking a question, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). + Before asking a question, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3). - type: textarea id: description attributes: From 3a71256d593fb5202ccf177ae184caced8df5106 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 7 May 2025 15:57:28 +0200 Subject: [PATCH 06/24] docs(contributions): update content url --- docs/content/1.getting-started/contribution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/contribution.md b/docs/content/1.getting-started/contribution.md index 1aecf5d3..bded4c57 100644 --- a/docs/content/1.getting-started/contribution.md +++ b/docs/content/1.getting-started/contribution.md @@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc ### Documentation -The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Content v3 Docs](https://content3.nuxt.dev/docs/getting-started) for details on how it works. Here's a breakdown of its structure: +The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started) for details on how it works. Here's a breakdown of its structure: ```bash ├── app/ From a655da1394fc2c073c3d4fe0ebf31ba1a3c9019b Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 7 May 2025 15:58:35 +0200 Subject: [PATCH 07/24] chore(github): add reproduire workflow --- .github/reproduire/needs-reproduction.md | 30 ++++++++++++++++++++++++ .github/workflows/reproduire.yml | 17 ++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 .github/reproduire/needs-reproduction.md create mode 100644 .github/workflows/reproduire.yml diff --git a/.github/reproduire/needs-reproduction.md b/.github/reproduire/needs-reproduction.md new file mode 100644 index 00000000..7604e82b --- /dev/null +++ b/.github/reproduire/needs-reproduction.md @@ -0,0 +1,30 @@ +Would you be able to provide a [reproduction](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction)? 🙏 + +
+More info + +### Why do I need to provide a reproduction? + +Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. + +### What will happen? + +If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. + +If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), they will be closed automatically after a while. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. + +### How can I create a reproduction? + +We have templates to create a minimal reproduction: + +* **Nuxt**: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks +* **Vue**: https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn + +Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). + +You might also find these other articles interesting and/or helpful: + +- [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) +- [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve) + +
\ No newline at end of file diff --git a/.github/workflows/reproduire.yml b/.github/workflows/reproduire.yml new file mode 100644 index 00000000..daf6aea8 --- /dev/null +++ b/.github/workflows/reproduire.yml @@ -0,0 +1,17 @@ +name: reproduire + +on: + issues: + types: [labeled] + +permissions: + issues: write + +jobs: + reproduire: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: Hebilicious/reproduire@v1 + with: + label: needs-reproduction # Optional, will default to this value. From e6e510b848d995a286a51d50a120d67483e11232 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 7 May 2025 17:23:27 +0200 Subject: [PATCH 08/24] fix(components): `class` should have priority over `ui` prop --- cli/templates.mjs | 4 ++-- docs/content/1.getting-started/3.theme.md | 2 +- src/runtime/components/Accordion.vue | 2 +- src/runtime/components/Alert.vue | 2 +- src/runtime/components/Avatar.vue | 2 +- src/runtime/components/AvatarGroup.vue | 2 +- src/runtime/components/Badge.vue | 2 +- src/runtime/components/Breadcrumb.vue | 2 +- src/runtime/components/Button.vue | 2 +- src/runtime/components/Calendar.vue | 2 +- src/runtime/components/Card.vue | 2 +- src/runtime/components/Carousel.vue | 2 +- src/runtime/components/Checkbox.vue | 2 +- src/runtime/components/CheckboxGroup.vue | 2 +- src/runtime/components/Chip.vue | 2 +- src/runtime/components/Collapsible.vue | 2 +- src/runtime/components/ColorPicker.vue | 2 +- src/runtime/components/CommandPalette.vue | 2 +- src/runtime/components/FormField.vue | 2 +- src/runtime/components/Input.vue | 2 +- src/runtime/components/InputMenu.vue | 2 +- src/runtime/components/InputNumber.vue | 2 +- src/runtime/components/NavigationMenu.vue | 2 +- src/runtime/components/Pagination.vue | 2 +- src/runtime/components/PinInput.vue | 2 +- src/runtime/components/Progress.vue | 2 +- src/runtime/components/RadioGroup.vue | 2 +- src/runtime/components/Select.vue | 2 +- src/runtime/components/SelectMenu.vue | 2 +- src/runtime/components/Separator.vue | 2 +- src/runtime/components/Slider.vue | 2 +- src/runtime/components/Stepper.vue | 2 +- src/runtime/components/Switch.vue | 2 +- src/runtime/components/Table.vue | 2 +- src/runtime/components/Tabs.vue | 2 +- src/runtime/components/Textarea.vue | 2 +- src/runtime/components/Toast.vue | 2 +- src/runtime/components/Toaster.vue | 2 +- src/runtime/components/Tree.vue | 2 +- 39 files changed, 40 insertions(+), 40 deletions(-) diff --git a/cli/templates.mjs b/cli/templates.mjs index 4fc11c96..e7b3e56d 100644 --- a/cli/templates.mjs +++ b/cli/templates.mjs @@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} @@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} ` } diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 6f80a867..ac6d2db3 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -973,7 +973,7 @@ export default { ```vue [src/runtime/components/Card.vue]