feat: add toast config

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

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',

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">

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",

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>();

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>

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>

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>

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>

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>

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>

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>

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>

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;
 }