feat (tailwind): add checkbox group component

apps/tailwind-components/app.vue

@@ -65,8 +65,8 @@ function toggleLayout () {
             <label class="hover:cursor-pointer" for="umcg-theme"> UMCG </label>
           </div>
           <div class="px-1">
-            <input class="hover:cursor-pointer mr-2" id="umcg-theme" type="radio" v-model="theme" value="aumc" />
-            <label class="hover:cursor-pointer" for="umcg-theme"> AUMC </label>
+            <input class="hover:cursor-pointer mr-2" id="aumc-theme" type="radio" v-model="theme" value="aumc" />
+            <label class="hover:cursor-pointer" for="aumc-theme"> AUMC </label>
           </div>
         </fieldset>
       </div>

apps/tailwind-components/assets/css/main.css

@@ -96,6 +96,8 @@
     --backgroud-color-tab-active: var(--color-blue-500);
     --background-color-disabled: var(--color-gray-200);
     --background-color-invalid: var(--color-red-200);
+    --background-color-input: var(--color-white);
+    --background-color-input-checked: var(--color-yellow-500);
 
     --text-color-button-primary: var(--color-gray-900);
     --text-color-button-primary-hover: var(--color-gray-900);
@@ -164,6 +166,8 @@
     --border-color-search-input: var(--color-white);
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
+    --border-color-input: var(--color-transparent);
+    --border-color-input-inverted: var(--color-gray-600);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;
@@ -315,31 +319,6 @@
     --backgroud-color-button-primary-hover: var(--color-orange-200);
   }
 
-  [type="checkbox"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  }
-
-  [type="radio"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  [type="checkbox"],
-  [type="radio"] {
-    @apply focus:ring-0 focus:ring-offset-0;
-  }
-
-  [type="checkbox"],
-  [type="checkbox"]:checked,
-  [type="checkbox"]:checked:hover,
-  [type="checkbox"]:checked:focus,
-  [type="checkbox"]:indeterminate:hover,
-  [type="radio"],
-  [type="radio"]:checked,
-  [type="radio"]:checked:hover,
-  [type="radio"]:checked:focus {
-    @apply border-white;
-  }
-
   .v-popper--theme-tooltip {
     @apply text-body-sm font-sans flex items-center justify-center;
   }

apps/tailwind-components/components/input/Checkbox.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-const modelValue = defineModel<boolean | string>();
+const modelValue = defineModel<string | boolean>();
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    type="checkbox"
-    class="w-5 h-5 rounded-3px ml-[6px] mr-2.5 mt-0.5 accent-yellow-500 indeterminate:accent-yellow-500 border border-checkbox hover:cursor-pointer"
-  />
+  <input v-model="modelValue" type="checkbox" class="hover:cursor-pointer" />
 </template>

apps/tailwind-components/components/input/CheckboxGroup.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :id="`${id}-checkbox-group`">
+    <div class="flex flex-row" v-for="option in checkboxOptions">
+      <input
+        type="checkbox"
+        :id="`${id}-${option.value}`"
+        :name="id"
+        :value="option.value"
+        v-model="modelValue"
+        :checked="modelValue!.includes(option.value)"
+        class="sr-only"
+      />
+      <InputLabel
+        :for="`${id}-${option.value}`"
+        class="hover:cursor-pointer flex justify-start items-center"
+      >
+        <InputCheckboxIcon :checked="modelValue!.includes(option.value)" />
+        <span class="block" v-if="option.label">
+          {{ option.label }}
+        </span>
+        <span class="block" v-else>
+          {{ option.value }}
+        </span>
+      </InputLabel>
+    </div>
+    <div class="mt-2" v-if="showClearButton">
+      <button
+        type="reset"
+        :id="`${id}-checkbox-group-clear`"
+        :form="`${id}-checkbox-group`"
+        @click.prevent="resetModelValue"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface checkboxDataIF {
+  value: string;
+  label?: string;
+  checked?: boolean | undefined;
+}
+withDefaults(
+  defineProps<{
+    id: string;
+    checkboxOptions: checkboxDataIF[];
+    showClearButton?: boolean;
+  }>(),
+  {
+    showClearButton: false,
+  }
+);
+
+const modelValue = defineModel<string[]>();
+
+function resetModelValue() {
+  modelValue.value = [];
+}
+</script>

apps/tailwind-components/components/input/CheckboxIcon.vue

@@ -0,0 +1,51 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    view-box="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    class="hover:cursor-pointer w-[20px] mr-2.5"
+    :data-checked="checked"
+    :data-indeterminate="indeterminate"
+  >
+    <rect
+      width="20"
+      height="20"
+      :class="{
+        'fill-input': !checked && !indeterminate,
+        'fill-input-checked stroke-none': checked || indeterminate,
+      }"
+    />
+    <path
+      v-if="checked"
+      d="M5,10 L 9,14 L 16,6"
+      class="stroke-gray-900"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+    />
+    <path
+      v-if="indeterminate"
+      d="M5,10 L 15,10"
+      class="stroke-gray-900"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    checked?: boolean;
+    indeterminate?: boolean;
+  }>(),
+  {
+    checked: false,
+    indeterminate: false,
+  }
+);
+</script>

apps/tailwind-components/components/input/Tree.vue

@@ -90,8 +90,8 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
     ]"
   >
     <li v-for="node in nodes" :key="node.name" class="mt-2.5 relative">
-      <span class="flex items-center">
-        <span
+      <div class="flex items-center">
+        <button
           v-if="node.children?.length"
           @click.stop="toggleExpand(node.name)"
           class="-left-[11px] top-0 rounded-full hover:cursor-pointer h-6 w-6 flex items-center justify-center absolute z-20"
@@ -105,11 +105,12 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
         >
           <BaseIcon
             :name="
-              expandedNodes.includes(node.name) ? 'caret-down' : 'caret-up'
+              expandedNodes.includes(node.name) ? 'caret-down' : 'caret-right'
             "
             :width="20"
           />
-        </span>
+          <span class="sr-only">expand {{ node.name }}</span>
+        </button>
         <template v-if="!isRoot">
           <BaseIcon
             v-if="node.children?.length"
@@ -124,25 +125,42 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
             class="text-blue-200 absolute -top-[9px]"
           />
         </template>
-      </span>
-      <div class="flex items-start ml-4">
-        <div class="flex items-center">
-          <input
-            type="checkbox"
+      </div>
+      <div class="flex justify-start items-center ml-4">
+        <input
+          type="checkbox"
+          :indeterminate="
+            node.children?.some((c) => modelValue.includes(c.name)) &&
+            !node.children?.every((c) => modelValue.includes(c.name))
+          "
+          :id="node.name"
+          :name="node.name"
+          :checked="modelValue.includes(node.name)"
+          @click.stop="toggleSelect(node)"
+          class="sr-only"
+        />
+        <InputLabel
+          :for="node.name"
+          class="flex justify-center items-start hover:cursor-pointer"
+        >
+          <InputCheckboxIcon
             :indeterminate="
               node.children?.some((c) => modelValue.includes(c.name)) &&
               !node.children?.every((c) => modelValue.includes(c.name))
             "
-            :id="node.name"
-            :name="node.name"
-            :checked="modelValue.includes(node.name)"
-            @click.stop="toggleSelect(node)"
-            class="w-5 h-5 rounded-3px ml-[6px] mr-2.5 mt-0.5 accent-yellow-500 indeterminate:accent-yellow-500 border border-checkbox hover:cursor-pointer"
+            :checked="
+              modelValue.includes(node.name) &&
+              node.children?.every((c) => modelValue.includes(c.name))
+            "
+            class="w-[20px] ml-[-6px]"
+            :class="{
+              '[&>rect]:stroke-gray-400': inverted,
+            }"
           />
-        </div>
-        <label :for="node.name" class="hover:cursor-pointer text-body-sm group">
-          <span class="group-hover:underline">{{ node.name }}</span>
-        </label>
+          <span class="block w-[calc(100%-20px)] text-body-sm leading-normal">{{
+            node.name
+          }}</span>
+        </InputLabel>
         <div class="inline-flex items-center whitespace-nowrap">
           <div class="inline-block pl-1">
             <CustomTooltip
@@ -154,7 +172,6 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
           </div>
         </div>
       </div>
-
       <Tree
         v-if="node.children.length"
         v-show="expandedNodes.includes(node.name)"