Dialog

<script setup lang="ts">
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="Publish this article" description="Everyone can see it once it is published.">
    <Button variant="outline" tone="neutral">Publish</Button>
    <template #content>
      <Text>The article appears on your homepage and in the timelines of your subscribers.</Text>
    </template>
    <template #footer="{ close }">
      <Button variant="soft" tone="neutral" @click="close">Not yet</Button>
      <Button @click="close">Publish</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { Settings } from '@lucide/vue'
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="Dialog title">
    <Button variant="outline" tone="neutral">Title slots</Button>
    <template #icon><Settings /></template>
    <template #title>Custom title</template>
    <template #content>
      <Text>The icon and title content are provided through separate slots.</Text>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="Hidden header" :header="false">
    <Button variant="outline" tone="neutral">Hidden header</Button>
    <template #content>
      <Text>The title remains the accessible name; content and footer stay visible.</Text>
    </template>
    <template #footer="{ close }">
      <Button @click="close">Close</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="Hidden close button" :closable="false">
    <Button variant="outline" tone="neutral">Hidden close button</Button>
    <template #content>
      <Text>Press Escape, click the scrim or use the footer button to close.</Text>
    </template>
    <template #footer="{ close }">
      <Button @click="close">Close</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { AtSign, Globe, ImagePlus, Smile } from '@lucide/vue'
  import {
    Avatar,
    Button,
    CloseButton,
    Dialog,
    IconButton,
    Image,
    Inline,
    ScrollArea,
    Stack,
    Text,
    Textarea,
  } from '@hina-ui/vue'

  const content = ref('')
  const attached = ref(false)
  const count = computed(() => Array.from(content.value).length)
  const overLimit = computed(() => count.value > 280)
</script>

<template>
  <Dialog title="New post" placement="top" class="max-w-[600px]">
    <Button variant="outline" tone="neutral">Custom panel</Button>
    <template #body="{ close }">
      <Stack gap="none" class="min-h-0">
        <Inline justify="between" class="border-line shrink-0 border-b px-3 py-2.5">
          <Button variant="ghost" tone="neutral" size="sm" @click="close">Cancel</Button>
          <Button size="sm" :disabled="(!content.trim() && !attached) || overLimit" @click="close">
            Post
          </Button>
        </Inline>

        <ScrollArea class="min-h-0">
          <Inline align="start" :wrap="false" class="gap-3 p-4">
            <Avatar src="/avatars/paper.webp" name="Shion" />
            <Stack gap="sm" class="min-w-0 flex-1">
              <Stack gap="xs">
                <Text weight="medium">Shion</Text>
                <Inline gap="xs">
                  <Globe class="text-muted size-3.5" aria-hidden="true" />
                  <Text size="xs" tone="muted">Public</Text>
                </Inline>
              </Stack>
              <Textarea
                v-model="content"
                variant="bare"
                :autosize="{ minRows: 5 }"
                :invalid="overLimit"
                aria-label="Post content"
                placeholder="Share a discovery, a recommendation, or a thought…"
                class="[--hn-textarea-px:0px]"
              />
              <Stack v-if="attached" class="relative">
                <Image
                  src="/sample.webp"
                  alt="Sample image"
                  class="aspect-video w-full rounded-md"
                />
                <CloseButton
                  label="Remove image"
                  class="bg-surface/90 absolute top-2 right-2 shadow-sm"
                  @click="attached = false"
                />
              </Stack>
            </Stack>
          </Inline>
        </ScrollArea>

        <Inline justify="between" :wrap="false" class="border-line shrink-0 border-t px-3 py-2">
          <Inline gap="xs">
            <IconButton
              label="Add sample image"
              size="sm"
              :aria-pressed="attached"
              @click="attached = !attached"
            >
              <ImagePlus />
            </IconButton>
            <IconButton label="Insert emoji" size="sm" @click="content += '😊'">
              <Smile />
            </IconButton>
            <IconButton label="Insert @" size="sm" @click="content += '@'">
              <AtSign />
            </IconButton>
          </Inline>
          <Text
            as="span"
            size="xs"
            :tone="overLimit ? 'danger' : 'muted'"
            class="shrink-0 tabular-nums"
          >
            {{ count }} / 280
          </Text>
        </Inline>
      </Stack>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { Button, Dialog, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Dialog
      v-for="size in ['sm', 'md', 'lg', 'xl', '2xl'] as const"
      :key="size"
      :size="size"
      :title="`Size ${size}`"
    >
      <Button variant="outline" tone="neutral">{{ size }}</Button>
      <template #content>
        <Text>The width follows size, while the height never runs past the viewport.</Text>
      </template>
    </Dialog>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Dialog, Inline, Text } from '@hina-ui/vue'

  const widths = [
    { label: '40rem', class: 'max-w-[40rem]' },
    { label: '52rem', class: 'max-w-[52rem]' },
  ]
</script>

<template>
  <Inline>
    <Dialog v-for="width in widths" :key="width.label" :title="width.label" :class="width.class">
      <Button variant="outline" tone="neutral">{{ width.label }}</Button>
      <template #content>
        <Text>
          The class sets the maximum width; narrow screens remain constrained by the viewport.
        </Text>
      </template>
    </Dialog>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Dialog, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Dialog title="Centred" placement="center">
      <Button variant="outline" tone="neutral">center</Button>
      <template #content>
        <Text>Stays centred at every screen width.</Text>
      </template>
    </Dialog>
    <Dialog title="Along the top" placement="top">
      <Button variant="outline" tone="neutral">top</Button>
      <template #content>
        <Text>Slides in from above with space at the top, including on narrow screens.</Text>
      </template>
    </Dialog>
    <Dialog title="Along the bottom" placement="bottom">
      <Button variant="outline" tone="neutral">bottom</Button>
      <template #content>
        <Text>Slides up from the bottom and keeps its rounded corners.</Text>
      </template>
    </Dialog>
    <Dialog title="Following the screen">
      <Button variant="outline" tone="neutral">default</Button>
      <template #content>
        <Text>
          Centred on a wide screen; on a narrow one it sits along the bottom and fills the width.
          Narrow the window and open it again to see it.
        </Text>
      </template>
    </Dialog>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Dialog, Stack, Text } from '@hina-ui/vue'

  const terms = Array.from(
    { length: 30 },
    (_, i) =>
      `Clause ${i + 1}: using the service means you accept this term, which is here only as placeholder text, long enough that the body actually scrolls.`,
  )
</script>

<template>
  <Dialog title="Terms of service" description="Please read them before you continue.">
    <Button variant="outline" tone="neutral">Read the terms</Button>
    <template #content>
      <Stack gap="sm">
        <Text v-for="line in terms" :key="line">{{ line }}</Text>
      </Stack>
    </template>
    <template #footer="{ close }">
      <Button variant="soft" tone="neutral" @click="close">Decline</Button>
      <Button @click="close">Accept</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Dialog, Stack, Text } from '@hina-ui/vue'

  const modal = ref<InstanceType<typeof Dialog>>()

  function scrollTo(position: 'start' | 'end') {
    const viewport = modal.value?.viewport
    if (!viewport) return
    viewport.scrollTo({ top: position === 'start' ? 0 : viewport.scrollHeight })
  }
</script>

<template>
  <Dialog
    ref="modal"
    title="Scroll viewport"
    description="The title and footer stay fixed while the body scrolls."
  >
    <Button variant="outline" tone="neutral">Open</Button>
    <template #content>
      <Stack gap="sm">
        <Text v-for="index in 30" :key="index">
          Line {{ index }} The title and footer stay fixed while this content scrolls.
        </Text>
      </Stack>
    </template>
    <template #footer="{ close }">
      <Button variant="soft" tone="neutral" :disabled="!modal?.viewport" @click="scrollTo('start')">
        Top
      </Button>
      <Button variant="soft" tone="neutral" :disabled="!modal?.viewport" @click="scrollTo('end')">
        Bottom
      </Button>
      <Button @click="close">Close</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Dialog, Inline, Text } from '@hina-ui/vue'

  const open = ref(false)
</script>

<template>
  <Inline align="center">
    <Button variant="outline" tone="neutral" @click="open = true">Open from outside</Button>
    <Text tone="muted" size="sm">Currently {{ open ? 'open' : 'closed' }}</Text>
    <Dialog
      v-model:open="open"
      title="A dialog without a trigger"
      description="Outside state controls it."
    >
      <template #content>
        <Text>Leaving out the default slot renders no trigger, so `open` is the only way in.</Text>
      </template>
      <template #footer="{ close }">
        <Button @click="close">Close</Button>
      </template>
    </Dialog>
  </Inline>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Dialog, Text } from '@hina-ui/vue'

  const open = ref(false)
  const submitting = ref(false)

  function submit() {
    submitting.value = true
    setTimeout(() => {
      submitting.value = false
      open.value = false
    }, 2000)
  }
</script>

<template>
  <Dialog
    v-model:open="open"
    title="Import a library"
    description="Please keep this dialog open while the import runs."
    :locked="submitting"
  >
    <Button variant="outline" tone="neutral">Import</Button>
    <template #content>
      <Text>
        {{
          submitting
            ? 'Importing. It closes on its own in two seconds.'
            : 'Starting the import locks the dialog for two seconds.'
        }}
      </Text>
    </template>
    <template #footer="{ close }">
      <Button variant="soft" tone="neutral" :disabled="submitting" @click="close">Cancel</Button>
      <Button :loading="submitting" @click="submit">Start import</Button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Dialog, Form, FormField, Input } from '@hina-ui/vue'

  const schema = v.object({
    name: v.pipe(v.string('Enter a name'), v.nonEmpty('Enter a name')),
    email: v.pipe(
      v.string('Enter an email'),
      v.nonEmpty('Enter an email'),
      v.email('That is not a valid email'),
    ),
  })

  const open = ref(false)
  const values = reactive({ name: 'Hoshimi Shion', email: 'shion@example.com' })

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 1500))
    open.value = false
  }
</script>

<template>
  <Dialog
    v-model:open="open"
    title="Edit profile"
    description="The dialog is locked while saving and closes when it is done."
  >
    <Button variant="outline" tone="neutral">Edit profile</Button>
    <template #content>
      <Form id="profile-form" :values="values" :rules="schema" @submit="save">
        <FormField name="name" label="Name">
          <Input v-model="values.name" />
        </FormField>
        <FormField name="email" label="Email">
          <Input v-model="values.email" type="email" />
        </FormField>
      </Form>
    </template>
    <template #footer="{ close, submitting }">
      <Button variant="soft" tone="neutral" :disabled="submitting" @click="close">Cancel</Button>
      <Button type="submit" form="profile-form" :loading="submitting">Save</Button>
    </template>
  </Dialog>
</template>