@fiscozen/checkbox 0.1.4 → 0.1.6

package/dist/style.css

@@ -0,0 +1 @@
+input[type=checkbox][data-v-7bafffef]{width:0;height:0}input[type=checkbox]+label[data-v-7bafffef]{cursor:pointer}input[type=checkbox]+label[data-v-7bafffef]:hover{cursor:pointer}input[type=checkbox]:focus+label div[data-v-7bafffef]:after{border-radius:3px;content:"";border-style:solid;border-width:1px;@apply border-blue-500;top:0;left:0;right:0;bottom:0;position:absolute}.checkbox--small:focus+label div[data-v-7bafffef]:after{transform:translate(-.2px,.4px)}.checkbox-group--child-container__small[data-v-c563830e]{margin-top:5px;padding-left:24px}.checkbox-group--child-container__medium[data-v-c563830e]{margin-top:6px;padding-left:24px}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/composables": "^0.1.24",
-    "@fiscozen/badge": "^0.1.0"
+    "@fiscozen/composables": "^0.1.33",
+    "@fiscozen/badge": "^0.1.2"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^0.1.9"
+    "@fiscozen/icons": "^0.1.14"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -34,10 +34,10 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/icons": "^0.1.9",
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/icons": "^0.1.14",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCheckbox.vue

@@ -20,7 +20,7 @@
         :class="[staticIconClass, computedIconClasses]"
         :variant="computedVariant"
       />
-      <span class="w-fit">{{ standalone ? "" : label }}</span>
+      {{ standalone ? "" : label }}
     </label>
     <FzRadioErrorText :size="size" v-if="error && $slots.error">
       <slot name="error" />
@@ -47,7 +47,9 @@ const id = computed(
   () => `fz-checkbox-${Math.random().toString(36).slice(2, 9)}`,
 );
 
-const model = defineModel<boolean | (string | number | boolean)[]>({
+const model = defineModel<
+  null | undefined | boolean | (string | number | boolean)[]
+>({
   required: true,
 });
 
@@ -56,7 +58,7 @@ const refCheckbox = ref<HTMLInputElement | null>(null);
 
 const staticInputClass = "w-0 h-0 peer fz-hidden-input";
 const staticLabelClass = `
-  flex items-start gap-4 hover:cursor-pointer
+  flex gap-4 hover:cursor-pointer
   peer-focus:[&_div]:after:border-1
   peer-focus:[&_div]:after:border-solid
   peer-focus:[&_div]:after:rounded-[3px]
@@ -77,7 +79,6 @@ const computedLabelClass = computed(() => [
 
 const computedIconClasses = computed(() => [
   props.size === "sm" ? "mt-1" : "",
-  props.size === "md" ? "mt-2" : "",
   getTextClassForIcon(),
 ]);
 
@@ -94,6 +95,8 @@ const computedVariant = computed(() => {
 });
 
 const checkValueIsInModel = () => {
+  if (model.value == null) return false;
+
   if (typeof model.value === "boolean") {
     return model.value;
   } else {
@@ -108,9 +111,9 @@ const getTextClassForLabel = () => {
     case props.error:
       return "text-semantic-error";
     case props.emphasis:
-      return "text-grey-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500";
+      return "text-core-black peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500";
     default:
-      return "text-grey-500";
+      return "text-core-black";
   }
 };
 
@@ -127,6 +130,7 @@ const getTextClassForIcon = () => {
 };
 
 onMounted(() => {
+  if (model.value == null) return;
   if (typeof model.value === "boolean") {
     if (model.value) refCheckbox.value?.dispatchEvent(new Event("change"));
     else if (props.checked !== undefined) model.value = props.checked;
@@ -140,9 +144,9 @@ onMounted(() => {
 <style scoped>
 .fz-hidden-input {
   opacity: 0;
-  margin:0;
-  height:0;
-  border:0 none;
+  margin: 0;
+  height: 0;
+  border: 0 none;
   appearance: none;
 }
 </style>

package/src/__test__/FzCheckbox.test.ts

@@ -105,4 +105,30 @@ describe("FzCheckbox", () => {
     expect(new Set(ids).size).toBe(MAX_CHECKBOX);
     expect(new Set(labelFor).size).toBe(MAX_CHECKBOX);
   });
+
+  it("should not throw error when modelValue is undefined", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        size: "md",
+        modelValue: undefined,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("input").element.checked).toBe(false);
+  });
+
+  it("should not throw error when modelValue is null", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        size: "md",
+        modelValue: null,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("input").element.checked).toBe(false);
+  });
 });

package/src/common.ts

@@ -1,4 +1,4 @@
 export const mapSizeToClasses = {
   sm: "text-sm",
-  md: "text-md",
+  md: "text-base",
 };