Overlay Components

<template>
   <SparkDemoBox :source="source">
      <div class="flex flex-wrap gap-3">
         <SparkButton
            v-for="s in sizes"
            :key="s"
            variant="ghost"
            @click="openSize = s"
         >
            {{ s.toUpperCase () }}
         </SparkButton>
      </div>

      <ClientOnly>
         <SparkModal
            :model-value="openSize !== null"
            :size="openSize ?? 'md'"
            :title="`${(openSize ?? 'md').toUpperCase ()} modal`"
            @update:model-value="(v) => { if (!v) openSize = null }"
         >
            <p class="text-white/70 mb-4">
               This modal uses
               <code class="text-kf-primary-light bg-white/5 px-1.5 py-0.5 rounded-kf-sm text-sm">size="{{ openSize }}"</code>
               ({{ widths [openSize ?? 'md'] }} max width).
               Try <kbd class="text-kf-primary-light bg-white/5 px-1.5 py-0.5 rounded-kf-sm text-sm">Escape</kbd>
               or click outside to close.
            </p>

            <div class="rounded-kf-lg border border-kf-border bg-kf-surface-raised p-4 text-sm text-white/60">
               Modals include focus trapping, ARIA attributes, scroll lock, and animated backdrop transitions.
            </div>

            <div class="flex gap-3 justify-end mt-4">
               <SparkButton variant="ghost" @click="openSize = null">Cancel</SparkButton>
               <SparkButton @click="openSize = null">Confirm</SparkButton>
            </div>
         </SparkModal>
      </ClientOnly>
   </SparkDemoBox>
</template>

<script setup>
import { ref } from 'vue';
import { SparkButton, SparkModal } from '@katforge/spark';
import source from './SparkDemoModal.vue?raw';

const sizes = [ 'sm', 'md', 'lg', 'xl' ];
const widths = { sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem' };

const openSize = ref (null);
</script>

<template>
   <SparkDemoBox :source="source">
      <div class="flex flex-wrap gap-3">
         <SparkButton @click="fire ('success', 'Changes saved successfully')">Success</SparkButton>
         <SparkButton @click="fire ('error', 'Something went wrong')">Error</SparkButton>
         <SparkButton variant="ghost" @click="fire ('warning', 'Rate limit approaching')">Warning</SparkButton>
         <SparkButton variant="ghost" @click="fire ('info', 'Tip: try keyboard shortcuts')">Info</SparkButton>
      </div>

      <ClientOnly>
         <SparkFlashContainer />
      </ClientOnly>
   </SparkDemoBox>
</template>

<script setup>
import { SparkButton, SparkFlashContainer, useFlash } from '@katforge/spark';
import source from './SparkDemoFlash.vue?raw';

const flash = false ? useFlash () : null;

function fire (type, message) {
   if (flash) flash [type] (message);
}
</script>

<template>
   <SparkDemoBox :source="source">
      <div class="flex items-center gap-4">
         <SparkButton @click="show = true">Open Login</SparkButton>
         <span class="text-xs text-white/40">Live component connected to the KATforge API</span>
      </div>

      <ClientOnly>
         <SparkLogin
            v-model="show"
            :providers="[ 'discord', 'google' ]"
            :guest="true"
            @success="onSuccess"
         />
      </ClientOnly>
   </SparkDemoBox>
</template>

<script setup>
import { ref } from 'vue';
import { SparkButton, SparkLogin } from '@katforge/spark';
import source from './SparkDemoLogin.vue?raw';

const show = ref (false);

function onSuccess () {
   show.value = false;
}
</script>