From d6f20245aee57041dfdc0d31dc2120d24fb5a40d Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Sun, 18 Feb 2024 22:49:38 +0100
Subject: [PATCH] feat(Autocomplete): add color focus prop to autocomplete

---
 .../autocomplete/autocomplete.component.ts    |  2 +
 .../autocomplete/autocomplete.config.ts       |  6 ++
 .../autocomplete/autocomplete.doc.mdx         | 12 +++
 .../autocomplete/autocomplete.stories.ts      | 83 +++++++++++++++++++
 .../autocomplete/autocomplete.types.ts        |  1 +
 src/plugins/components/autocomplete/index.ts  | 13 +++
 6 files changed, 117 insertions(+)

diff --git a/src/plugins/components/autocomplete/autocomplete.component.ts b/src/plugins/components/autocomplete/autocomplete.component.ts
index 541ba33..8c1984f 100644
--- a/src/plugins/components/autocomplete/autocomplete.component.ts
+++ b/src/plugins/components/autocomplete/autocomplete.component.ts
@@ -15,6 +15,7 @@ export const Autocomplete = ({
   contrast = 'default',
   label,
   labelFloat,
+  colorFocus,
   clearable,
   dropdown,
   multiple,
@@ -35,6 +36,7 @@ export const Autocomplete = ({
         error && !loading && 'nui-autocomplete-error',
         loading && 'nui-autocomplete-loading',
         labelFloat && 'nui-autocomplete-label-float',
+        colorFocus && 'nui-autocomplete-focus',
         icon && 'nui-has-icon',
         classes?.wrapper,
       ]
diff --git a/src/plugins/components/autocomplete/autocomplete.config.ts b/src/plugins/components/autocomplete/autocomplete.config.ts
index 76387df..229a3c1 100644
--- a/src/plugins/components/autocomplete/autocomplete.config.ts
+++ b/src/plugins/components/autocomplete/autocomplete.config.ts
@@ -42,6 +42,12 @@ export const defaultConfig = {
           dark: 'primary-500',
         },
       },
+      border: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
     },
     icon: {
       color: {
diff --git a/src/plugins/components/autocomplete/autocomplete.doc.mdx b/src/plugins/components/autocomplete/autocomplete.doc.mdx
index 49f6739..0a83d3b 100644
--- a/src/plugins/components/autocomplete/autocomplete.doc.mdx
+++ b/src/plugins/components/autocomplete/autocomplete.doc.mdx
@@ -129,6 +129,18 @@ Autocompletes can have a clear button.
 
 <br />
 
+### State: color focus
+
+Autocompletes can have a different border color when focused.
+
+<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={AutocompleteStories.ColorFocusSm} />
+  <Story of={AutocompleteStories.ColorFocusMd} />
+  <Story of={AutocompleteStories.ColorFocusLg} />
+</div>
+
+<br />
+
 ### State: disabled
 
 Autocompletes can be shown in a disabled state.
diff --git a/src/plugins/components/autocomplete/autocomplete.stories.ts b/src/plugins/components/autocomplete/autocomplete.stories.ts
index ca85cdf..cf54ed3 100644
--- a/src/plugins/components/autocomplete/autocomplete.stories.ts
+++ b/src/plugins/components/autocomplete/autocomplete.stories.ts
@@ -767,6 +767,89 @@ export const DisabledLg: Story = {
 }
 // #endregion
 
+// #region State: color focus
+export const ColorFocusSm: Story = {
+  name: 'Color focus: sm',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'sm',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusMd: Story = {
+  name: 'Color focus: md',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'md',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusLg: Story = {
+  name: 'Color focus: lg',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'lg',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+// #endregion
+
 // #region State: loading
 export const LoadingSm: Story = {
   name: 'Loading: sm',
diff --git a/src/plugins/components/autocomplete/autocomplete.types.ts b/src/plugins/components/autocomplete/autocomplete.types.ts
index 70d9e51..ac86791 100644
--- a/src/plugins/components/autocomplete/autocomplete.types.ts
+++ b/src/plugins/components/autocomplete/autocomplete.types.ts
@@ -6,6 +6,7 @@ export interface AutocompleteProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   label?: string
   labelFloat?: boolean
+  colorFocus?: boolean
   error?: string | boolean
   size?: 'sm' | 'md' | 'lg'
   contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
diff --git a/src/plugins/components/autocomplete/index.ts b/src/plugins/components/autocomplete/index.ts
index 7c1d844..df02a91 100644
--- a/src/plugins/components/autocomplete/index.ts
+++ b/src/plugins/components/autocomplete/index.ts
@@ -436,6 +436,19 @@ export default plugin(({ addComponents, theme }) => {
               {},
           },
       },
+      //Focus:color
+      '&.nui-autocomplete-focus': {
+        '.nui-autocomplete-input': {
+          //Transition
+          [`@apply transition-colors duration-300`]: {},
+          //Focus
+          [`@apply focus:!border-${config.input.focus.border.color.light} dark:focus:!border-${config.input.focus.border.color.dark}`]:
+            {},
+          //Force focus
+          [`@apply focus:hover:!border-${config.input.focus.border.color.light} dark:focus:hover:!border-${config.input.focus.border.color.dark}`]:
+            {},
+        },
+      },
       //Autocomplete:not loading
       '&:not(.nui-autocomplete-loading)': {
         '.nui-autocomplete-input:placeholder-shown ~ .nui-label-float': {