GrPromptDialog

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

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

const open = ref(false)
const value = ref('Q2 North Star')
const savedValue = ref(value.value)
</script>

<template>
  <div class="grid gap-3">
    <div class="flex items-center gap-3">
      <GrButton class="justify-self-start" @click="open = true">
        Rename objective
      </GrButton>
      <GrBadge size="sm" tone="neutral">
        {{ savedValue }}
      </GrBadge>
    </div>

    <GrPromptDialog
      v-model="open"
      v-model:value="value"
      title="Rename objective"
      label="Objective title"
      confirm-text="Save"
      @confirm="savedValue = $event"
    />
  </div>
</template>

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

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

const open = ref(false)
const note = ref('Call finance before noon')
const lastSubmitted = ref(note.value)
</script>

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

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Last submitted note: <span class="font-medium text-[var(--gr-fg)]">{{ lastSubmitted || '—' }}</span>
    </div>

    <GrPromptDialog
      v-model="open"
      v-model:value="note"
      title="Leave handoff note"
      label="Optional note"
      placeholder="Add context for the next shift"
      confirm-text="Attach"
      :required="false"
      button-size="sm"
      @confirm="lastSubmitted = $event"
    />
  </div>
</template>

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

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

const open = ref(false)
const value = ref('Acme Corp')
const savedCompany = ref(value.value)

function openDialog() {
  value.value = savedCompany.value
  open.value = true
}
</script>

<template>
  <div class="grid gap-3">
    <GrButton class="justify-self-start" @click="openDialog">
      Edit billing company
    </GrButton>

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Persisted value: <span class="font-medium text-[var(--gr-fg)]">{{ savedCompany }}</span>
    </div>

    <GrPromptDialog
      v-model="open"
      v-model:value="value"
      title="Billing company"
      label="Legal entity"
      description="Reset incoming value on open if the source of truth lives outside the dialog."
      confirm-text="Update"
      cancel-text="Keep current"
      @confirm="savedCompany = $event"
    />
  </div>
</template>

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

import type { GrFormRule } from '@feugene/granularity'
import { GrBadge, GrButton, GrPromptDialog } from '@feugene/granularity'

const open = ref(false)
const reason = ref('')
const lastSubmitted = ref('')

// Те же правила, что и у `GrForm`: движок один на пакет.
const rules: GrFormRule[] = [
  { min: 15, message: 'Опишите причину подробнее — минимум 15 символов' },
  {
    validator: (value) => {
      const text = String(value).trim().toLowerCase()
      return text === 'нет' || text === 'не хочу'
        ? 'Такая причина не пройдёт проверку у согласующего'
        : true
    },
  },
]
</script>

<template>
  <div class="grid gap-3">
    <GrButton variant="outline" class="justify-self-start" @click="open = true">
      Отклонить заявку
    </GrButton>

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Последняя причина:
      <GrBadge class="ml-1">
        {{ lastSubmitted || '—' }}
      </GrBadge>
    </div>

    <GrPromptDialog
      v-model="open"
      v-model:value="reason"
      title="Причина отказа"
      label="Причина"
      placeholder="Что именно не так с заявкой"
      confirm-text="Отклонить"
      confirm-tone="danger"
      multiline
      :rows="4"
      autosize
      :maxlength="300"
      show-count
      :rules="rules"
      @confirm="lastSubmitted = $event"
    />
  </div>
</template>