Form Components

<script setup>
import { ref } from 'vue';
import {
   SparkForm,
   SparkInput,
   SparkSelect,
   SparkCombobox,
   SparkCheckbox,
   SparkTextarea,
   SparkButton,
} from '@katforge/spark';
import source from './SparkDemoForm.vue?raw';

const email    = ref ('');
const password = ref ('');
const role     = ref ('');
const timezone = ref ('');
const bio      = ref ('');
const terms    = ref (false);
const interests = ref ([]);
const submitted = ref (null);

const roles = [
   { value: 'admin',  label: 'Administrator' },
   { value: 'editor', label: 'Editor'        },
   { value: 'viewer', label: 'Viewer'        },
];

const timezones = [
   { value: 'America/Los_Angeles', label: 'America / Los Angeles' },
   { value: 'America/New_York',    label: 'America / New York'    },
   { value: 'Europe/London',       label: 'Europe / London'       },
   { value: 'Europe/Berlin',       label: 'Europe / Berlin'       },
   { value: 'Asia/Tokyo',          label: 'Asia / Tokyo'          },
   { value: 'Asia/Singapore',      label: 'Asia / Singapore'      },
   { value: 'Australia/Sydney',    label: 'Australia / Sydney'    },
];

function onSubmit (values, ctx) {
   submitted.value = values;
   ctx.done ();
}

function reset () {
   email.value     = '';
   password.value  = '';
   role.value      = '';
   timezone.value  = '';
   bio.value       = '';
   terms.value     = false;
   interests.value = [];
   submitted.value = null;
}
</script>

<template>
   <SparkDemoBox :source="source">
      <ClientOnly>
         <SparkForm
            validation-visibility="blur"
            class="space-y-5"
            @submit="onSubmit"
         >
            <SparkInput
               v-model="email"
               name="email"
               type="email"
               label="Email"
               placeholder="you@example.com"
               validation="required|email"
               autocomplete="email"
            />

            <SparkInput
               v-model="password"
               name="password"
               type="password"
               label="Password"
               placeholder="At least 8 characters"
               validation="required|length:8"
               help="Minimum 8 characters"
            />

            <SparkSelect
               v-model="role"
               name="role"
               label="Role"
               placeholder="Choose one…"
               :options="roles"
               validation="required"
            />

            <SparkCombobox
               v-model="timezone"
               name="timezone"
               label="Timezone"
               placeholder="Search timezones…"
               :options="timezones"
               validation="required"
            />

            <SparkTextarea
               v-model="bio"
               name="bio"
               label="Bio"
               placeholder="Tell us about yourself"
               :rows="3"
               help="Optional"
            />

            <div class="space-y-2">
               <div class="text-xs font-semibold uppercase tracking-wider text-white/40 mb-3 !mb-1">Interests</div>
               <SparkCheckbox v-model="interests" value="games"  label="Games"  />
               <SparkCheckbox v-model="interests" value="tools"  label="Tools"  />
               <SparkCheckbox v-model="interests" value="videos" label="Videos" />
            </div>

            <SparkCheckbox
               v-model="terms"
               name="terms"
               label="I agree to the terms"
               validation="required"
            />

            <div class="flex gap-3 pt-2">
               <SparkButton type="submit">Create account</SparkButton>
               <SparkButton variant="ghost" type="button" @click="reset">Reset</SparkButton>
            </div>
         </SparkForm>

         <div v-if="submitted" class="mt-6 rounded-kf-md border border-white/10 bg-black/40 p-4">
            <div class="text-xs font-semibold uppercase tracking-wider text-white/40 mb-3">Submitted values</div>
            <pre class="text-xs text-white/70 whitespace-pre-wrap">{{ JSON.stringify (submitted, null, 3) }}</pre>
         </div>
      </ClientOnly>
   </SparkDemoBox>
</template>

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

const saving   = ref (false);
const refresh  = ref (false);
const deleting = ref (false);

async function run (flag, ms = 1800) {
   flag.value = true;
   await new Promise ((r) => setTimeout (r, ms));
   flag.value = false;
}

const onSave    = () => run (saving);
const onRefresh = () => run (refresh);
const onDelete  = () => run (deleting);
</script>

<template>
   <SparkDemoBox :source="source">
      <ClientOnly>
         <div class="flex flex-wrap items-center gap-3">
            <SparkButton
               :loading="saving"
               @click="onSave"
            >
               Save changes
            </SparkButton>

            <SparkButton
               variant="ghost"
               :loading="refresh"
               @click="onRefresh"
            >
               Refresh feed
            </SparkButton>

            <SparkButton
               variant="hollow"
               color="#DC2626"
               :loading="deleting"
               @click="onDelete"
            >
               Delete account
            </SparkButton>
         </div>

         <p class="mt-6 text-xs text-white/40">
            Click any button. The width transitions smoothly down to fit the spinner, then back up when the request resolves.
         </p>
      </ClientOnly>
   </SparkDemoBox>
</template>