1228 lines
34 KiB
JavaScript
1228 lines
34 KiB
JavaScript
export const basic = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
width="500"
|
|
>
|
|
<!-- Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Click Me
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Privacy Policy">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn @click="isDialogVisible = false">
|
|
I accept
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
width="500"
|
|
>
|
|
<!-- Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Click Me
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Privacy Policy">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn @click="isDialogVisible = false">
|
|
I accept
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const form = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
const firstName = ref('')
|
|
const middleName = ref('')
|
|
const lastName = ref('')
|
|
const email = ref('')
|
|
const password = ref('')
|
|
const age = ref()
|
|
const interest = ref<string[]>([])
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
max-width="600"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="User Profile">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="firstName"
|
|
label="First Name"
|
|
placeholder="John"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="middleName"
|
|
label="Middle Name"
|
|
placeholder="peter"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="lastName"
|
|
label="Last Name"
|
|
persistent-hint
|
|
placeholder="Doe"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="email"
|
|
label="Email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="password"
|
|
label="Password"
|
|
autocomplete="on"
|
|
type="password"
|
|
placeholder="············"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VTextField
|
|
v-model="age"
|
|
label="Age"
|
|
type="number"
|
|
placeholder="18"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VTextField
|
|
v-model="interest"
|
|
label="Interests"
|
|
placeholder="Sports, Music, Movies"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
const firstName = ref('')
|
|
const middleName = ref('')
|
|
const lastName = ref('')
|
|
const email = ref('')
|
|
const password = ref('')
|
|
const age = ref()
|
|
const interest = ref([])
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
max-width="600"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="User Profile">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="firstName"
|
|
label="First Name"
|
|
placeholder="John"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="middleName"
|
|
label="Middle Name"
|
|
placeholder="peter"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
>
|
|
<VTextField
|
|
v-model="lastName"
|
|
label="Last Name"
|
|
persistent-hint
|
|
placeholder="Doe"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="email"
|
|
label="Email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="password"
|
|
label="Password"
|
|
autocomplete="on"
|
|
type="password"
|
|
placeholder="············"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VTextField
|
|
v-model="age"
|
|
label="Age"
|
|
type="number"
|
|
placeholder="18"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VTextField
|
|
v-model="interest"
|
|
label="Interests"
|
|
placeholder="Sports, Music, Movies"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const fullscreen = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
fullscreen
|
|
:scrim="false"
|
|
transition="dialog-bottom-transition"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<!-- Toolbar -->
|
|
<div>
|
|
<VToolbar color="primary">
|
|
<VBtn
|
|
icon
|
|
variant="plain"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
<VIcon
|
|
color="white"
|
|
icon="ri-close-line"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VToolbarTitle>Settings</VToolbarTitle>
|
|
|
|
<VSpacer />
|
|
|
|
<VToolbarItems>
|
|
<VBtn
|
|
variant="text"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
</VToolbarItems>
|
|
</VToolbar>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<VList lines="two">
|
|
<VListSubheader>User Controls</VListSubheader>
|
|
<VListItem
|
|
title="Content filtering"
|
|
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
|
/>
|
|
<VListItem
|
|
title="Password"
|
|
subtitle="Require password for purchase or use password to restrict purchase"
|
|
/>
|
|
</VList>
|
|
|
|
<VDivider />
|
|
|
|
<!-- List -->
|
|
<VList
|
|
lines="two"
|
|
select-strategy="classic"
|
|
>
|
|
<VListSubheader>General</VListSubheader>
|
|
|
|
<VListItem
|
|
title="Notifications"
|
|
subtitle="Notify me about updates to apps or games that I downloaded"
|
|
value="Notifications"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Sound"
|
|
subtitle="Auto-update apps at any time. Data charges may apply"
|
|
value="Sound"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Auto-add widgets"
|
|
subtitle="Automatically add home screen widgets"
|
|
value="Auto-add widgets"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
</VList>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.dialog-bottom-transition-enter-active,
|
|
.dialog-bottom-transition-leave-active {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
fullscreen
|
|
:scrim="false"
|
|
transition="dialog-bottom-transition"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<!-- Toolbar -->
|
|
<div>
|
|
<VToolbar color="primary">
|
|
<VBtn
|
|
icon
|
|
variant="plain"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
<VIcon
|
|
color="white"
|
|
icon="ri-close-line"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VToolbarTitle>Settings</VToolbarTitle>
|
|
|
|
<VSpacer />
|
|
|
|
<VToolbarItems>
|
|
<VBtn
|
|
variant="text"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
</VToolbarItems>
|
|
</VToolbar>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<VList lines="two">
|
|
<VListSubheader>User Controls</VListSubheader>
|
|
<VListItem
|
|
title="Content filtering"
|
|
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
|
/>
|
|
<VListItem
|
|
title="Password"
|
|
subtitle="Require password for purchase or use password to restrict purchase"
|
|
/>
|
|
</VList>
|
|
|
|
<VDivider />
|
|
|
|
<!-- List -->
|
|
<VList
|
|
lines="two"
|
|
select-strategy="classic"
|
|
>
|
|
<VListSubheader>General</VListSubheader>
|
|
|
|
<VListItem
|
|
title="Notifications"
|
|
subtitle="Notify me about updates to apps or games that I downloaded"
|
|
value="Notifications"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Sound"
|
|
subtitle="Auto-update apps at any time. Data charges may apply"
|
|
value="Sound"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Auto-add widgets"
|
|
subtitle="Automatically add home screen widgets"
|
|
value="Auto-add widgets"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
</VList>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.dialog-bottom-transition-enter-active,
|
|
.dialog-bottom-transition-leave-active {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const loader = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
|
|
watch(isDialogVisible, value => {
|
|
if (!value)
|
|
return
|
|
|
|
setTimeout(() => {
|
|
isDialogVisible.value = false
|
|
}, 4000)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Dialog Activator -->
|
|
<VBtn
|
|
:disabled="isDialogVisible"
|
|
@click="isDialogVisible = true"
|
|
>
|
|
Start loading
|
|
</VBtn>
|
|
|
|
<!-- Dialog -->
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
width="300"
|
|
>
|
|
<VCard
|
|
color="primary"
|
|
width="300"
|
|
>
|
|
<VCardText class="pt-3 text-white">
|
|
Please stand by
|
|
<VProgressLinear
|
|
indeterminate
|
|
class="mt-4"
|
|
color="#fff"
|
|
/>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
|
|
watch(isDialogVisible, value => {
|
|
if (!value)
|
|
return
|
|
setTimeout(() => {
|
|
isDialogVisible.value = false
|
|
}, 4000)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Dialog Activator -->
|
|
<VBtn
|
|
:disabled="isDialogVisible"
|
|
@click="isDialogVisible = true"
|
|
>
|
|
Start loading
|
|
</VBtn>
|
|
|
|
<!-- Dialog -->
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
width="300"
|
|
>
|
|
<VCard
|
|
color="primary"
|
|
width="300"
|
|
>
|
|
<VCardText class="pt-3 text-white">
|
|
Please stand by
|
|
<VProgressLinear
|
|
indeterminate
|
|
class="mt-4"
|
|
color="#fff"
|
|
/>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const nesting = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
const isDialogTwoShow = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VBtn @click="isDialogVisible = true">
|
|
Open Dialog
|
|
</VBtn>
|
|
|
|
<!-- Dialog -->
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
class="v-dialog-sm"
|
|
>
|
|
<VCard title="Dialog">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Biscuit fruitcake marshmallow jelly beans jujubes halvah cupcake topping. Chocolate cookie jelly-o toffee tart oat cake. Tart sugar plum gingerbread halvah muffin sweet. Cake halvah tart soufflé pudding.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn @click="isDialogTwoShow = !isDialogTwoShow">
|
|
Open Dialog 2
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
|
|
<!-- Dialog 2 -->
|
|
<VDialog
|
|
v-model="isDialogTwoShow"
|
|
class="v-dialog-sm"
|
|
>
|
|
<VCard title="Dialog 2">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogTwoShow = false"
|
|
/>
|
|
|
|
<VCardText>I'm a nested dialog.</VCardText>
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn @click="isDialogTwoShow = false">
|
|
Close
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
const isDialogTwoShow = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VBtn @click="isDialogVisible = true">
|
|
Open Dialog
|
|
</VBtn>
|
|
|
|
<!-- Dialog -->
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
class="v-dialog-sm"
|
|
>
|
|
<VCard title="Dialog">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Biscuit fruitcake marshmallow jelly beans jujubes halvah cupcake topping. Chocolate cookie jelly-o toffee tart oat cake. Tart sugar plum gingerbread halvah muffin sweet. Cake halvah tart soufflé pudding.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn @click="isDialogTwoShow = !isDialogTwoShow">
|
|
Open Dialog 2
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
|
|
<!-- Dialog 2 -->
|
|
<VDialog
|
|
v-model="isDialogTwoShow"
|
|
class="v-dialog-sm"
|
|
>
|
|
<VCard title="Dialog 2">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogTwoShow = false"
|
|
/>
|
|
|
|
<VCardText>I'm a nested dialog.</VCardText>
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn @click="isDialogTwoShow = false">
|
|
Close
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const overflowed = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
class="v-dialog-sm"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn
|
|
color="primary"
|
|
v-bind="props"
|
|
>
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Use Google's location service?">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies. Candy tootsie roll sweet lemon drops tart cotton candy jujubes topping chupa chups. Biscuit icing pastry chocolate bar lollipop. Lemon drops oat cake chocolate cake dessert chocolate. Carrot cake ice cream bonbon tart tootsie roll cupcake dessert gingerbread. Apple pie dessert sweet candy bonbon. Sugar plum gummies powder brownie dessert candy canes candy canes candy.
|
|
|
|
Sweet liquorice danish jujubes tart marshmallow cake. Danish chocolate bar icing dessert bonbon. Chocolate liquorice candy donut shortbread bonbon jujubes tart. Marshmallow cupcake marzipan icing pie dragée toffee. Cupcake soufflé pastry oat cake icing sesame snaps oat cake. Lollipop cheesecake cake tiramisu chocolate cake croissant. Donut candy canes sweet roll ice cream toffee gingerbread. Jelly-o biscuit oat cake cheesecake jujubes. Pudding chocolate biscuit gummies sesame snaps. Lemon drops candy canes chupa chups pudding muffin jujubes cupcake danish. Wafer chocolate oat cake sweet chocolate muffin. Pie dragée soufflé oat cake toffee dragée gummi bears. Jelly-o chocolate jelly fruitcake tart muffin icing sweet.
|
|
|
|
Gummies pie lollipop carrot cake gingerbread sweet. Marshmallow tiramisu chocolate cake cake marshmallow. Pudding fruitcake shortbread biscuit powder cake. Dragée cookie cheesecake chupa chups toffee wafer. Wafer donut pudding chocolate shortbread cheesecake. Cupcake sweet roll lollipop chupa chups donut croissant carrot cake chocolate cake. Toffee soufflé biscuit gingerbread fruitcake. Jelly beans pudding jelly-o gingerbread apple pie ice cream. Muffin halvah cookie topping muffin sugar plum. Bonbon dessert cake tiramisu marzipan apple pie. Jelly beans caramels icing cake cake tiramisu dessert dessert jelly-o. Halvah ice cream cotton candy chupa chups cheesecake pudding cheesecake cupcake gummies. Croissant cookie candy canes cake chocolate.
|
|
|
|
Pie cotton candy caramels sweet cake liquorice. Bear claw oat cake candy danish jelly-o fruitcake muffin sugar plum cupcake. Pudding cake cake lollipop chupa chups topping apple pie jelly oat cake. Pie candy canes tiramisu gummies icing cotton candy fruitcake marshmallow dragée. Pudding caramels muffin cookie cookie cupcake brownie ice cream. Liquorice lemon drops lemon drops cotton candy biscuit jelly-o jujubes topping. Lemon drops sweet dragée dessert sugar plum chocolate topping sugar plum oat cake. Muffin candy canes bonbon cotton candy liquorice gingerbread sesame snaps chocolate bar. Muffin gingerbread sesame snaps cake donut pie gingerbread soufflé croissant. Topping tart shortbread toffee jelly-o gingerbread cheesecake cupcake cake. Pudding powder icing marshmallow bear claw sesame snaps carrot cake. Jelly beans dessert tiramisu shortbread gummi bears gummies cotton candy. Tiramisu liquorice cookie pastry caramels icing tootsie roll.
|
|
|
|
Pudding croissant tootsie roll jelly-o jelly beans gummi bears. Shortbread candy canes biscuit candy donut marshmallow candy canes. Fruitcake marshmallow chocolate bar sweet roll tart gummi bears brownie cupcake dragée. Cheesecake gummies sesame snaps soufflé jelly beans halvah bonbon tootsie roll. Sesame snaps marzipan cupcake candy cheesecake lollipop. Donut candy jelly-o liquorice topping gummi bears halvah. Pie sweet sweet jujubes bear claw marshmallow pudding lollipop tiramisu. Tiramisu tootsie roll topping chocolate cake tootsie roll cotton candy brownie. Jelly beans biscuit caramels cake toffee toffee lemon drops dessert. Toffee chupa chups tart bonbon brownie cake shortbread. Gummies marshmallow topping dragée chocolate bar. Chupa chups donut cheesecake cookie fruitcake muffin. Jelly-o cupcake cheesecake chocolate bar cupcake wafer. Liquorice muffin marzipan cotton candy cake lemon drops cake brownie.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Disagree
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Agree
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
class="v-dialog-sm"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn
|
|
color="primary"
|
|
v-bind="props"
|
|
>
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Use Google's location service?">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies. Candy tootsie roll sweet lemon drops tart cotton candy jujubes topping chupa chups. Biscuit icing pastry chocolate bar lollipop. Lemon drops oat cake chocolate cake dessert chocolate. Carrot cake ice cream bonbon tart tootsie roll cupcake dessert gingerbread. Apple pie dessert sweet candy bonbon. Sugar plum gummies powder brownie dessert candy canes candy canes candy.
|
|
|
|
Sweet liquorice danish jujubes tart marshmallow cake. Danish chocolate bar icing dessert bonbon. Chocolate liquorice candy donut shortbread bonbon jujubes tart. Marshmallow cupcake marzipan icing pie dragée toffee. Cupcake soufflé pastry oat cake icing sesame snaps oat cake. Lollipop cheesecake cake tiramisu chocolate cake croissant. Donut candy canes sweet roll ice cream toffee gingerbread. Jelly-o biscuit oat cake cheesecake jujubes. Pudding chocolate biscuit gummies sesame snaps. Lemon drops candy canes chupa chups pudding muffin jujubes cupcake danish. Wafer chocolate oat cake sweet chocolate muffin. Pie dragée soufflé oat cake toffee dragée gummi bears. Jelly-o chocolate jelly fruitcake tart muffin icing sweet.
|
|
|
|
Gummies pie lollipop carrot cake gingerbread sweet. Marshmallow tiramisu chocolate cake cake marshmallow. Pudding fruitcake shortbread biscuit powder cake. Dragée cookie cheesecake chupa chups toffee wafer. Wafer donut pudding chocolate shortbread cheesecake. Cupcake sweet roll lollipop chupa chups donut croissant carrot cake chocolate cake. Toffee soufflé biscuit gingerbread fruitcake. Jelly beans pudding jelly-o gingerbread apple pie ice cream. Muffin halvah cookie topping muffin sugar plum. Bonbon dessert cake tiramisu marzipan apple pie. Jelly beans caramels icing cake cake tiramisu dessert dessert jelly-o. Halvah ice cream cotton candy chupa chups cheesecake pudding cheesecake cupcake gummies. Croissant cookie candy canes cake chocolate.
|
|
|
|
Pie cotton candy caramels sweet cake liquorice. Bear claw oat cake candy danish jelly-o fruitcake muffin sugar plum cupcake. Pudding cake cake lollipop chupa chups topping apple pie jelly oat cake. Pie candy canes tiramisu gummies icing cotton candy fruitcake marshmallow dragée. Pudding caramels muffin cookie cookie cupcake brownie ice cream. Liquorice lemon drops lemon drops cotton candy biscuit jelly-o jujubes topping. Lemon drops sweet dragée dessert sugar plum chocolate topping sugar plum oat cake. Muffin candy canes bonbon cotton candy liquorice gingerbread sesame snaps chocolate bar. Muffin gingerbread sesame snaps cake donut pie gingerbread soufflé croissant. Topping tart shortbread toffee jelly-o gingerbread cheesecake cupcake cake. Pudding powder icing marshmallow bear claw sesame snaps carrot cake. Jelly beans dessert tiramisu shortbread gummi bears gummies cotton candy. Tiramisu liquorice cookie pastry caramels icing tootsie roll.
|
|
|
|
Pudding croissant tootsie roll jelly-o jelly beans gummi bears. Shortbread candy canes biscuit candy donut marshmallow candy canes. Fruitcake marshmallow chocolate bar sweet roll tart gummi bears brownie cupcake dragée. Cheesecake gummies sesame snaps soufflé jelly beans halvah bonbon tootsie roll. Sesame snaps marzipan cupcake candy cheesecake lollipop. Donut candy jelly-o liquorice topping gummi bears halvah. Pie sweet sweet jujubes bear claw marshmallow pudding lollipop tiramisu. Tiramisu tootsie roll topping chocolate cake tootsie roll cotton candy brownie. Jelly beans biscuit caramels cake toffee toffee lemon drops dessert. Toffee chupa chups tart bonbon brownie cake shortbread. Gummies marshmallow topping dragée chocolate bar. Chupa chups donut cheesecake cookie fruitcake muffin. Jelly-o cupcake cheesecake chocolate bar cupcake wafer. Liquorice muffin marzipan cotton candy cake lemon drops cake brownie.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Disagree
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Agree
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const persistent = { ts: `<script lang="ts" setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
persistent
|
|
class="v-dialog-sm"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Use Google's location service?">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Disagree
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Agree
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
persistent
|
|
class="v-dialog-sm"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="Use Google's location service?">
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardText>
|
|
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
<VBtn
|
|
color="error"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Disagree
|
|
</VBtn>
|
|
<VBtn
|
|
color="success"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Agree
|
|
</VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|
|
export const scrollable = { ts: `<script lang="ts" setup>
|
|
const countryList = [
|
|
{ label: 'Bahamas, The', value: 'bahamas' },
|
|
{ label: 'Bahrain', value: 'bahrain' },
|
|
{ label: 'Bangladesh', value: 'bangladesh' },
|
|
|
|
{ label: 'Barbados', value: 'barbados' },
|
|
{ label: 'Belarus', value: 'belarus' },
|
|
{ label: 'Belgium', value: 'belgium' },
|
|
{ label: 'Belize', value: 'belize' },
|
|
{ label: 'Benin', value: 'benin' },
|
|
{ label: 'Bhutan', value: 'bhutan' },
|
|
{ label: 'Bolivia', value: 'bolivia' },
|
|
{ label: 'Bosnia and Herzegovina', value: 'bosnia' },
|
|
|
|
{ label: 'Botswana', value: 'botswana' },
|
|
{ label: 'Brazil', value: 'brazil' },
|
|
{ label: 'Brunei', value: 'brunei' },
|
|
{ label: 'Bulgaria', value: 'bulgaria' },
|
|
{ label: 'Burkina Faso', value: 'burkina' },
|
|
]
|
|
|
|
const selectedCountry = ref('')
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
scrollable
|
|
max-width="350"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardItem class="pb-3">
|
|
<VCardTitle>Select Country</VCardTitle>
|
|
</VCardItem>
|
|
|
|
<VDivider />
|
|
<VCardText style="block-size: 300px;">
|
|
<VRadioGroup
|
|
v-model="selectedCountry"
|
|
:inline="false"
|
|
>
|
|
<VRadio
|
|
v-for="country in countryList"
|
|
:key="country.label"
|
|
:label="country.label"
|
|
:value="country.value"
|
|
color="primary"
|
|
/>
|
|
</VRadioGroup>
|
|
</VCardText>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText class="pt-5 text-end">
|
|
<VSpacer />
|
|
<VBtn
|
|
variant="outlined"
|
|
color="secondary"
|
|
class="me-4"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn @click="isDialogVisible = false">
|
|
Save Changes
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const countryList = [
|
|
{
|
|
label: 'Bahamas, The',
|
|
value: 'bahamas',
|
|
},
|
|
{
|
|
label: 'Bahrain',
|
|
value: 'bahrain',
|
|
},
|
|
{
|
|
label: 'Bangladesh',
|
|
value: 'bangladesh',
|
|
},
|
|
{
|
|
label: 'Barbados',
|
|
value: 'barbados',
|
|
},
|
|
{
|
|
label: 'Belarus',
|
|
value: 'belarus',
|
|
},
|
|
{
|
|
label: 'Belgium',
|
|
value: 'belgium',
|
|
},
|
|
{
|
|
label: 'Belize',
|
|
value: 'belize',
|
|
},
|
|
{
|
|
label: 'Benin',
|
|
value: 'benin',
|
|
},
|
|
{
|
|
label: 'Bhutan',
|
|
value: 'bhutan',
|
|
},
|
|
{
|
|
label: 'Bolivia',
|
|
value: 'bolivia',
|
|
},
|
|
{
|
|
label: 'Bosnia and Herzegovina',
|
|
value: 'bosnia',
|
|
},
|
|
{
|
|
label: 'Botswana',
|
|
value: 'botswana',
|
|
},
|
|
{
|
|
label: 'Brazil',
|
|
value: 'brazil',
|
|
},
|
|
{
|
|
label: 'Brunei',
|
|
value: 'brunei',
|
|
},
|
|
{
|
|
label: 'Bulgaria',
|
|
value: 'bulgaria',
|
|
},
|
|
{
|
|
label: 'Burkina Faso',
|
|
value: 'burkina',
|
|
},
|
|
]
|
|
|
|
const selectedCountry = ref('')
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
scrollable
|
|
max-width="350"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="isDialogVisible = false"
|
|
/>
|
|
|
|
<VCardItem class="pb-3">
|
|
<VCardTitle>Select Country</VCardTitle>
|
|
</VCardItem>
|
|
|
|
<VDivider />
|
|
<VCardText style="block-size: 300px;">
|
|
<VRadioGroup
|
|
v-model="selectedCountry"
|
|
:inline="false"
|
|
>
|
|
<VRadio
|
|
v-for="country in countryList"
|
|
:key="country.label"
|
|
:label="country.label"
|
|
:value="country.value"
|
|
color="primary"
|
|
/>
|
|
</VRadioGroup>
|
|
</VCardText>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText class="pt-5 text-end">
|
|
<VSpacer />
|
|
<VBtn
|
|
variant="outlined"
|
|
color="secondary"
|
|
class="me-4"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
<VBtn @click="isDialogVisible = false">
|
|
Save Changes
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
` }
|
|
|