Initial commit
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
const loading = ref(false)
|
||||
const search = ref()
|
||||
const select = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
|
||||
const items = ref(states)
|
||||
|
||||
const querySelections = query => {
|
||||
loading.value = true
|
||||
|
||||
// Simulated ajax query
|
||||
setTimeout(() => {
|
||||
items.value = states.filter(state => (state || '').toLowerCase().includes((query || '').toLowerCase()))
|
||||
loading.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
watch(search, query => {
|
||||
query && query !== select.value && querySelections(query)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
v-model="select"
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
placeholder="Search for a state"
|
||||
label="What state are you from?"
|
||||
variant="underlined"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="Select State"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
const states = [
|
||||
{
|
||||
name: 'Florida',
|
||||
abbr: 'FL',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'Georgia',
|
||||
abbr: 'GA',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'Nebraska',
|
||||
abbr: 'NE',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'California',
|
||||
abbr: 'CA',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'New York',
|
||||
abbr: 'NY',
|
||||
id: 5,
|
||||
},
|
||||
]
|
||||
|
||||
function customFilter(itemTitle, queryText, item) {
|
||||
const textOne = item.raw.name.toLowerCase()
|
||||
const textTwo = item.raw.abbr.toLowerCase()
|
||||
const searchText = queryText.toLowerCase()
|
||||
|
||||
return textOne.includes(searchText) || textTwo.includes(searchText)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="states"
|
||||
:custom-filter="customFilter"
|
||||
item-title="name"
|
||||
item-value="abbr"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
const select = ref('Florida')
|
||||
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="select"
|
||||
label="States"
|
||||
density="compact"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
eager
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const friends = ref([
|
||||
'Sandra Adams',
|
||||
'Britta Holt',
|
||||
])
|
||||
|
||||
const people = [
|
||||
{
|
||||
name: 'Sandra Adams',
|
||||
group: 'Group 1',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
name: 'Ali Connors',
|
||||
group: 'Group 1',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
name: 'Trevor Hansen',
|
||||
group: 'Group 1',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
name: 'Tucker Smith',
|
||||
group: 'Group 1',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
name: 'Britta Holt',
|
||||
group: 'Group 2',
|
||||
avatar: avatar5,
|
||||
},
|
||||
{
|
||||
name: 'Jane Smith ',
|
||||
group: 'Group 2',
|
||||
avatar: avatar6,
|
||||
},
|
||||
{
|
||||
name: 'John Smith',
|
||||
group: 'Group 2',
|
||||
avatar: avatar7,
|
||||
},
|
||||
{
|
||||
name: 'Sandra Williams',
|
||||
group: 'Group 2',
|
||||
avatar: avatar8,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="friends"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
:items="people"
|
||||
item-title="name"
|
||||
item-value="name"
|
||||
placeholder="Select User"
|
||||
label="Select"
|
||||
>
|
||||
<template #chip="{ props, item }">
|
||||
<VChip
|
||||
v-bind="props"
|
||||
:prepend-avatar="item.raw.avatar"
|
||||
:text="item.raw.name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #item="{ props, item }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
:prepend-avatar="item?.raw?.avatar"
|
||||
:title="item?.raw?.name"
|
||||
:subtitle="item?.raw?.group"
|
||||
/>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
const isEditing = ref(false)
|
||||
const selectedState = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="selectedState"
|
||||
:hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
|
||||
placeholder="Select Your State"
|
||||
:items="states"
|
||||
:readonly="!isEditing"
|
||||
:label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
|
||||
persistent-hint
|
||||
prepend-icon="tabler-building"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="`icon-${isEditing}`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'tabler-checks' : 'tabler-edit-circle'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'foo',
|
||||
'bar',
|
||||
'fizz',
|
||||
'buzz',
|
||||
]
|
||||
|
||||
const values = ref(['foo'])
|
||||
const nameRules = [v => !!v.length || 'Select at least one option.']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="values"
|
||||
:items="items"
|
||||
:rules="nameRules"
|
||||
placeholder="Select Option"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 solo variant -->
|
||||
<VAutocomplete
|
||||
variant="solo"
|
||||
label="Solo"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 outlined variant -->
|
||||
<VAutocomplete
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 underlined variant -->
|
||||
<VAutocomplete
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 filled variant -->
|
||||
<VAutocomplete
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 plain variant -->
|
||||
<VAutocomplete
|
||||
variant="plain"
|
||||
label="Plain"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,968 @@
|
||||
export const asyncItems = { ts: `<script setup lang="ts">
|
||||
const loading = ref(false)
|
||||
const search = ref()
|
||||
const select = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
|
||||
const items = ref(states)
|
||||
|
||||
const querySelections = (query: string) => {
|
||||
loading.value = true
|
||||
|
||||
// Simulated ajax query
|
||||
setTimeout(() => {
|
||||
items.value = states.filter(state => (state || '').toLowerCase().includes((query || '').toLowerCase()))
|
||||
loading.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
watch(search, query => {
|
||||
query && query !== select.value && querySelections(query)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
v-model="select"
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
placeholder="Search for a state"
|
||||
label="What state are you from?"
|
||||
variant="underlined"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const loading = ref(false)
|
||||
const search = ref()
|
||||
const select = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
|
||||
const items = ref(states)
|
||||
|
||||
const querySelections = query => {
|
||||
loading.value = true
|
||||
|
||||
// Simulated ajax query
|
||||
setTimeout(() => {
|
||||
items.value = states.filter(state => (state || '').toLowerCase().includes((query || '').toLowerCase()))
|
||||
loading.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
watch(search, query => {
|
||||
query && query !== select.value && querySelections(query)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
v-model="select"
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
placeholder="Search for a state"
|
||||
label="What state are you from?"
|
||||
variant="underlined"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const basic = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const chips = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const clearable = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="Select State"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="Select State"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customFilter = { ts: `<script setup lang="ts">
|
||||
const states = [
|
||||
{ name: 'Florida', abbr: 'FL', id: 1 },
|
||||
{ name: 'Georgia', abbr: 'GA', id: 2 },
|
||||
{ name: 'Nebraska', abbr: 'NE', id: 3 },
|
||||
{ name: 'California', abbr: 'CA', id: 4 },
|
||||
{ name: 'New York', abbr: 'NY', id: 5 },
|
||||
]
|
||||
|
||||
function customFilter(itemTitle: any, queryText: any, item: any) {
|
||||
const textOne = item.raw.name.toLowerCase()
|
||||
const textTwo = item.raw.abbr.toLowerCase()
|
||||
const searchText = queryText.toLowerCase()
|
||||
|
||||
return textOne.includes(searchText) || textTwo.includes(searchText)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="states"
|
||||
:custom-filter="customFilter"
|
||||
item-title="name"
|
||||
item-value="abbr"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const states = [
|
||||
{
|
||||
name: 'Florida',
|
||||
abbr: 'FL',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'Georgia',
|
||||
abbr: 'GA',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'Nebraska',
|
||||
abbr: 'NE',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'California',
|
||||
abbr: 'CA',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'New York',
|
||||
abbr: 'NY',
|
||||
id: 5,
|
||||
},
|
||||
]
|
||||
|
||||
function customFilter(itemTitle, queryText, item) {
|
||||
const textOne = item.raw.name.toLowerCase()
|
||||
const textTwo = item.raw.abbr.toLowerCase()
|
||||
const searchText = queryText.toLowerCase()
|
||||
|
||||
return textOne.includes(searchText) || textTwo.includes(searchText)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="states"
|
||||
:custom-filter="customFilter"
|
||||
item-title="name"
|
||||
item-value="abbr"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<script setup lang="ts">
|
||||
const select = ref('Florida')
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="select"
|
||||
label="States"
|
||||
density="compact"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const select = ref('Florida')
|
||||
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="select"
|
||||
label="States"
|
||||
density="compact"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const multiple = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
eager
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
eager
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const slots = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const friends = ref(['Sandra Adams', 'Britta Holt'])
|
||||
|
||||
const people = [
|
||||
{ name: 'Sandra Adams', group: 'Group 1', avatar: avatar1 },
|
||||
{ name: 'Ali Connors', group: 'Group 1', avatar: avatar2 },
|
||||
{ name: 'Trevor Hansen', group: 'Group 1', avatar: avatar3 },
|
||||
{ name: 'Tucker Smith', group: 'Group 1', avatar: avatar4 },
|
||||
{ name: 'Britta Holt', group: 'Group 2', avatar: avatar5 },
|
||||
{ name: 'Jane Smith ', group: 'Group 2', avatar: avatar6 },
|
||||
{ name: 'John Smith', group: 'Group 2', avatar: avatar7 },
|
||||
{ name: 'Sandra Williams', group: 'Group 2', avatar: avatar8 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="friends"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
:items="people"
|
||||
item-title="name"
|
||||
item-value="name"
|
||||
placeholder="Select User"
|
||||
label="Select"
|
||||
>
|
||||
<template #chip="{ props, item }">
|
||||
<VChip
|
||||
v-bind="props"
|
||||
:prepend-avatar="item.raw.avatar"
|
||||
:text="item.raw.name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #item="{ props, item }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
:prepend-avatar="item?.raw?.avatar"
|
||||
:title="item?.raw?.name"
|
||||
:subtitle="item?.raw?.group"
|
||||
/>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const friends = ref([
|
||||
'Sandra Adams',
|
||||
'Britta Holt',
|
||||
])
|
||||
|
||||
const people = [
|
||||
{
|
||||
name: 'Sandra Adams',
|
||||
group: 'Group 1',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
name: 'Ali Connors',
|
||||
group: 'Group 1',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
name: 'Trevor Hansen',
|
||||
group: 'Group 1',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
name: 'Tucker Smith',
|
||||
group: 'Group 1',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
name: 'Britta Holt',
|
||||
group: 'Group 2',
|
||||
avatar: avatar5,
|
||||
},
|
||||
{
|
||||
name: 'Jane Smith ',
|
||||
group: 'Group 2',
|
||||
avatar: avatar6,
|
||||
},
|
||||
{
|
||||
name: 'John Smith',
|
||||
group: 'Group 2',
|
||||
avatar: avatar7,
|
||||
},
|
||||
{
|
||||
name: 'Sandra Williams',
|
||||
group: 'Group 2',
|
||||
avatar: avatar8,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="friends"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
:items="people"
|
||||
item-title="name"
|
||||
item-value="name"
|
||||
placeholder="Select User"
|
||||
label="Select"
|
||||
>
|
||||
<template #chip="{ props, item }">
|
||||
<VChip
|
||||
v-bind="props"
|
||||
:prepend-avatar="item.raw.avatar"
|
||||
:text="item.raw.name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #item="{ props, item }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
:prepend-avatar="item?.raw?.avatar"
|
||||
:title="item?.raw?.name"
|
||||
:subtitle="item?.raw?.group"
|
||||
/>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const stateSelector = { ts: `<script setup lang="ts">
|
||||
const isEditing = ref(false)
|
||||
const selectedState = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="selectedState"
|
||||
:hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
|
||||
placeholder="Select Your State"
|
||||
:items="states"
|
||||
:readonly="!isEditing"
|
||||
:label="\`State — \${isEditing ? 'Editable' : 'Readonly'}\`"
|
||||
persistent-hint
|
||||
prepend-icon="tabler-building"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="\`icon-\${isEditing}\`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'tabler-checks' : 'tabler-edit-circle'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isEditing = ref(false)
|
||||
const selectedState = ref(null)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Marshall Islands',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Northern Mariana Islands',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Palau',
|
||||
'Pennsylvania',
|
||||
'Puerto Rico',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virgin Island',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="selectedState"
|
||||
:hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
|
||||
placeholder="Select Your State"
|
||||
:items="states"
|
||||
:readonly="!isEditing"
|
||||
:label="\`State — \${isEditing ? 'Editable' : 'Readonly'}\`"
|
||||
persistent-hint
|
||||
prepend-icon="tabler-building"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="\`icon-\${isEditing}\`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'tabler-checks' : 'tabler-edit-circle'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</AppAutocomplete>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validation = { ts: `<script setup lang="ts">
|
||||
const items = ['foo', 'bar', 'fizz', 'buzz']
|
||||
const values = ref(['foo'])
|
||||
const nameRules = [(v: string) => !!v.length || 'Select at least one option.']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="values"
|
||||
:items="items"
|
||||
:rules="nameRules"
|
||||
placeholder="Select Option"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'foo',
|
||||
'bar',
|
||||
'fizz',
|
||||
'buzz',
|
||||
]
|
||||
|
||||
const values = ref(['foo'])
|
||||
const nameRules = [v => !!v.length || 'Select at least one option.']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppAutocomplete
|
||||
v-model="values"
|
||||
:items="items"
|
||||
:rules="nameRules"
|
||||
placeholder="Select Option"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const variant = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 solo variant -->
|
||||
<VAutocomplete
|
||||
variant="solo"
|
||||
label="Solo"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 outlined variant -->
|
||||
<VAutocomplete
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 underlined variant -->
|
||||
<VAutocomplete
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 filled variant -->
|
||||
<VAutocomplete
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 plain variant -->
|
||||
<VAutocomplete
|
||||
variant="plain"
|
||||
label="Plain"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 solo variant -->
|
||||
<VAutocomplete
|
||||
variant="solo"
|
||||
label="Solo"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 outlined variant -->
|
||||
<VAutocomplete
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 underlined variant -->
|
||||
<VAutocomplete
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 filled variant -->
|
||||
<VAutocomplete
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 plain variant -->
|
||||
<VAutocomplete
|
||||
variant="plain"
|
||||
label="Plain"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user