GrDialog

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

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

const open = ref(false)
</script>

<template>
  <div class="grid gap-3">
    <GrButton class="justify-self-start" @click="open = true">
      Open review dialog
    </GrButton>

    <GrDialog v-model="open" title="Publish weekly digest" size="sm">
      <div class="grid gap-4 text-sm text-[var(--gr-muted-fg)]">
        <p>
          `GrDialog` assembles a ready header/footer shell on top of `GrModal`, so it is convenient for simple approval flows.
        </p>

        <div class="flex flex-wrap items-center gap-2">
          <GrBadge size="sm" tone="info">
            12 recipients
          </GrBadge>
          <GrBadge size="sm" tone="neutral">
            Draft ready
          </GrBadge>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <GrButton variant="outline" @click="open = false">
            Cancel
          </GrButton>
          <GrButton @click="open = false">
            Publish
          </GrButton>
        </div>
      </template>
    </GrDialog>
  </div>
</template>

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

import { GrButton, GrDialog, GrCheckbox } from '@feugene/granularity'

const open = ref(false)
const confirmed = ref(false)

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

<template>
  <div class="grid gap-3">
    <GrButton variant="outline" class="justify-self-start" @click="openDialog">
      Open stateful dialog
    </GrButton>

    <div class="text-xs text-[var(--gr-muted-fg)]">
      Footer action enabled: <span class="font-medium text-[var(--gr-fg)]">{{ confirmed ? 'yes' : 'no' }}</span>
    </div>

    <GrDialog
        v-model="open"
        title="Share workspace"
        :header-config="{ paddingX: 'px-4', paddingY: 'py-3' }"
        :footer-config="{ paddingX: 'px-4', paddingY: 'py-3', bordered: false }"
    >
      <div class="grid gap-4 text-sm text-[var(--gr-muted-fg)]">
        <p>
          The internal form state keeps living inside the dialog shell, while section config helps adapt density to compact workflows.
        </p>

        <div class="flex items-start gap-3 rounded-lg border border-[var(--gr-brd)] p-3 text-[var(--gr-fg)]">
          <GrCheckbox v-model="confirmed">I reviewed access levels and notification scope.</GrCheckbox>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <GrButton variant="outline" @click="open = false">
            Later
          </GrButton>
          <GrButton :disabled="!confirmed" @click="open = false">
            Share workspace
          </GrButton>
        </div>
      </template>
    </GrDialog>
  </div>
</template>

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

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

const open = ref(false)
</script>

<template>
  <div class="grid gap-3">
    <GrButton class="justify-self-start" @click="open = true">
      Open guarded dialog
    </GrButton>

    <GrDialog v-model="open" title="Resolve blockers" :close-on-backdrop="false" :show-close-button="false">
      <div class="grid gap-3 text-sm text-[var(--gr-muted-fg)]">
        <p>
          In critical flows you can disable backdrop close and leave only explicit footer actions.
        </p>
        <ul class="list-disc pl-5">
          <li>2 approvals are still pending</li>
          <li>1 issue is waiting for legal review</li>
        </ul>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <GrButton variant="outline" @click="open = false">
            Keep draft
          </GrButton>
          <GrButton @click="open = false">
            Continue review
          </GrButton>
        </div>
      </template>
    </GrDialog>
  </div>
</template>

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

import { GrButton, GrDialog, GrFormField, GrInput, GrSegmented, GrSwitch } from '@feugene/granularity'

const open = ref(false)
const scrollBehavior = ref<'inside' | 'outside'>('inside')
const saved = ref(false)

const fields = Array.from({ length: 12 }, (_, index) => `Поле ${index + 1}`)
const model = ref<Record<string, string>>({})

const hint = computed(() =>
  scrollBehavior.value === 'inside'
    ? 'Шапка и подвал закреплены — «Сохранить» на виду с первого кадра'
    : 'Скроллится вся страница окна: до кнопок надо доскроллить',
)

function save() {
  saved.value = true
  open.value = false
}
</script>

<template>
  <div class="grid gap-3">
    <GrSegmented
      v-model="scrollBehavior"
      size="sm"
      class="justify-self-start"
      :options="[
        { value: 'inside', label: 'inside' },
        { value: 'outside', label: 'outside' },
      ]"
    />

    <div class="text-xs text-[var(--gr-muted-fg)]">
      {{ hint }}
    </div>

    <GrButton variant="outline" class="justify-self-start" @click="open = true">
      Настройки профиля
    </GrButton>

    <div v-if="saved" class="text-xs text-[var(--gr-muted-fg)]">
      Сохранено
    </div>

    <GrDialog
      v-model="open"
      title="Настройки профиля"
      :scroll-behavior="scrollBehavior"
    >
      <div class="grid gap-4">
        <GrFormField v-for="field in fields" :key="field" :label="field">
          <GrInput v-model="model[field]" :placeholder="field" />
        </GrFormField>

        <GrSwitch>Присылать уведомления</GrSwitch>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <GrButton variant="outline" @click="open = false">
            Отмена
          </GrButton>
          <GrButton @click="save">
            Сохранить
          </GrButton>
        </div>
      </template>
    </GrDialog>
  </div>
</template>