From c3e88262533b4711b2a0395a96f2ae4a26d8f0b5 Mon Sep 17 00:00:00 2001
From: Vasu Singh <vasucp1207@gmail.com>
Date: Fri, 16 Jun 2023 18:50:45 +0530
Subject: [PATCH] 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                     |  2 +-
 docs/.vitepress/theme/clear.css               |  8 ++-
 docs/assets/logo.svg                          |  2 +-
 docs/components/checkbox.md                   | 69 +++++++++++++++++++
 .../checkbox/examples/CheckboxChecked.vue     | 12 ++++
 .../checkbox/examples/CheckboxDefault.vue     | 12 ++++
 .../checkbox/examples/CheckboxDisabled.vue    | 12 ++++
 .../checkbox/examples/CheckboxLink.vue        | 14 ++++
 docs/index.md                                 |  3 +
 src/components/Checkbox/Checkbox.vue          | 35 ++++++++++
 .../composables/useCheckboxClasses.ts         | 23 +++++++
 11 files changed, 189 insertions(+), 3 deletions(-)
 create mode 100644 docs/components/checkbox.md
 create mode 100644 docs/components/checkbox/examples/CheckboxChecked.vue
 create mode 100644 docs/components/checkbox/examples/CheckboxDefault.vue
 create mode 100644 docs/components/checkbox/examples/CheckboxDisabled.vue
 create mode 100644 docs/components/checkbox/examples/CheckboxLink.vue
 create mode 100644 src/components/Checkbox/Checkbox.vue
 create mode 100644 src/components/Checkbox/composables/useCheckboxClasses.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8cf9f9f..b1e6b95 100644
--- a/docs/.vitepress/config.ts
+++ b/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' },
   ]
 }
 
diff --git a/docs/.vitepress/theme/clear.css b/docs/.vitepress/theme/clear.css
index 0653c2f..2da8c79 100644
--- a/docs/.vitepress/theme/clear.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
index 1a29055..cdf70d9 100644
--- a/docs/assets/logo.svg
+++ b/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)"/>
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
new file mode 100644
index 0000000..a57e2e1
--- /dev/null
+++ b/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 />
diff --git a/docs/components/checkbox/examples/CheckboxChecked.vue b/docs/components/checkbox/examples/CheckboxChecked.vue
new file mode 100644
index 0000000..ea28e5b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxDefault.vue b/docs/components/checkbox/examples/CheckboxDefault.vue
new file mode 100644
index 0000000..cf15cd9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxDisabled.vue b/docs/components/checkbox/examples/CheckboxDisabled.vue
new file mode 100644
index 0000000..906e285
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxLink.vue b/docs/components/checkbox/examples/CheckboxLink.vue
new file mode 100644
index 0000000..065f405
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index c70f0ee..4c0c540 100644
--- a/docs/index.md
+++ b/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
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
new file mode 100644
index 0000000..b7785e1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Checkbox/composables/useCheckboxClasses.ts b/src/components/Checkbox/composables/useCheckboxClasses.ts
new file mode 100644
index 0000000..bd4e7d5
--- /dev/null
+++ b/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,
+  }
+}
\ No newline at end of file