GrProgressBar

<script setup lang="ts">
import { ref } from 'vue'

import { GR_TONES, GrButton, GrProgressBar, type GrTone } from '@feugene/granularity'

const progress = ref(32)
const tone = ref<GrTone>('primary')

const tones = GR_TONES
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" variant="outline" @click="progress = Math.max(0, progress - 16)">
        -16%
      </GrButton>
      <GrButton size="sm" @click="progress = Math.min(100, progress + 16)">
        +16%
      </GrButton>
    </div>

    <div class="flex flex-wrap gap-2">
      <GrButton
        v-for="item in tones"
        :key="item"
        size="sm"
        variant="outline"
        :tone="item"
        @click="tone = item"
      >
        {{ item }}
      </GrButton>
    </div>

    <div class="grid gap-2">
      <div class="flex items-center justify-between text-sm">
        <span>Verification progress</span>
        <span class="text-[var(--gr-muted-fg)]">{{ progress }}% · {{ tone }}</span>
      </div>
      <GrProgressBar :value="progress" :tone="tone" aria-label="Verification progress" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrCard, GrProgressBar } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <GrCard padding="md" body-class="grid gap-2">
      <div class="text-sm font-600">
        С рамкой
      </div>
      <GrProgressBar :value="64" show-value aria-label="Bordered progress" />
      <div class="text-xs text-[var(--gr-muted-fg)]">
        Дефолт: трек обведён `--gr-brd` и виден на любом фоне.
      </div>
    </GrCard>

    <GrCard padding="md" body-class="grid gap-2">
      <div class="text-sm font-600">
        borderless
      </div>
      <GrProgressBar :value="64" borderless show-value aria-label="Borderless progress" />
      <div class="text-xs text-[var(--gr-muted-fg)]">
        Внутри карточки рамка трека становится второй рамкой рядом с её собственной.
      </div>
    </GrCard>
  </div>
</template>

<script setup lang="ts">
import { GrBadge, GrProgressBar } from '@feugene/granularity'

const rows = [
  { label: 'Imported from legacy job', raw: -18, tone: 'danger' as const },
  { label: 'Actual processed records', raw: 58, tone: 'info' as const },
  { label: 'Overreported upstream value', raw: 146, tone: 'warning' as const },
]
</script>

<template>
  <div class="grid gap-3">
    <div
      v-for="row in rows"
      :key="row.label"
      class="grid gap-2 rounded-xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-3"
    >
      <div class="flex items-center justify-between gap-3 text-sm">
        <span>{{ row.label }}</span>
        <GrBadge size="sm" :tone="row.tone">input: {{ row.raw }}%</GrBadge>
      </div>

      <GrProgressBar :value="row.raw" :tone="row.tone" :aria-label="row.label" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'

import { GrButton, GrProgressBar } from '@feugene/granularity'

const known = ref(false)
const progress = ref(0)

let timer: ReturnType<typeof setInterval> | undefined

function start() {
  known.value = false
  progress.value = 0

  clearInterval(timer)
  timer = setInterval(() => {
    if (progress.value >= 100) {
      clearInterval(timer)
      return
    }

    // Ответ сервера пришёл — с этого момента размер известен, и полоса
    // перестаёт быть неопределённой.
    known.value = true
    progress.value = Math.min(100, progress.value + 7)
  }, 400)
}

onBeforeUnmount(() => clearInterval(timer))
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" @click="start">
        Запустить запрос
      </GrButton>
      <GrButton size="sm" variant="outline" @click="known = !known">
        {{ known ? 'Прогресс неизвестен' : 'Прогресс известен' }}
      </GrButton>
    </div>

    <div class="grid gap-2">
      <div class="text-sm">
        {{ known ? 'Загрузка идёт, размер известен' : 'Запрос отправлен, размер ответа неизвестен' }}
      </div>
      <GrProgressBar
        :value="progress"
        :indeterminate="!known"
        show-value
        aria-label="Import progress"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrBadge, GrProgressBar } from '@feugene/granularity'

const stages = [
  { label: 'Validation', value: 100, tone: 'success' as const },
  { label: 'Fraud screening', value: 72, tone: 'warning' as const },
  { label: 'Settlement', value: 41, tone: 'neutral' as const },
]
</script>

<template>
  <div class="grid gap-3">
    <div
      v-for="stage in stages"
      :key="stage.label"
      class="grid gap-2 rounded-xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-3"
    >
      <div class="flex items-center justify-between gap-3 text-sm">
        <span>{{ stage.label }}</span>
        <GrBadge size="sm" :tone="stage.tone">{{ stage.value }}%</GrBadge>
      </div>

      <GrProgressBar :value="stage.value" :tone="stage.tone" :aria-label="stage.label" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrProgressBar } from '@feugene/granularity'

const sizes = ['xs', 'sm', 'md', 'lg'] as const
</script>

<template>
  <div class="grid gap-4">
    <div v-for="size in sizes" :key="size" class="grid gap-2">
      <div class="text-xs font-semibold text-[var(--gr-muted-fg)]">
        size="{{ size }}"
      </div>

      <GrProgressBar :value="62" :size="size" aria-label="Upload progress" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrButton, GrProgressBar } from '@feugene/granularity'

const played = ref(28)
const buffered = computed(() => Math.min(100, played.value + 24))

const uploadedMb = ref(184)
const totalMb = 512
const uploadPercent = computed(() => (uploadedMb.value / totalMb) * 100)

function formatMb(value: number) {
  return `${Math.round((value / 100) * totalMb)} / ${totalMb} МБ`
}
</script>

<template>
  <div class="grid gap-5">
    <div class="grid gap-2">
      <div class="text-sm">
        Плеер: заливка — воспроизведено, слой позади — загружено в буфер
      </div>
      <GrProgressBar
        :value="played"
        :buffer="buffered"
        show-value
        aria-label="Playback progress"
      />
      <div class="flex flex-wrap gap-2">
        <GrButton size="sm" variant="outline" @click="played = Math.max(0, played - 10)">
          -10%
        </GrButton>
        <GrButton size="sm" @click="played = Math.min(100, played + 10)">
          +10%
        </GrButton>
      </div>
    </div>

    <div class="grid gap-2">
      <div class="text-sm">
        Своя подпись: `formatValue` управляет и текстом, и `aria-valuetext`
      </div>
      <GrProgressBar
        :value="uploadPercent"
        :format-value="formatMb"
        show-value
        tone="success"
        aria-label="Upload progress"
      />
      <div class="flex flex-wrap gap-2">
        <GrButton size="sm" variant="outline" @click="uploadedMb = Math.max(0, uploadedMb - 64)">
          -64 МБ
        </GrButton>
        <GrButton size="sm" tone="success" @click="uploadedMb = Math.min(totalMb, uploadedMb + 64)">
          +64 МБ
        </GrButton>
      </div>
    </div>
  </div>
</template>