@fiscozen/checkbox 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
@@ -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/eslint-config": "^0.1.0",
     "@fiscozen/icons": "^0.1.4",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCheckbox.vue

@@ -13,10 +13,7 @@
       :indeterminate="indeterminate"
       ref="refCheckbox"
     />
-    <label
-      :for="id"
-      :class="[staticLabelClass, computedLabelClass]"
-    >
+    <label :for="id" :class="[staticLabelClass, computedLabelClass]">
       <FzIcon
         :name="computedName"
         :size="size"
@@ -46,9 +43,9 @@ const props = withDefaults(defineProps<FzCheckboxProps>(), {
 
 const currentValue = computed(() => props.value ?? props.label);
 
-const id = computed(() => {
-  return currentValue.value.toString().replace(/ /g, "-").toLowerCase();
-})
+const id = computed(
+  () => `fz-checkbox-${Math.random().toString(36).slice(2, 9)}`,
+);
 
 const model = defineModel<boolean | (string | number | boolean)[]>({
   required: true,

package/src/FzCheckboxGroup.vue

@@ -32,8 +32,8 @@ import { mapSizeToClasses } from "./common";
 import FzCheckboxGroupOption from "./components/FzCheckboxGroupOption.vue";
 
 FzCheckboxGroupOption.compatConfig = {
-  MODE:3
-}
+  MODE: 3,
+};
 
 const props = defineProps<FzCheckboxGroupProps>();
 const id = `fz-checkbox-group-${generateRandomId()}`;

package/src/__test__/FzCheckbox.test.ts

@@ -3,6 +3,8 @@ import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 import FzCheckbox from "../FzCheckbox.vue";
 
+const MAX_CHECKBOX = 200;
+
 describe("FzCheckbox", () => {
   it("renders correctly", async () => {
     const wrapper = mount(FzCheckbox, {
@@ -16,7 +18,6 @@ describe("FzCheckbox", () => {
 
     await wrapper.vm.$nextTick();
     expect(wrapper.html()).toContain("Test Checkbox");
-    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("emits an update event when clicked", async () => {
@@ -85,4 +86,23 @@ describe("FzCheckbox", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.find("input").element.disabled).toBe(true);
   });
+
+  it(`should render ${MAX_CHECKBOX} checkbox all with different ids`, async () => {
+    const checkboxes = Array.from({ length: MAX_CHECKBOX }).map((_) => {
+      return mount(FzCheckbox, {
+        props: {
+          label: "Test Checkbox",
+          value: "test",
+          size: "md",
+          modelValue: false,
+          disabled: true,
+        },
+      });
+    });
+    await Promise.all(checkboxes.map((c) => c.vm.$nextTick()));
+    const ids = checkboxes.map((c) => c.find("input").attributes("id"));
+    const labelFor = checkboxes.map((c) => c.find("label").attributes("for"));
+    expect(new Set(ids).size).toBe(MAX_CHECKBOX);
+    expect(new Set(labelFor).size).toBe(MAX_CHECKBOX);
+  });
 });

package/src/components/FzCheckboxGroupOption.vue

@@ -71,9 +71,7 @@ function handleCheckboxParentChange() {
   } else {
     // remove parent value from model if it exists
     if (model.value.includes(currentValue.value))
-      model.value = model.value.filter(
-        (value) => value !== currentValue.value,
-      );
+      model.value = model.value.filter((value) => value !== currentValue.value);
   }
 }
 

package/src/__test__/__snapshots__/FzCheckbox.test.ts.snap

@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`FzCheckbox > renders correctly 1`] = `
-"<div class="flex justify-center flex-col w-fit"><input type="checkbox" id="test" class="w-0 h-0 peer" value="test"><label for="test" class="flex items-start gap-4 hover:cursor-pointer
-  peer-focus:[&amp;_div]:after:border-1
-  peer-focus:[&amp;_div]:after:border-solid
-  peer-focus:[&amp;_div]:after:rounded-[3px]
-  peer-focus:[&amp;_div]:after:border-blue-500
-  peer-focus:[&amp;_div]:after:content-['']
-  peer-focus:[&amp;_div]:after:top-0
-  peer-focus:[&amp;_div]:after:left-0
-  peer-focus:[&amp;_div]:after:right-0
-  peer-focus:[&amp;_div]:after:bottom-0
-  peer-focus:[&amp;_div]:after:absolute text-md text-grey-500">
-    <div class="flex items-center justify-center w-[20px] h-[20px] relative mt-2 text-grey-500"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-        <path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"></path>
-      </svg></div><span class="w-fit">Test Checkbox</span>
-  </label>
-  <!--v-if-->
-</div>"
-`;