feat: remove qwik hack for Input/Checkbox/Radio

qwikerx · Sep 2, 2024 · 68aaa03 · 68aaa03
1 parent f0fc0a5
commit 68aaa03
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 30 deletions.
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",

diff --git a/packages/lib/src/components/Checkbox/Checkbox.tsx b/packages/lib/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import { QRL, Slot, component$, useComputed$, PropsOf, JSXChildren } from '@builder.io/qwik'
+import { QRL, Slot, component$, useComputed$, PropsOf, JSXChildren, useSignal, useTask$ } from '@builder.io/qwik'
 import clsx from 'clsx'
 import { useCheckboxClasses } from './composables/use-checkbox-classes'
 import { twMerge } from 'tailwind-merge'
@@ -15,19 +15,19 @@ export const Checkbox = component$<CheckboxProps>(({ color, class: classNames, o
   const internalColor = useComputed$(() => color)
   const { checkboxClasses, labelClasses } = useCheckboxClasses(internalColor)
 
+  const checked = useSignal(Boolean(props.checked))
+  useTask$(({ track }) => {
+    const innerChecked = track(() => props.checked)
+    checked.value = Boolean(innerChecked)
+  })
+
   return (
     <label class={['flex items-center justify-start gap-3', labelClasses.value]}>
       <input
         {...props}
         type="checkbox"
-        bind:checked={props['bind:checked']}
+        bind:checked={props['bind:checked'] || checked}
         class={twMerge(checkboxClasses.value, clsx(classNames))}
-        // FIXME : qwik issue, error if onInput$ is not redefined with the "if"
-        onInput$={(_, elm) => {
-          if (props['bind:checked']) {
-            props['bind:checked'].value = elm.checked
-          }
-        }}
         onChange$={(_, elm) => {
           onChange$?.(elm.checked, elm.value)
         }}

diff --git a/packages/lib/src/components/Input/Input.tsx b/packages/lib/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { JSXOutput, PropsOf, component$, useComputed$, useId, useVisibleTask$, useSignal } from '@builder.io/qwik'
+import { JSXOutput, PropsOf, component$, useComputed$, useId, useSignal, useTask$ } from '@builder.io/qwik'
 import { InputSize, ValidationStatus, validationStatusMap } from './input-types'
 import { twMerge } from 'tailwind-merge'
 import { useInputClasses } from './composables/use-input-classes'
@@ -30,12 +30,10 @@ export const Input = component$<InputProps>(
       useComputed$(() => validationStatus),
     )
 
-    // FIXME : qwik issue when value is given without bind:value
-    const inputRef = useSignal<HTMLInputElement>()
-    useVisibleTask$(() => {
-      if (inputRef.value && !props['bind:value'] && props.value) {
-        inputRef.value.value = props.value as string
-      }
+    const input = useSignal(props.value ? String(props.value) : undefined)
+    useTask$(({ track }) => {
+      const innerValue = track(() => props.value)
+      input.value = props.value ? String(innerValue) : undefined
     })
 
     return (
@@ -49,16 +47,9 @@ export const Input = component$<InputProps>(
           {Boolean(prefix) && <div class="pointer-events-none absolute inset-y-0 left-0 flex w-10 items-center overflow-hidden pl-3">{prefix}</div>}
           <input
             {...props}
-            ref={inputRef}
             id={id}
-            bind:value={props['bind:value']}
+            bind:value={props['bind:value'] || input}
             class={twMerge(inputClasses.value, prefix && 'pl-10', suffix && 'pr-11')}
-            // FIXME : qwik issue, error if onInput$ is not redefined with the "if"
-            onInput$={(_, elm) => {
-              if (props['bind:value']) {
-                props['bind:value'].value = elm.value
-              }
-            }}
           />
           {Boolean(suffix) && <div class="absolute right-2.5 top-1/2 -translate-y-1/2">{suffix}</div>}
         </div>

diff --git a/packages/lib/src/components/Radio/Radio.tsx b/packages/lib/src/components/Radio/Radio.tsx
@@ -1,4 +1,4 @@
-import { QRL, Slot, component$, useComputed$, PropsOf, Signal, JSXChildren } from '@builder.io/qwik'
+import { QRL, Slot, component$, useComputed$, PropsOf, Signal, JSXChildren, useSignal, useTask$ } from '@builder.io/qwik'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { FlowbiteTheme } from '../FlowbiteThemable'
@@ -12,21 +12,29 @@ type RadioProps = Omit<PropsOf<'input'>, 'children'> & {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Radio = component$<RadioProps>(({ color, children, class: classNames, onChange$, ...props }) => {
+export const Radio = component$<RadioProps>(({ ['bind:option']: bindOption, color, children, class: classNames, onChange$, ...props }) => {
   const internalColor = useComputed$(() => color)
   const { radioClasses, labelClasses } = useRadioClasses(internalColor)
 
+  const checked = useSignal(Boolean(props.checked) || Boolean(bindOption && props.value === bindOption.value))
+  const option = bindOption || useSignal(props.value)
+  useTask$(({ track }) => {
+    const innerChecked = track(() => props.checked)
+    const innerValue = track(() => props.value)
+    const innerOption = track(() => bindOption)
+    checked.value = Boolean(innerChecked) || Boolean(innerOption && innerValue === innerOption.value)
+    option.value = innerOption?.value || props.value
+  })
+
   return (
     <label class={['flex items-center justify-start gap-3', labelClasses.value]}>
       <input
         {...props}
         type="radio"
-        checked={props['bind:option']?.value === props.value}
+        bind:checked={props['bind:checked'] || checked}
         class={twMerge(radioClasses.value, clsx(classNames))}
         onChange$={(_, elm) => {
-          if (props['bind:option']) {
-            props['bind:option'].value = props.value
-          }
+          option.value = props.value
           onChange$?.(elm.checked, elm.value)
         }}
       />