feat: setup autoform and create context start wrote
This commit is contained in:
parent
d5fd820c35
commit
ab17a1c40a
6 changed files with 104 additions and 0 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -11,6 +11,7 @@
|
||||||
"astro": "^4.16.8",
|
"astro": "^4.16.8",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
|
"vee-validate": "^4.14.7",
|
||||||
"viem": "2",
|
"viem": "2",
|
||||||
"wagmi": "^2.13.4"
|
"wagmi": "^2.13.4"
|
||||||
},
|
},
|
||||||
|
|
65
src/components/ContextCreate.vue
Normal file
65
src/components/ContextCreate.vue
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from "vee-validate"
|
||||||
|
import DynamicForm from "@/components/DynamicForm.vue"
|
||||||
|
import Button from "@/components/Button.vue"
|
||||||
|
|
||||||
|
const formSchema = [{
|
||||||
|
label: "Context name",
|
||||||
|
name: "context-name",
|
||||||
|
as: "input",
|
||||||
|
}, {
|
||||||
|
label: "Description",
|
||||||
|
name: "description",
|
||||||
|
as: "textarea",
|
||||||
|
}, {
|
||||||
|
title: "Visibility",
|
||||||
|
defaultOption: "privacy",
|
||||||
|
options: [{
|
||||||
|
label: "Privacy",
|
||||||
|
name: "privacy",
|
||||||
|
as: "input",
|
||||||
|
asType: "radio",
|
||||||
|
}, {
|
||||||
|
label: "Public",
|
||||||
|
name: "public",
|
||||||
|
as: "input",
|
||||||
|
asType: "radio",
|
||||||
|
}],
|
||||||
|
}, {
|
||||||
|
label: "Server address",
|
||||||
|
name: "server-address",
|
||||||
|
as: "input",
|
||||||
|
}, {
|
||||||
|
label: "Price (per request)",
|
||||||
|
name: "price",
|
||||||
|
as: "input",
|
||||||
|
}, {
|
||||||
|
label: "Token",
|
||||||
|
name: "token",
|
||||||
|
defaultValue: "DAI",
|
||||||
|
as: "input",
|
||||||
|
}]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Form>
|
||||||
|
<h3> Create Context </h3>
|
||||||
|
<template v-for="element in formSchema" :key="element.name">
|
||||||
|
<DynamicForm v-if="element.name" :schema="element" />
|
||||||
|
<template v-else>
|
||||||
|
<span> {{ element.title }} </span>
|
||||||
|
<template v-for="option in element.options" :key="option.name">
|
||||||
|
<DynamicForm :schema="option" />
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<Button>Create</Button>
|
||||||
|
</Form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
form {
|
||||||
|
display: grid;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
</style>
|
26
src/components/DynamicForm.vue
Normal file
26
src/components/DynamicForm.vue
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive } from "vue"
|
||||||
|
import Input from "@/components/Input.vue"
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
schema: object
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const field = reactive(props.schema)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<label v-if="field.label" :for="field.name">{{ field.label }}</label>
|
||||||
|
<Input
|
||||||
|
v-if="field.as === 'input'" :id="field.name"
|
||||||
|
:name="field.name" :type="field.asType || 'text'"
|
||||||
|
:value="field.defaultValue"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
v-if="field.as === 'textarea'"
|
||||||
|
:name="field.name"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
3
src/components/Input.vue
Normal file
3
src/components/Input.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<input class="test" />
|
||||||
|
</template>
|
9
src/pages/create-context.astro
Normal file
9
src/pages/create-context.astro
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import Default from "@/layouts/Default.astro"
|
||||||
|
import ContextCreate from "@/components/ContextCreate.vue"
|
||||||
|
---
|
||||||
|
|
||||||
|
<Default>
|
||||||
|
<ContextCreate />
|
||||||
|
</Default>
|
||||||
|
|
Loading…
Reference in a new issue