fix(app): checkbox size

This pull request is intended to fix the Checkbox size by updating and fixing its theme.
selemondev · Aug 1, 2023 · 0181544 · 0181544
1 parent 28778dd
commit 0181544
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 124 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -4,7 +4,45 @@
 <template>
   <div class="grid place-items-center w-full min-h-screen">
     <div class="space-y-2">
-      <WButton icon="ph:reddit-logo" :trailing="false" label="Reddit" variant="outline" size="lg" />
+      <div class="max-w-md">
+        <WAccordion class="grid gap-3">
+          <WAccordionItem 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="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="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>
+      <!-- rounded -->
+      <!-- <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 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 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> -->
       <!-- <WButtonGroup >
         <WButton icon="bxl:meta" :trailing="false" variant="primary" size="lg" />
         <WButton icon="ic:round-play-arrow" :trailing="false" variant="danger" size="lg" />

diff --git a/packages/windi/package.json b/packages/windi/package.json
@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
+    "@selemondev/windi-ui": "workspace:^",
     "classnames": "^2.3.2",
     "tailwind-merge": "^1.14.0",
     "vue-router": "^4.2.4"

diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
@@ -1,104 +1,11 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 
-const value = ref('')
+const agree = ref('')
 </script>
 
 <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
-      >
-        <template #leading>
-          <WIcon name="ph:sun" size="2xl" />
-        </template>
-        <WAlertDescription>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, sint!
-        </WAlertDescription>
-      </WAlert>
-    </div> -->
-    <!-- <WButton link @click="handle()">
-      <WIcon name="ph:x" />
-    </WButton> -->
-    <!-- <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> -->
-    <!-- <button @click="handle()">
-      Button
-    </button> -->
-    <!-- <WKbd>M</WKbd>
-    <WKbd>M</WKbd> -->
-    <!-- <WBadge position="top-right" value="100" :max-value="99" color="lime">
-      <WIcon name="ph:bell" size="3xl" />
-    </WBadge> -->
-    <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 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 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 class="w-96">
-      <WAlert :is-visible="show" variant="warning-light" transition="fade" title="Alert" closable @close="handleClose">
-        <template #leading>
-          <WIcon name="ph:sun" size="2xl"/>
-        </template>
-        <WAlertDescription>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, sint!
-        </WAlertDescription>
-      </WAlert>
-    </div> -->
-    <!-- <WButton icon="ph:reddit-logo" :trailing="false" label="Reddit" :loading="loading" :variant="[loading ? 'default-disabled' : 'default']" size="2xl" /> -->
-    <!-- <WAvatar src="https://github.cm/selemondev.png" name="Selemon" size="xl" chip-color="orange" chip-position="bottom-left" initials="SB" />
-    <WBadge position="top-right" value="100" :max-value="99" variant="primary">
-      <WIcon name="ph:bell" size="3xl" />
-    </WBadge> -->
-    <!-- <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="primary" transition="slideLeft" title="Alert" closable @close="handleClose">
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert> -->
-    <!-- <WButton icon="ph:sun" variant="warning-light" size="xl" type="button" />
-    <WButtonGroup>
-      <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
-      <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
-      <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
-    </WButtonGroup> -->
+  <div class="grid place-items-center mt-72">
+    <WCheckbox v-model="agree" icon="quill:checkmark-double" variant="warning" help="Please check the checkbox" label="Checkbox" required />
   </div>
-  <!-- <div class="grid place-items-center">
-    <WAvatarGroup :max="2" size="md">
-      <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
-      <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
-      <WAvatar src="https://github.cm/selemondev.png" name="Selemon" initials="SB" />
-    </WAvatarGroup>
-  </div> -->
-  <!-- <div class="mt-48 p-4 space-y-2">
-    <WAlert variant="primary" transition="fade" title="Alert" closable>
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
-
-    <WAlert variant="primary-dashed" transition="slideLeft" title="Alert" closable>
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
-  </div> -->
 </template>
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
@@ -107,12 +107,16 @@ export interface WInput extends WComponentRoot {
 }
 
 export interface WCheckbox extends WComponentRoot {
-  checkboxWrapper?: string
+  checkbox?: string
+  checkboxInput?: string
   checkboxLabel?: string
   checkboxRequired?: string
   checkboxHelp?: string
   checkIcon?: string
+  checkboxSpace?: string
   checkIconActive?: string
+  checkboxDisplay?: string
+  checkboxIconSize?: string
 }
 export type WAccordionVariant = WithVariantProps<WAccordion>
 

diff --git a/packages/windi/src/components/Checkbox/WCheckbox.vue b/packages/windi/src/components/Checkbox/WCheckbox.vue
@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { computed, defineComponent } from 'vue'
 import classNames from 'classnames'
+import { Icon } from '@iconify/vue'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import type { WCheckbox } from '../../Types/componentsTypes/components'
@@ -17,6 +18,11 @@ const props = defineProps({
     type: [Boolean, Array],
     default: null,
   },
+
+  icon: {
+    type: String,
+    default: 'fluent:checkmark-12-filled',
+  },
   name: {
     type: String,
     default: null,
@@ -54,7 +60,7 @@ const emit = defineEmits<{
 const variant = computed(() => {
   const customProps = {
     ...props,
-    variant: props.variant,
+    variant: props.disabled ? [props.variant, 'disabled'] : props.variant,
   }
   return useVariants<WCheckbox>(
     Components.WCheckbox,
@@ -73,11 +79,16 @@ const toggle = computed({
 
 const checkboxWrapperClass = computed(() => {
   return classNames(
-    variant.value.checkboxWrapper,
+    variant.value.checkboxInput,
+    variant.value.checkbox,
     variant.value.checkIcon,
     variant.value.checkIconActive,
   )
 })
+
+const isChecked = computed(() => {
+  return props.modelValue && variant.value.checkIconActive
+})
 </script>
 
 <script lang="ts">
@@ -87,15 +98,27 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="variant.root">
-    <div class="flex items-center h-5">
+  <label :class="variant.root">
+    <div :class="variant.checkboxDisplay">
       <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"
+        :id="props.name" v-model="toggle" :name="props.name" :required="props.required" :value="props.value"
+        :disabled="props.disabled" :checked="props.checked" type="checkbox"
+        :class="checkboxWrapperClass"
         v-bind="$attrs"
       >
+      <span :class="variant.checkbox">
+        <div
+          :class="[
+            variant.checkIcon,
+            isChecked,
+          ]"
+        >
+          <Icon v-if="props.icon" :icon="props.icon" :class="variant.checkboxIconSize" />
+          <Icon v-else :icon="props.icon" :class="variant.checkboxIconSize" />
+        </div>
+      </span>
     </div>
-    <div v-if="label || $slots.label" class="ms-2 text-sm">
+    <div v-if="label || $slots.label" :class="variant.checkboxSpace">
       <label :for="name" :class="variant.checkboxLabel">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="variant.checkboxRequired">*</span>
@@ -104,5 +127,5 @@ export default defineComponent({
         {{ help }}
       </p>
     </div>
-  </div>
+  </label>
 </template>
diff --git a/packages/windi/src/components/Input/WInput.vue b/packages/windi/src/components/Input/WInput.vue
@@ -36,7 +36,7 @@ const props = defineProps({
   },
   required: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   help: {
     type: String,

diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
@@ -502,47 +502,52 @@ 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',
+      checkbox: [
+        'relative dark:border-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex bg-white items-center justify-center transition-all select-none !h-4 !w-4 overflow-hidden border shadow-sm shadow-slate-600/10 border-slate-300 rounded',
+        'active:peer-checked:pt-1.5 peer-focus-visible:shadow-[0_1px_1px_0,0_0_0_3px]',
       ],
-      checkIcon: 'opacity-0 h-full w-full',
-      checkIconActive: '!mt-0 opacity-100 text-blue-600 drop-shadow-sm',
+      checkboxIconSize: 'text-sm',
+      checkboxDisplay: 'flex items-center h-5',
+      checkboxInput: 'peer absolute inset-0 m-0 h-full w-full cursor-pointer !opacity-0',
+      checkboxSpace: 'ms-2 text-sm',
+      checkIcon: 'flex justify-center items-center opacity-0 h-full w-full',
+      checkIconActive: '!mt-0 opacity-100 text-blue-600 drop-shadow-sm [text-shadow:0_1px_0_rgba(0,0,0,0.07)]',
       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',
+          'hover:!border-yellow-600 active:!bg-yellow-600/30 peer-checked:!bg-yellow-600 peer-checked:border-yellow-600 active:peer-checked:bg-yellow-600 peer-focus-visible:border-yellow-600 peer-focus-visible:shadow-yellow-600/30',
+        checkIcon: '!text-white',
       },
       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',
+        checkbox:
+          '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',
+        checkbox:
+          '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',
+        checkbox:
+          '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',
+        checkbox:
+          '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:
+        checkbox:
           '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',
+        checkIcon: '!text-gray-300 dark:!text-gray-500 [text-shadow:none]',
         checkboxLabel: 'text-gray-300 dark:text-gray-500',
+        checkboxRequired: 'pointer-events-none text-red-100',
       },
     },
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml