vueform-plugin-checkbox-select-all 1.0.1 → 1.0.3

package/dist/index.js

@@ -0,0 +1 @@
+import{watch as v,onMounted as _,nextTick as g}from"vue";function p(){return{apply:["CheckboxElement","CheckboxgroupElement"],props:{controls:{type:Array,default:null},controller:{type:String,default:null}},setup(c,x,n){let{form$:i,el$:l}=n,o=e=>e?e.type==="checkbox"?e.value===!0:e.type==="checkboxgroup"?e.value?.length>0&&e.value?.length===e.items?.length:!1:!1,h=(e,t)=>{e&&(e.type==="checkbox"?(t&&e.value!==!0&&e.check(),!t&&e.value!==!1&&e.uncheck()):e.type==="checkboxgroup"&&(t&&!o(e)?e.checkAll():!t&&e.value?.length>0&&e.uncheckAll()))};return _(()=>{g(()=>{if(c.controls&&c.controls.length>0&&v(n.value,()=>{if(l.value.__locked){l.value.__locked=!1;return}let e=o(l.value);c.controls.forEach(t=>{let u=i.value.el$(t);u&&h(u,e)})}),c.controller&&v(n.value,()=>{if(l.value.__locked){l.value.__locked=!1;return}let e=i.value.el$(c.controller);if(!e||!e.controls)return;let t=e.controls.every(r=>{let a=i.value.el$(r);return a?o(a):!1}),u=o(e);t!==u&&(e.__locked=!0,h(e,t))}),l.value.type==="checkboxgroup"){let e=l.value.items.find(t=>t.groupController);if(e){let t=e.value,u=l.value.items.filter(r=>r.value!==t).map(r=>r.value);v(n.value,(r,a)=>{if(l.value.__lockedInternal){l.value.__lockedInternal=!1;return}let k=a.includes(t),s=r.includes(t);if(!k&&s){l.value.__lockedInternal=!0,l.value.checkAll();return}if(k&&!s){l.value.__lockedInternal=!0,l.value.uncheckAll();return}let d=u.every(f=>r.includes(f));s&&!d?(l.value.__lockedInternal=!0,l.value.value=r.filter(f=>f!==t)):!s&&d&&(l.value.__lockedInternal=!0,l.value.value=[...r,t])})}}})}),n}}}export{p as default};

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "vueform-plugin-checkbox-select-all",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Bi-directional Select All logic for Vueform's Checkbox and Checkboxgroup elements",
-  "main": "src/index.js",
+  "main": "dist/index.js",
   "type": "module",
+  "scripts": {
+    "build": "esbuild src/index.js --bundle --minify --format=esm --outfile=dist/index.js --external:vue --external:@vueform/vueform",
+    "prepublishOnly": "npm run build"
+  },
   "files": [
-    "src"
+    "dist"
   ],
   "peerDependencies": {
-    "vue": "^3.0.0",
-    "@vueform/vueform": "^1.0.0"
+    "@vueform/vueform": "^1.0.0",
+    "vue": "^3.0.0"
   },
   "keywords": [
     "vueform",
@@ -18,5 +22,8 @@
     "select-all"
   ],
   "author": "Mohieb Al-Hesan",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "esbuild": "^0.27.2"
+  }
 }

package/readme.md

@@ -1,12 +1,16 @@
 # Vueform Select All Checkboxes Plugin
 
-This plugin enables complex "Select All" logic for Vueform. It handles bi-directional synchronization (Parent $\leftrightarrow$ Child) and prevents infinite loops using an internal locking mechanism. It supports standard checkboxes, checkbox groups, and nested structures.
+This plugin enables complex "Select All" logic for Vueform. It handles bi-directional synchronization (Parent <--> Child) and prevents infinite loops using an internal locking mechanism. It supports standard checkboxes, checkbox groups, and nested structures.
 
 ## 📦 Installation
 
-### 1. Create the Plugin File
+### 1. Install via NPM
 
-Create a file named `CheckboxSelectAll.js` inside your plugins directory (e.g., `./vueform/plugins/CheckboxSelectAll.js`) and paste the plugin code into it.
+Run the following command in your project root:
+
+```bash
+npm install vueform-plugin-checkbox-select-all
+```
 
 ### 2. Register in `vueform.config.js`
 
@@ -20,7 +24,7 @@ import { defineConfig } from "@vueform/vueform";
 import "@vueform/vueform/dist/vueform.css";
 
 // 1. Import the custom plugin
-import CheckboxSelectAll from "./vueform/plugins/CheckboxSelectAll";
+import CheckboxSelectAll from "vueform-plugin-checkbox-select-all";
 
 export default defineConfig({
   theme: vueform,
@@ -235,4 +239,4 @@ A group that contains its own "All" option inside the list, and a main checkbox
     text: "Save My Selections",
   },
 }
-```
+```

package/src/index.js

@@ -1,144 +0,0 @@
-import { watch, onMounted, nextTick } from "vue";
-
-export default function CheckboxSelectAll() {
-  return {
-    apply: ["CheckboxElement", "CheckboxgroupElement"],
-    props: {
-      controls: { type: Array, default: null }, // External: Downstream
-      controller: { type: String, default: null }, // External: Upstream
-    },
-    setup(props, context, component) {
-      const { form$, el$ } = component;
-
-      // --- Helpers ---
-      const isComplete = (el) => {
-        if (!el) return false;
-        if (el.type === "checkbox") return el.value === true;
-        if (el.type === "checkboxgroup") {
-          // Complete if selected count equals total options count
-          return el.value?.length > 0 && el.value?.length === el.items?.length;
-        }
-        return false;
-      };
-
-      const setElementState = (el, makeChecked) => {
-        if (!el) return;
-        if (el.type === "checkbox") {
-          if (makeChecked && el.value !== true) el.check();
-          if (!makeChecked && el.value !== false) el.uncheck();
-        } else if (el.type === "checkboxgroup") {
-          if (makeChecked && !isComplete(el)) el.checkAll();
-          else if (!makeChecked && el.value?.length > 0) el.uncheckAll();
-        }
-      };
-
-      onMounted(() => {
-        nextTick(() => {
-          // ---------------------------------------------------------
-          // 1. EXTERNAL DOWNSTREAM (Main Controller -> This Element)
-          // ---------------------------------------------------------
-          if (props.controls && props.controls.length > 0) {
-            watch(component.value, () => {
-              if (el$.value.__locked) {
-                el$.value.__locked = false;
-                return;
-              }
-              const shouldCheck = isComplete(el$.value);
-              props.controls.forEach((path) => {
-                const child = form$.value.el$(path);
-                if (child) setElementState(child, shouldCheck);
-              });
-            });
-          }
-
-          // ---------------------------------------------------------
-          // 2. EXTERNAL UPSTREAM (This Element -> Main Controller)
-          // ---------------------------------------------------------
-          if (props.controller) {
-            watch(component.value, () => {
-              if (el$.value.__locked) {
-                el$.value.__locked = false;
-                return;
-              }
-              const parent = form$.value.el$(props.controller);
-              if (!parent || !parent.controls) return;
-
-              const allSiblingsChecked = parent.controls.every((path) => {
-                const sibling = form$.value.el$(path);
-                return sibling ? isComplete(sibling) : false;
-              });
-
-              const parentIsChecked = isComplete(parent);
-              if (allSiblingsChecked !== parentIsChecked) {
-                parent.__locked = true;
-                setElementState(parent, allSiblingsChecked);
-              }
-            });
-          }
-
-          // ---------------------------------------------------------
-          // 3. INTERNAL GROUP LOGIC (CheckboxGroup Only)
-          // Handles the "All" option inside the items array
-          // ---------------------------------------------------------
-          if (el$.value.type === "checkboxgroup") {
-            // Find the "All" option based on the custom property 'groupController'
-            const controllerItem = el$.value.items.find(
-              (option) => option.groupController
-            );
-
-            if (controllerItem) {
-              const ctrlVal = controllerItem.value;
-              const otherVals = el$.value.items
-                .filter((i) => i.value !== ctrlVal)
-                .map((i) => i.value);
-
-              watch(component.value, (newVal, oldVal) => {
-                // If locked by external logic, skip internal calculation
-                if (el$.value.__lockedInternal) {
-                  el$.value.__lockedInternal = false;
-                  return;
-                }
-
-                // Determine what happened
-                const wasChecked = oldVal.includes(ctrlVal);
-                const isChecked = newVal.includes(ctrlVal);
-
-                // Scenario A: User clicked "All" (Checked it)
-                if (!wasChecked && isChecked) {
-                  // Lock to prevent infinite recursion
-                  el$.value.__lockedInternal = true;
-                  el$.value.checkAll();
-                  return;
-                }
-
-                // Scenario B: User clicked "All" (Unchecked it)
-                if (wasChecked && !isChecked) {
-                  el$.value.__lockedInternal = true;
-                  el$.value.uncheckAll();
-                  return;
-                }
-
-                // Scenario C: User clicked a Sibling (Check logic)
-                const othersComplete = otherVals.every((v) =>
-                  newVal.includes(v)
-                );
-
-                if (isChecked && !othersComplete) {
-                  // "All" is checked, but a sibling is missing -> Uncheck "All"
-                  el$.value.__lockedInternal = true;
-                  el$.value.value = newVal.filter((v) => v !== ctrlVal);
-                } else if (!isChecked && othersComplete) {
-                  // "All" is unchecked, but all siblings are there -> Check "All"
-                  el$.value.__lockedInternal = true;
-                  el$.value.value = [...newVal, ctrlVal];
-                }
-              });
-            }
-          }
-        });
-      });
-
-      return component;
-    },
-  };
-}