Dialog

<script setup lang="ts">
const open = ref(false);
</script>

<template>
  <UiButton variant="secondary" @click="open = true">Open dialog</UiButton>

  <UiDialog v-model:open="open" title="Keyboard shortcuts" description="Work faster with these.">
    <ul class="demo-list">
      <li>Search <UiKbd keys="mod+k" size="small" /></li>
      <li>Save <UiKbd keys="mod+s" size="small" /></li>
      <li>Close <UiKbd keys="esc" size="small" /></li>
    </ul>
  </UiDialog>
</template>

<script setup lang="ts">
const open = ref(false);
const name = ref("Acme Inc.");
const toast = useToast();

function save(close: () => void) {
  toast.success(`Renamed to ${name.value}`);
  close();
}
</script>

<template>
  <UiButton @click="open = true">Rename workspace</UiButton>

  <UiDialog v-model:open="open" title="Rename workspace" size="sm">
    <UiInput v-model="name" label="Workspace name" autofocus />

    <template #footer="{ close }">
      <UiButton variant="ghost" @click="close">Cancel</UiButton>
      <UiButton @click="save(close)">Save</UiButton>
    </template>
  </UiDialog>
</template>

<script setup lang="ts">
const open = ref(false);
const accepted = ref(false);
</script>

<template>
  <UiButton variant="secondary" @click="open = true">Review terms</UiButton>

  <UiDialog
    v-model:open="open"
    title="We've updated our terms"
    description="Accept them to keep using your account."
    size="sm"
    :dismissible="false"
  >
    <UiCheckbox v-model="accepted" label="I accept the new terms" />

    <template #footer="{ close }">
      <UiButton :disabled="!accepted" @click="close">Continue</UiButton>
    </template>
  </UiDialog>
</template>