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

feat: layouting form and linting elements

Browse source
This commit is contained in:
Konrad Geletey 2024-12-21 21:51:54 +03:00
parent ab17a1c40a
commit 80361ac31f
Signed by: kglt
GPG key ID: 386DEE24B60BD996
14 changed files with 109 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Button.vue
View file

@ -2,9 +2,9 @@
</script>
<template>
<button class="primary">
Sign in
</button>
<button class="primary">
<slot />
</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>

32
src/components/ContextCreate.vue
View file

@ -29,6 +29,11 @@ const formSchema = [{
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",
@ -61,5 +66,32 @@ const formSchema = [{
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>

24
src/components/DynamicForm.vue
View file

@ -1,6 +1,7 @@
<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
@ -10,16 +11,19 @@ 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"
/>
<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>

10
src/components/Input.vue
View file

@ -1,3 +1,11 @@
<script setup lang="ts">
const inputModel = defineModel()
</script>
<template>
<input class="test" />
<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 Normal file
View file

@ -0,0 +1,15 @@
<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>

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

@ -7,3 +7,9 @@ import ContextCreate from "@/components/ContextCreate.vue"
<ContextCreate />
</Default>
<style>
:global(main) {
align-items: center;
justify-content: center;
}
</style>

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

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