Some fixed in focus managements and sizes for prefix/suffix

themesberg · Jan 9, 2025 · 84fc746 · 84fc746
1 parent 62fb704
commit 84fc746
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 32 deletions.
diff --git a/docs/components/input/examples/FwbInputExampleSuffix.vue b/docs/components/input/examples/FwbInputExampleSuffix.vue
@@ -1,32 +1,100 @@
 <template>
   <div class="vp-raw">
-    <fwb-input
-      v-model="name"
-      label="Search"
-      placeholder="enter your search query"
-      size="lg"
-    >
-      <template #prefix>
-        <svg
-          aria-hidden="true"
-          class="w-5 h-5 text-gray-500 dark:text-gray-400"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-        </svg>
-      </template>
-      <template #suffix>
-        <fwb-button>Search</fwb-button>
-      </template>
-    </fwb-input>
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="lg"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="md">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
+
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="md"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="sm">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
+
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="sm"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="xs">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
   </div>
 </template>
 

diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
@@ -10,7 +10,7 @@
     >
       <div
         v-if="$slots.prefix"
-        class="flex items-center ms-3 pointer-events-none overflow-hidden flex-shrink-0"
+        class="flex items-center ms-2 flex-shrink-0"
       >
         <slot name="prefix" />
       </div>
@@ -25,7 +25,7 @@
       >
       <div
         v-if="$slots.suffix"
-        class="flex items-center me-3 flex-shrink-0"
+        class="flex items-center me-2 flex-shrink-0"
       >
         <slot name="suffix" />
       </div>

diff --git a/src/components/FwbInput/composables/useInputClasses.ts b/src/components/FwbInput/composables/useInputClasses.ts
@@ -14,7 +14,7 @@ const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inhe
 
 // BLOCK
 const defaultBlockClasses =
-  'focus-within:ring-offset-0 focus-within:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus-within:ring-blue-500 focus-within:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus-within:ring-blue-500 dark:focus-within:border-blue-500'
+  'has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
 
 const disabledInputClasses = 'cursor-not-allowed bg-gray-100'
 const inputSizeClasses: Record<InputSize, string> = {
@@ -23,8 +23,8 @@ const inputSizeClasses: Record<InputSize, string> = {
   sm: 'p-2 text-sm',
 }
 
-const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus-within:ring-green-500 focus-within:border-green-500'
-const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus-within:ring-red-500 focus-within:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500'
+const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
 
 export type UseInputClassesProps = {
   size: Ref<InputSize>