Add vuestic for form

src/App.vue

@@ -3,6 +3,16 @@ import Card from '@/components/card.vue'
 import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
 import { useCards } from '@/stores/cards.ts'
 import { ref } from 'vue'
+import {
+  VaButton,
+  VaButtonGroup,
+  VaCard,
+  VaCardContent,
+  VaColorInput,
+  VaCounter,
+  VaDivider,
+  VaInput,
+} from 'vuestic-ui'
 
 const cardStore = useCards()
 function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
@@ -11,7 +21,6 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
   }
 
   const values = presets[preset]
-  console.log(values)
   Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
 }
 const active = ref(-1)
@@ -20,59 +29,49 @@ const active = ref(-1)
 <template>
   <div class="grid grid-cols-3">
     <div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
-      <div
+      <VaCard
         v-for="(card, i) in cardStore.cards"
         :key="i"
-        class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0 border-2 border-gray-200 hover:border-gray-800 transition-colors"
+        class="m-3"
         @mouseover="active = i"
         @mouseleave="active = -1"
+        stripe
+        :stripe-color="active === i ? 'success' : card.bgColor"
       >
-        <input v-model="card.title" placeholder="Title" />
-        <div class="flex flex-row gap-2">
-          <input
-            v-model="card.bgColor"
-            placeholder="Title Background Color"
-            title="Title Background Color"
-            type="color"
-            class="h-16"
-          />
-          <input
-            v-model="card.textColor"
-            placeholder="Title Text Color"
-            title="Title Text Color"
-            type="color"
-            class="h-16"
-          />
-          <input
-            v-model="card.color"
-            placeholder="Background Color"
-            title="Background Color"
-            type="color"
-            class="h-16"
-          />
-          <input
-            v-model="card.nameColor"
-            placeholder="Name Text Color"
-            title="Name Text Color"
-            type="color"
-            class="h-16"
-          />
-          <input
-            v-model="card.textSize"
-            type="number"
-            min="1"
-            max="10"
-            placeholder="Name Text Size"
-            title="Name Text Size"
-          />
-          <select @change="(e) => presetChange(card, (e.target as any)!.value)" title="Preset">
-            <option v-for="(preset, key) in presets" :key="key" :value="key">
+        <VaCardContent class="flex flex-col gap-4">
+          <VaInput v-model="card.title" label="Title" clearable />
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <VaInput v-model="card.name" label="Name" class="col-span-2" clearable />
+            <VaCounter
+              v-model="card.textSize"
+              type="number"
+              min="1"
+              max="10"
+              label="Name Text Size"
+            />
+          </div>
+          <VaDivider />
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <VaColorInput v-model="card.bgColor" label="Title Background Color" />
+            <VaColorInput v-model="card.textColor" label="Title Text Color" />
+            <VaColorInput v-model="card.color" label="Background Color" />
+            <VaColorInput v-model="card.nameColor" label="Name Text Color" />
+          </div>
+          <VaDivider />
+          <h3 class="text-lg font-bold uppercase text-center">Apply a preset:</h3>
+          <VaButtonGroup class="mx-auto">
+            <VaButton
+              v-for="(preset, key) in presets"
+              :key="key"
+              :value="key"
+              :color="preset.bgColor"
+              @click="presetChange(card, key)"
+            >
               {{ preset.title }}
-            </option>
-          </select>
-        </div>
-        <input v-model="card.name" placeholder="Name" />
-      </div>
+            </VaButton>
+          </VaButtonGroup>
+        </VaCardContent>
+      </VaCard>
     </div>
     <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
       <card

src/assets/main.css

@@ -1,3 +1,5 @@
+@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
 @import 'tailwindcss';
 .card {
   width: 9cm;

src/colors.ts

@@ -7,6 +7,13 @@ export const presets = {
     nameColor: '#000000',
     title: 'Fachschaft 4',
   },
+  helping: {
+    bgColor: '#383838',
+    color: '#ffffff',
+    textColor: '#ffffff',
+    nameColor: '#000000',
+    title: 'Helping Hand',
+  },
   awareness: {
     bgColor: '#3e1c59',
     color: '#6f309f',

src/components/card.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <div
     class="flex flex-col border-2 border-gray-200 transition-colors card mx-auto w-full"
-    :class="{ 'border-gray-800': active }"
+    :class="{ 'border-red-800': active }"
     :style="{ backgroundColor: card.color }"
   >
     <div

src/main.ts

@@ -4,7 +4,10 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { createVuestic } from 'vuestic-ui'
+import 'vuestic-ui/styles/essential.css'
+import 'vuestic-ui/styles/typography.css'
 
 const pinia = createPinia()
 
-createApp(App).use(pinia.use(piniaPluginPersistedstate)).mount('#app')
+createApp(App).use(pinia.use(piniaPluginPersistedstate)).use(createVuestic()).mount('#app')