Skip to content

Commit

Permalink
feat(BaseListbox): 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 ccc6042 commit 78c75bd
Show file tree
Hide file tree
Showing 2 changed files with 220 additions and 16 deletions.
221 changes: 210 additions & 11 deletions .playground/pages/tests/form/listbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ const multipleProps = ref([])
</NuiPreview>

<NuiPreview title="Size" description="Listbox 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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -175,14 +175,26 @@ const multipleProps = ref([])
color-focus
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
color-focus
/>
</div>
</div>
</NuiPreview>

<NuiPreview
title="Contrast: default-contrast"
description="Listbox 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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -218,11 +230,23 @@ const multipleProps = ref([])
rounded="md"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
contrast="default-contrast"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
/>
</div>
</div>
</NuiPreview>

<NuiPreview title="Contrast: muted" description="Listbox 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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -258,14 +282,26 @@ const multipleProps = ref([])
rounded="md"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
contrast="muted"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
/>
</div>
</div>
</NuiPreview>

<NuiPreview
title="Contrast: muted-contrast"
description="Listbox 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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -301,11 +337,23 @@ const multipleProps = ref([])
rounded="md"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
contrast="muted-contrast"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
/>
</div>
</div>
</NuiPreview>

<NuiPreview title="Error" description="Listbox 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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -341,11 +389,23 @@ const multipleProps = ref([])
error="This field is required"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
error="This field is required"
/>
</div>
</div>
</NuiPreview>

<NuiPreview title="Disabled" description="Listbox component disabled">
<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">
<BaseListbox
v-model="radiusValue"
Expand Down Expand Up @@ -381,6 +441,18 @@ const multipleProps = ref([])
disabled
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="radiusValue"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
disabled
/>
</div>
</div>
</NuiPreview>

Expand Down Expand Up @@ -458,6 +530,29 @@ const multipleProps = ref([])
}"
label-float
/>
<BaseListbox
v-model="radiusValue"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
label-float
/>
<BaseListbox
v-model="assigneeValue"
size="xl"
rounded="md"
label="Hobbies"
:items="people"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
media: 'media',
}"
label-float
/>
</div>
</NuiPreview>

Expand Down Expand Up @@ -532,11 +627,34 @@ const multipleProps = ref([])
}"
loading
/>
<BaseListbox
v-model="radiusValue"
label="Rounded: md"
size="xl"
:items="frameworks"
placeholder="Select a framework"
rounded="md"
loading
/>
<BaseListbox
v-model="assigneeValue"
size="xl"
rounded="md"
label="Hobbies"
:items="people"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
media: 'media',
}"
loading
/>
</div>
</NuiPreview>

<NuiPreview title="Sublabel" description="Listbox component sublabels">
<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">
<BaseListbox
v-model="hobbiesValue"
Expand Down Expand Up @@ -581,11 +699,26 @@ const multipleProps = ref([])
}"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="hobbiesValue"
size="xl"
rounded="md"
label="Hobbies"
:items="hobbies"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
}"
/>
</div>
</div>
</NuiPreview>

<NuiPreview title="Icon" description="Listbox 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">
<BaseListbox
v-model="hobbiesValue"
Expand Down Expand Up @@ -633,11 +766,27 @@ const multipleProps = ref([])
}"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="hobbiesValue"
size="xl"
rounded="md"
label="Hobbies"
:items="hobbies"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
icon: 'icon',
}"
/>
</div>
</div>
</NuiPreview>

<NuiPreview title="Image" description="Listbox component images">
<div class="flex flex-wrap items-end gap-3 max-w-4xl">
<div class="flex flex-wrap items-end gap-3 max-w-6xl">
<div class="flex-1">
<BaseListbox
v-model="assigneeValue"
Expand Down Expand Up @@ -685,14 +834,30 @@ const multipleProps = ref([])
}"
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="assigneeValue"
size="xl"
rounded="md"
label="Hobbies"
:items="people"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
media: 'media',
}"
/>
</div>
</div>
</NuiPreview>

<NuiPreview
title="Multiple: Objects"
description="Listbox component multiple selection with object values"
>
<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">
<BaseListbox
v-model="multipleValues"
Expand Down Expand Up @@ -743,14 +908,31 @@ const multipleProps = ref([])
multiple
/>
</div>

<div class="flex-1">
<BaseListbox
v-model="multipleValues"
size="xl"
rounded="md"
label="Hobbies"
:items="people"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
media: 'media',
}"
multiple
/>
</div>
</div>
</NuiPreview>

<NuiPreview
title="Multiple: Objects /w prop modifier"
description="Listbox component multiple selection"
>
<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">
<BaseListbox
v-model.prop="multipleProps"
Expand Down Expand Up @@ -801,6 +983,23 @@ const multipleProps = ref([])
multiple
/>
</div>

<div class="flex-1">
<BaseListbox
v-model.prop="multipleProps"
size="xl"
rounded="md"
label="Hobbies"
:items="people"
:properties="{
value: 'id',
label: 'name',
sublabel: 'text',
media: 'media',
}"
multiple
/>
</div>
</div>
</NuiPreview>
</NuiPreviewContainer>
Expand Down
Loading

0 comments on commit 78c75bd

Please sign in to comment.