Skip to content
Snippets Groups Projects

Style configuration

Merged Agnethe Kval-Engstad requested to merge style-configuration into development
1 file
+ 14
14
Compare changes
  • Side-by-side
  • Inline
@@ -74,9 +74,9 @@ const categoryName = ref('');
const allSelected = computed(() => form.values.categories.every(category => category.selected))
console.log(allSelected)
//TODO: Implement chooseAll functionality
//TODO: Implement save button
//TODO: Implement card functionality and form
const saved = () => {
alert('Lagret!');
}
</script>
@@ -86,15 +86,15 @@ console.log(allSelected)
<div>
<h1 class="text-3xl font-bold text-center md:text-left md:pl-10">Konfigurasjon</h1>
<form @submit.prevent="onSubmit" class="flex flex-col md:flex-row space-y-8 px-8 gap-4 justify-center pt-7" >
<div class="flex flex-col items-start mr-4 md:mt-40 space-y-8">
<div class="flex flex-col items-center mr-4 md:mt-20 space-y-8">
<FormField v-slot="{ componentField }" name="savingLevel">
<FormItem>
<FormLabel>Hvor mye vet du om sparing?</FormLabel>
<FormControl>
<ToggleGroup class="mt-4" :isPreview="true" type="single" variant="outline" v-bind="componentField">
<ToggleGroupItem :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
<ToggleGroupItem :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
<ToggleGroupItem :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
</ToggleGroup>
</FormControl>
</FormItem>
@@ -105,16 +105,16 @@ console.log(allSelected)
<FormLabel>Velg hvor mye du er villig til å endre vaner</FormLabel>
<FormControl>
<ToggleGroup class="mt-4" :isPreview="true" type="single" variant="outline" v-bind="componentField">
<ToggleGroupItem :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
<ToggleGroupItem :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
<ToggleGroupItem :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
<ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
</ToggleGroup>
</FormControl>
</FormItem>
</FormField>
<div>
<Button class="theme1" type="button" @click="themeStore.setTheme('theme1')">
<Button class="theme1 mr-2" type="button" @click="themeStore.setTheme('theme1')">
Tema 1
</Button>
<Button class="theme2" type="button" @click="themeStore.setTheme('theme2')">
@@ -123,7 +123,7 @@ console.log(allSelected)
</div>
</div>
<div class="items-center">
<div class="items-center border-4 border-primary p-4 rounded-3xl">
<div class="flex justify-between mb-4 mr-3">
<div class="flex items-center space-x-1">
<Checkbox id="chooseAll" @update:checked="selectAllCategories" :checked="allSelected"/>
@@ -163,7 +163,7 @@ console.log(allSelected)
<div class="grid grid-cols-2 gap-4">
<Card class="hover:opacity-75 w-full h-30" v-for="(category, index) in form.values.categories" :key="index"
@click="() => form.setFieldValue(`categories.${index}.selected`, !category.selected)"
:class="{ 'border-solid border-2 border-indigo-600'
:class="{ 'border-solid border-2 border-primary-dark'
: category.selected }">
<CardHeader>
<CardTitle>{{ category.name }}</CardTitle>
@@ -179,7 +179,7 @@ console.log(allSelected)
</div>
</form>
<div class="flex justify-center pt-4 mt-auto">
<Button id="save" type="submit" class="">Lagre</Button>
<Button @click="saved" id="save" type="submit" class="">Lagre</Button>
</div>
</div>
</MainLayout>
Loading