Add `ItCheckbox` component

client/src/components/circle/LearningSequence.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 
 
+import ItCheckbox from '@/components/ui/ItCheckbox.vue';
+
 defineProps(['learningSequence'])
 
 </script>
@@ -29,11 +31,12 @@ defineProps(['learningSequence'])
           v-for="learningContent in learningUnit.learningContents"
           class="flex items-center gap-4 pb-3"
         >
-          <div class="w-8 h-8" @click="$emit('toggleLearningContentCheckbox', learningContent)">
+          <ItCheckbox
-            <it-icon-checkbox-checked v-if="learningContent.completed" />
+            :modelValue="learningContent.completed"
-            <it-icon-checkbox-unchecked v-else />
+            @click="$emit('toggleLearningContentCheckbox', learningContent)"
-          </div>
+          >
-          <div>{{ learningContent.contents[0].type }}: {{ learningContent.title }} {{ learningContent.completed}}</div>
+            {{ learningContent.contents[0].type }}: {{ learningContent.title }}
+          </ItCheckbox>
         </div>
 
         <hr class="-mx-4 text-gray-500">

client/src/components/ui/ItCheckbox.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean,
+  disabled?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <div
+    class="cursor-pointer flex flex-row items-center"
+    :class="{
+      'opacity-50': disabled,
+      'cursor-not-allowed': disabled,
+    }"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
+    <div
+      v-if="modelValue"
+      class="
+        w-8 h-8
+        flex-none
+        bg-contain
+        bg-[url('/static/icons/icon-checkbox-checked.svg')]
+        hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')]
+        disabled:opacity-50
+        "
+    ></div>
+    <div
+      v-else
+      class="
+        w-8 h-8
+        flex-none
+        bg-contain
+        bg-[url('/static/icons/icon-checkbox-unchecked.svg')]
+        hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')]
+      "
+    ></div>
+    <div class="flex-auto pl-4"><slot></slot></div>
+  </div>
+
+</template>

client/src/views/StyelGuideView.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 
-import {ref} from 'vue'
+import {reactive} from 'vue'
 import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
 import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
+import ItCheckbox from '@/components/ui/ItCheckbox.vue';
-const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
-const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
-
-function colorBgClass(color: string, value: number) {
-  return `bg-${color}-${value}`;
-}
 
 
-const people = [
+const state = reactive({
+  checkboxValue: true,
+  dropdownValues: [
     {id: 1, name: 'Wade Cooper'},
     {id: 2, name: 'Arlene Mccoy'},
     {id: 3, name: 'Devon Webb'},
@@ -23,9 +19,17 @@ const people = [
     {id: 8, name: 'Mason Heaney'},
     {id: 9, name: 'Claudie Smitham'},
     {id: 10, name: 'Emil Schaefer'},
-]
+  ],
+  dropdownSelected: {id: 8},
+})
 
-const selected = ref(people[3])
+
+const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
+const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
+
+function colorBgClass(color: string, value: number) {
+  return `bg-${color}-${value}`;
+}
 
 </script>
 
@@ -189,11 +193,17 @@ const selected = ref(people[3])
 
     <h2 class="mt-8 mb-8">Buttons</h2>
 
-    <div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-between mb-16">
+    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
       <button class="btn-primary">Primary</button>
-      <a class="btn-primary inline-block" href="/">Primary Link</a>
       <button class="btn-secondary">Secondary</button>
       <button class="btn-blue">Blue</button>
+      <a class="btn-primary inline-block" href="/">Primary Link</a>
+    </div>
+
+    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
+      <button disabled class="btn-primary">Primary disabled</button>
+      <button disabled class="btn-secondary">Secondary disabled</button>
+      <button disabled class="btn-blue">Blue disabled</button>
     </div>
 
     <div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-start mb-16">
@@ -219,11 +229,11 @@ const selected = ref(people[3])
 
     <h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
 
-    <Listbox as="div" v-model="selected">
+    <Listbox as="div" v-model="state.dropdownSelected">
       <div class="mt-1 relative w-128">
         <ListboxButton
           class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
-          <span class="block truncate">{{ selected.name }}</span>
+          <span class="block truncate">{{ state.dropdownSelected.name }}</span>
           <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
           <it-icon-arrow-down class="h-5 w-5" aria-hidden="true"/>
         </span>
@@ -233,15 +243,15 @@ const selected = ref(people[3])
                     leave-to-class="opacity-0">
           <ListboxOptions
             class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-            <ListboxOption as="template" v-for="person in people" :key="person.id" :value="person"
+            <ListboxOption as="template" v-for="person in state.dropdownValues" :key="person.id" :value="person"
                            v-slot="{ active, selected }">
               <li
                 :class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+              <span :class="[state.dropdownSelected ? 'font-semibold' : 'font-normal', 'block truncate']">
                 {{ person.name }}
               </span>
 
-                <span v-if="selected"
+                <span v-if="state.dropdownSelected"
                       :class="[active ? 'text-white' : 'text-blue-900', 'absolute inset-y-0 right-0 flex items-center pr-4']">
                 <it-icon-check class="h-5 w-5" aria-hidden="true"/>
               </span>
@@ -252,6 +262,12 @@ const selected = ref(people[3])
       </div>
     </Listbox>
 
+    <h2 class="mt-8 mb-8">Checkbox</h2>
+
+    <ItCheckbox :disabled="false" class="" v-model="state.checkboxValue">Label</ItCheckbox>
+
+    <ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
+
   </main>
 </template>
 

server/vbv_lernwelt/static/icons/icon-checkbox-checked-hover.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="30" height="30" fill="#EDF2F6"/>
+    <rect x="1" y="1" width="28" height="28" rx="1" stroke="#00224D" stroke-width="2"/>
+    <path d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
+          fill="#00224D"/>
+</svg>

server/vbv_lernwelt/static/icons/icon-checkbox-unchecked-hover.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="30" height="30" fill="#EDF2F6"/>
+    <rect x="1" y="1" width="28" height="28" rx="1" stroke="#B1C1CA" stroke-width="2"/>
+</svg>

tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
     extend: {
       spacing: {
         '128': '32rem',
+      },
+      backgroundImage: {
       }
     },
     colors: {