From 1d421c6cd97f70969bc74d0433ab9502f69ed81d Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 6 Jun 2024 15:12:38 +0200
Subject: [PATCH] feat(BaseInput): add xl size and update demos

---
 .playground/pages/tests/form/input.vue | 173 +++++++++++++++++++++++--
 components/form/BaseInput.vue          |   3 +-
 2 files changed, 165 insertions(+), 11 deletions(-)

diff --git a/.playground/pages/tests/form/input.vue b/.playground/pages/tests/form/input.vue
index 0be75861..4f2f10d5 100644
--- a/.playground/pages/tests/form/input.vue
+++ b/.playground/pages/tests/form/input.vue
@@ -58,7 +58,7 @@ const taxes = ref('With taxes')
       </NuiPreview>
 
       <NuiPreview title="Size" description="Input component sizes">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -88,6 +88,16 @@ const taxes = ref('With taxes')
               placeholder="Ex: username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
@@ -95,7 +105,7 @@ const taxes = ref('With taxes')
         title="Contrast: default-contrast"
         description="Input component default contrast"
       >
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -128,11 +138,22 @@ const taxes = ref('With taxes')
               placeholder="Ex: username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              contrast="default-contrast"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Contrast: muted" description="Input component muted">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -165,6 +186,17 @@ const taxes = ref('With taxes')
               placeholder="Ex: username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              contrast="muted"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
@@ -172,7 +204,7 @@ const taxes = ref('With taxes')
         title="Contrast: muted-contrast"
         description="Input component muted contrast"
       >
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -205,11 +237,22 @@ const taxes = ref('With taxes')
               placeholder="Ex: username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              contrast="muted-contrast"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Icon" description="Input component icons">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -242,11 +285,22 @@ const taxes = ref('With taxes')
               placeholder="Ex: username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              icon="lucide:search"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Focus" description="Input component color focus">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -279,11 +333,22 @@ const taxes = ref('With taxes')
               color-focus
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+              color-focus
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Error" description="Input component errors">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -316,11 +381,22 @@ const taxes = ref('With taxes')
               error="Please enter a valid username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+              error="Please enter a valid username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Error: icon" description="Input component errors">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -356,11 +432,23 @@ const taxes = ref('With taxes')
               error="Please enter a valid username"
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              icon="solar:user-speak-outline"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+              error="Please enter a valid username"
+            />
+          </div>
         </div>
       </NuiPreview>
 
       <NuiPreview title="Slot: action" description="Input component actions">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -420,6 +508,26 @@ const taxes = ref('With taxes')
               </template>
             </BaseInput>
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+            >
+              <template #action>
+                <button
+                  type="button"
+                  data-nui-tooltip="Save"
+                  class="absolute top-0 end-0 z-[1] flex items-center justify-center h-14 w-14 text-muted-400 hover:text-primary-500 transition-colors duration-300"
+                >
+                  <Icon name="lucide:save" class="w-5 h-5" />
+                </button>
+              </template>
+            </BaseInput>
+          </div>
         </div>
       </NuiPreview>
 
@@ -479,11 +587,28 @@ const taxes = ref('With taxes')
             placeholder="Ex: username"
             label-float
           />
+          <BaseInput
+            v-model="fieldsRounded.third"
+            size="xl"
+            rounded="md"
+            label="Size: xl"
+            placeholder="Ex: username"
+            label-float
+          />
+          <BaseInput
+            v-model="fieldsRounded.sixth"
+            icon="lucide:search"
+            size="xl"
+            rounded="md"
+            label="Size: xl"
+            placeholder="Ex: username"
+            label-float
+          />
         </div>
       </NuiPreview>
 
       <NuiPreview title="Disabled" description="Input component disabled state">
-        <div class="flex flex-wrap items-end gap-3 max-w-3xl">
+        <div class="flex flex-wrap items-end gap-3 max-w-5xl">
           <div class="flex-1">
             <BaseInput
               v-model="fieldsRounded.first"
@@ -516,6 +641,17 @@ const taxes = ref('With taxes')
               disabled
             />
           </div>
+
+          <div class="flex-1">
+            <BaseInput
+              v-model="fieldsRounded.third"
+              size="xl"
+              rounded="md"
+              label="Size: xl"
+              placeholder="Ex: username"
+              disabled
+            />
+          </div>
         </div>
       </NuiPreview>
 
@@ -575,6 +711,23 @@ const taxes = ref('With taxes')
             placeholder="Ex: username"
             loading
           />
+          <BaseInput
+            v-model="fieldsRounded.third"
+            size="xl"
+            rounded="md"
+            label="Size: xl"
+            placeholder="Ex: username"
+            loading
+          />
+          <BaseInput
+            v-model="fieldsRounded.sixth"
+            icon="lucide:search"
+            size="xl"
+            rounded="md"
+            label="Size: xl"
+            placeholder="Ex: username"
+            loading
+          />
         </div>
       </NuiPreview>
 
diff --git a/components/form/BaseInput.vue b/components/form/BaseInput.vue
index 93313964..a080f368 100644
--- a/components/form/BaseInput.vue
+++ b/components/form/BaseInput.vue
@@ -70,7 +70,7 @@ const props = withDefaults(
      *
      * @default 'md'
      */
-    size?: 'sm' | 'md' | 'lg'
+    size?: 'sm' | 'md' | 'lg' | 'xl'
 
     /**
      * Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
@@ -165,6 +165,7 @@ const sizes = {
   sm: 'nui-input-sm',
   md: 'nui-input-md',
   lg: 'nui-input-lg',
+  xl: 'nui-input-xl',
 }
 
 const contrasts = {