From 28778dd0b73d97ca4bb15743056637db279f0a9c Mon Sep 17 00:00:00 2001
From: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
Date: Mon, 31 Jul 2023 23:51:15 +0300
Subject: [PATCH] feat(app): #37 Checkbox

This pull request is intended to close issue #37

Closes: #37
---
 packages/windi/src/App.vue                    |  44 +++----
 .../src/Types/componentsTypes/components.ts   |  10 ++
 packages/windi/src/Types/enums/Components.ts  |   1 +
 .../src/components/Checkbox/WCheckbox.vue     | 108 ++++++++++++++++++
 .../windi/src/components/Checkbox/index.ts    |   5 +
 packages/windi/src/index.ts                   |   3 +
 packages/windi/src/theme/windiTheme.ts        |  52 ++++++++-
 7 files changed, 195 insertions(+), 28 deletions(-)
 create mode 100644 packages/windi/src/components/Checkbox/WCheckbox.vue
 create mode 100644 packages/windi/src/components/Checkbox/index.ts

diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
index 6a918f6..01bcb2d 100644
--- a/packages/windi/src/App.vue
+++ b/packages/windi/src/App.vue
@@ -6,6 +6,7 @@ const value = ref('')
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
+    <!-- <WCheckbox v-model="value" name="notifications" label="Notifications" required help="Please check this box" /> -->
     <!-- <div class="w-96">
       <WAlert
         :is-visible="true" :variant="['warning-light']" transition="fade" title="Alert" closable
@@ -21,11 +22,11 @@ const value = ref('')
     <!-- <WButton link @click="handle()">
       <WIcon name="ph:x" />
     </WButton> -->
-    <div class="w-96">
+    <!-- <div class="w-96">
       <WInput
         v-model="value" label="Email" type="email" help="You have to enter your email to proceed" placeholder="Search" size="xl" :variant="['my-variant']"
       />
-    </div>
+    </div> -->
     <!-- <button @click="handle()">
       Button
     </button> -->
@@ -34,34 +35,25 @@ const value = ref('')
     <!-- <WBadge position="top-right" value="100" :max-value="99" color="lime">
       <WIcon name="ph:bell" size="3xl" />
     </WBadge> -->
-    <!-- <div class="w-96">
-      <WAccordion>
-        <WAccordionItem title="Title 1">
-          Reacting against a rich and affluent Britain of the 1960s, it tried to
-          re-radicalise a design industry which the signatories felt had become
-          lazy and uncritical. Drawing on ideas shared by critical theory, the
-          Frankfurt School, and the counter-culture of the time, it explicitly
-          reaffirmed the belief that design is not a neutral, value-free
-          process.
+    <div class="max-w-md">
+      <WAccordion class="grid gap-3">
+        <WAccordionItem rounded title="1. How do I host Supabase?">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad error distinctio beatae odio natus unde ratione,
+          veniam assumenda dolor inventore cum architecto velit, ducimus ab debitis aut. Deserunt, atque enim vel
+          consectetur tenetur qui illo.
         </WAccordionItem>
-        <WAccordionItem title="Title 2">
-          Reacting against a rich and affluent Britain of the 1960s, it tried to
-          re-radicalise a design industry which the signatories felt had become
-          lazy and uncritical. Drawing on ideas shared by critical theory, the
-          Frankfurt School, and the counter-culture of the time, it explicitly
-          reaffirmed the belief that design is not a neutral, value-free
-          process.
+        <WAccordionItem rounded title="2. Do you support only PostgreSQL?">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad error distinctio beatae odio natus unde ratione,
+          veniam assumenda dolor inventore cum architecto velit, ducimus ab debitis aut. Deserunt, atque enim vel
+          consectetur tenetur qui illo.
         </WAccordionItem>
-        <WAccordionItem title="Title 3">
-          Reacting against a rich and affluent Britain of the 1960s, it tried to
-          re-radicalise a design industry which the signatories felt had become
-          lazy and uncritical. Drawing on ideas shared by critical theory, the
-          Frankfurt School, and the counter-culture of the time, it explicitly
-          reaffirmed the belief that design is not a neutral, value-free
-          process.
+        <WAccordionItem rounded title="3. Do you have a library for JavaScript and Flutter?">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad error distinctio beatae odio natus unde ratione,
+          veniam assumenda dolor inventore cum architecto velit, ducimus ab debitis aut. Deserunt, atque enim vel
+          consectetur tenetur qui illo.
         </WAccordionItem>
       </WAccordion>
-    </div> -->
+    </div>
     <!-- <div class="w-96">
       <WAlert :is-visible="show" variant="warning-light" transition="fade" title="Alert" closable @close="handleClose">
         <template #leading>
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index 1059b93..8dfe584 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/packages/windi/src/Types/componentsTypes/components.ts
@@ -106,6 +106,14 @@ export interface WInput extends WComponentRoot {
   inputRequired?: string
 }
 
+export interface WCheckbox extends WComponentRoot {
+  checkboxWrapper?: string
+  checkboxLabel?: string
+  checkboxRequired?: string
+  checkboxHelp?: string
+  checkIcon?: string
+  checkIconActive?: string
+}
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -129,3 +137,5 @@ export type WAccordionVariants = WithVariantProps<WAccordion>
 export type WKbdVariants = WithVariantProps<WKbd>
 
 export type WInputVariants = WithVariantProps<WInput>
+
+export type WCheckboxVariants = WithVariantProps<WCheckbox>
diff --git a/packages/windi/src/Types/enums/Components.ts b/packages/windi/src/Types/enums/Components.ts
index aac9c9d..9f00c5f 100644
--- a/packages/windi/src/Types/enums/Components.ts
+++ b/packages/windi/src/Types/enums/Components.ts
@@ -10,5 +10,6 @@ export enum Components {
   WButton = 'WButton',
   WButtonGroup = 'WButtonGroup',
   WInput = 'WInput',
+  WCheckbox = 'WCheckbox',
   WKbd = 'WKbd',
 }
diff --git a/packages/windi/src/components/Checkbox/WCheckbox.vue b/packages/windi/src/components/Checkbox/WCheckbox.vue
new file mode 100644
index 0000000..07de828
--- /dev/null
+++ b/packages/windi/src/components/Checkbox/WCheckbox.vue
@@ -0,0 +1,108 @@
+<script setup lang='ts'>
+import { computed, defineComponent } from 'vue'
+import classNames from 'classnames'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import type { WCheckbox } from '../../Types/componentsTypes/components'
+import { Components } from '../../Types/enums/Components'
+import { useVariants } from '../../composables/useVariants'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WCheckbox>(),
+  value: {
+    type: [String, Number, Boolean, Object],
+    default: null,
+  },
+  modelValue: {
+    type: [Boolean, Array],
+    default: null,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
+  help: {
+    type: String,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', e): void
+}>()
+
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WCheckbox>(
+    Components.WCheckbox,
+    customProps as VariantJSWithClassesListProps<WCheckbox>,
+  )
+})
+
+const toggle = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+const checkboxWrapperClass = computed(() => {
+  return classNames(
+    variant.value.checkboxWrapper,
+    variant.value.checkIcon,
+    variant.value.checkIconActive,
+  )
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WCheckbox,
+})
+</script>
+
+<template>
+  <div :class="variant.root">
+    <div class="flex items-center h-5">
+      <input
+        :id="props.name" v-model="toggle" :name="props.name" :required="props.required" :value="props.value" :disabled="props.disabled"
+        :checked="props.checked" type="checkbox" class="form-checkbox" :class="checkboxWrapperClass"
+        v-bind="$attrs"
+      >
+    </div>
+    <div v-if="label || $slots.label" class="ms-2 text-sm">
+      <label :for="name" :class="variant.checkboxLabel">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" :class="variant.checkboxRequired">*</span>
+      </label>
+      <p v-if="help" :class="variant.checkboxHelp">
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/packages/windi/src/components/Checkbox/index.ts b/packages/windi/src/components/Checkbox/index.ts
new file mode 100644
index 0000000..9151a96
--- /dev/null
+++ b/packages/windi/src/components/Checkbox/index.ts
@@ -0,0 +1,5 @@
+import Checkbox from './WCheckbox.vue'
+
+export default {
+  Checkbox,
+}
diff --git a/packages/windi/src/index.ts b/packages/windi/src/index.ts
index dc08ac2..d578c09 100644
--- a/packages/windi/src/index.ts
+++ b/packages/windi/src/index.ts
@@ -13,6 +13,7 @@ import Accordion from './components/Accordion/WAccordion.vue'
 import AccordionItem from './components/Accordion/WAccordionItem.vue'
 import Kbd from './components/Kbd/WKbd.vue'
 import Input from './components/Input/WInput.vue'
+import Checkbox from './components/Checkbox/WCheckbox.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -28,6 +29,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   ButtonGroup,
   Kbd,
   Input,
+  Checkbox,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -50,3 +52,4 @@ export { default as Accordion } from './components/Accordion'
 export { default as AccordionItem } from './components/Accordion'
 export { default as Kbd } from './components/Kbd'
 export { default as Input } from './components/Input'
+export { default as Checkbox } from './components/Checkbox'
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index 055be7b..4a1bb1e 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/packages/windi/src/theme/windiTheme.ts
@@ -499,6 +499,54 @@ export default {
     },
   },
 
+  WCheckbox: {
+    base: {
+      root: 'relative flex items-start cursor-pointer',
+      checkboxWrapper: [
+        'relative flex items-center justify-center transition-all select-none h-4 w-4 overflow-hidden border border-slate-300 !rounded-full',
+        'active:peer-checked:pt-1.5',
+      ],
+      checkIcon: 'opacity-0 h-full w-full',
+      checkIconActive: '!mt-0 opacity-100 text-blue-600 drop-shadow-sm',
+      checkboxLabel: 'font-medium text-gray-700 dark:text-gray-200',
+      checkboxRequired: 'text-red-500 dark:text-red-400',
+      checkboxHelp: 'text-gray-500 dark:text-gray-400',
+    },
+    variants: {
+      default: {
+        checkbox:
+          '!hover:border-blue-600 active:!bg-blue-600/30 active:!border-blue-600 peer-checked:border-blue-600 peer-focus-visible:border-blue-600 peer-focus-visible:shadow-blue-600/30',
+        checkIcon: '!text-blue-600',
+      },
+      primary: {
+        checkboxWrapper:
+           '!accent-blue-600 !hover:!border-blue-600 active:!bg-blue-600/30 peer-checked:!bg-blue-600 peer-checked:border-blue-600 active:peer-checked:bg-blue-600 peer-focus-visible:border-blue-600 peer-focus-visible:shadow-blue-600/30',
+        checkIcon: '!text-white',
+      },
+      success: {
+        checkboxWrapper:
+          '!accent-green-600 active:!bg-green-500/30 active:!border-green-500 hover:!border-green-500 active:peer-checked:bg-green-500 peer-checked:!bg-green-500 peer-checked:border-green-500 peer-focus-visible:border-green-500 peer-focus-visible:shadow-green-500/30',
+        checkIcon: '!text-white',
+      },
+      warning: {
+        checkboxWrapper:
+          '!accent-orange-600 active:!bg-orange-500/30 active:!border-orange-500 hover:!border-orange-500 active:peer-checked:bg-orange-500 peer-checked:!bg-orange-500 peer-checked:border-orange-500 peer-focus-visible:border-orange-500 peer-focus-visible:shadow-orange-500/30',
+        checkIcon: '!text-white',
+      },
+      danger: {
+        checkboxWrapper:
+          '!accent-red-600 active:!bg-red-500/30 active:!border-red-500 hover:!border-red-500 peer-checked:!bg-red-500 active:peer-checked:bg-red-500 peer-checked:border-red-500 peer-focus-visible:border-red-500 peer-focus-visible:shadow-red-500/30',
+        checkIcon: '!text-white',
+      },
+      disabled: {
+        checkboxWrapper:
+          'cursor-not-allowed !border-gray-300 active:!border-gray-300 !bg-gray-100 active:!bg-gray-100 peer-checked:!border-gray-300 hover:!border-gray-300 active:!pt-0 dark:!text-zinc-500 dark:!bg-neutral-700 dark:!border-neutral-700 peer-checked:!bg-gray-100 dark:peer-checked:!bg-neutral-700 dark:peer-checked:!border-gray-700',
+        checkIcon: '!text-gray-300 dark:!text-gray-500',
+        checkboxLabel: 'text-gray-300 dark:text-gray-500',
+      },
+    },
+  },
+
   // chatgpt 😜
   WButtonGroup: {
     base: {
@@ -523,7 +571,7 @@ export default {
   },
   WAccordionItem: {
     base: {
-      root: 'bg-white border-t border-b last:border-b-0 border-gray-300 transition duration-100 hover:bg-gray-100',
+      root: 'bg-white border border-gray-300 transition duration-100 hover:bg-gray-100',
       accordionItemActiveBackgroundColor: 'bg-gray-200',
       accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg',
       accordionItemTitle: 'font-medium text-black',
@@ -538,7 +586,7 @@ export default {
     },
     variants: {
       default: {
-        root: 'bg-white border-t border-b last:border-b-0 border-gray-300 transition duration-100 hover:bg-gray-100',
+        root: 'bg-white border border-gray-300 transition duration-100 hover:bg-gray-100',
         accordionItemActiveBackgroundColor: 'bg-gray-200',
         accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg',
         accordionItemTitle: 'font-medium text-black',