feat(component): New checkbox component (#151)

* feat(component): New component checkbox

* feat(component): checkbox docs and link checkbox

* added gradient to home page

* remove unused props

* code refactor

* code refactor

* fix type error

* convert div to label

docs/.vitepress/config.ts

@@ -65,7 +65,7 @@ function getComponents() {
 function getFormComponents() {
   return [
     { text: 'Input', link: 'components/input' },
-    { text: 'Select', link: 'components/select' },
+    { text: 'Checkbox', link: 'components/checkbox' },
   ]
 }
 

docs/.vitepress/theme/clear.css

@@ -3,5 +3,11 @@ input,
 optgroup,
 select,
 textarea {
-    border: inherit; /* border: 0 by default in vitepress removes all border for border class */
+    border: inherit;
+    /* border: 0 by default in vitepress removes all border for border class */
+}
+
+:root {
+    --vp-home-hero-image-background-image: linear-gradient( -45deg, #41b88380 30%, #35495e80 );
+    --vp-home-hero-image-filter: blur(72px);
 }

docs/assets/logo.svg

@@ -1,4 +1,4 @@
-<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="240" height="240" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M107.273 56.6245C106.949 58.8577 105.476 61.8916 103.787 64.5294C101.655 67.8577 98.2729 70.1889 94.4018 70.9984L77.3494 74.5642C74.6087 75.1373 72.1235 76.5717 70.2575 78.6575L59.0764 91.1554C56.9751 93.5043 55.5064 92.9441 55.5064 89.7938C55.4809 89.9107 49.9572 104.156 64.5958 112.599C70.2204 115.844 78.3169 114.678 83.9414 111.434L113.743 94.2437C124.889 87.8151 132.758 76.9397 135.373 64.3507C135.477 63.8527 135.557 63.353 135.643 62.8535L107.273 56.6245Z" fill="url(#paint0_linear_3014_5022)"/>
     <path d="M99.5443 39.4536C105.169 42.6979 107.467 47.5279 107.467 54.0164C107.467 54.8972 107.398 55.7675 107.273 56.6245L119.281 61.7827L135.643 62.8535C137.738 50.7282 133.633 38.2474 126.272 28.3267C120.733 20.861 113.605 14.3822 105.036 9.43957C98.0753 5.42454 90.8417 2.77918 83.5741 1.32764L75.4085 11.902L72.8291 24.0442L99.5443 39.4536Z" fill="url(#paint1_linear_3014_5022)"/>
     <path d="M3.42839 48.3516C3.42533 48.3612 3.43379 48.364 3.43698 48.3544C4.06708 46.4645 4.85719 44.3561 5.84357 42.1036C10.996 30.3376 20.9252 22.4902 33.1404 18.4891C45.3556 14.4881 58.693 15.8905 69.8258 22.312L72.8287 24.044L83.5737 1.32743C49.3981 -5.49834 14.4695 14.5798 3.47184 48.22C3.46658 48.2361 3.44747 48.2922 3.42839 48.3516Z" fill="url(#paint2_linear_3014_5022)"/>

docs/components/checkbox.md

@@ -0,0 +1,69 @@
+<script setup>
+import CheckboxDefault from './checkbox/examples/CheckboxDefault.vue'
+import CheckboxDisabled from './checkbox/examples/CheckboxDisabled.vue'
+import CheckboxChecked from './checkbox/examples/CheckboxChecked.vue'
+import CheckboxLink from './checkbox/examples/CheckboxLink.vue'
+</script>
+# Vue Footer Component - Flowbite
+
+## Default checkbox
+
+```vue
+<script setup>
+import { Checkbox } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const ref1 = ref(false)
+</script>
+<template>
+  <Checkbox v-model="ref1" label="Default checkbox" />
+</template>
+```
+
+<CheckboxDefault />
+
+## Disabled checkbox
+
+```vue
+<script setup>
+import { Checkbox } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const ref1 = ref(false)
+</script>
+<template>
+  <Checkbox v-model="ref1" label="Disabled checkbox" :disabled="true" />
+</template>
+```
+
+<CheckboxDisabled />
+
+## Checked checkbox
+
+```vue
+<script setup>
+import { Checkbox } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const ref1 = ref(true)
+</script>
+<template>
+  <Checkbox v-model="ref1" label="Checked checkbox" />
+</template>
+```
+
+<CheckboxChecked />
+
+## Link with checkbox
+
+```vue
+<template>
+  <div>
+    <Checkbox>
+      <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">I agree with the terms and conditions</a>.
+    </Checkbox>
+  </div>
+</template>
+```
+
+<CheckboxLink />

docs/components/checkbox/examples/CheckboxChecked.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Checkbox v-model="ref3" label="Checked checkbox" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+
+const ref3 = ref(true)
+</script>

docs/components/checkbox/examples/CheckboxDefault.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Checkbox v-model="ref1" label="Default checkbox" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+
+const ref1 = ref(false)
+</script>

docs/components/checkbox/examples/CheckboxDisabled.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Checkbox v-model="ref2" label="Disabled checkbox" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+
+const ref2 = ref(false)
+</script>

docs/components/checkbox/examples/CheckboxLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <Checkbox v-model="ref1">
+      <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">I agree with the terms and conditions.</a>
+    </Checkbox>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+
+const ref1 = ref(false)
+</script>

docs/index.md

@@ -8,6 +8,9 @@ hero:
   name: Flowbite Vue 3
   text: Vue component library based on Tailwind CSS
   tagline: Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
+  image:
+    src: /assets/logo.svg
+    alt: VitePress
   actions:
     - theme: brand
       text: Get Started

src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,35 @@
+<template>
+  <label class="flex gap-3 items-center justify-start">
+    <input v-model="model" type="checkbox" :disabled="disabled" :class="checkboxClasses" />
+    <span v-if="label" :class="labelClasses">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useCheckboxClasses } from './composables/useCheckboxClasses'
+
+interface CheckboxProps {
+  modelValue?: boolean,
+  label?: string,
+  disabled?: boolean,
+}
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { checkboxClasses, labelClasses } = useCheckboxClasses()
+</script>

src/components/Checkbox/composables/useCheckboxClasses.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+// LABEL
+const defaultLabelClasses = 'block text-sm font-medium text-gray-900 dark:text-gray-300'
+
+// CHECKBOX
+const defaultCheckboxClasses = 'w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500'
+
+export function useCheckboxClasses() {
+  const checkboxClasses = computed(() => {
+      return simplifyTailwindClasses(defaultCheckboxClasses)
+  })
+
+  const labelClasses = computed(() => {
+    return defaultLabelClasses
+  })
+
+  return { 
+    checkboxClasses,
+    labelClasses,
+  }
+}