@fiscozen/checkbox 0.1.3 → 0.1.5

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/badge": "^0.1.0",
-    "@fiscozen/composables": "^0.1.8"
+    "@fiscozen/composables": "^0.1.24",
+    "@fiscozen/badge": "^0.1.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^0.1.4"
+    "@fiscozen/icons": "^0.1.9"
   },
   "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/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/icons": "^0.1.4"
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/icons": "^0.1.9",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCheckbox.vue

@@ -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,
 });
 
@@ -94,6 +96,8 @@ const computedVariant = computed(() => {
 });
 
 const checkValueIsInModel = () => {
+  if (model.value == null) return false;
+
   if (typeof model.value === "boolean") {
     return model.value;
   } else {
@@ -127,6 +131,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,10 +145,9 @@ onMounted(() => {
 <style scoped>
 .fz-hidden-input {
   opacity: 0;
-  margin:0;
-  height:0;
-  border:none;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
+  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);
+  });
 });