From 9359603a0a08b543dae7db8ca86f7c8b82b715e8 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 18 Oct 2024 15:19:10 +0200
Subject: [PATCH] docs(input): add examples

---
 .../input/InputButtonGroupExample.vue         | 26 ++++++
 .../input/InputCharacterLimitExample.vue      | 24 +++++
 .../input/InputClearButtonExample.vue         | 22 +++++
 .../input/InputFloatingLabelExample.vue       | 11 +++
 .../examples/input/InputFormFieldExample.vue  |  9 ++
 .../InputPasswordStrengthIndicatorExample.vue | 93 +++++++++++++++++++
 .../input/InputPasswordToggleExample.vue      | 26 ++++++
 docs/content/3.components/command-palette.md  |  6 +-
 docs/content/3.components/input.md            | 79 +++++++++++++++-
 9 files changed, 292 insertions(+), 4 deletions(-)
 create mode 100644 docs/app/components/content/examples/input/InputButtonGroupExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputCharacterLimitExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputClearButtonExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputFloatingLabelExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputFormFieldExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputPasswordToggleExample.vue

diff --git a/docs/app/components/content/examples/input/InputButtonGroupExample.vue b/docs/app/components/content/examples/input/InputButtonGroupExample.vue
new file mode 100644
index 00000000..b9d914e7
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputButtonGroupExample.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const value = ref('')
+const domains = ['.com', '.dev', '.org']
+const domain = ref(domains[0])
+</script>
+
+<template>
+  <UButtonGroup>
+    <UInput
+      v-model="value"
+      placeholder="nuxt"
+      :ui="{
+        base: 'pl-[57px]',
+        leading: 'pointer-events-none'
+      }"
+    >
+      <template #leading>
+        <p class="text-sm text-[var(--ui-text-muted)]">
+          https://
+        </p>
+      </template>
+    </UInput>
+
+    <USelectMenu v-model="domain" :items="domains" />
+  </UButtonGroup>
+</template>
diff --git a/docs/app/components/content/examples/input/InputCharacterLimitExample.vue b/docs/app/components/content/examples/input/InputCharacterLimitExample.vue
new file mode 100644
index 00000000..19bb36a8
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputCharacterLimitExample.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const value = ref('')
+const maxLength = 15
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    :maxlength="maxLength"
+    aria-describedby="character-count"
+    :ui="{ trailing: 'pointer-events-none' }"
+  >
+    <template #trailing>
+      <div
+        id="character-count"
+        class="text-xs text-[var(--ui-text-muted)] tabular-nums"
+        aria-live="polite"
+        role="status"
+      >
+        {{ value?.length }}/{{ maxLength }}
+      </div>
+    </template>
+  </UInput>
+</template>
diff --git a/docs/app/components/content/examples/input/InputClearButtonExample.vue b/docs/app/components/content/examples/input/InputClearButtonExample.vue
new file mode 100644
index 00000000..f3e48dcb
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputClearButtonExample.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const value = ref('Click to clear')
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    placeholder="Type something..."
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template v-if="value?.length" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        icon="i-heroicons-x-circle"
+        aria-label="Clear input"
+        @click="value = ''"
+      />
+    </template>
+  </UInput>
+</template>
diff --git a/docs/app/components/content/examples/input/InputFloatingLabelExample.vue b/docs/app/components/content/examples/input/InputFloatingLabelExample.vue
new file mode 100644
index 00000000..76af50f6
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputFloatingLabelExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
+    <label class="pointer-events-none absolute left-0 -top-2.5 text-[var(--ui-text-highlighted)] text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-[var(--ui-text-highlighted)] peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-[var(--ui-text-dimmed)] peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
+      <span class="inline-flex bg-[var(--ui-bg)] px-1">Email address</span>
+    </label>
+  </UInput>
+</template>
diff --git a/docs/app/components/content/examples/input/InputFormFieldExample.vue b/docs/app/components/content/examples/input/InputFormFieldExample.vue
new file mode 100644
index 00000000..04722308
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputFormFieldExample.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const email = ref('')
+</script>
+
+<template>
+  <UFormField label="Email" help="We won't share your email." required>
+    <UInput v-model="email" placeholder="Enter your email" icon="i-heroicons-at-symbol" />
+  </UFormField>
+</template>
diff --git a/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue b/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
new file mode 100644
index 00000000..15cf04c3
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const show = ref(false)
+const password = ref('')
+
+function checkStrength(str: string) {
+  const requirements = [
+    { regex: /.{8,}/, text: 'At least 8 characters' },
+    { regex: /\d/, text: 'At least 1 number' },
+    { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
+    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' }
+  ]
+
+  return requirements.map(req => ({ met: req.regex.test(str), text: req.text }))
+}
+
+const strength = computed(() => checkStrength(password.value))
+const score = computed(() => strength.value.filter(req => req.met).length)
+
+const color = computed(() => {
+  if (score.value === 0) return 'neutral'
+  if (score.value <= 1) return 'error'
+  if (score.value <= 2) return 'warning'
+  if (score.value === 3) return 'warning'
+  return 'success'
+})
+
+const text = computed(() => {
+  if (score.value === 0) return 'Enter a password'
+  if (score.value <= 2) return 'Weak password'
+  if (score.value === 3) return 'Medium password'
+  return 'Strong password'
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <UFormField label="Password">
+      <UInput
+        v-model="password"
+        placeholder="Password"
+        :color="color"
+        :type="show ? 'text' : 'password'"
+        :ui="{ trailing: 'pr-0.5' }"
+        :aria-invalid="score < 4"
+        aria-describedby="password-strength"
+        class="w-full"
+      >
+        <template #trailing>
+          <UButton
+            color="neutral"
+            variant="link"
+            size="sm"
+            :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+            aria-label="show ? 'Hide password' : 'Show password'"
+            :aria-pressed="show"
+            aria-controls="password"
+            @click="show = !show"
+          />
+        </template>
+      </UInput>
+    </UFormField>
+
+    <UProgress
+      :color="color"
+      :indicator="text"
+      :model-value="score"
+      :max="4"
+      size="sm"
+    />
+
+    <p id="password-strength" class="text-sm font-medium">
+      {{ text }}. Must contain:
+    </p>
+
+    <ul class="space-y-1" aria-label="Password requirements">
+      <li
+        v-for="(req, index) in strength"
+        :key="index"
+        class="flex items-center gap-0.5"
+        :class="req.met ? 'text-[var(--ui-success)]' : 'text-[var(--ui-text-muted)]'"
+      >
+        <UIcon :name="req.met ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="size-4 shrink-0" />
+
+        <span class="text-xs font-light">
+          {{ req.text }}
+          <span class="sr-only">
+            {{ req.met ? ' - Requirement met' : ' - Requirement not met' }}
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/input/InputPasswordToggleExample.vue b/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
new file mode 100644
index 00000000..c717778a
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const show = ref(false)
+const password = ref('password')
+</script>
+
+<template>
+  <UInput
+    v-model="password"
+    placeholder="Password"
+    :type="show ? 'text' : 'password'"
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+        aria-label="show ? 'Hide password' : 'Show password'"
+        :aria-pressed="show"
+        aria-controls="password"
+        @click="show = !show"
+      />
+    </template>
+  </UInput>
+</template>
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index 3c1ad344..50c6e3c5 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -514,7 +514,7 @@ class: '!p-0'
 ---
 ::
 
-### Within a popover
+### Within a Popover
 
 You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
 
@@ -525,7 +525,7 @@ name: 'popover-command-palette-example'
 ---
 ::
 
-### Within a modal
+### Within a Modal
 
 You can use the CommandPalette component inside a [Modal](/components/modal)'s content.
 
@@ -536,7 +536,7 @@ name: 'modal-command-palette-example'
 ---
 ::
 
-### Within a drawer
+### Within a Drawer
 
 You can use the CommandPalette component inside a [Drawer](/components/drawer)'s content.
 
diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index 9b86c56e..230139de 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -37,7 +37,7 @@ items:
     - search
     - file
 props:
-  type: 'number'
+  type: 'file'
 ---
 ::
 
@@ -202,6 +202,83 @@ props:
 ---
 ::
 
+## Examples
+
+### With clear button
+
+You can put a [Button](/components/button) inside the `#trailing` slot to clear the Input.
+
+::component-example
+---
+name: 'input-clear-button-example'
+---
+::
+
+### With password toggle
+
+You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility.
+
+::component-example
+---
+name: 'input-password-toggle-example'
+---
+::
+
+### With password strength indicator
+
+You can use the [Progress](/components/progress) component to display the password strength indicator.
+
+::component-example
+---
+collapse: true
+name: 'input-password-strength-indicator-example'
+---
+::
+
+### With character limit
+
+You can use the `#trailing` slot to add a character limit to the Input.
+
+::component-example
+---
+name: 'input-character-limit-example'
+---
+::
+
+### With floating label
+
+You can use the `#default` slot to add a floating label to the Input.
+
+::component-example
+---
+name: 'input-floating-label-example'
+---
+::
+
+### Within a FormField
+
+You can use the Input within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-form-field-example'
+---
+::
+
+::tip{to="/components/form"}
+It also provides validation and error handling when used within a [Form](/components/form) component.
+::
+
+### Within a ButtonGroup
+
+You can use the Input within a [ButtonGroup](/components/button-group) component to group multiple elements together.
+
+::component-example
+---
+name: 'input-button-group-example'
+---
+::
+
 ## API
 
 ### Props