From abfd0ede036fa2953f9abc841d77ac71bbd3bba9 Mon Sep 17 00:00:00 2001 From: Sigve Hansen Date: Tue, 17 Jun 2025 16:56:33 +0200 Subject: [PATCH 1/3] fix(Toaster): smoother visibility transition for stacked toasts (#4367) --- src/theme/toaster.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index a9355865..cbc8f5c8 100644 --- a/src/theme/toaster.ts +++ b/src/theme/toaster.ts @@ -1,7 +1,7 @@ export default { slots: { viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out' + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out' }, variants: { position: { From 04f12adc5b6124c8371c256d2c40df2be832e6e2 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 18 Jun 2025 14:16:54 +0200 Subject: [PATCH 2/3] docs(examples): use `useClipboard` instead of `navigator.clipboard` --- .../examples/input/InputCopyButtonExample.vue | 14 ++++---------- .../content/examples/table/TableExample.vue | 4 +++- .../examples/table/TableRowActionsExample.vue | 4 +++- .../content/examples/table/TableSlotsExample.vue | 5 ++++- playground/app/pages/components/table.vue | 4 +++- 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/docs/app/components/content/examples/input/InputCopyButtonExample.vue b/docs/app/components/content/examples/input/InputCopyButtonExample.vue index aa788d1c..985a2bb1 100644 --- a/docs/app/components/content/examples/input/InputCopyButtonExample.vue +++ b/docs/app/components/content/examples/input/InputCopyButtonExample.vue @@ -1,15 +1,9 @@ diff --git a/docs/app/components/content/examples/table/TableExample.vue b/docs/app/components/content/examples/table/TableExample.vue index 614f79d5..ae1bfc08 100644 --- a/docs/app/components/content/examples/table/TableExample.vue +++ b/docs/app/components/content/examples/table/TableExample.vue @@ -2,6 +2,7 @@ import { h, resolveComponent } from 'vue' import { upperFirst } from 'scule' import type { TableColumn } from '@nuxt/ui' +import { useClipboard } from '@vueuse/core' const UButton = resolveComponent('UButton') const UCheckbox = resolveComponent('UCheckbox') @@ -9,6 +10,7 @@ const UBadge = resolveComponent('UBadge') const UDropdownMenu = resolveComponent('UDropdownMenu') const toast = useToast() +const { copy } = useClipboard() type Payment = { id: string @@ -220,7 +222,7 @@ const columns: TableColumn[] = [{ }, { label: 'Copy payment ID', onSelect() { - navigator.clipboard.writeText(row.original.id) + copy(row.original.id) toast.add({ title: 'Payment ID copied to clipboard!', diff --git a/docs/app/components/content/examples/table/TableRowActionsExample.vue b/docs/app/components/content/examples/table/TableRowActionsExample.vue index 7d15b200..a677dcb6 100644 --- a/docs/app/components/content/examples/table/TableRowActionsExample.vue +++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue @@ -2,12 +2,14 @@ import { h, resolveComponent } from 'vue' import type { TableColumn } from '@nuxt/ui' import type { Row } from '@tanstack/vue-table' +import { useClipboard } from '@vueuse/core' const UButton = resolveComponent('UButton') const UBadge = resolveComponent('UBadge') const UDropdownMenu = resolveComponent('UDropdownMenu') const toast = useToast() +const { copy } = useClipboard() type Payment = { id: string @@ -119,7 +121,7 @@ function getRowItems(row: Row) { }, { label: 'Copy payment ID', onSelect() { - navigator.clipboard.writeText(row.original.id) + copy(row.original.id) toast.add({ title: 'Payment ID copied to clipboard!', diff --git a/docs/app/components/content/examples/table/TableSlotsExample.vue b/docs/app/components/content/examples/table/TableSlotsExample.vue index 6288d268..cc654ca7 100644 --- a/docs/app/components/content/examples/table/TableSlotsExample.vue +++ b/docs/app/components/content/examples/table/TableSlotsExample.vue @@ -1,5 +1,6 @@