feat: add toast (#122)

* feat: add toast * feat: add new york version * feat: add `VNode` type to toast description * docs: use `toast` in form demos * chore: run build registry * docs: update announcement component, menu label * refactor: change 'onUpdate:open' to 'onOpenChange' a more friendlier name --------- Co-authored-by: Nik <dev@nkutinha.slmail.me> Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com> Co-authored-by: zernonia <zernonia@gmail.com>
unovue · Nov 3, 2023 · ef4609a · ef4609a
1 parent a4774ff
commit ef4609a
Show file tree

Hide file tree

Showing 67 changed files with 1,334 additions and 87 deletions.
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -3,6 +3,7 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
+import { announcementConfig } from '../config/site'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import GitHubIcon from '~icons/radix-icons/github-logo'
 
@@ -16,12 +17,12 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
 <template>
   <PageHeader class="page-header pb-8">
     <a
-      href="/docs/components/form"
+      :href="announcementConfig.link"
       class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
     >
-      🎉   <Separator class="mx-2 h-4" orientation="vertical" />
-      <span class="sm:hidden">New form & pagination component</span>
-      <span class="hidden sm:inline">New form & pagination component
+      {{ announcementConfig.icon }}   <Separator class="mx-2 h-4" orientation="vertical" />
+      <span class="sm:hidden">{{ announcementConfig.title }}</span>
+      <span class="hidden sm:inline">{{ announcementConfig.title }}
       </span>
       <!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
     </a>

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
@@ -216,7 +216,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Form',
           href: '/docs/components/form',
-          label: 'New',
           items: [],
         },
         {
@@ -247,7 +246,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Pagination',
           href: '/docs/components/pagination',
-          label: 'New',
           items: [],
         },
         {
@@ -315,13 +313,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/textarea',
           items: [],
         },
-        // {
-        //   title: "Toast",
-        //   href: "#",
-        //   label: "Soon",
-        //   disabled: true,
-        //   items: []
-        // },
+        {
+          title: 'Toast',
+          href: '/docs/components/toast',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Toggle',
           href: '/docs/components/toggle',

diff --git a/apps/www/.vitepress/theme/config/site.ts b/apps/www/.vitepress/theme/config/site.ts
@@ -12,3 +12,9 @@ export const siteConfig = {
   },
   keywords: 'shadcn,Vue,Nuxt,Vue Components,TailwindCSS,Radix Vue',
 }
+
+export const announcementConfig = {
+  icon: '✨',
+  title: 'New Toast compoent',
+  link: '/docs/components/toast',
+}
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -3,6 +3,7 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
+import { announcementConfig } from '../config/site'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
@@ -14,13 +15,13 @@ import { cn } from '@/lib/utils'
   <div class="container relative">
     <PageHeader class="page-header pb-8">
       <a
-        href="/docs/components/form"
+        :href="announcementConfig.link"
         class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
       >
-        🎉 <Separator class="mx-2 h-4" orientation="vertical" />
-        <span class="sm:hidden">New form & pagination component</span>
+        {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
+        <span class="sm:hidden">{{ announcementConfig.title }}</span>
         <span class="hidden sm:inline">
-          New form & pagination component
+          {{ announcementConfig.title }}
         </span>
         <ArrowRightIcon class="ml-1 h-4 w-4" />
       </a>

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -12,11 +12,12 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 
 import { Button } from '@/lib/registry/default/ui/button'
 import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import TablerBrandX from '~icons/tabler/brand-x'
 import RadixIconsMoon from '~icons/radix-icons/moon'
 import RadixIconsSun from '~icons/radix-icons/sun'
 import { useConfigStore } from '@/stores/config'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
+import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
+import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 
 import File from '~icons/radix-icons/file'
 import Circle from '~icons/radix-icons/circle'
@@ -279,5 +280,7 @@ watch(() => $route.path, (n) => {
         </Command>
       </DialogContent>
     </Dialog>
+    <DefaultToaster />
+    <NewYorkToaster />
   </div>
 </template>