79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { form } from '@/__fk-inputs__/inputs/form';
|
||
import { InputText } from '@/__fk-inputs__/inputs/input-text';
|
||
import { text } from '@/__fk-inputs__/inputs/_demo_text';
|
||
import Swal from 'sweetalert2';
|
||
|
||
async function submit() {
|
||
await new Promise(r => setTimeout(r, 500))
|
||
Swal.fire({
|
||
title: 'Submitted! 🎉',
|
||
icon: 'success',
|
||
showConfirmButton: false,
|
||
timer: 1500
|
||
})
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<Fieldset
|
||
legend="Form 1"
|
||
pt:content:class="flex justify-center"
|
||
>
|
||
<!-- https://formkit.com/inputs/form#props-attributes -->
|
||
<FormKit
|
||
:config="{
|
||
classes: {
|
||
form: 'flex flex-col gap-4 w-full',
|
||
outer: 'flex flex-col gap-2',
|
||
label: 'font-bold block'
|
||
}
|
||
}"
|
||
:type="form"
|
||
#default="{ value }"
|
||
@submit="submit"
|
||
submit-label="提交 ✨"
|
||
:submit-attrs="{ class: 'btn btn-primary' }"
|
||
:errors="['our server is not working.', 'But we don’t like you anyway!']"
|
||
incomplete-message="Please fill out all fields."
|
||
>
|
||
<FormKit
|
||
:type="InputText"
|
||
name="typeInputText"
|
||
label="输入框"
|
||
placeholder="请输入"
|
||
some="prop"
|
||
validation="required"
|
||
validation-visibility="live"
|
||
>
|
||
</FormKit>
|
||
<FormKit
|
||
:type="text"
|
||
label="customType"
|
||
value="default value"
|
||
validation="required"
|
||
validation-visibility="live"
|
||
>
|
||
<!-- <template #label>
|
||
<div>labelll</div>
|
||
</template> -->
|
||
</FormKit>
|
||
|
||
<FormKit
|
||
type="text"
|
||
label="默认text"
|
||
value="default value"
|
||
validation="required"
|
||
validation-visibility="live"
|
||
>
|
||
</FormKit>
|
||
|
||
<pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-900 ">{{ value }}</pre>
|
||
<!-- <FormKitSummary /> -->
|
||
</FormKit>
|
||
</Fieldset>
|
||
|
||
</template>
|