docs: add responsive modal example (#1608)

Author: oneminch

apps/v4/components/demo/DialogResponsive.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/registry/new-york-v4/ui/dialog'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/registry/new-york-v4/ui/drawer'
+import { Input } from '@/registry/new-york-v4/ui/input'
+import { Label } from '@/registry/new-york-v4/ui/label'
+
+const isDesktop = useMediaQuery('(min-width: 640px)')
+
+const Modal = computed(() => ({
+  Root: isDesktop.value ? Dialog : Drawer,
+  Trigger: isDesktop.value ? DialogTrigger : DrawerTrigger,
+  Content: isDesktop.value ? DialogContent : DrawerContent,
+  Header: isDesktop.value ? DialogHeader : DrawerHeader,
+  Title: isDesktop.value ? DialogTitle : DrawerTitle,
+  Description: isDesktop.value ? DialogDescription : DrawerDescription,
+  Footer: isDesktop.value ? DialogFooter : DrawerFooter,
+  Close: isDesktop.value ? DialogClose : DrawerClose,
+}))
+</script>
+
+<template>
+  <component :is="Modal.Root">
+    <component :is="Modal.Trigger" as-child>
+      <Button variant="outline">
+        Open Dialog
+      </Button>
+    </component>
+    <component
+      :is="Modal.Content"
+      class="sm:max-w-md" :class="[
+        { 'px-2 pb-8 *:px-4': !isDesktop },
+      ]"
+    >
+      <component :is="Modal.Header">
+        <component :is="Modal.Title">
+          Share Link
+        </component>
+        <component :is="Modal.Description">
+          Anyone who has this link will be able to view this.
+        </component>
+      </component>
+
+      <div class="flex items-center gap-2">
+        <div class="grid flex-1 gap-2">
+          <Label for="link" class="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            default-value="https://www.shadcn-vue.com/docs/installation"
+            read-only
+          />
+        </div>
+      </div>
+
+      <component :is="Modal.Footer" class="pt-4">
+        <component :is="Modal.Close" as-child>
+          <Button variant="outline">
+            Close
+          </Button>
+        </component>
+      </component>
+    </component>
+  </component>
+</template>

apps/v4/components/demo/index.ts

@@ -44,6 +44,7 @@ export { default as CollapsibleDemo } from './CollapsibleDemo.vue'
 export { default as ComboboxDemo } from './ComboboxDemo.vue'
 // Dialog demos
 export { default as DialogDemo } from './DialogDemo.vue'
+export { default as DialogResponsive } from './DialogResponsive.vue'
 
 // Hover Card demos
 export { default as HoverCardDemo } from './HoverCardDemo.vue'

apps/v4/content/docs/components/dialog.md

@@ -111,6 +111,16 @@ name: DialogForm
 ---
 ::
 
+### Responsive Modal (Dialog & Drawer)
+
+Use a `Drawer` component for smaller viewport sizes and a `Dialog` component otherwise. This can be further made reusable by using slots for various parts of the modal.
+
+::component-preview
+---
+name: DialogResponsive
+---
+::
+
 ## Notes
 
 To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or

apps/v4/content/docs/components/drawer.md

@@ -98,3 +98,15 @@ import {
   </Drawer>
 </template>
 ```
+
+## Example
+
+### Responsive Modal (Dialog & Drawer)
+
+Use a `Drawer` component for smaller viewport sizes and a `Dialog` component otherwise. This can be further made reusable by using slots for various parts of the modal.
+
+::component-preview
+---
+name: DialogResponsive
+---
+::