first commit
This commit is contained in:
Inshal
@@ -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>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
v-model="select"
|
||||
label="States"
|
||||
density="compact"
|
||||
placeholder="Select State"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
/>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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="ri-building-line"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="`icon-${isEditing}`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'ri-check-line' : 'ri-edit-circle-line'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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,964 @@
|
||||
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>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
chips
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const clearable = { ts: `<script setup lang="ts">
|
||||
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
multiple
|
||||
placeholder="Select State"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
'California',
|
||||
'Colorado',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Texas',
|
||||
'Wyoming',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAutocomplete
|
||||
label="States"
|
||||
:items="items"
|
||||
placeholder="Select State"
|
||||
multiple
|
||||
/>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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="ri-building-line"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="\`icon-\${isEditing}\`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'ri-check-line' : 'ri-edit-circle-line'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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="ri-building-line"
|
||||
:menu-props="{ maxHeight: '200px' }"
|
||||
>
|
||||
<template #append>
|
||||
<VSlideXReverseTransition mode="out-in">
|
||||
<VIcon
|
||||
:key="\`icon-\${isEditing}\`"
|
||||
:color="isEditing ? 'success' : 'info'"
|
||||
:icon="isEditing ? 'ri-check-line' : 'ri-edit-circle-line'"
|
||||
@click="isEditing = !isEditing"
|
||||
/>
|
||||
</VSlideXReverseTransition>
|
||||
</template>
|
||||
</VAutocomplete>
|
||||
</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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
<VAutocomplete
|
||||
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>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="`${checkbox.toString()}`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="`${checkboxString.toString()}`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
const colorCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
|
||||
const selectedCheckbox = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="ri-check-line"
|
||||
false-icon="ri-close-line"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="ri-alarm-line"
|
||||
false-icon="ri-alarm-line"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="ri-checkbox-circle-fill"
|
||||
false-icon="ri-close-circle-fill"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<VTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<VTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,564 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const checkboxValue = { ts: `<script lang="ts" setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="\`\${checkbox.toString()}\`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="\`\${checkboxString.toString()}\`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="\`\${checkbox.toString()}\`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="\`\${checkboxString.toString()}\`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const colors = { ts: `<script lang="ts" setup>
|
||||
const colorCheckbox = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
|
||||
const selectedCheckbox = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const colorCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
|
||||
const selectedCheckbox = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<script lang="ts" setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icon = { ts: `<script lang="ts" setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="ri-check-line"
|
||||
false-icon="ri-close-line"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="ri-alarm-line"
|
||||
false-icon="ri-alarm-line"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="ri-checkbox-circle-fill"
|
||||
false-icon="ri-close-circle-fill"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="ri-check-line"
|
||||
false-icon="ri-close-line"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="ri-alarm-line"
|
||||
false-icon="ri-alarm-line"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="ri-checkbox-circle-fill"
|
||||
false-icon="ri-close-circle-fill"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inlineTextField = { ts: `<script lang="ts" setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<VTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<VTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<VTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<VTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const labelSlot = { ts: `<script lang="ts" setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const modelAsArray = { ts: `<script lang="ts" setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const states = { ts: `<script setup lang="ts">
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
const selectedItem = ref('Programming')
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
density="compact"
|
||||
placeholder="deployment"
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup>
|
||||
const selectedItem = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
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"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VCombobox>
|
||||
</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>
|
||||
<VCombobox
|
||||
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>
|
||||
</VCombobox>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<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
|
||||
chips
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
variant="plain"
|
||||
placeholder="deployment"
|
||||
label="Plain"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,465 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const selectedItem = ref('Programming')
|
||||
const items = ['Programming', 'Design', 'Vue', 'Vuetify']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedItem = ref('Programming')
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
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>
|
||||
<VCombobox
|
||||
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">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
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"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VCombobox>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedItem = ref([
|
||||
'Vuetify',
|
||||
'Programming',
|
||||
])
|
||||
|
||||
const items = [
|
||||
'Programming',
|
||||
'Design',
|
||||
'Vue',
|
||||
'Vuetify',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="Select a favorite activity or create a new one"
|
||||
multiple
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
label="I use chips"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
placeholder="deployment"
|
||||
label="I'm readonly"
|
||||
chips
|
||||
multiple
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
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"
|
||||
>
|
||||
{{ String(item.title).charAt(0).toUpperCase() }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
{{ item.title }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VCombobox>
|
||||
</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>
|
||||
<VCombobox
|
||||
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>
|
||||
</VCombobox>
|
||||
</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>
|
||||
<VCombobox
|
||||
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>
|
||||
</VCombobox>
|
||||
</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
|
||||
chips
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
: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
|
||||
chips
|
||||
placeholder="deployment"
|
||||
variant="solo"
|
||||
label="solo"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="outlined"
|
||||
label="Outlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="underlined"
|
||||
label="Underlined"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
placeholder="deployment"
|
||||
variant="filled"
|
||||
label="Filled"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VCombobox
|
||||
v-model="selectedItem"
|
||||
multiple
|
||||
chips
|
||||
:items="items"
|
||||
variant="plain"
|
||||
placeholder="deployment"
|
||||
label="Plain"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: 'ri-server-line',
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: 'ri-shield-line',
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: 'ri-lock-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const checkboxContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Basic',
|
||||
desc: 'Get 2 projects with 2 team members.',
|
||||
value: 'basic',
|
||||
subtitle: '$1.00',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$5.00',
|
||||
desc: 'Get 8 projects with 8 team members.',
|
||||
value: 'premium',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'A simple start for everyone.',
|
||||
value: 'starter',
|
||||
icon: 'ri-rocket-line',
|
||||
},
|
||||
{
|
||||
title: 'Standard',
|
||||
desc: 'For small to medium businesses.',
|
||||
value: 'standard',
|
||||
icon: 'ri-user-line',
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Solution for big organizations.',
|
||||
value: 'enterprise',
|
||||
icon: 'ri-vip-crown-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,372 @@
|
||||
export const customCheckboxes = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const checkboxContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customCheckboxesWithIcon = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const checkboxContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: 'ri-server-line',
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: 'ri-shield-line',
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: 'ri-lock-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: 'ri-server-line',
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: 'ri-shield-line',
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: 'ri-lock-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customCheckboxesWithImage = { ts: `<script setup lang="ts">
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const checkboxContent: { bgImage: string; value: string }[] = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const checkboxContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadios = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const radioContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Basic',
|
||||
desc: 'Get 2 projects with 2 team members.',
|
||||
value: 'basic',
|
||||
subtitle: '$1.00',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$5.00',
|
||||
desc: 'Get 8 projects with 8 team members.',
|
||||
value: 'premium',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Basic',
|
||||
desc: 'Get 2 projects with 2 team members.',
|
||||
value: 'basic',
|
||||
subtitle: '$1.00',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$5.00',
|
||||
desc: 'Get 8 projects with 8 team members.',
|
||||
value: 'premium',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadiosWithIcon = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const radioContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'A simple start for everyone.',
|
||||
value: 'starter',
|
||||
icon: 'ri-rocket-line',
|
||||
},
|
||||
{
|
||||
title: 'Standard',
|
||||
desc: 'For small to medium businesses.',
|
||||
value: 'standard',
|
||||
icon: 'ri-user-line',
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Solution for big organizations.',
|
||||
value: 'enterprise',
|
||||
icon: 'ri-vip-crown-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'A simple start for everyone.',
|
||||
value: 'starter',
|
||||
icon: 'ri-rocket-line',
|
||||
},
|
||||
{
|
||||
title: 'Standard',
|
||||
desc: 'For small to medium businesses.',
|
||||
value: 'standard',
|
||||
icon: 'ri-user-line',
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Solution for big organizations.',
|
||||
value: 'enterprise',
|
||||
icon: 'ri-vip-crown-line',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadiosWithImage = { ts: `<script setup lang="ts">
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const radioContent: { bgImage: string; value: string }[] = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import bg1 from '@images/pages/background-1.jpg'
|
||||
import bg2 from '@images/pages/background-2.jpg'
|
||||
import bg3 from '@images/pages/background-3.jpg'
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Default"
|
||||
placeholder="Select date"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Date & TIme"
|
||||
placeholder="Select date and time"
|
||||
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
const now = new Date()
|
||||
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
|
||||
const currentYear = now.getFullYear()
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Disabled Range"
|
||||
placeholder="Select date"
|
||||
:config="{ dateFormat: 'Y-m-d', disable: [{ from: `${currentYear}-${currentMonth}-20`, to: `${currentYear}-${currentMonth}-25` }] }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Human Friendly"
|
||||
placeholder="Select date"
|
||||
:config="{ altInput: true, altFormat: 'F j, Y', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Inline"
|
||||
placeholder="Select Date"
|
||||
:config="{ inline: true }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const multipleDate = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="multipleDate"
|
||||
label="Multiple Dates"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const dateRange = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="dateRange"
|
||||
label="Range"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'range' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const time = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="time"
|
||||
label="Time picker"
|
||||
placeholder="Select time"
|
||||
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,212 @@
|
||||
export const basic = { ts: `<script setup lang="ts">
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Default"
|
||||
placeholder="Select date"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Default"
|
||||
placeholder="Select date"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const dateAndTime = { ts: `<script setup lang="ts">
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Date & TIme"
|
||||
placeholder="Select date and time"
|
||||
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Date & TIme"
|
||||
placeholder="Select date and time"
|
||||
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const disabledRange = { ts: `<script setup lang="ts">
|
||||
const now = new Date()
|
||||
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
|
||||
const currentYear = now.getFullYear()
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Disabled Range"
|
||||
placeholder="Select date"
|
||||
:config="{ dateFormat: 'Y-m-d', disable: [{ from: \`\${currentYear}-\${currentMonth}-20\`, to: \`\${currentYear}-\${currentMonth}-25\` }] }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const now = new Date()
|
||||
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
|
||||
const currentYear = now.getFullYear()
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Disabled Range"
|
||||
placeholder="Select date"
|
||||
:config="{ dateFormat: 'Y-m-d', disable: [{ from: \`\${currentYear}-\${currentMonth}-20\`, to: \`\${currentYear}-\${currentMonth}-25\` }] }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const humanFriendly = { ts: `<script setup lang="ts">
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Human Friendly"
|
||||
placeholder="Select date"
|
||||
:config="{ altInput: true, altFormat: 'F j, Y', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Human Friendly"
|
||||
placeholder="Select date"
|
||||
:config="{ altInput: true, altFormat: 'F j, Y', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inline = { ts: `<script setup lang="ts">
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Inline"
|
||||
placeholder="Select Date"
|
||||
:config="{ inline: true }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const date = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Inline"
|
||||
placeholder="Select Date"
|
||||
:config="{ inline: true }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const multipleDates = { ts: `<script setup lang="ts">
|
||||
const multipleDate = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="multipleDate"
|
||||
label="Multiple Dates"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const multipleDate = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="multipleDate"
|
||||
label="Multiple Dates"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const range = { ts: `<script setup lang="ts">
|
||||
const dateRange = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="dateRange"
|
||||
label="Range"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'range' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const dateRange = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="dateRange"
|
||||
label="Range"
|
||||
placeholder="Select date"
|
||||
:config="{ mode: 'range' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const timePicker = { ts: `<script setup lang="ts">
|
||||
const time = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="time"
|
||||
label="Time picker"
|
||||
placeholder="Select time"
|
||||
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const time = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppDateTimePicker
|
||||
v-model="time"
|
||||
label="Time picker"
|
||||
placeholder="Select time"
|
||||
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const basicEditorContent = ref(`
|
||||
<p>
|
||||
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though.
|
||||
</p>
|
||||
<p>
|
||||
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
|
||||
</p>
|
||||
`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<TiptapEditor
|
||||
v-model="basicEditorContent"
|
||||
class="border rounded"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.ProseMirror {
|
||||
block-size: 200px;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,270 @@
|
||||
<script setup>
|
||||
import { Placeholder } from '@tiptap/extension-placeholder'
|
||||
import { TextAlign } from '@tiptap/extension-text-align'
|
||||
import { Underline } from '@tiptap/extension-underline'
|
||||
import { StarterKit } from '@tiptap/starter-kit'
|
||||
import {
|
||||
EditorContent,
|
||||
useEditor,
|
||||
} from '@tiptap/vue-3'
|
||||
|
||||
const editor = useEditor({
|
||||
content: `
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That's a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that's amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
TextAlign.configure({
|
||||
types: [
|
||||
'heading',
|
||||
'paragraph',
|
||||
],
|
||||
}),
|
||||
Placeholder.configure({ placeholder: 'Write something here...' }),
|
||||
Underline,
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border pa-2 rounded">
|
||||
<div
|
||||
v-if="editor"
|
||||
class="d-flex flex-wrap gap-x-4 gap-y-2 mb-2"
|
||||
>
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
||||
:color="editor.isActive('bold') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
bold
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
||||
:color="editor.isActive('italic') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
italic
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
||||
:color="editor.isActive('strike') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
strike
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleCode().run()"
|
||||
:color="editor.isActive('code') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
code
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().unsetAllMarks().run()">
|
||||
clear marks
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().clearNodes().run()">
|
||||
clear nodes
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('paragraph') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
paragraph
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 1 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
h1
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 2 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
h2
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 3 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
h3
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 4 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
|
||||
>
|
||||
h4
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 5 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
|
||||
>
|
||||
h5
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 6 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
|
||||
>
|
||||
h6
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('bulletList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
bullet list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('orderedList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
ordered list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('codeBlock') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
code block
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('blockquote') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
blockquote
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHorizontalRule().run()">
|
||||
horizontal rule
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHardBreak().run()">
|
||||
hard break
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().undo().run()"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
undo
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().redo().run()"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
redo
|
||||
</VChip>
|
||||
</div>
|
||||
<VDivider class="my-4" />
|
||||
<EditorContent :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-block-start: 0.75em;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 0.5rem;
|
||||
background: #0d0d0d;
|
||||
color: #fff;
|
||||
font-family: JetBrainsMono, monospace;
|
||||
padding-block: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-block-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
margin-block: 2rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,596 @@
|
||||
export const basicEditor = { ts: `<script setup lang="ts">
|
||||
const basicEditorContent = ref(\`
|
||||
<p>
|
||||
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though.
|
||||
</p>
|
||||
<p>
|
||||
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
|
||||
</p>
|
||||
\`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<TiptapEditor
|
||||
v-model="basicEditorContent"
|
||||
class="border rounded"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.ProseMirror {
|
||||
block-size: 200px;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
`, js: `<script setup>
|
||||
const basicEditorContent = ref(\`
|
||||
<p>
|
||||
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though.
|
||||
</p>
|
||||
<p>
|
||||
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
|
||||
</p>
|
||||
\`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<TiptapEditor
|
||||
v-model="basicEditorContent"
|
||||
class="border rounded"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.ProseMirror {
|
||||
block-size: 200px;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
` }
|
||||
|
||||
export const customEditor = { ts: `<script setup lang="ts">
|
||||
import { Placeholder } from '@tiptap/extension-placeholder'
|
||||
import { TextAlign } from '@tiptap/extension-text-align'
|
||||
import { Underline } from '@tiptap/extension-underline'
|
||||
import { StarterKit } from '@tiptap/starter-kit'
|
||||
import { EditorContent, useEditor } from '@tiptap/vue-3'
|
||||
|
||||
const editor = useEditor({
|
||||
content: \`
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That's a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that's amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
\`,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
Placeholder.configure({
|
||||
placeholder: 'Write something here...',
|
||||
}),
|
||||
Underline,
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border pa-2 rounded">
|
||||
<div
|
||||
v-if="editor"
|
||||
class="d-flex flex-wrap gap-x-4 gap-y-2 mb-2"
|
||||
>
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
||||
:color="editor.isActive('bold') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
bold
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
||||
:color="editor.isActive('italic') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
italic
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
||||
:color="editor.isActive('strike') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
strike
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleCode().run()"
|
||||
:color="editor.isActive('code') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
code
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().unsetAllMarks().run()">
|
||||
clear marks
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().clearNodes().run()">
|
||||
clear nodes
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('paragraph') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
paragraph
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 1 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
h1
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 2 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
h2
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 3 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
h3
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 4 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
|
||||
>
|
||||
h4
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 5 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
|
||||
>
|
||||
h5
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 6 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
|
||||
>
|
||||
h6
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('bulletList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
bullet list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('orderedList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
ordered list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('codeBlock') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
code block
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('blockquote') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
blockquote
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHorizontalRule().run()">
|
||||
horizontal rule
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHardBreak().run()">
|
||||
hard break
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().undo().run()"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
undo
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().redo().run()"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
redo
|
||||
</VChip>
|
||||
</div>
|
||||
<VDivider class="my-4" />
|
||||
<EditorContent :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-block-start: 0.75em;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 0.5rem;
|
||||
background: #0d0d0d;
|
||||
color: #fff;
|
||||
font-family: JetBrainsMono, monospace;
|
||||
padding-block: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-block-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
margin-block: 2rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`, js: `<script setup>
|
||||
import { Placeholder } from '@tiptap/extension-placeholder'
|
||||
import { TextAlign } from '@tiptap/extension-text-align'
|
||||
import { Underline } from '@tiptap/extension-underline'
|
||||
import { StarterKit } from '@tiptap/starter-kit'
|
||||
import {
|
||||
EditorContent,
|
||||
useEditor,
|
||||
} from '@tiptap/vue-3'
|
||||
|
||||
const editor = useEditor({
|
||||
content: \`
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That's a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that's amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
\`,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
TextAlign.configure({
|
||||
types: [
|
||||
'heading',
|
||||
'paragraph',
|
||||
],
|
||||
}),
|
||||
Placeholder.configure({ placeholder: 'Write something here...' }),
|
||||
Underline,
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border pa-2 rounded">
|
||||
<div
|
||||
v-if="editor"
|
||||
class="d-flex flex-wrap gap-x-4 gap-y-2 mb-2"
|
||||
>
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
||||
:color="editor.isActive('bold') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
bold
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
||||
:color="editor.isActive('italic') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
italic
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
||||
:color="editor.isActive('strike') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
strike
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().toggleCode().run()"
|
||||
:color="editor.isActive('code') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
>
|
||||
code
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().unsetAllMarks().run()">
|
||||
clear marks
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().clearNodes().run()">
|
||||
clear nodes
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('paragraph') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().setParagraph().run()"
|
||||
>
|
||||
paragraph
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 1 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
>
|
||||
h1
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 2 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
>
|
||||
h2
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 3 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
>
|
||||
h3
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 4 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
|
||||
>
|
||||
h4
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 5 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
|
||||
>
|
||||
h5
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('heading', { level: 6 }) ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
|
||||
>
|
||||
h6
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('bulletList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
>
|
||||
bullet list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('orderedList') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
>
|
||||
ordered list
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('codeBlock') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
code block
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:color="editor.isActive('blockquote') ? 'primary' : ''"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
>
|
||||
blockquote
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHorizontalRule().run()">
|
||||
horizontal rule
|
||||
</VChip>
|
||||
|
||||
<VChip @click="editor.chain().focus().setHardBreak().run()">
|
||||
hard break
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().undo().run()"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
>
|
||||
undo
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:disabled="!editor.can().chain().focus().redo().run()"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
>
|
||||
redo
|
||||
</VChip>
|
||||
</div>
|
||||
<VDivider class="my-4" />
|
||||
<EditorContent :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-block-start: 0.75em;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding-inline: 0.5rem;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 0.5rem;
|
||||
background: #0d0d0d;
|
||||
color: #fff;
|
||||
font-family: JetBrainsMono, monospace;
|
||||
padding-block: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-block-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
margin-block: 2rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
accept="image/*"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VFileInput label="File input" />
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
chips
|
||||
label="File input w/ chips"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
counter
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const file = ref()
|
||||
const loading = ref(true)
|
||||
|
||||
watch(file, () => {
|
||||
loading.value = !file.value[0]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="file"
|
||||
:loading="loading"
|
||||
color="primary"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
prepend-icon="ri-camera-line"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
const files = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="files"
|
||||
multiple
|
||||
placeholder="Upload your documents"
|
||||
label="File input"
|
||||
prepend-icon="ri-attachment-line"
|
||||
>
|
||||
<template #selection="{ fileNames }">
|
||||
<template
|
||||
v-for="fileName in fileNames"
|
||||
:key="fileName"
|
||||
>
|
||||
<VChip
|
||||
label
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="me-2"
|
||||
>
|
||||
{{ fileName }}
|
||||
</VChip>
|
||||
</template>
|
||||
</template>
|
||||
</VFileInput>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
const rules = [fileList => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
:rules="rules"
|
||||
label="Avatar"
|
||||
accept="image/png, image/jpeg, image/bmp"
|
||||
placeholder="Pick an avatar"
|
||||
prepend-icon="ri-camera-2-line"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput label="Outlined" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,338 @@
|
||||
export const accept = { ts: `<template>
|
||||
<VFileInput
|
||||
accept="image/*"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
accept="image/*"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const basic = { ts: `<template>
|
||||
<VFileInput label="File input" />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput label="File input" />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const chips = { ts: `<template>
|
||||
<VFileInput
|
||||
chips
|
||||
label="File input w/ chips"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
chips
|
||||
label="File input w/ chips"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const counter = { ts: `<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
counter
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
counter
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const loading = { ts: `<script setup lang="ts">
|
||||
const file = ref()
|
||||
const loading = ref(true)
|
||||
|
||||
watch(file, () => {
|
||||
loading.value = !file.value[0]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="file"
|
||||
:loading="loading"
|
||||
color="primary"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const file = ref()
|
||||
const loading = ref(true)
|
||||
|
||||
watch(file, () => {
|
||||
loading.value = !file.value[0]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="file"
|
||||
:loading="loading"
|
||||
color="primary"
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const multiple = { ts: `<template>
|
||||
<VFileInput
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
multiple
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const prependIcon = { ts: `<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
prepend-icon="ri-camera-line"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
label="File input"
|
||||
prepend-icon="ri-camera-line"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const selectionSlot = { ts: `<script lang="ts" setup>
|
||||
const files = ref<File[]>([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="files"
|
||||
multiple
|
||||
placeholder="Upload your documents"
|
||||
label="File input"
|
||||
prepend-icon="ri-attachment-line"
|
||||
>
|
||||
<template #selection="{ fileNames }">
|
||||
<template
|
||||
v-for="fileName in fileNames"
|
||||
:key="fileName"
|
||||
>
|
||||
<VChip
|
||||
label
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="me-2"
|
||||
>
|
||||
{{ fileName }}
|
||||
</VChip>
|
||||
</template>
|
||||
</template>
|
||||
</VFileInput>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const files = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
v-model="files"
|
||||
multiple
|
||||
placeholder="Upload your documents"
|
||||
label="File input"
|
||||
prepend-icon="ri-attachment-line"
|
||||
>
|
||||
<template #selection="{ fileNames }">
|
||||
<template
|
||||
v-for="fileName in fileNames"
|
||||
:key="fileName"
|
||||
>
|
||||
<VChip
|
||||
label
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="me-2"
|
||||
>
|
||||
{{ fileName }}
|
||||
</VChip>
|
||||
</template>
|
||||
</template>
|
||||
</VFileInput>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const showSize = { ts: `<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VFileInput
|
||||
show-size
|
||||
label="File input"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validation = { ts: `<script lang="ts" setup>
|
||||
const rules = [
|
||||
(fileList: FileList) => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
:rules="rules"
|
||||
label="Avatar"
|
||||
accept="image/png, image/jpeg, image/bmp"
|
||||
placeholder="Pick an avatar"
|
||||
prepend-icon="ri-camera-2-line"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const rules = [fileList => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VFileInput
|
||||
:rules="rules"
|
||||
label="Avatar"
|
||||
accept="image/png, image/jpeg, image/bmp"
|
||||
placeholder="Pick an avatar"
|
||||
prepend-icon="ri-camera-2-line"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const variant = { ts: `<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput label="Outlined" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput label="Outlined" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VFileInput
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VOtpInput />
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const loading = ref(false)
|
||||
const snackbar = ref(false)
|
||||
const snackbarColor = ref('default')
|
||||
const otp = ref('')
|
||||
const text = ref('')
|
||||
const expectedOtp = ref('133707')
|
||||
|
||||
const onFinish = rsp => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
snackbarColor.value = rsp === expectedOtp.value ? 'success' : 'warning'
|
||||
text.value = `Processed OTP with "${ rsp }" (${ snackbarColor.value })`
|
||||
snackbar.value = true
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
:loading="loading"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
|
||||
<div>
|
||||
Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
|
||||
</div>
|
||||
|
||||
<VSnackbar
|
||||
v-model="snackbar"
|
||||
:color="snackbarColor"
|
||||
:timeout="2000"
|
||||
location="top"
|
||||
>
|
||||
{{ text }}
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const otp = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
length="5"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,119 @@
|
||||
export const basic = { ts: `<template>
|
||||
<VOtpInput />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VOtpInput />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const finish = { ts: `<script setup lang="ts">
|
||||
const loading = ref(false)
|
||||
const snackbar = ref(false)
|
||||
const snackbarColor = ref('default')
|
||||
const otp = ref('')
|
||||
const text = ref('')
|
||||
const expectedOtp = ref('133707')
|
||||
|
||||
const onFinish = (rsp: unknown) => {
|
||||
loading.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
snackbarColor.value = (rsp === expectedOtp.value) ? 'success' : 'warning'
|
||||
text.value = \`Processed OTP with "\${rsp}" (\${snackbarColor.value})\`
|
||||
snackbar.value = true
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
:loading="loading"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
|
||||
<div>
|
||||
Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
|
||||
</div>
|
||||
|
||||
<VSnackbar
|
||||
v-model="snackbar"
|
||||
:color="snackbarColor"
|
||||
:timeout="2000"
|
||||
location="top"
|
||||
>
|
||||
{{ text }}
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const loading = ref(false)
|
||||
const snackbar = ref(false)
|
||||
const snackbarColor = ref('default')
|
||||
const otp = ref('')
|
||||
const text = ref('')
|
||||
const expectedOtp = ref('133707')
|
||||
|
||||
const onFinish = rsp => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
snackbarColor.value = rsp === expectedOtp.value ? 'success' : 'warning'
|
||||
text.value = \`Processed OTP with "\${ rsp }" (\${ snackbarColor.value })\`
|
||||
snackbar.value = true
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
:loading="loading"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
|
||||
<div>
|
||||
Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
|
||||
</div>
|
||||
|
||||
<VSnackbar
|
||||
v-model="snackbar"
|
||||
:color="snackbarColor"
|
||||
:timeout="2000"
|
||||
location="top"
|
||||
>
|
||||
{{ text }}
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const hidden = { ts: `<script setup lang="ts">
|
||||
const otp = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
length="5"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const otp = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
length="5"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<VRadioGroup v-model="radioGroup">
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="`Radio ${n}`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
const selectedRadio = ref('primary')
|
||||
|
||||
const colorsRadio = [
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="selectedRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="radio in colorsRadio"
|
||||
:key="radio"
|
||||
:label="radio"
|
||||
:color="radio.toLocaleLowerCase()"
|
||||
:value="radio.toLocaleLowerCase()"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-3" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
false-icon="ri-notification-off-line"
|
||||
true-icon="ri-notification-3-line"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="`Radio ${n}`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const radios = ref('DuckDuckGo')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="radios">
|
||||
<template #label>
|
||||
<div>Your favorite <strong>search engine</strong></div>
|
||||
</template>
|
||||
|
||||
<VRadio value="Google">
|
||||
<template #label>
|
||||
<div>
|
||||
Of course it's <span class="text-success">
|
||||
Google
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
|
||||
<VRadio value="DuckDuckGo">
|
||||
<template #label>
|
||||
<div>
|
||||
Definitely <span class="text-primary">
|
||||
DuckDuckGo
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
const radioGroup = ref(1)
|
||||
const rules = [value => value !== 3 ? true : 'Do not select the third one!']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
inline
|
||||
:rules="rules"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
:error="radioGroup === 3 "
|
||||
:label="`Radio ${n}`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,370 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<VRadioGroup v-model="radioGroup">
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<VRadioGroup v-model="radioGroup">
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const colors = { ts: `<script lang="ts" setup>
|
||||
const selectedRadio = ref('primary')
|
||||
const colorsRadio = ['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="selectedRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="radio in colorsRadio"
|
||||
:key="radio"
|
||||
:label="radio"
|
||||
:color="radio.toLocaleLowerCase()"
|
||||
:value="radio.toLocaleLowerCase()"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selectedRadio = ref('primary')
|
||||
|
||||
const colorsRadio = [
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="selectedRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
v-for="radio in colorsRadio"
|
||||
:key="radio"
|
||||
:label="radio"
|
||||
:color="radio.toLocaleLowerCase()"
|
||||
:value="radio.toLocaleLowerCase()"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<script lang="ts" setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-3" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-3" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
density="compact"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
density="compact"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icon = { ts: `<script lang="ts" setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
false-icon="ri-notification-off-line"
|
||||
true-icon="ri-notification-3-line"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioGroup = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
false-icon="ri-notification-off-line"
|
||||
true-icon="ri-notification-3-line"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 2"
|
||||
:key="n"
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inline = { ts: `<script lang="ts" setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const columnRadio = ref('radio-1')
|
||||
const inlineRadio = ref('radio-1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="columnRadio">
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<VRadioGroup
|
||||
v-model="inlineRadio"
|
||||
inline
|
||||
>
|
||||
<VRadio
|
||||
label="Option 1"
|
||||
value="radio-1"
|
||||
/>
|
||||
<VRadio
|
||||
label="Option 2"
|
||||
value="radio-2"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const labelSlot = { ts: `<script lang="ts" setup>
|
||||
const radios = ref('DuckDuckGo')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="radios">
|
||||
<template #label>
|
||||
<div>Your favorite <strong>search engine</strong></div>
|
||||
</template>
|
||||
|
||||
<VRadio value="Google">
|
||||
<template #label>
|
||||
<div>
|
||||
Of course it's <span class="text-success">
|
||||
Google
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
|
||||
<VRadio value="DuckDuckGo">
|
||||
<template #label>
|
||||
<div>
|
||||
Definitely <span class="text-primary">
|
||||
DuckDuckGo
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radios = ref('DuckDuckGo')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup v-model="radios">
|
||||
<template #label>
|
||||
<div>Your favorite <strong>search engine</strong></div>
|
||||
</template>
|
||||
|
||||
<VRadio value="Google">
|
||||
<template #label>
|
||||
<div>
|
||||
Of course it's <span class="text-success">
|
||||
Google
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
|
||||
<VRadio value="DuckDuckGo">
|
||||
<template #label>
|
||||
<div>
|
||||
Definitely <span class="text-primary">
|
||||
DuckDuckGo
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VRadio>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validation = { ts: `<script lang="ts" setup>
|
||||
const radioGroup = ref(1)
|
||||
const rules = [(value: number) => (value !== 3 ? true : 'Do not select the third one!')]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
inline
|
||||
:rules="rules"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
:error="radioGroup === 3 "
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioGroup = ref(1)
|
||||
const rules = [value => value !== 3 ? true : 'Do not select the third one!']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRadioGroup
|
||||
v-model="radioGroup"
|
||||
inline
|
||||
:rules="rules"
|
||||
>
|
||||
<VRadio
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
:error="radioGroup === 3 "
|
||||
:label="\`Radio \${n}\`"
|
||||
:value="n"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
const sliderValues = ref([
|
||||
10,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider v-model="sliderValues" />
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
const sliderValues = ref([
|
||||
10,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
color="success"
|
||||
track-color="secondary"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
const slidersValues = ref([
|
||||
30,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="slidersValues"
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
const sliderValues = ref([
|
||||
20,
|
||||
40,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
step="10"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
const seasons = [
|
||||
'Winter',
|
||||
'Spring',
|
||||
'Summer',
|
||||
'Fall',
|
||||
]
|
||||
|
||||
const icons = [
|
||||
'ri-snowy-line',
|
||||
'ri-leaf-line',
|
||||
'ri-fire-line',
|
||||
'ri-drop-line',
|
||||
]
|
||||
|
||||
const sliderValues = ref([
|
||||
1,
|
||||
2,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
:tick="seasons"
|
||||
min="0"
|
||||
max="3"
|
||||
:step="1"
|
||||
show-ticks="always"
|
||||
thumb-label
|
||||
tick-size="4"
|
||||
>
|
||||
<template #thumb-label="{ modelValue }">
|
||||
<VIcon :icon="icons[modelValue]" />
|
||||
</template>
|
||||
</VRangeSlider>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
const sliderValues = ref([
|
||||
20,
|
||||
40,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
direction="vertical"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
export const basic = { ts: `<script setup lang="ts">
|
||||
const sliderValues = ref([10, 60])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider v-model="sliderValues" />
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const sliderValues = ref([
|
||||
10,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider v-model="sliderValues" />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const color = { ts: `<script lang="ts" setup>
|
||||
const sliderValues = ref([10, 60])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
color="success"
|
||||
track-color="secondary"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const sliderValues = ref([
|
||||
10,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
color="success"
|
||||
track-color="secondary"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const disabled = { ts: `<script lang="ts" setup>
|
||||
const slidersValues = ref([30, 60])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="slidersValues"
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const slidersValues = ref([
|
||||
30,
|
||||
60,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="slidersValues"
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const step = { ts: `<script lang="ts" setup>
|
||||
const sliderValues = ref([20, 40])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
step="10"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const sliderValues = ref([
|
||||
20,
|
||||
40,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
step="10"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const thumbLabel = { ts: `<script lang="ts" setup>
|
||||
const seasons = ['Winter', 'Spring', 'Summer', 'Fall']
|
||||
const icons = ['ri-snowy-line', 'ri-leaf-line', 'ri-fire-line', 'ri-drop-line']
|
||||
const sliderValues = ref([1, 2])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
:tick="seasons"
|
||||
min="0"
|
||||
max="3"
|
||||
:step="1"
|
||||
show-ticks="always"
|
||||
thumb-label
|
||||
tick-size="4"
|
||||
>
|
||||
<template #thumb-label="{ modelValue }">
|
||||
<VIcon :icon="icons[modelValue]" />
|
||||
</template>
|
||||
</VRangeSlider>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const seasons = [
|
||||
'Winter',
|
||||
'Spring',
|
||||
'Summer',
|
||||
'Fall',
|
||||
]
|
||||
|
||||
const icons = [
|
||||
'ri-snowy-line',
|
||||
'ri-leaf-line',
|
||||
'ri-fire-line',
|
||||
'ri-drop-line',
|
||||
]
|
||||
|
||||
const sliderValues = ref([
|
||||
1,
|
||||
2,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
:tick="seasons"
|
||||
min="0"
|
||||
max="3"
|
||||
:step="1"
|
||||
show-ticks="always"
|
||||
thumb-label
|
||||
tick-size="4"
|
||||
>
|
||||
<template #thumb-label="{ modelValue }">
|
||||
<VIcon :icon="icons[modelValue]" />
|
||||
</template>
|
||||
</VRangeSlider>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const vertical = { ts: `<script lang="ts" setup>
|
||||
const sliderValues = ref([20, 40])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
direction="vertical"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const sliderValues = ref([
|
||||
20,
|
||||
40,
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRangeSlider
|
||||
v-model="sliderValues"
|
||||
direction="vertical"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VRating />
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VRating clearable />
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const rating = ref(4)
|
||||
|
||||
const ratingColors = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-for="color in ratingColors"
|
||||
:key="color"
|
||||
v-model="rating"
|
||||
:color="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VRating density="compact" />
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<VRating hover />
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating
|
||||
v-model="rating"
|
||||
half-increments
|
||||
hover
|
||||
color="secondary"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating v-model="rating">
|
||||
<template #item="props">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
:size="25"
|
||||
:color="props.isFilled ? 'success' : 'secondary'"
|
||||
class="me-3"
|
||||
:icon="props.isFilled ? 'ri-emotion-happy-line' : 'ri-emotion-unhappy-line'"
|
||||
/>
|
||||
</template>
|
||||
</VRating>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const length = ref(5)
|
||||
const rating = ref(2)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-caption">
|
||||
Custom length
|
||||
</div>
|
||||
|
||||
<VSlider
|
||||
v-model="length"
|
||||
:min="1"
|
||||
:max="7"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
:length="length"
|
||||
/>
|
||||
<p class="font-weight-medium mb-0">
|
||||
Model: {{ rating }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VRating
|
||||
readonly
|
||||
:model-value="4"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
const rating = ref(4)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-small"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<VRating v-model="rating" />
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-large"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,258 @@
|
||||
export const basic = { ts: `<template>
|
||||
<VRating />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRating />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const clearable = { ts: `<template>
|
||||
<VRating clearable />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRating clearable />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const colors = { ts: `<script lang="ts" setup>
|
||||
const rating = ref(4)
|
||||
const ratingColors = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-for="color in ratingColors"
|
||||
:key="color"
|
||||
v-model="rating"
|
||||
:color="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const rating = ref(4)
|
||||
|
||||
const ratingColors = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-for="color in ratingColors"
|
||||
:key="color"
|
||||
v-model="rating"
|
||||
:color="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<template>
|
||||
<VRating density="compact" />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRating density="compact" />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const hover = { ts: `<template>
|
||||
<VRating hover />
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRating hover />
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const incremented = { ts: `<script lang="ts" setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating
|
||||
v-model="rating"
|
||||
half-increments
|
||||
hover
|
||||
color="secondary"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating
|
||||
v-model="rating"
|
||||
half-increments
|
||||
hover
|
||||
color="secondary"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const itemSlot = { ts: `<script lang="ts" setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating v-model="rating">
|
||||
<template #item="props">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
:size="25"
|
||||
:color="props.isFilled ? 'success' : 'secondary'"
|
||||
class="me-3"
|
||||
:icon="props.isFilled ? 'ri-emotion-happy-line' : 'ri-emotion-unhappy-line'"
|
||||
/>
|
||||
</template>
|
||||
</VRating>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const rating = ref(4.5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRating v-model="rating">
|
||||
<template #item="props">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
:size="25"
|
||||
:color="props.isFilled ? 'success' : 'secondary'"
|
||||
class="me-3"
|
||||
:icon="props.isFilled ? 'ri-emotion-happy-line' : 'ri-emotion-unhappy-line'"
|
||||
/>
|
||||
</template>
|
||||
</VRating>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const length = { ts: `<script lang="ts" setup>
|
||||
const length = ref(5)
|
||||
const rating = ref(2)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-caption">
|
||||
Custom length
|
||||
</div>
|
||||
|
||||
<VSlider
|
||||
v-model="length"
|
||||
:min="1"
|
||||
:max="7"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
:length="length"
|
||||
/>
|
||||
<p class="font-weight-medium mb-0">
|
||||
Model: {{ rating }}
|
||||
</p>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const length = ref(5)
|
||||
const rating = ref(2)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-caption">
|
||||
Custom length
|
||||
</div>
|
||||
|
||||
<VSlider
|
||||
v-model="length"
|
||||
:min="1"
|
||||
:max="7"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
:length="length"
|
||||
/>
|
||||
<p class="font-weight-medium mb-0">
|
||||
Model: {{ rating }}
|
||||
</p>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const readonly = { ts: `<template>
|
||||
<VRating
|
||||
readonly
|
||||
:model-value="4"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRating
|
||||
readonly
|
||||
:model-value="4"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const size = { ts: `<script lang="ts" setup>
|
||||
const rating = ref(4)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-small"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<VRating v-model="rating" />
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-large"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const rating = ref(4)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column">
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-small"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<VRating v-model="rating" />
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<VRating
|
||||
v-model="rating"
|
||||
size="x-large"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Foo',
|
||||
'Bar',
|
||||
'Fizz',
|
||||
'Buzz',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Standard"
|
||||
placeholder="Select Item"
|
||||
eager
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'foo',
|
||||
'bar',
|
||||
'fizz',
|
||||
'buzz',
|
||||
]
|
||||
|
||||
const selected = ref([
|
||||
'foo',
|
||||
'bar',
|
||||
'fizz',
|
||||
'buzz',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
v-model="selected"
|
||||
:items="items"
|
||||
placeholder="Select Item"
|
||||
label="Chips"
|
||||
chips
|
||||
multiple
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
const selectedOption = ref({
|
||||
state: 'Florida',
|
||||
abbr: 'FL',
|
||||
})
|
||||
|
||||
const items = [
|
||||
{
|
||||
state: 'Florida',
|
||||
abbr: 'FL',
|
||||
},
|
||||
{
|
||||
state: 'Georgia',
|
||||
abbr: 'GA',
|
||||
},
|
||||
{
|
||||
state: 'Nebraska',
|
||||
abbr: 'NE',
|
||||
},
|
||||
{
|
||||
state: 'California',
|
||||
abbr: 'CA',
|
||||
},
|
||||
{
|
||||
state: 'New York',
|
||||
abbr: 'NY',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
v-model="selectedOption"
|
||||
:hint="`${selectedOption.state}, ${selectedOption.abbr}`"
|
||||
:items="items"
|
||||
item-title="state"
|
||||
item-value="abbr"
|
||||
label="Select"
|
||||
persistent-hint
|
||||
return-object
|
||||
single-line
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Foo',
|
||||
'Bar',
|
||||
'Fizz',
|
||||
'Buzz',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Density"
|
||||
density="compact"
|
||||
placeholder="Select Item"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
const selectedOption1 = ref('Florida')
|
||||
const selectedOption2 = ref('Texas')
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="selectedOption1"
|
||||
:items="states"
|
||||
label="Select"
|
||||
prepend-icon="ri-map-2-line"
|
||||
single-line
|
||||
variant="filled"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="selectedOption2"
|
||||
:items="states"
|
||||
append-icon="ri-map-2-line"
|
||||
label="Select"
|
||||
single-line
|
||||
variant="filled"
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Foo',
|
||||
'Bar',
|
||||
'Fizz',
|
||||
'Buzz',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
:items="items"
|
||||
:menu-props="{ transition: 'scroll-y-transition' }"
|
||||
label="Label"
|
||||
placeholder="Select Item"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const selectedOptions = ref(['Alabama'])
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'American Samoa',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'District of Columbia',
|
||||
'Federated States of Micronesia',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Guam',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
v-model="selectedOptions"
|
||||
:items="states"
|
||||
:menu-props="{ maxHeight: '400' }"
|
||||
label="Select"
|
||||
multiple
|
||||
persistent-hint
|
||||
placeholder="Select State"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<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'
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: 'Sandra Adams',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
name: 'Ali Connors',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
name: 'Trevor Hansen',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
name: 'Tucker Smith',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
name: 'Britta Holt',
|
||||
avatar: avatar5,
|
||||
},
|
||||
]
|
||||
|
||||
const value = ref(['Sandra Adams'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSelect
|
||||
v-model="value"
|
||||
:items="items"
|
||||
item-title="name"
|
||||
item-value="name"
|
||||
label="Select Item"
|
||||
placeholder="Select Item"
|
||||
multiple
|
||||
clearable
|
||||
clear-icon="ri-close-line"
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<VChip>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
:image="item.raw.avatar"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<span>{{ item.title }}</span>
|
||||
</VChip>
|
||||
</template>
|
||||
</VSelect>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Foo',
|
||||
'Bar',
|
||||
'Fizz',
|
||||
'Buzz',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Outlined"
|
||||
placeholder="Select Item"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Filled"
|
||||
placeholder="Select Item"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Solo"
|
||||
placeholder="Select Item"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Plain"
|
||||
placeholder="Select Item"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:items="items"
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
placeholder="Select Item"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user