QRCode

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    FormField,
    Inline,
    QRCode,
    SegmentedControl,
    Slider,
    Stack,
    Switch,
    Text,
    type QRCodeLevel,
  } from '@hina-ui/vue'
  const size = ref(192)
  const logo = ref(true)
  const brand = ref(false)
  const level = ref<QRCodeLevel>('H')
  const levels = ['L', 'M', 'Q', 'H'].map(value => ({ value, label: value }))
</script>
<template>
  <Stack align="center" class="w-full max-w-sm" data-demo-qr-appearance>
    <QRCode
      value="https://hinaui.dev"
      :size="size"
      :level="level"
      :logo="logo ? '/favicon.png' : undefined"
      :color="brand ? 'var(--color-brand-800)' : undefined"
    />
    <Stack class="w-full">
      <FormField label="Size">
        <Inline :wrap="false" gap="sm">
          <Slider v-model="size" :min="128" :max="256" :step="8" class="flex-1" />
          <Text size="sm" tone="muted" class="w-14 shrink-0 tabular-nums">{{ size }}px</Text>
        </Inline>
      </FormField>
      <FormField label="Error correction">
        <SegmentedControl v-model="level" :options="levels" block />
      </FormField>
      <Inline justify="between">
        <Switch v-model="logo">Center logo</Switch>
        <Switch v-model="brand">Brand color</Switch>
      </Inline>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { onScopeDispose, ref } from 'vue'
  import { QRCode, Select, Stack, Text, type QRCodeStatus } from '@hina-ui/vue'
  const status = ref<QRCodeStatus>('expired')
  const options = [
    { value: 'active', label: 'Active' },
    { value: 'loading', label: 'Loading' },
    { value: 'expired', label: 'Expired' },
    { value: 'scanned', label: 'Scanned' },
  ]
  let timer: ReturnType<typeof setTimeout> | undefined
  function refresh() {
    clearTimeout(timer)
    status.value = 'loading'
    timer = setTimeout(() => {
      status.value = 'active'
    }, 800)
  }
  function change(value: unknown) {
    clearTimeout(timer)
    status.value = value as QRCodeStatus
  }
  onScopeDispose(() => clearTimeout(timer))
</script>
<template>
  <Stack align="center" class="w-full max-w-sm" data-demo-qr-status>
    <QRCode value="https://hinaui.dev" :status="status" @refresh="refresh" />
    <Select
      :model-value="status"
      :options="options"
      aria-label="QR code status"
      class="w-48"
      @update:model-value="change"
    />
    <Text size="sm" tone="muted" class="text-center">
      Refresh simulates a request here. The application controls the status.
    </Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, QRCode, Stack, Text } from '@hina-ui/vue'
  const expired = ref(true)
</script>
<template>
  <Stack align="center" data-demo-qr-custom>
    <QRCode
      value="https://hinaui.dev"
      :status="expired ? 'expired' : 'active'"
      :size="224"
      @refresh="expired = false"
    >
      <template #status="{ refresh }">
        <Text weight="medium">Share link expired</Text>
        <Text size="xs" tone="muted">Generate a fresh code to continue</Text>
        <Button size="sm" variant="outline" @click="refresh">Generate again</Button>
      </template>
    </QRCode>
    <Button variant="ghost" size="sm" :disabled="expired" @click="expired = true">
      Simulate expiry
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { onScopeDispose, ref } from 'vue'
  import { Download } from '@lucide/vue'
  import { Button, Inline, QRCode, Stack, Text, type QRCodeExpose } from '@hina-ui/vue'
  const code = ref<QRCodeExpose>()
  const busy = ref(false)
  const error = ref(false)
  const urls = new Set<string>()
  async function save(type: 'image/png' | 'image/svg+xml') {
    if (!code.value || busy.value) return
    busy.value = true
    error.value = false
    try {
      const blob = await code.value.toBlob({ type, scale: 3 })
      const url = URL.createObjectURL(blob)
      urls.add(url)
      const link = document.createElement('a')
      link.href = url
      link.download = type === 'image/png' ? 'hina-ui.png' : 'hina-ui.svg'
      link.click()
      setTimeout(() => {
        URL.revokeObjectURL(url)
        urls.delete(url)
      }, 1000)
    } catch {
      error.value = true
    } finally {
      busy.value = false
    }
  }
  onScopeDispose(() => urls.forEach(url => URL.revokeObjectURL(url)))
</script>
<template>
  <Stack align="center" data-demo-qr-export>
    <QRCode
      ref="code"
      value="https://hinaui.dev"
      logo="/favicon.png"
      label="Hina UI documentation"
    />
    <Inline gap="sm">
      <Button variant="outline" size="sm" :disabled="busy" @click="save('image/png')">
        <template #icon><Download /></template>
        PNG
      </Button>
      <Button variant="outline" size="sm" :disabled="busy" @click="save('image/svg+xml')">
        <template #icon><Download /></template>
        SVG
      </Button>
    </Inline>
    <Text v-if="error" tone="danger" size="sm" role="alert">Export failed. Please try again.</Text>
  </Stack>
</template>