kglt/fensir
1
0
Fork 0
forked from ofs/fensir
Code Activity

Compare commits

base: kglt:feat/9-create-context-form
Branches Tags
kglt:release
kglt:feat/9-create-context-form
kglt:feat/test
kglt:feat/license
ofs:release
..
compare: ofs:release
Branches Tags
ofs:release
kglt:release
kglt:feat/9-create-context-form
kglt:feat/test
kglt:feat/license

No commits in common. "feat/9-create-context-form" and "release" have entirely different histories.
feat/9-cre ... release

16 changed files with 24 additions and 202 deletions
Show stats Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -11,7 +11,6 @@
"astro": "^4.16.8",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"vee-validate": "^4.14.7",
"viem": "2",
"wagmi": "^2.13.4"
},

6
src/components/Button.vue
View file

@ -2,9 +2,9 @@
</script>
<template>
<button class="primary">
<slot />
</button>
<button class="primary">
Sign in
</button>
</template>
<style scoped>

6
src/components/Card.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="card">
<slot />
</div>
<div class="card">
<slot />
</div>
</template>
<style>

97
src/components/ContextCreate.vue
View file

@ -1,97 +0,0 @@
<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: "Choose a zod schema for data",
name: "types",
as: "input",
asType: "file",
}, {
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);
background: var(--darken);
width: 30vw;
gap: 20px;
padding: 20px 40px;
}
form > h3 {
font-size: 24px;
justify-self: center;
}
div.form-field {
font-size: 16px;
display: inline-grid;
gap: 5px;
}
div.form-field:has(input[type='radio']) {
justify-content: start;
grid-template-areas: "b a";
gap: 10px;
& :deep(input) {
grid-area: b;
}
& :deep(label) {
grid-area: a;
}
}
</style>

30
src/components/DynamicForm.vue
View file

@ -1,30 +0,0 @@
<script setup lang="ts">
import { reactive } from "vue"
import Input from "@/components/Input.vue"
import Textarea from "@/components/Textarea.vue"
const props = defineProps<{
schema: object
}>()
const field = reactive(props.schema)
</script>
<template>
<div class="form-field">
<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'"
maxlength="250"
:name="field.name"
/>
</div>
</template>
<style scoped>
</style>

11
src/components/Input.vue
View file

@ -1,11 +0,0 @@
<script setup lang="ts">
const inputModel = defineModel()
</script>
<template>
<input v-model="inputModel">
</template>
<style scoped>
@import url("@/styles/components/inputs.css")
</style>

26
src/components/Search.vue
View file

@ -1,20 +1,20 @@
<script setup lang="ts">
import CarbonArrowRight from "@/icons/CarbonArrowRight.vue"
import CarbonRecentlyView from "@/icons/CarbonRecentlyViewed.vue"
import CarbonArrowRight from '@/icons/CarbonArrowRight.vue'
import CarbonRecentlyView from '@/icons/CarbonRecentlyViewed.vue'
</script>
<template>
<fieldset class="search">
<div class="search__context">
<span class="search__context-title"> context: </span>
<span class="search__context-item"> global </span>
</div>
<input type="search">
<div class="search__buttons">
<CarbonRecentlyView class="icon" />
<CarbonArrowRight class="icon" />
</div>
</fieldset>
<fieldset class="search">
<div class="search__context">
<span class="search__context-title"> context: </span>
<span class="search__context-item"> global </span>
</div>
<input type="search" />
<div class="search__buttons">
<CarbonRecentlyView class="icon" />
<CarbonArrowRight class="icon" />
</div>
</fieldset>
</template>
<style scoped>

15
src/components/Textarea.vue
View file

@ -1,15 +0,0 @@
<script setup lang="ts">
const inputModel = defineModel()
</script>
<template>
<textarea v-model="inputModel" />
</template>
<style scoped>
@import url("@/styles/components/inputs.css");
textarea {
resize: none;
}
</style>

2
src/icons/CarbonAddLarge.vue
View file

@ -1,3 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M17 15V5h-2v10H5v2h10v10h2V17h10v-2z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M17 15V5h-2v10H5v2h10v10h2V17h10v-2z"/></svg>
</template>

2
src/icons/CarbonArrowRight.vue
View file

@ -1,3 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z"/></svg>
</template>

2
src/icons/CarbonArrowUpRight.vue
View file

@ -1,3 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z"/></svg>
</template>

2
src/icons/CarbonRecentlyViewed.vue
View file

@ -1,3 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z" /><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z"/><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2"/></svg>
</template>

2
src/icons/CarbonSearch.vue
View file

@ -1,3 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9"/></svg>
</template>

15
src/pages/create-context.astro
View file

@ -1,15 +0,0 @@
---
import Default from "@/layouts/Default.astro"
import ContextCreate from "@/components/ContextCreate.vue"
---
<Default>
<ContextCreate />
</Default>
<style>
:global(main) {
align-items: center;
justify-content: center;
}
</style>

9
src/styles/components/inputs.css
View file

@ -1,9 +0,0 @@
input, textarea {
background: var(--black);
outline: 0;
border: 1px solid var(--shadow);
padding: 0.5rem 0.75rem;
&:hover {
border: 1px solid var(--accent);
}
}