Dialog

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { XIcon } from "@lucide/vue"
</script>

<template>
  <Dialog>
    <DialogTrigger>Share</DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Share link</DialogTitle>
        <DialogDescription
          >Anyone who has this link will be able to view
          this.</DialogDescription
        >
      </div>
      <Field>
        <FieldLabel>Link</FieldLabel>
        <Input defaultValue="https://example.com/project" readonly />
      </Field>
      <div data-slot="row">
        <DialogClose data-variant="solid">Done</DialogClose>
      </div>
      <DialogClose aria-label="Close">
        <XIcon aria-hidden="true" />
      </DialogClose>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"

const paragraphs = [
  "These terms govern your use of the service. By creating an account, you agree to them and to the privacy policy that explains how we handle your data.",
  "You're responsible for the content you upload and for keeping your password safe. Tell us right away if you think someone else has used your account.",
  "We may change the service, and these terms, as the product grows. When a change affects you, we'll let you know by email at least 30 days before it takes effect.",
  "You can stop using the service at any time. We'll keep your data for 30 days after you close your account, so you can export it, and then delete it.",
  "The service is provided as is. To the extent the law allows, we aren't liable for indirect damages, lost profits or lost data.",
  "If you have questions about these terms, write to us. We read every message and reply within two working days.",
]
</script>

<template>
  <Dialog>
    <DialogTrigger>Scrollable Content</DialogTrigger>
    <DialogBackdrop />
    <DialogContent initial-focus="content">
      <div data-slot="stack">
        <DialogTitle>Terms of service</DialogTitle>
        <DialogDescription>Please read before you continue.</DialogDescription>
      </div>
      <div data-slot="scroll">
        <p v-for="paragraph in paragraphs" :key="paragraph">
          {{ paragraph }}
        </p>
      </div>
      <div data-slot="row">
        <DialogClose>Decline</DialogClose>
        <DialogClose data-variant="solid" value="accept">Accept</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { useLog } from "./log"

const log = useLog()

function onOpenChange(
  open: boolean,
  details: { reason: string; returnValue?: string }
) {
  if (!open) {
    log(
      details.returnValue
        ? `Saved as ${details.returnValue}`
        : `Closed (${details.reason})`
    )
  }
}
</script>

<template>
  <Dialog @open-change="onOpenChange">
    <DialogTrigger>New Article</DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>New article</DialogTitle>
        <DialogDescription
          >Save it as a draft or publish it now.</DialogDescription
        >
      </div>
      <form data-slot="stack" method="dialog">
        <Field>
          <FieldLabel>Title</FieldLabel>
          <Input required defaultValue="Shipping updates for spring" />
        </Field>
        <div data-slot="row">
          <button type="submit" value="draft">Save Draft</button>
          <button data-variant="solid" type="submit" value="published">
            Publish
          </button>
        </div>
      </form>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { CheckIcon } from "@lucide/vue"
import { Checkbox, CheckboxIndicator } from "@ui-sdk/vue/checkbox"
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { ref } from "vue"
import { useLog } from "./log"

const topics = [
  { label: "Product updates", checked: true },
  { label: "Security alerts", checked: true },
  { label: "Weekly digest", checked: false },
]

const log = useLog()
const open = ref(false)

function onOpenChange(next: boolean, details: { reason: string }) {
  log(`${next ? "Opened" : "Closed"} (${details.reason})`)
}
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <label data-slot="label">
        <Checkbox
          :checked="open"
          @checked-change="(next) => (open = next === true)"
        >
          <CheckboxIndicator>
            <CheckIcon aria-hidden="true" />
          </CheckboxIndicator>
        </Checkbox>
        Open
      </label>
    </div>
    <Dialog
      v-model:open="open"
      @open-change="onOpenChange"
      @open-change-complete="
        (next: boolean) => log(next ? 'Finished opening' : 'Finished closing')
      "
    >
      <DialogTrigger>Notification Settings</DialogTrigger>
      <DialogBackdrop />
      <DialogContent>
        <div data-slot="stack">
          <DialogTitle>Notification settings</DialogTitle>
          <DialogDescription>Choose what we email you about.</DialogDescription>
        </div>
        <div data-slot="stack">
          <label v-for="topic in topics" :key="topic.label" data-slot="label">
            <Checkbox :default-checked="topic.checked">
              <CheckboxIndicator>
                <CheckIcon aria-hidden="true" />
              </CheckboxIndicator>
            </Checkbox>
            {{ topic.label }}
          </label>
        </div>
        <div data-slot="row">
          <DialogClose data-variant="solid">Done</DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogShortcut,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { PlusIcon } from "@lucide/vue"
</script>

<template>
  <Dialog>
    <DialogTrigger shortcut="mod+j">
      <PlusIcon aria-hidden="true" />
      New Contact
      <DialogShortcut />
    </DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>New contact</DialogTitle>
        <DialogDescription>Add someone to your address book.</DialogDescription>
      </div>
      <form data-slot="stack" method="dialog">
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input name="name" required placeholder="Kofi Mensah" />
        </Field>
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input
            name="email"
            type="email"
            required
            placeholder="kofi@example.com"
          />
        </Field>
        <div data-slot="row">
          <DialogClose>Cancel</DialogClose>
          <button data-variant="solid" type="submit" value="save">
            Save Contact
          </button>
        </div>
      </form>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { useLog } from "./log"

const log = useLog()
</script>

<template>
  <Dialog
    @open-change-complete="
      (open: boolean) => log(open ? 'Finished opening' : 'Finished closing')
    "
  >
    <DialogTrigger>Slide In</DialogTrigger>
    <DialogBackdrop />
    <DialogContent keep-mounted>
      <div data-slot="stack">
        <DialogTitle>Slide and fade</DialogTitle>
        <DialogDescription
          >300ms in and out. Focus returns as soon as it starts
          closing.</DialogDescription
        >
      </div>
      <div data-slot="row">
        <DialogClose data-variant="solid">Close</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { CheckIcon, ChevronDownIcon } from "@lucide/vue"
import { Checkbox, CheckboxIndicator } from "@ui-sdk/vue/checkbox"
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/vue/select"
import { computed, ref } from "vue"

const modes = [
  { value: "true", label: "Modal" },
  { value: "trap-focus", label: "Trap focus" },
  { value: "false", label: "Non-modal" },
]

type Mode = "true" | "trap-focus" | "false"

const notes = {
  true: "The rest of the page is inert and doesn't scroll.",
  "trap-focus":
    "Tab stays inside, and the page still scrolls and takes clicks.",
  false:
    "The page stays usable. Tab leaves the notes, and Escape closes them while focus is inside.",
}

const mode = ref<Mode>("false")
const outside = ref(false)
const modal = computed(() =>
  mode.value === "true" ? true : mode.value === "false" ? false : "trap-focus"
)
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <Select
        :items="modes"
        :value="mode"
        @value-change="(next) => next && (mode = next as Mode)"
      >
        <SelectLabel>Modal</SelectLabel>
        <SelectTrigger>
          <SelectValue />
          <ChevronDownIcon />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="option in modes"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
            <SelectItemIndicator>
              <CheckIcon />
            </SelectItemIndicator>
          </SelectItem>
        </SelectContent>
      </Select>
      <label data-slot="label">
        <Checkbox
          :checked="outside"
          @checked-change="(next) => (outside = next === true)"
        >
          <CheckboxIndicator>
            <CheckIcon aria-hidden="true" />
          </CheckboxIndicator>
        </Checkbox>
        Close on outside press
      </label>
    </div>
    <Dialog :modal="modal" :close-on-outside-press="outside">
      <DialogTrigger>Open Notes</DialogTrigger>
      <DialogBackdrop v-if="modal === true" />
      <DialogContent>
        <div data-slot="stack">
          <DialogTitle>Notes</DialogTitle>
          <DialogDescription>{{ notes[mode] }}</DialogDescription>
        </div>
        <textarea aria-label="Notes">
Call the printer about the proofs.</textarea>
        <div data-slot="row">
          <DialogClose data-variant="solid">Done</DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldControl, FieldLabel } from "@ui-sdk/vue/field"
import { ref } from "vue"

const open = ref(false)
const dirty = ref(false)
const asking = ref(false)
let post: HTMLTextAreaElement | undefined

function onInput(event: Event) {
  post = event.target as HTMLTextAreaElement
  dirty.value = post.value !== ""
}

function close() {
  open.value = false
  dirty.value = false
  asking.value = false
}

function keepEditing() {
  asking.value = false
  post?.focus()
}
</script>

<template>
  <Dialog
    :open="open"
    :dismissible="!dirty"
    @update:open="(next: boolean) => (next ? (open = true) : close())"
    @dismiss-attempt="asking = true"
  >
    <DialogTrigger>Write a Post</DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>New post</DialogTitle>
        <DialogDescription>Share an update with your team.</DialogDescription>
      </div>
      <Field>
        <FieldLabel>Post</FieldLabel>
        <FieldControl @input="onInput">
          <template #render="{ props }">
            <textarea v-bind="props" placeholder="What's new?" />
          </template>
        </FieldControl>
      </Field>
      <div v-if="asking" data-slot="row" role="alert">
        Discard your changes?
        <div data-slot="row">
          <button type="button" @click="keepEditing">Keep Editing</button>
          <button data-variant="solid" type="button" @click="close">
            Discard
          </button>
        </div>
      </div>
      <div v-else data-slot="row">
        <DialogClose data-variant="solid" value="post">Post</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
</script>

<template>
  <Dialog>
    <DialogTrigger>Account</DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Account</DialogTitle>
        <DialogDescription>Manage how you sign in.</DialogDescription>
      </div>
      <div data-slot="card">
        <div data-slot="stack">
          <span>Password</span>
          <span data-slot="hint">Last changed 3 months ago</span>
        </div>
        <Dialog>
          <DialogTrigger>Change Password</DialogTrigger>
          <DialogBackdrop />
          <DialogContent>
            <div data-slot="stack">
              <DialogTitle>Change password</DialogTitle>
              <DialogDescription>Use at least 12 characters.</DialogDescription>
            </div>
            <Field>
              <FieldLabel>New password</FieldLabel>
              <Input type="password" />
            </Field>
            <div data-slot="row">
              <DialogClose>Cancel</DialogClose>
              <DialogClose data-variant="solid">Update</DialogClose>
            </div>
          </DialogContent>
        </Dialog>
      </div>
      <div data-slot="row">
        <DialogClose data-variant="solid">Done</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  createDialogController,
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
import { Menu, MenuContent, MenuItem, MenuTrigger } from "@ui-sdk/vue/menu"
import { CopyIcon, EllipsisIcon, PencilIcon } from "@lucide/vue"

const rename = createDialogController()
</script>

<template>
  <Menu>
    <MenuTrigger aria-label="File actions">
      <EllipsisIcon aria-hidden="true" />
    </MenuTrigger>
    <MenuContent>
      <MenuItem @select="rename.open()">
        <PencilIcon aria-hidden="true" />
        Rename…
      </MenuItem>
      <MenuItem>
        <CopyIcon aria-hidden="true" />
        Duplicate
      </MenuItem>
    </MenuContent>
  </Menu>
  <Dialog :controller="rename">
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Rename file</DialogTitle>
        <DialogDescription>Names must be unique in a folder.</DialogDescription>
      </div>
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input defaultValue="report.pdf" />
      </Field>
      <div data-slot="row">
        <DialogClose>Cancel</DialogClose>
        <DialogClose data-variant="solid" value="rename">Rename</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  createDialogController,
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { useLog } from "./log"

type Invoice = {
  id: string
  customer: string
  amount: string
  status: "Paid" | "Due"
}

const invoices: Invoice[] = [
  { id: "INV-001", customer: "Acme", amount: "$250.00", status: "Paid" },
  { id: "INV-002", customer: "Globex", amount: "$150.00", status: "Due" },
  { id: "INV-003", customer: "Initech", amount: "$350.00", status: "Due" },
]

const reminder = createDialogController<Invoice, "send">()
const InvoiceDialogContent = DialogContent<Invoice>
const log = useLog()

async function remindFromCode() {
  const { reason, returnValue } = await reminder.open({ payload: invoices[2] })
  log(returnValue === "send" ? "Reminder sent from code" : `Closed (${reason})`)
}

function onOpenChange(open: boolean, details: { returnValue?: string }) {
  if (!open && details.returnValue === "send") {
    log("Reminder sent")
  }
}
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <button type="button" @click="remindFromCode">Open from Code</button>
    </div>
    <ul data-slot="list">
      <li v-for="invoice in invoices" :key="invoice.id" data-slot="row">
        {{ invoice.customer }}
        <span data-slot="hint"
          >{{ invoice.amount }} · {{ invoice.status }}</span
        >
        <DialogTrigger
          :controller="reminder"
          :payload="invoice"
          :disabled="invoice.status === 'Paid'"
          :aria-label="`Remind ${invoice.customer}`"
        >
          Remind
        </DialogTrigger>
      </li>
    </ul>
    <Dialog :controller="reminder" @open-change="onOpenChange">
      <DialogBackdrop />
      <InvoiceDialogContent v-slot="{ state }">
        <div data-slot="stack">
          <DialogTitle>Remind {{ state.payload?.customer }}</DialogTitle>
          <DialogDescription>
            {{ state.payload?.id }} for {{ state.payload?.amount }} is due.
            We'll email the billing contact.
          </DialogDescription>
        </div>
        <div data-slot="row">
          <DialogClose>Cancel</DialogClose>
          <DialogClose data-variant="solid" value="send"
            >Send reminder</DialogClose
          >
        </div>
      </InvoiceDialogContent>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
import { Field, FieldLabel } from "@ui-sdk/vue/field"
import { Input } from "@ui-sdk/vue/input"
</script>

<template>
  <Dialog presentation="sheet">
    <DialogTrigger>Edit Profile</DialogTrigger>
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription
          >Make changes to your profile here. Save when you're
          done.</DialogDescription
        >
      </div>
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input defaultValue="Hollis Grant" />
      </Field>
      <Field>
        <FieldLabel>Username</FieldLabel>
        <Input defaultValue="@hollis" />
      </Field>
      <div data-slot="row">
        <DialogClose>Cancel</DialogClose>
        <DialogClose data-variant="solid" value="save"
          >Save Changes</DialogClose
        >
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogShortcut,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/vue/dialog"
</script>

<template>
  <Dialog>
    <DialogTrigger shortcut="mod+i">
      <template #render="{ props, state }">
        <button v-bind="props">
          {{ state.open ? "Viewing" : "View Details" }}
          <DialogShortcut v-slot="{ state: shortcut }">{{
            shortcut.text
          }}</DialogShortcut>
        </button>
      </template>
    </DialogTrigger>
    <DialogBackdrop />
    <DialogContent v-slot="{ state }">
      <div data-slot="stack">
        <DialogTitle>
          <template #render="{ props }">
            <h3 v-bind="props">Details</h3>
          </template>
        </DialogTitle>
        <DialogDescription>
          {{
            state.nested
              ? "Opened from another dialog."
              : "Quarterly report, updated today."
          }}
        </DialogDescription>
      </div>
      <div data-slot="row">
        <DialogClose>Close</DialogClose>
        <DialogClose data-variant="solid" href="https://example.com/details">
          <template #render="{ props }">
            <a v-bind="props">Open the Full Page</a>
          </template>
        </DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</template>