mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs(input): add examples
This commit is contained in:
Benjamin Canac
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user