Skip to content

Commit

Permalink
feat(BaseInput): add xl size and update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Jun 6, 2024
1 parent d0de3cb commit 1d421c6
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 11 deletions.
173 changes: 163 additions & 10 deletions .playground/pages/tests/form/input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -88,14 +88,24 @@ 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>

<NuiPreview
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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -165,14 +186,25 @@ 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>

<NuiPreview
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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
3 changes: 2 additions & 1 deletion components/form/BaseInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -165,6 +165,7 @@ const sizes = {
sm: 'nui-input-sm',
md: 'nui-input-md',
lg: 'nui-input-lg',
xl: 'nui-input-xl',
}
const contrasts = {
Expand Down

0 comments on commit 1d421c6

Please sign in to comment.