refactor(checbox&checklist): replaces checkboxSig for bind:checked

TheMcnafaha · TheMcnafaha · commit ed09dae23805 · 2024-06-05T19:45:53.000-04:00
API is now fully up to date
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx
@@ -6,7 +6,7 @@ export default component$(() => {
     <>
       <div class="flex flex-col gap-3">
         <Checkbox.Root
-          checkboxSig={controlledSig}
+          bind:checked={controlledSig}
           id="test"
           class="flex items-center gap-3 border-2 border-black p-2 "
         >
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
         <Checkbox.Root
           class="flex items-center gap-3 bg-slate-900  text-white"
           checklist={true}
-          checkboxSig={checklistSig}
+          bind:checked={checklistSig}
           id="checklist"
         >
           <Checklist.Indicator class="w-fit">
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx
@@ -17,14 +17,14 @@ export default component$(() => {
           <p>Controlls all</p>
         </Checkbox.Root>
         <Checkbox.Root
-          checkboxSig={firstUserSig}
+          bind:checked={firstUserSig}
           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
         >
           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
           <p>No other stuff is needed here</p>
         </Checkbox.Root>
 
-        <Checkbox.Root checkboxSig={secondUserSig} class="bg-slate-900 text-white">
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
           <div class="flex items-center gap-3">
             <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
             <p>No other stuff is needed here</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx
@@ -22,14 +22,14 @@ export default component$(() => {
           <p>Controlls all</p>
         </Checkbox.Root>
         <Checkbox.Root
-          checkboxSig={firstUserSig}
+          bind:checked={firstUserSig}
           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
         >
           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
           <p>No other stuff is needed here</p>
         </Checkbox.Root>
 
-        <Checkbox.Root checkboxSig={secondUserSig} class="bg-slate-900 text-white">
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
           <div class="flex items-center gap-3">
             <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
             <p>No other stuff is needed here</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
         <Checkbox.Root
           class="flex items-center gap-3 bg-slate-900  text-white"
           checklist={true}
-          checkboxSig={checklistSig}
+          bind:checked={checklistSig}
           id="checklist"
         >
           <Checklist.Indicator class="w-fit">
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx
@@ -17,14 +17,14 @@ export default component$(() => {
           <p>Controlls all</p>
         </Checkbox.Root>
         <Checkbox.Root
-          checkboxSig={firstUserSig}
+          bind:checked={firstUserSig}
           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
         >
           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
           <p>No other stuff is needed here</p>
         </Checkbox.Root>
 
-        <Checkbox.Root checkboxSig={secondUserSig} class="bg-slate-900 text-white">
+        <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
           <div class="flex items-center gap-3">
             <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
             <p>No other stuff is needed here</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
           <p>Controlls all</p>
         </Checkbox.Root>
         <Checkbox.Root
-          checkboxSig={firstUserSig}
+          bind:checked={firstUserSig}
           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
         >
           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx
@@ -5,7 +5,7 @@ export default component$(() => {
   const userSig = useSignal(true);
   return (
     <>
-      <Checkbox.Root class="bg-slate-900 text-white" checkboxSig={userSig}>
+      <Checkbox.Root class="bg-slate-900 text-white" bind:checked={userSig}>
         <div class="flex items-center gap-3">
           <Checkbox.Indicator class="w-fit bg-slate-600">
             <p id="indicator">✅</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx
@@ -19,7 +19,7 @@ export default component$(() => {
         </Checkbox.Root>
         <Checkbox.Root
           id="child-1"
-          checkboxSig={firstUserSig}
+          bind:checked={firstUserSig}
           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
         >
           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
diff --git a/packages/kit-headless/src/components/checkbox/checkbox.tsx b/packages/kit-headless/src/components/checkbox/checkbox.tsx
@@ -13,13 +13,13 @@ import {
 import { CheckListContext, CheckboxContext } from './context-id';
 import { TriBool, getTriBool } from '../checklist/checklist-context-wrapper';
 export type MixedStateCheckboxProps = {
-  checkboxSig?: Signal<boolean>;
+  'bind:checked'?: Signal<boolean>;
   checklist?: boolean;
   _useCheckListContext?: boolean;
   _overWriteCheckbox?: boolean;
 } & PropsOf<'div'>;
 export type TwoStateCheckboxProps = {
-  checkboxSig?: Signal<boolean>;
+  'bind:checked'?: Signal<boolean>;
   _useCheckListContext?: boolean;
   _overWriteCheckbox?: boolean;
 } & PropsOf<'div'>;
@@ -28,7 +28,7 @@ type TwoStateCheckboxBehaviorProps = {
   checkboxSig: Signal<boolean>;
 } & PropsOf<'div'>;
 export type ChecklistTwoStateCheckboxProps = {
-  checkboxSig?: Signal<boolean>;
+  'bind:checked'?: Signal<boolean>;
   _useCheckListContext?: boolean;
   _overWriteCheckbox?: boolean;
 } & PropsOf<'div'>;
@@ -65,12 +65,12 @@ function getAriaChecked(triBool: TriBool): 'mixed' | 'true' | 'false' {
 export const TwoStateCheckbox = component$<TwoStateCheckboxProps>((props) => {
   // all the sig stuff should be refactored into a fancy hook
   const defaultSig = useSignal(false);
-  const appliedSig = props.checkboxSig ?? defaultSig;
+  const appliedSig = props['bind:checked'] ?? defaultSig;
   const checklistID = useSignal<string | undefined>(props.id);
   useContextProvider(CheckboxContext, appliedSig);
   return (
     <TwoStateCheckboxBehavior
-      checkboxSig={appliedSig}
+      bind:checked={appliedSig}
       tabIndex={0}
       role="checkbox"
       aria-checked={getAriaChecked(appliedSig.value)}
@@ -89,7 +89,7 @@ export const ChecklistTwoStateCheckbox = component$<ChecklistTwoStateCheckboxPro
     // making this a wrapper over the simpler component or using hooks
     const checklistContext = useContext(CheckListContext);
     const defaultSig = useSignal(false);
-    const appliedSig = props.checkboxSig ?? defaultSig;
+    const appliedSig = props['bind:checked'] ?? defaultSig;
     const checklistID = useSignal<string | undefined>(props.id);
     // makes sure that the checklist's value is the same as its child
     const syncToChecklist = useSignal<undefined | boolean>(props._overWriteCheckbox);
@@ -130,7 +130,7 @@ export const ChecklistTwoStateCheckbox = component$<ChecklistTwoStateCheckboxPro
         role="checkbox"
         aria-checked={getAriaChecked(appliedSig.value)}
         id={checklistID.value}
-        checkboxSig={appliedSig}
+        bind:checked={appliedSig}
       >
         <Slot />
       </TwoStateCheckboxBehavior>
@@ -144,16 +144,16 @@ export const MixedStateCheckbox = component$<MixedStateCheckboxProps>((props) =>
   // all the sig stuff should be refactored into a fancy hook
   const checklistContext = useContext(CheckListContext);
   const childCheckboxes = checklistContext.checkboxes;
-  const appliedSig = props.checkboxSig ?? checklistContext.checklistSig;
+  const appliedSig = props['bind:checked'] ?? checklistContext.checklistSig;
   const ariaControlsStrg =
     checklistContext.idArr.length === 0
       ? ''
       : checklistContext.idArr.reduce((p, c) => p + ' ' + c);
   useContextProvider(CheckboxContext, appliedSig);
 
   // im not enterily sure why, but the if statement only runs once
-  if (props.checkboxSig !== undefined) {
-    checklistContext.checklistSig = props.checkboxSig;
+  if (props['bind:checked'] !== undefined) {
+    checklistContext.checklistSig = props['bind:checked'];
   }
 
   const changeChecklistSig = $(() => {
@@ -202,19 +202,19 @@ const TwoStateCheckboxBehavior = component$<TwoStateCheckboxBehaviorProps>((prop
   });
   // this logic is duplicared thrice, make into hook pls
   const handleClick = $(() => {
-    props.checkboxSig.value = !props.checkboxSig.value;
+    props['bind:checked'].value = !props['bind:checked'].value;
   });
   const handleKeyDown$ = $((e: KeyboardEvent) => {
     if (e.key === ' ') {
-      props.checkboxSig.value = !props.checkboxSig.value;
+      props['bind:checked'].value = !props['bind:checked'].value;
     }
   });
   // TODO: refactor to usetask code into fancy hook thingy
   return (
     <div
       tabIndex={0}
       role="checkbox"
-      aria-checked={getAriaChecked(props.checkboxSig.value)}
+      aria-checked={getAriaChecked(props['bind:checked'].value)}
       {...props}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$]}
       onClick$={handleClick}
diff --git a/packages/kit-headless/src/components/checklist/checklist.tsx b/packages/kit-headless/src/components/checklist/checklist.tsx
@@ -49,9 +49,9 @@ export const Checklist: Component<CheckListProps> = (props: CheckListProps) => {
           } else {
             idArr.push(false);
           }
-          if (typedProps.checkboxSig && typedProps.checkboxSig.value) {
-            boolArr.push(typedProps.checkboxSig.value);
-            hellSigs.push(typedProps.checkboxSig);
+          if (typedProps['bind:checked'] && typedProps['bind:checked'].value) {
+            boolArr.push(typedProps['bind:checked'].value);
+            hellSigs.push(typedProps['bind:checked']);
           } else {
             boolArr.push(false);
           }
@@ -79,7 +79,7 @@ export const Checklist: Component<CheckListProps> = (props: CheckListProps) => {
       "QWIKUI: checklist doesn't have a checkbox. Did you give the atribute to *checklist* to any of the checkboxes inside the checklist?",
     );
   }
-  if (checklistCheckbox.props.checkboxSig) {
+  if (checklistCheckbox.props['bind:checked']) {
     checklistChilds.forEach((checkbox) => {
       Object.assign(checkbox.props, { _overWriteCheckbox: true });
     });

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export default component$(() => {`
`6`	`6`	`<>`
`7`	`7`	`<div class="flex flex-col gap-3">`
`8`	`8`	`<Checkbox.Root`
`9`		`- checkboxSig={controlledSig}`
	`9`	`+ bind:checked={controlledSig}`
`10`	`10`	`id="test"`
`11`	`11`	`class="flex items-center gap-3 border-2 border-black p-2 "`
`12`	`12`	`>`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export default component$(() => {`
`11`	`11`	`<Checkbox.Root`
`12`	`12`	`class="flex items-center gap-3 bg-slate-900 text-white"`
`13`	`13`	`checklist={true}`
`14`		`- checkboxSig={checklistSig}`
	`14`	`+ bind:checked={checklistSig}`
`15`	`15`	`id="checklist"`
`16`	`16`	`>`
`17`	`17`	`<Checklist.Indicator class="w-fit">`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export default component$(() => {`
`10`	`10`	`<Checkbox.Root`
`11`	`11`	`class="flex items-center gap-3 bg-slate-900 text-white"`
`12`	`12`	`checklist={true}`
`13`		`- checkboxSig={checklistSig}`
	`13`	`+ bind:checked={checklistSig}`
`14`	`14`	`id="checklist"`
`15`	`15`	`>`
`16`	`16`	`<Checklist.Indicator class="w-fit">`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export default component$(() => {`
`17`	`17`	`<p>Controlls all</p>`
`18`	`18`	`</Checkbox.Root>`
`19`	`19`	`<Checkbox.Root`
`20`		`- checkboxSig={firstUserSig}`
	`20`	`+ bind:checked={firstUserSig}`
`21`	`21`	`class="flex items-center gap-3 bg-slate-900 pr-2 text-white"`
`22`	`22`	`>`
`23`	`23`	`<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export default component$(() => {`
`19`	`19`	`</Checkbox.Root>`
`20`	`20`	`<Checkbox.Root`
`21`	`21`	`id="child-1"`
`22`		`- checkboxSig={firstUserSig}`
	`22`	`+ bind:checked={firstUserSig}`
`23`	`23`	`class="flex items-center gap-3 bg-slate-900 pr-2 text-white"`
`24`	`24`	`>`
`25`	`25`	`<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>`