From 437f9ce4ff952633d7f756a7800ebdd885b6fbf6 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sat, 15 Jun 2024 13:24:22 +0800
Subject: [PATCH] feat: add toast config

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.config.ts                            |  1 +
 app.vue                                  |  8 ++---
 components.json                          |  2 +-
 components/content/CodeCopy.vue          | 11 +++----
 components/ui/toast/Toast.vue            | 38 ++++++++++++------------
 components/ui/toast/ToastAction.vue      | 26 ++++++++--------
 components/ui/toast/ToastClose.vue       | 29 +++++++++---------
 components/ui/toast/ToastDescription.vue | 26 ++++++++--------
 components/ui/toast/ToastProvider.vue    | 12 ++++----
 components/ui/toast/ToastTitle.vue       | 26 ++++++++--------
 components/ui/toast/ToastViewport.vue    | 22 +++++++-------
 components/ui/toast/Toaster.vue          | 16 +++++-----
 components/ui/toast/index.ts             | 36 +++++++++++-----------
 components/ui/toast/use-toast.ts         | 31 +++++++++----------
 composables/useConfig.ts                 |  2 ++
 package.json                             |  2 +-
 16 files changed, 143 insertions(+), 145 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index 99d2054a..f1ea759f 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -67,6 +67,7 @@ export default defineAppConfig({
     main: {
       breadCrumb: true,
       showTitle: true,
+      codeCopyToast: true,
       codeIcon: {
         'package.json': 'vscode-icons:file-type-node',
         'tsconfig.json': 'vscode-icons:file-type-tsconfig',
diff --git a/app.vue b/app.vue
index c71937a3..e826fd8b 100644
--- a/app.vue
+++ b/app.vue
@@ -1,9 +1,7 @@
 <template>
-  <main>
-    <NuxtLoadingIndicator :color="false" class="z-100 bg-primary" />
-    <NuxtPage />
-    <Toaster />
-  </main>
+  <NuxtLoadingIndicator :color="false" class="z-100 bg-primary" />
+  <NuxtPage />
+  <Toaster />
 </template>
 
 <script setup lang="ts">
diff --git a/components.json b/components.json
index 91c859b6..6ac3cfa7 100644
--- a/components.json
+++ b/components.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "typescript": true,
   "tailwind": {
     "config": "tailwind.config.js",
diff --git a/components/content/CodeCopy.vue b/components/content/CodeCopy.vue
index e9495aaa..ce0fcfcc 100644
--- a/components/content/CodeCopy.vue
+++ b/components/content/CodeCopy.vue
@@ -18,9 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/toast/use-toast';
-import { Toaster } from '@/components/ui/toast';
 
 const props = defineProps<{
   code: string;
@@ -34,9 +32,12 @@ const copied = ref(false);
 async function handleClick() {
   await copy(props.code);
   copied.value = true;
-  toast({
-    description: 'Copied to clipboard!',
-  });
+
+  if (useConfig().value.main.codeCopyToast) {
+    toast({
+      description: 'Copied to clipboard!',
+    });
+  }
 }
 
 const checkIconRef = ref<HTMLElement>();
diff --git a/components/ui/toast/Toast.vue b/components/ui/toast/Toast.vue
index b74762cb..22adc593 100644
--- a/components/ui/toast/Toast.vue
+++ b/components/ui/toast/Toast.vue
@@ -1,22 +1,3 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
-import { type ToastProps, toastVariants } from '.'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<ToastProps>()
-
-const emits = defineEmits<ToastRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
 <template>
   <ToastRoot
     v-bind="forwarded"
@@ -26,3 +7,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <slot />
   </ToastRoot>
 </template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue';
+import { type ToastProps, toastVariants } from '.';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastProps>();
+
+const emits = defineEmits<ToastRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
diff --git a/components/ui/toast/ToastAction.vue b/components/ui/toast/ToastAction.vue
index 28ca8c8e..766f607c 100644
--- a/components/ui/toast/ToastAction.vue
+++ b/components/ui/toast/ToastAction.vue
@@ -1,19 +1,19 @@
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
+
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastAction, type ToastActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastAction, type ToastActionProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
-
-<template>
-  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
-    <slot />
-  </ToastAction>
-</template>
diff --git a/components/ui/toast/ToastClose.vue b/components/ui/toast/ToastClose.vue
index ab685a51..9b77481d 100644
--- a/components/ui/toast/ToastClose.vue
+++ b/components/ui/toast/ToastClose.vue
@@ -1,22 +1,21 @@
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <Icon name="lucide:x" class="h-4 w-4" />
+  </ToastClose>
+</template>
+
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastClose, type ToastCloseProps } from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastClose, type ToastCloseProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<ToastCloseProps & {
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
-
-<template>
-  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
-    <X class="h-4 w-4" />
-  </ToastClose>
-</template>
diff --git a/components/ui/toast/ToastDescription.vue b/components/ui/toast/ToastDescription.vue
index 58520378..5c62482d 100644
--- a/components/ui/toast/ToastDescription.vue
+++ b/components/ui/toast/ToastDescription.vue
@@ -1,19 +1,19 @@
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
+
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
-
-<template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
-    <slot />
-  </ToastDescription>
-</template>
diff --git a/components/ui/toast/ToastProvider.vue b/components/ui/toast/ToastProvider.vue
index 340cbd83..f9bcd387 100644
--- a/components/ui/toast/ToastProvider.vue
+++ b/components/ui/toast/ToastProvider.vue
@@ -1,11 +1,11 @@
-<script setup lang="ts">
-import { ToastProvider, type ToastProviderProps } from 'radix-vue'
-
-const props = defineProps<ToastProviderProps>()
-</script>
-
 <template>
   <ToastProvider v-bind="props">
     <slot />
   </ToastProvider>
 </template>
+
+<script setup lang="ts">
+import { ToastProvider, type ToastProviderProps } from 'radix-vue';
+
+const props = defineProps<ToastProviderProps>();
+</script>
diff --git a/components/ui/toast/ToastTitle.vue b/components/ui/toast/ToastTitle.vue
index 0a1dffbe..1e9bd4d0 100644
--- a/components/ui/toast/ToastTitle.vue
+++ b/components/ui/toast/ToastTitle.vue
@@ -1,19 +1,19 @@
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
+
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastTitle, type ToastTitleProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastTitle, type ToastTitleProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
-
-<template>
-  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
-    <slot />
-  </ToastTitle>
-</template>
diff --git a/components/ui/toast/ToastViewport.vue b/components/ui/toast/ToastViewport.vue
index 57deec81..56f1cccf 100644
--- a/components/ui/toast/ToastViewport.vue
+++ b/components/ui/toast/ToastViewport.vue
@@ -1,17 +1,17 @@
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
+
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastViewport, type ToastViewportProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastViewport, type ToastViewportProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
-
-<template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
-</template>
diff --git a/components/ui/toast/Toaster.vue b/components/ui/toast/Toaster.vue
index f86ce40b..2efe5622 100644
--- a/components/ui/toast/Toaster.vue
+++ b/components/ui/toast/Toaster.vue
@@ -1,11 +1,3 @@
-<script setup lang="ts">
-import { isVNode } from 'vue'
-import { useToast } from './use-toast'
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
-
-const { toasts } = useToast()
-</script>
-
 <template>
   <ToastProvider>
     <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
@@ -28,3 +20,11 @@ const { toasts } = useToast()
     <ToastViewport />
   </ToastProvider>
 </template>
+
+<script setup lang="ts">
+import { isVNode } from 'vue';
+import { useToast } from './use-toast';
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.';
+
+const { toasts } = useToast();
+</script>
diff --git a/components/ui/toast/index.ts b/components/ui/toast/index.ts
index a1949157..233d3f20 100644
--- a/components/ui/toast/index.ts
+++ b/components/ui/toast/index.ts
@@ -1,20 +1,20 @@
-import type { ToastRootProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
+import type { ToastRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
 
-export { default as Toaster } from './Toaster.vue'
-export { default as Toast } from './Toast.vue'
-export { default as ToastViewport } from './ToastViewport.vue'
-export { default as ToastAction } from './ToastAction.vue'
-export { default as ToastClose } from './ToastClose.vue'
-export { default as ToastTitle } from './ToastTitle.vue'
-export { default as ToastDescription } from './ToastDescription.vue'
-export { default as ToastProvider } from './ToastProvider.vue'
-export { toast, useToast } from './use-toast'
+import { type VariantProps, cva } from 'class-variance-authority';
 
-import { type VariantProps, cva } from 'class-variance-authority'
+export { default as Toaster } from './Toaster.vue';
+export { default as Toast } from './Toast.vue';
+export { default as ToastViewport } from './ToastViewport.vue';
+export { default as ToastAction } from './ToastAction.vue';
+export { default as ToastClose } from './ToastClose.vue';
+export { default as ToastTitle } from './ToastTitle.vue';
+export { default as ToastDescription } from './ToastDescription.vue';
+export { default as ToastProvider } from './ToastProvider.vue';
+export { toast, useToast } from './use-toast';
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
@@ -27,12 +27,12 @@ export const toastVariants = cva(
       variant: 'default',
     },
   },
-)
+);
 
-type ToastVariants = VariantProps<typeof toastVariants>
+type ToastVariants = VariantProps<typeof toastVariants>;
 
 export interface ToastProps extends ToastRootProps {
-  class?: HTMLAttributes['class']
-  variant?: ToastVariants['variant']
-  onOpenChange?: ((value: boolean) => void) | undefined
+  class?: HTMLAttributes['class'];
+  variant?: ToastVariants['variant'];
+  onOpenChange?: ((value: boolean) => void) | undefined;
 }
diff --git a/components/ui/toast/use-toast.ts b/components/ui/toast/use-toast.ts
index 9ad9eea9..6d610f13 100644
--- a/components/ui/toast/use-toast.ts
+++ b/components/ui/toast/use-toast.ts
@@ -2,8 +2,8 @@ import { computed, ref } from 'vue';
 import type { Component, VNode } from 'vue';
 import type { ToastProps } from '.';
 
-const TOAST_LIMIT = 5;
-const TOAST_REMOVE_DELAY = 3000;
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 export type StringOrVNode =
   | string
@@ -57,7 +57,7 @@ interface State {
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
-function addToRemoveQueue(toastId: string, duration: number) {
+function addToRemoveQueue(toastId: string) {
   if (toastTimeouts.has(toastId))
     return;
 
@@ -67,7 +67,7 @@ function addToRemoveQueue(toastId: string, duration: number) {
       type: actionTypes.REMOVE_TOAST,
       toastId,
     });
-  }, duration);
+  }, TOAST_REMOVE_DELAY);
 
   toastTimeouts.set(toastId, timeout);
 }
@@ -92,13 +92,10 @@ function dispatch(action: Action) {
       const { toastId } = action;
 
       if (toastId) {
-        const toast = state.value.toasts.find(t => t.id === toastId);
-        if (toast) {
-          addToRemoveQueue(toastId, toast.duration ?? TOAST_REMOVE_DELAY);
-        }
+        addToRemoveQueue(toastId);
       } else {
         state.value.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id, toast.duration ?? TOAST_REMOVE_DELAY);
+          addToRemoveQueue(toast.id);
         });
       }
 
@@ -114,7 +111,11 @@ function dispatch(action: Action) {
     }
 
     case actionTypes.REMOVE_TOAST:
-      state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId);
+      if (action.toastId === undefined)
+        state.value.toasts = [];
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId);
+
       break;
   }
 }
@@ -127,12 +128,12 @@ function useToast() {
   };
 }
 
-type Toast = Omit<ToasterToast, 'id'> & { duration?: number };
+type Toast = Omit<ToasterToast, 'id'>;
 
 function toast(props: Toast) {
   const id = genId();
 
-  const update = (props: Partial<ToasterToast>) =>
+  const update = (props: ToasterToast) =>
     dispatch({
       type: actionTypes.UPDATE_TOAST,
       toast: { ...props, id },
@@ -153,10 +154,6 @@ function toast(props: Toast) {
     },
   });
 
-  setTimeout(() => {
-    dismiss();
-  }, props.duration ?? TOAST_REMOVE_DELAY);
-
   return {
     id,
     dismiss,
@@ -164,4 +161,4 @@ function toast(props: Toast) {
   };
 }
 
-export { state, useToast, toast };
+export { toast, useToast };
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
index 9ffba569..46c7111b 100644
--- a/composables/useConfig.ts
+++ b/composables/useConfig.ts
@@ -38,6 +38,7 @@ const defaultConfig: {
   main: {
     breadCrumb: boolean;
     showTitle: boolean;
+    codeCopyToast: boolean;
     codeIcon: {
       [key: string]: string;
     };
@@ -89,6 +90,7 @@ const defaultConfig: {
   main: {
     breadCrumb: true,
     showTitle: true,
+    codeCopyToast: true,
     codeIcon: {
       'package.json': 'vscode-icons:file-type-node',
       'tsconfig.json': 'vscode-icons:file-type-tsconfig',
diff --git a/package.json b/package.json
index e27c025a..3cc93ebe 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": "Tony Zhang <zhangtianli2006@gmail.com>",
   "license": "MIT",
   "homepage": "https://shadcn-docs-nuxt.vercel.app/",