Initial commit
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
const selectedItem = ref('Programming')
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const select = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const select = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
density="compact"
|
||||
placeholder="deployment"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
const selectedItem = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use selection slot"
|
||||
multiple
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<VChip size="small">
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
color="primary"
|
||||
size="16"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Gaming',
|
||||
'Programming',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
|
||||
const selectedList = ref(['Vuetify'])
|
||||
const search = ref(null)
|
||||
|
||||
watch(selectedList, value => {
|
||||
if (value.length > 5)
|
||||
nextTick(() => selectedList.value.pop())
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedList"
|
||||
v-model:search-input="search"
|
||||
:items="items"
|
||||
hide-selected
|
||||
:hide-no-data="false"
|
||||
placeholder="deployment"
|
||||
hint="Maximum of 5 tags"
|
||||
label="Add some tags"
|
||||
multiple
|
||||
persistent-hint
|
||||
>
|
||||
<template #no-data>
|
||||
<VListItem>
|
||||
<VListItemTitle>
|
||||
No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
const selectedItem = ref(['Programming'])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
variant="plain"
|
||||
placeholder="deployment"
|
||||
label="Plain"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,457 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const selectedItem = ref('Programming')
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedItem = ref('Programming')
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const clearable = { ts: `<script lang="ts" setup>
|
||||
const select = ref(['Vuetify', 'Programming'])
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const select = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<script lang="ts" setup>
|
||||
const select = ref(['Vuetify', 'Programming'])
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
density="compact"
|
||||
placeholder="deployment"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const select = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
density="compact"
|
||||
placeholder="deployment"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const multiple = { ts: `<script lang="ts" setup>
|
||||
const selectedItem = ref(['Vuetify', 'Programming'])
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use selection slot"
|
||||
multiple
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<VChip size="small">
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
color="primary"
|
||||
size="16"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedItem = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use selection slot"
|
||||
multiple
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<VChip size="small">
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
color="primary"
|
||||
size="16"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const noDataWithChips = { ts: `<script lang="ts" setup>
|
||||
const items = ['Gaming', 'Programming', 'Vue', 'Vuetify']
|
||||
const selectedList = ref(['Vuetify'])
|
||||
const search = ref(null)
|
||||
|
||||
watch(selectedList, value => {
|
||||
if (value.length > 5)
|
||||
nextTick(() => selectedList.value.pop())
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedList"
|
||||
v-model:search-input="search"
|
||||
:items="items"
|
||||
hide-selected
|
||||
:hide-no-data="false"
|
||||
placeholder="deployment"
|
||||
hint="Maximum of 5 tags"
|
||||
label="Add some tags"
|
||||
multiple
|
||||
persistent-hint
|
||||
>
|
||||
<template #no-data>
|
||||
<VListItem>
|
||||
<VListItemTitle>
|
||||
No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'Gaming',
|
||||
'Programming',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
|
||||
const selectedList = ref(['Vuetify'])
|
||||
const search = ref(null)
|
||||
|
||||
watch(selectedList, value => {
|
||||
if (value.length > 5)
|
||||
nextTick(() => selectedList.value.pop())
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="selectedList"
|
||||
v-model:search-input="search"
|
||||
:items="items"
|
||||
hide-selected
|
||||
:hide-no-data="false"
|
||||
placeholder="deployment"
|
||||
hint="Maximum of 5 tags"
|
||||
label="Add some tags"
|
||||
multiple
|
||||
persistent-hint
|
||||
>
|
||||
<template #no-data>
|
||||
<VListItem>
|
||||
<VListItemTitle>
|
||||
No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</template>
|
||||
</AppCombobox>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const variant = { ts: `<script lang="ts" setup>
|
||||
const selectedItem = ref(['Programming'])
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
variant="plain"
|
||||
placeholder="deployment"
|
||||
label="Plain"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedItem = ref(['Programming'])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
:items="items"
|
||||
variant="plain"
|
||||
placeholder="deployment"
|
||||
label="Plain"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user