@fiscozen/checkbox 0.1.0 → 0.1.2

package/package.json

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

package/src/FzCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-center flex-col w-fit">
     <input
       type="checkbox"
-      :id="value.replace(/ /g, '-').toLowerCase()"
+      :id="id"
       :disabled="disabled"
       :checked="checked"
       :class="staticInputClass"
@@ -13,10 +13,7 @@
       :indeterminate="indeterminate"
       ref="refCheckbox"
     />
-    <label
-      :for="value.replace(/ /g, '-').toLowerCase()"
-      :class="[staticLabelClass, computedLabelClass]"
-    >
+    <label :for="id" :class="[staticLabelClass, computedLabelClass]">
       <FzIcon
         :name="computedName"
         :size="size"
@@ -44,9 +41,13 @@ const props = withDefaults(defineProps<FzCheckboxProps>(), {
   indeterminate: false,
 });
 
-const value = props.value || props.label;
+const currentValue = computed(() => props.value ?? props.label);
 
-const model = defineModel<boolean | string[]>({
+const id = computed(
+  () => `fz-checkbox-${Math.random().toString(36).slice(2, 9)}`,
+);
+
+const model = defineModel<boolean | (string | number | boolean)[]>({
   required: true,
 });
 
@@ -96,7 +97,7 @@ const checkValueIsInModel = () => {
   if (typeof model.value === "boolean") {
     return model.value;
   } else {
-    return model.value.includes(value);
+    return model.value.includes(currentValue.value);
   }
 };
 
@@ -130,9 +131,9 @@ onMounted(() => {
     if (model.value) refCheckbox.value?.dispatchEvent(new Event("change"));
     else if (props.checked !== undefined) model.value = props.checked;
   } else {
-    if (model.value.includes(value))
+    if (model.value.includes(currentValue.value))
       refCheckbox.value?.dispatchEvent(new Event("change"));
-    else if (props.checked) model.value.push(value);
+    else if (props.checked) model.value.push(currentValue.value);
   }
 });
 </script>

package/src/FzCheckboxGroup.vue

@@ -9,10 +9,10 @@
     <div :class="[staticSlotContainerClass, computedSlotContainerClass]">
       <FzCheckboxGroupOption
         v-for="option in options"
-        :key="option.value"
+        :key="option.value ? option.value.toString() : option.label"
         v-model="model"
-        v-bind="option"
         :disabled="disabled"
+        v-bind="option"
         :emphasis="emphasis"
         :error="error"
         :size="size"
@@ -26,11 +26,15 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { FzCheckboxGroupProps, ParentCheckbox } from "./types";
+import { FzCheckboxGroupProps } from "./types";
 import FzCheckboxErrorText from "./components/FzCheckboxErrorText.vue";
 import { mapSizeToClasses } from "./common";
 import FzCheckboxGroupOption from "./components/FzCheckboxGroupOption.vue";
 
+FzCheckboxGroupOption.compatConfig = {
+  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

@@ -14,10 +14,10 @@
       <div :class="[staticChildContainerClass, computedChildContainerClasses]">
         <FzCheckbox
           v-for="child in children"
-          :key="child.value"
+          :key="child.value ? child.value.toString() : child.label"
           v-model="model"
-          v-bind="child"
           :disabled="disabled"
+          v-bind="child"
           :emphasis="emphasis"
           :error="error"
           :size="size"
@@ -32,9 +32,13 @@ import { computed } from "vue";
 import FzCheckbox from "../FzCheckbox.vue";
 import { ParentCheckbox } from "../types";
 
-const props = defineProps<ParentCheckbox & { size: "sm" | "md" }>();
+FzCheckbox.compatConfig = {
+  MODE: 3,
+};
 
-const model = defineModel<string[]>({
+const props = defineProps<ParentCheckbox & { size: "sm" | "md" }>();
+const currentValue = computed(() => props.value ?? props.label);
+const model = defineModel<(string | number | boolean)[]>({
   required: true,
   default: [],
 });
@@ -50,7 +54,7 @@ const isIndeterminate = computed(() => {
   if (!props.children) return false;
 
   const numChecked = props.children.filter((child) =>
-    model.value.includes(child.value || child.label),
+    model.value.includes(child.value ?? child.label),
   ).length;
   return numChecked > 0 && numChecked < props.children.length;
 });
@@ -58,28 +62,26 @@ const isIndeterminate = computed(() => {
 function handleCheckboxParentChange() {
   if (!props.children) return;
   const numChecked = props.children.filter((child) =>
-    model.value.includes(child.value || child.label),
+    model.value.includes(child.value ?? child.label),
   ).length;
 
   if (numChecked === props.children.length) {
     // push parent value to model (using concat to force reactivity, push seems to not work)
-    model.value = model.value.concat(props.value || props.label);
+    model.value = model.value.concat(currentValue.value);
   } else {
     // remove parent value from model if it exists
-    if (model.value.includes(props.value || props.label))
-      model.value = model.value.filter(
-        (value) => value !== (props.value || props.label),
-      );
+    if (model.value.includes(currentValue.value))
+      model.value = model.value.filter((value) => value !== currentValue.value);
   }
 }
 
 function onCheckboxParentChange() {
   if (!props.children) return;
-  if (model.value.includes(props.value || props.label)) {
+  if (model.value.includes(currentValue.value)) {
     // push all children values to model that are not already in model
     model.value = model.value.concat(
       props.children
-        ?.map((child) => child.value || child.label)
+        ?.map((child) => child.value ?? child.label)
         .filter((value) => !model.value.includes(value)),
     );
   } else {
@@ -87,7 +89,7 @@ function onCheckboxParentChange() {
     model.value = model.value.filter(
       (value) =>
         !props.children
-          ?.map((child) => child.value || child.label)
+          ?.map((child) => child.value ?? child.label)
           .includes(value),
     );
   }

package/src/types.ts

@@ -6,7 +6,7 @@ export type FzCheckboxProps = {
   /**
    * The value of the checkbox. If not provided, the value will be the label
    */
-  value?: string;
+  value?: string | number | boolean;
   /**
    * The size of the checkbox
    */

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>"
-`;