GrConfirmDialog

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

import { GrBadge, GrButton, GrConfirmDialog } from '@feugene/granularity'

const open = ref(false)
const lastAction = ref<'confirm' | 'cancel' | 'idle'>('idle')
</script>

<template>
  <div class="grid gap-3">
    <div class="flex items-center gap-3">
      <GrButton variant="primary" tone="danger" class="justify-self-start" @click="open = true">
        Delete workspace
      </GrButton>
      <GrBadge size="sm" :tone="lastAction === 'confirm' ? 'danger' : 'neutral'">
        {{ lastAction }}
      </GrBadge>
    </div>

    <GrConfirmDialog
      v-model="open"
      title="Delete workspace?"
      description="This action revokes links, members and scheduled automations."
      confirm-text="Delete"
      confirm-tone="danger"
      @confirm="lastAction = 'confirm'"
      @cancel="lastAction = 'cancel'"
    />
  </div>
</template>

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

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

const open = ref(false)
const approved = ref(false)
</script>

<template>
  <div class="grid gap-3">
    <GrButton variant="outline" class="justify-self-start" @click="open = true">
      Open compact confirm
    </GrButton>

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Approved in current session: <span class="font-medium text-[var(--gr-fg)]">{{ approved ? 'yes' : 'no' }}</span>
    </div>

    <GrConfirmDialog
      v-model="open"
      title="Promote release candidate"
      description="Smaller button sizes are handy in dense approval flows."
      confirm-text="Promote"
      cancel-text="Back"
      button-size="sm"
      @confirm="approved = true"
      @cancel="approved = false"
    />
  </div>
</template>

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

import { GrBadge, GrButton, GrConfirmDialog } from '@feugene/granularity'

const open = ref(false)
const archived = ref(false)
</script>

<template>
  <div class="grid gap-3">
    <div class="flex items-center gap-3">
      <GrButton class="justify-self-start" @click="open = true">
        Archive sprint
      </GrButton>
      <GrBadge size="sm" :tone="archived ? 'success' : 'neutral'">
        {{ archived ? 'archived' : 'active' }}
      </GrBadge>
    </div>

    <GrConfirmDialog v-model="open" title="Archive sprint" confirm-text="Archive" @confirm="archived = true">
      <div class="grid gap-3 text-sm text-[var(--gr-muted-fg)]">
        <p>Кастомный slot позволяет вывести richer summary прямо внутри confirm shell.</p>
        <ul class="list-disc pl-5">
          <li>18 tasks will move to history</li>
          <li>2 blocked items will stay pinned</li>
        </ul>
      </div>
    </GrConfirmDialog>
  </div>
</template>

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

import type { ResponseErrorInfo } from '@feugene/granularity'
import { GrBadge, GrButton, GrConfirmDialog, GrSegmented } from '@feugene/granularity'

const open = ref(false)
const loading = ref(false)
const error = ref<ResponseErrorInfo | null>(null)
const status = ref('Ничего не отправляли')

// Первая попытка отвечает отказом, вторая проходит — так видно и баннер, и то,
// что окно остаётся открытым для повтора.
let attempt = 0

const focusAction = ref<'cancel' | 'confirm'>('cancel')

function openDialog() {
  attempt = 0
  error.value = null
  status.value = 'Ничего не отправляли'
  open.value = true
}

async function onConfirm() {
  attempt += 1
  loading.value = true
  error.value = null

  await new Promise(resolve => setTimeout(resolve, 1500))
  loading.value = false

  if (attempt === 1) {
    error.value = { kind: 'unknown', message: 'Сервер отклонил запрос. Попробуйте ещё раз.', raw: null }
    return
  }

  status.value = 'Рабочая область удалена'
  open.value = false
}
</script>

<template>
  <div class="grid gap-3">
    <div class="flex flex-wrap items-center gap-3">
      <GrSegmented
        v-model="focusAction"
        size="sm"
        :options="[
          { value: 'cancel', label: 'focusAction: cancel' },
          { value: 'confirm', label: 'focusAction: confirm' },
        ]"
      />
      <GrButton variant="primary" tone="danger" @click="openDialog">
        Удалить рабочую область
      </GrButton>
      <GrBadge size="sm" :tone="status.startsWith('Рабочая') ? 'danger' : 'neutral'">
        {{ status }}
      </GrBadge>
    </div>

    <GrConfirmDialog
      v-model="open"
      title="Удалить рабочую область?"
      description="Первая попытка вернёт ошибку сервера — окно останется открытым для повтора."
      confirm-text="Удалить"
      confirm-tone="danger"
      :focus-action="focusAction"
      :confirm-loading="loading"
      :error="error"
      :close-on-confirm="false"
      persistent
      @confirm="onConfirm"
    />
  </div>
</template>