@fiscozen/checkbox 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
@@ -35,9 +35,9 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/icons": "^0.1.4",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/icons": "^0.1.3"
+    "@fiscozen/tsconfig": "^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"
@@ -14,7 +14,7 @@
       ref="refCheckbox"
     />
     <label
-      :for="value.replace(/ /g, '-').toLowerCase()"
+      :for="id"
       :class="[staticLabelClass, computedLabelClass]"
     >
       <FzIcon
@@ -44,9 +44,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(() => {
+  return currentValue.value.toString().replace(/ /g, "-").toLowerCase();
+})
+
+const model = defineModel<boolean | (string | number | boolean)[]>({
   required: true,
 });
 
@@ -96,7 +100,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 +134,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/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,28 @@ 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))
+    if (model.value.includes(currentValue.value))
       model.value = model.value.filter(
-        (value) => value !== (props.value || props.label),
+        (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 +91,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
    */