From 80361ac31f88efe014b200b746a8243071bcbf97 Mon Sep 17 00:00:00 2001
From: kogeletey <kg@re128.org>
Date: Sat, 21 Dec 2024 21:51:54 +0300
Subject: [PATCH] feat: layouting form and linting elements

---
 src/components/Button.vue          |  6 +++---
 src/components/Card.vue            |  6 +++---
 src/components/ContextCreate.vue   | 32 ++++++++++++++++++++++++++++++
 src/components/DynamicForm.vue     | 24 ++++++++++++----------
 src/components/Input.vue           | 10 +++++++++-
 src/components/Search.vue          | 26 ++++++++++++------------
 src/components/Textarea.vue        | 15 ++++++++++++++
 src/icons/CarbonAddLarge.vue       |  2 +-
 src/icons/CarbonArrowRight.vue     |  2 +-
 src/icons/CarbonArrowUpRight.vue   |  2 +-
 src/icons/CarbonRecentlyViewed.vue |  2 +-
 src/icons/CarbonSearch.vue         |  2 +-
 src/pages/create-context.astro     |  6 ++++++
 src/styles/components/inputs.css   |  9 +++++++++
 14 files changed, 109 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Textarea.vue
 create mode 100644 src/styles/components/inputs.css

diff --git a/src/components/Button.vue b/src/components/Button.vue
index fd7cae9..20392bb 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -2,9 +2,9 @@
 </script>
 
 <template>
-    <button class="primary">
-        Sign in
-    </button>
+  <button class="primary">
+    <slot />
+  </button>
 </template>
 
 <style scoped>
diff --git a/src/components/Card.vue b/src/components/Card.vue
index f07db8f..4caa0e8 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="card">
-        <slot />
-    </div>
+  <div class="card">
+    <slot />
+  </div>
 </template>
 
 <style>
diff --git a/src/components/ContextCreate.vue b/src/components/ContextCreate.vue
index de228a6..27fa266 100644
--- a/src/components/ContextCreate.vue
+++ b/src/components/ContextCreate.vue
@@ -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>
diff --git a/src/components/DynamicForm.vue b/src/components/DynamicForm.vue
index 4c5931e..36a1ce8 100644
--- a/src/components/DynamicForm.vue
+++ b/src/components/DynamicForm.vue
@@ -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>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 3a52c51..1a02107 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -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>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 44f7913..2133172 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -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>
diff --git a/src/components/Textarea.vue b/src/components/Textarea.vue
new file mode 100644
index 0000000..88cff8c
--- /dev/null
+++ b/src/components/Textarea.vue
@@ -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>
diff --git a/src/icons/CarbonAddLarge.vue b/src/icons/CarbonAddLarge.vue
index ac88b71..a4f92c5 100644
--- a/src/icons/CarbonAddLarge.vue
+++ b/src/icons/CarbonAddLarge.vue
@@ -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>
diff --git a/src/icons/CarbonArrowRight.vue b/src/icons/CarbonArrowRight.vue
index 0cdf4a1..01f2120 100644
--- a/src/icons/CarbonArrowRight.vue
+++ b/src/icons/CarbonArrowRight.vue
@@ -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>
diff --git a/src/icons/CarbonArrowUpRight.vue b/src/icons/CarbonArrowUpRight.vue
index b1735db..2196f90 100644
--- a/src/icons/CarbonArrowUpRight.vue
+++ b/src/icons/CarbonArrowUpRight.vue
@@ -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>
diff --git a/src/icons/CarbonRecentlyViewed.vue b/src/icons/CarbonRecentlyViewed.vue
index 85066aa..4988668 100644
--- a/src/icons/CarbonRecentlyViewed.vue
+++ b/src/icons/CarbonRecentlyViewed.vue
@@ -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>
diff --git a/src/icons/CarbonSearch.vue b/src/icons/CarbonSearch.vue
index 37ae6ba..0b04ca9 100644
--- a/src/icons/CarbonSearch.vue
+++ b/src/icons/CarbonSearch.vue
@@ -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>
diff --git a/src/pages/create-context.astro b/src/pages/create-context.astro
index ac5a407..7d3ac8f 100644
--- a/src/pages/create-context.astro
+++ b/src/pages/create-context.astro
@@ -7,3 +7,9 @@ import ContextCreate from "@/components/ContextCreate.vue"
     <ContextCreate />
 </Default>
 
+<style>
+:global(main) {
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/styles/components/inputs.css b/src/styles/components/inputs.css
new file mode 100644
index 0000000..45625e4
--- /dev/null
+++ b/src/styles/components/inputs.css
@@ -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);
+  }
+}