Dialog ​

<script setup lang="ts">
import { shallowRef } from 'vue'
import { UiButton, UiModal } from '@wing-land/ui'
const open = shallowRef(false)
const draft = shallowRef('')
const legacy = shallowRef<{ open: () => void; close: () => void } | null>(null)
function confirmDiscard() {
  return draft.value === '' || window.confirm('Discard your changes?')
}
</script>
<template>
  <div class="demo">
    <UiButton @click="open = true">Open with v-model</UiButton>
    <UiButton @click="legacy?.open()">Open with ref</UiButton>
    <UiModal
      v-model:open="open"
      title="Rename item"
      description="Closing with unsaved input asks for confirmation."
      :before-close="confirmDiscard"
    >
      <input v-model="draft" aria-label="New name" />
      <template #footer>
        <UiButton variant="ghost" @click="open = false">Cancel</UiButton>
        <UiButton variant="solid" @click="((draft = ''), (open = false))">Save</UiButton>
      </template>
    </UiModal>
    <UiModal ref="legacy" label="Example">
      <p>Close it with Escape or the close button.</p>
      <UiButton @click="legacy?.close()">Close</UiButton>
    </UiModal>
  </div>
</template>
<style scoped>
.demo {
  display: flex;
  gap: 8px;
  padding: 1rem 0;
}
</style>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { UiButton, UiConfirmDialog, useConfirm } from '@wing-land/ui'
const { dialog, confirm } = useConfirm()
const result = shallowRef('')
async function remove() {
  const ok = await confirm({
    title: 'Delete this item?',
    description: 'Deleted items cannot be restored.',
    confirmLabel: 'Delete',
    tone: 'danger',
  })
  result.value = ok ? 'Deleted' : 'Canceled'
}
</script>
<template>
  <div class="demo">
    <UiButton tone="danger" @click="remove">Delete item</UiButton>
    <p role="status">{{ result }}</p>
    <UiConfirmDialog v-bind="dialog" />
  </div>
</template>
<style scoped>
.demo {
  padding: 1rem 0;
}
</style>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { UiButton, UiDrawer } from '@wing-land/ui'
const navigation = shallowRef(false)
const backlinks = shallowRef(false)
</script>
<template>
  <div class="demo">
    <UiButton icon="menu" @click="navigation = true">Navigation</UiButton>
    <UiButton @click="backlinks = true">Backlinks</UiButton>
    <UiDrawer v-model:open="navigation" title="Workspace">
      <p>Inbox, projects and archived notes.</p>
    </UiDrawer>
    <UiDrawer v-model:open="backlinks" side="end" title="Backlinks" size="large">
      <p>3 notes link to this note.</p>
    </UiDrawer>
  </div>
</template>
<style scoped>
.demo {
  display: flex;
  gap: 8px;
  padding: 1rem 0;
}
</style>