Merge pull request #174 from qwikerx/feat/form-element-focus

feat: update focus on form element
qwikerx · Aug 13, 2024 · 68b1c25 · 68b1c25
2 parents 125e837 + c816fad
commit 68b1c25
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/lib/src/components/Select/composables/use-select-classes.ts b/packages/lib/src/components/Select/composables/use-select-classes.ts
@@ -1,6 +1,6 @@
 import { twMerge } from 'tailwind-merge'
 import { Signal, useComputed$ } from '@builder.io/qwik'
-import { InputSize, ValidationStatus, validationStatusMap } from '~/index'
+import { InputSize, useFlowbiteThemable, ValidationStatus, validationStatusMap } from '~/index'
 
 // LABEL
 const baseLabelClasses = 'block mb-2 text-sm font-medium'
@@ -34,6 +34,8 @@ export function useSelectClasses(props: UseSelectClassesProps): {
   labelClasses: Signal<string>
   validationWrapperClasses: Signal<string>
 } {
+  const { focusClasses, focusInputClasses } = useFlowbiteThemable()
+
   const selectClasses = useComputed$(() => {
     const vs = props.validationStatus.value
 
@@ -49,6 +51,8 @@ export function useSelectClasses(props: UseSelectClassesProps): {
       props.disabled.value && disabledSelectClasses,
       props.underline.value ? underlineSelectClasses : 'border border-gray-300 rounded-lg',
       props.underline.value && underlineByStatus,
+      focusClasses.value,
+      focusInputClasses.value,
     )
   })
 

diff --git a/packages/lib/src/components/Textarea/composables/use-textarea-classes.ts b/packages/lib/src/components/Textarea/composables/use-textarea-classes.ts
@@ -1,5 +1,6 @@
 import { Signal, useComputed$ } from '@builder.io/qwik'
 import { twMerge } from 'tailwind-merge'
+import { useFlowbiteThemable } from '~/components/FlowbiteThemable'
 
 const textareaWrapperClasses = 'block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
 const textareaDefaultClasses =
@@ -8,8 +9,15 @@ const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:
 const textareaFooterClasses = 'block py-2 px-3 border-gray-200 dark:border-gray-600'
 
 export function useTextareaClasses(hasFooter: Signal<boolean>) {
+  const { focusClasses, focusInputClasses } = useFlowbiteThemable()
+
   const textareaClasses = useComputed$(() =>
-    twMerge(textareaDefaultClasses, hasFooter.value ? 'rounded-t-lg bg-white border-0 dark:bg-gray-800' : 'rounded-lg border'),
+    twMerge(
+      textareaDefaultClasses,
+      hasFooter.value ? 'rounded-t-lg bg-white border-0 dark:bg-gray-800' : 'rounded-lg border',
+      focusClasses.value,
+      focusInputClasses.value,
+    ),
   )
 
   const labelClasses = useComputed$(() => textareaLabelClasses)