Dialog

'use client'

import { useState } from 'react'
import { Button } from '@/components/button'
import { Dialog, DialogActions, DialogBody, DialogDescription, DialogTitle } from '@/components/dialog'
import { Field, Label } from '@/components/fieldset'
import { Input } from '@/components/input'

export default function Example() {
  let [isOpen, setIsOpen] = useState(false)
  let [endpoints, setEndpoints] = useState<string[]>([])

  function addEndpoint(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setEndpoints([...endpoints, String(new FormData(event.currentTarget).get('url'))])
    setIsOpen(false)
  }

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)}>
        Add endpoint
      </Button>
      <ul role="list">
        {endpoints.map((endpoint) => (
          <li key={endpoint}>{endpoint}</li>
        ))}
      </ul>
      <Dialog open={isOpen} onClose={setIsOpen}>
        <DialogTitle>Add a webhook endpoint</DialogTitle>
        <DialogDescription>
          Northwind sends a signed POST request to this URL for every event you subscribe to.
        </DialogDescription>
        <form onSubmit={addEndpoint}>
          <DialogBody>
            <Field>
              <Label>Endpoint URL</Label>
              <Input type="url" name="url" required placeholder="https://api.example.com/webhooks" />
            </Field>
          </DialogBody>
          <DialogActions>
            <Button plain onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button type="submit">Add endpoint</Button>
          </DialogActions>
        </form>
      </Dialog>
    </>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Button from '@/components/button.vue'
import Dialog from '@/components/dialog.vue'
import DialogActions from '@/components/dialog-actions.vue'
import DialogBody from '@/components/dialog-body.vue'
import DialogDescription from '@/components/dialog-description.vue'
import DialogTitle from '@/components/dialog-title.vue'
import Field from '@/components/field.vue'
import Input from '@/components/input.vue'
import Label from '@/components/label.vue'

const isOpen = ref(false)
const endpoints = ref<string[]>([])

function addEndpoint(event: Event) {
  const form = event.currentTarget as HTMLFormElement
  endpoints.value = [...endpoints.value, String(new FormData(form).get('url'))]
  isOpen.value = false
}
</script>

<template>
  <Button type="button" @click="isOpen = true">Add endpoint</Button>
  <ul role="list">
    <li v-for="endpoint in endpoints" :key="endpoint">{{ endpoint }}</li>
  </ul>
  <Dialog :open="isOpen" @close="isOpen = false">
    <DialogTitle>Add a webhook endpoint</DialogTitle>
    <DialogDescription>
      Northwind sends a signed POST request to this URL for every event you subscribe to.
    </DialogDescription>
    <form @submit.prevent="addEndpoint">
      <DialogBody>
        <Field>
          <Label>Endpoint URL</Label>
          <Input type="url" name="url" required placeholder="https://api.example.com/webhooks" />
        </Field>
      </DialogBody>
      <DialogActions>
        <Button plain @click="isOpen = false">Cancel</Button>
        <Button type="submit">Add endpoint</Button>
      </DialogActions>
    </form>
  </Dialog>
</template>

<Dropdown>
  <DropdownButton outline>
    Endpoints
    <ChevronDownIcon />
  </DropdownButton>
  <DropdownMenu>
    <DropdownItem onClick={() => setIsOpen(true)}>Add endpoint</DropdownItem>
    <DropdownItem onClick={sendTestEvent}>Send test event</DropdownItem>
  </DropdownMenu>
</Dropdown>

<Dialog open={isOpen} onClose={setIsOpen}>
  <DialogTitle>Add a webhook endpoint</DialogTitle>
  {/* ... */}
</Dialog>

<script setup lang="ts">
import { ref } from 'vue'
import Dialog from '@/components/dialog.vue'
import DialogTitle from '@/components/dialog-title.vue'
import Dropdown from '@/components/dropdown.vue'
import DropdownButton from '@/components/dropdown-button.vue'
import DropdownItem from '@/components/dropdown-item.vue'
import DropdownMenu from '@/components/dropdown-menu.vue'
import { ChevronDownIcon } from '@heroicons/vue/16/solid'

const isOpen = ref(false)
</script>

<template>
  <Dropdown>
    <DropdownButton outline>
      Endpoints
      <ChevronDownIcon />
    </DropdownButton>
    <DropdownMenu>
      <DropdownItem @click="isOpen = true">Add endpoint</DropdownItem>
      <DropdownItem>Send test event</DropdownItem>
    </DropdownMenu>
  </Dropdown>

  <Dialog :open="isOpen" @close="isOpen = false">
    <DialogTitle>Add a webhook endpoint</DialogTitle>
    <!-- ... -->
  </Dialog>
</template>

<Dialog size="xl" open={isOpen} onClose={setIsOpen}>
  <DialogTitle>Invite a member to northwind</DialogTitle>
  <DialogDescription>They get an email with a link that stays valid for 7 days.</DialogDescription>
  <form onSubmit={sendInvite}>
    <DialogBody>
      <div className="grid gap-6 sm:grid-cols-[1fr_10rem] sm:gap-4">
        <Field>
          <Label>Email</Label>
          <Input type="email" name="email" required placeholder="aissatou@northwind.dev" />
        </Field>
        <Field>
          <Label>Role</Label>
          <Select name="role" defaultValue="developer">
            <option value="admin">Admin</option>
            <option value="developer">Developer</option>
            <option value="billing">Billing</option>
          </Select>
        </Field>
      </div>
    </DialogBody>
    <DialogActions>
      <Button plain onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button type="submit">Send invite</Button>
    </DialogActions>
  </form>
</Dialog>

<Dialog size="xl" :open="isOpen" @close="isOpen = false">
  <DialogTitle>Invite a member to northwind</DialogTitle>
  <DialogDescription>They get an email with a link that stays valid for 7 days.</DialogDescription>
  <form @submit.prevent="sendInvite">
    <DialogBody>
      <div class="grid gap-6 sm:grid-cols-[1fr_10rem] sm:gap-4">
        <Field>
          <Label>Email</Label>
          <Input type="email" name="email" required placeholder="aissatou@northwind.dev" />
        </Field>
        <Field>
          <Label>Role</Label>
          <Select v-model="role" name="role">
            <option value="admin">Admin</option>
            <option value="developer">Developer</option>
            <option value="billing">Billing</option>
          </Select>
        </Field>
      </div>
    </DialogBody>
    <DialogActions>
      <Button plain @click="isOpen = false">Cancel</Button>
      <Button type="submit">Send invite</Button>
    </DialogActions>
  </form>
</Dialog>

<Dialog size="xl" open={isOpen} onClose={setIsOpen}>
  <DialogTitle>Data processing addendum</DialogTitle>
  <DialogDescription>Review the terms that apply once EU data residency is on.</DialogDescription>
  <DialogBody className="text-sm/6 text-zinc-900 dark:text-white">
    {clauses.map((clause, index) => (
      <div key={clause.heading} className="mt-6 first:mt-0">
        <h3 className="font-semibold">
          {index + 1}. {clause.heading}
        </h3>
        <p className="mt-2">{clause.text}</p>
      </div>
    ))}
  </DialogBody>
  <DialogActions>
    <Button plain onClick={() => setIsOpen(false)}>
      Not now
    </Button>
    <Button onClick={() => setIsOpen(false)}>Accept and enable</Button>
  </DialogActions>
</Dialog>

<Dialog size="xl" :open="isOpen" @close="isOpen = false">
  <DialogTitle>Data processing addendum</DialogTitle>
  <DialogDescription>Review the terms that apply once EU data residency is on.</DialogDescription>
  <DialogBody class="text-sm/6 text-zinc-900 dark:text-white">
    <div v-for="(clause, index) in clauses" :key="clause.heading" class="mt-6 first:mt-0">
      <h3 class="font-semibold">{{ index + 1 }}. {{ clause.heading }}</h3>
      <p class="mt-2">{{ clause.text }}</p>
    </div>
  </DialogBody>
  <DialogActions>
    <Button plain @click="isOpen = false">Not now</Button>
    <Button @click="isOpen = false">Accept and enable</Button>
  </DialogActions>
</Dialog>

<Field>
  <Label>Endpoint URL</Label>
  <Input autoFocus type="url" name="url" placeholder="https://api.example.com/webhooks" />
</Field>

<Field>
  <Label>Endpoint URL</Label>
  <Input autofocus type="url" name="url" placeholder="https://api.example.com/webhooks" />
</Field>

'use client'

import { useState } from 'react'
import { Button } from '@/components/button'
import { Dialog, DialogActions, DialogBody, DialogTitle } from '@/components/dialog'
import { useModalStack, type ModalRenderProps } from '@/components/modal-stack'

function SelectCustomerDialog({ isOpen, close }: ModalRenderProps<Customer>) {
  return (
    <Dialog size="md" open={isOpen} onClose={() => close()}>
      <DialogTitle>Select a customer</DialogTitle>
      <DialogBody>
        {customers.map((customer) => (
          <button key={customer.id} type="button" onClick={() => close(customer)}>
            {customer.name}
          </button>
        ))}
      </DialogBody>
      <DialogActions>
        <Button plain onClick={() => close()}>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  )
}

function InvoiceDialog({ isOpen, close }: ModalRenderProps<void>) {
  let { open } = useModalStack()
  let [customer, setCustomer] = useState<Customer | null>(null)

  async function selectCustomer() {
    let selected = await open<Customer>((modal) => <SelectCustomerDialog {...modal} />)

    if (selected) setCustomer(selected)
  }

  return (
    <Dialog open={isOpen} onClose={() => close()}>
      <DialogTitle>New invoice</DialogTitle>
      <DialogBody>
        <Button outline onClick={selectCustomer}>
          {customer ? customer.name : 'Select a customer'}
        </Button>
      </DialogBody>
      <DialogActions>
        <Button plain onClick={() => close()}>
          Cancel
        </Button>
        <Button onClick={() => close()}>Create invoice</Button>
      </DialogActions>
    </Dialog>
  )
}

export default function Example() {
  let { open } = useModalStack()

  return (
    <Button type="button" onClick={() => open((modal) => <InvoiceDialog {...modal} />)}>
      New invoice
    </Button>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Button from '@/components/button.vue'
import Dialog from '@/components/dialog.vue'
import DialogActions from '@/components/dialog-actions.vue'
import DialogBody from '@/components/dialog-body.vue'
import DialogTitle from '@/components/dialog-title.vue'
import { useModalStack } from '@/components/modal-stack'
import SelectCustomerDialog from './SelectCustomerDialog.vue'

defineProps<{ isOpen: boolean }>()

const emit = defineEmits<{ close: [] }>()

const { open } = useModalStack()
const customer = ref<Customer | null>(null)

async function selectCustomer() {
  const selected = await open<Customer>(SelectCustomerDialog)

  if (selected) customer.value = selected
}
</script>

<template>
  <Dialog :open="isOpen" @close="emit('close')">
    <DialogTitle>New invoice</DialogTitle>
    <DialogBody>
      <Button outline @click="selectCustomer">
        {{ customer ? customer.name : 'Select a customer' }}
      </Button>
    </DialogBody>
    <DialogActions>
      <Button plain @click="emit('close')">Cancel</Button>
      <Button @click="emit('close')">Create invoice</Button>
    </DialogActions>
  </Dialog>
</template>