first commit
This commit is contained in:
Inshal
362
resources/js/pages/pages/dialog-examples/index.vue
Normal file
362
resources/js/pages/pages/dialog-examples/index.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<script setup>
|
||||
const isCardAddDialogVisible = ref(false)
|
||||
const isPricingPlanDialogVisible = ref(false)
|
||||
const isEditAddressDialogVisible = ref(false)
|
||||
const isTwoFactorDialogOpen = ref(false)
|
||||
const isUserInfoEditDialogVisible = ref(false)
|
||||
const isShareProjectDialogVisible = ref(false)
|
||||
const isReferAndEarnDialogVisible = ref(false)
|
||||
const isPaymentProvidersDialogVisible = ref(false)
|
||||
const isAddPaymentMethodsDialogVisible = ref(false)
|
||||
const isCreateAppVisible = ref(false)
|
||||
|
||||
const userData = {
|
||||
id: 110,
|
||||
fullName: 'Salena Kyle',
|
||||
company: 'Wayne Enterprises',
|
||||
firstName: 'Selena',
|
||||
lastName: 'Kyle',
|
||||
username: 'charwomen1940',
|
||||
role: 'Admin',
|
||||
currentPlan: 'Pro',
|
||||
country: 'USA',
|
||||
contact: '(829) 537-0057',
|
||||
email: 'salenakyle@gmail.com',
|
||||
isBillingAddress: true,
|
||||
status: 'active',
|
||||
taxId: 'Tax-8894',
|
||||
language: ['English'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Share Project Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-file-pdf-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Share Project
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Quickly collect the credit card details, built in input mask and form validation support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isShareProjectDialogVisible = !isShareProjectDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<ShareProjectDialog v-model:isDialogVisible="isShareProjectDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add New Card Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add New Card
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Quickly collect the credit card details, built in input mask and form validation support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isCardAddDialogVisible = !isCardAddDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<CardAddEditDialog v-model:isDialogVisible="isCardAddDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Pricing Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-money-dollar-circle-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Pricing
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant pricing options dialog popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isPricingPlanDialogVisible = !isPricingPlanDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<PricingPlanDialog v-model:is-dialog-visible="isPricingPlanDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Refer And Earn Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-gift-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Refer & Earn
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Use Refer & Earn modal to encourage your exiting customers refer their friends & colleague.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isReferAndEarnDialogVisible = !isReferAndEarnDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<ReferAndEarnDialog v-model:is-dialog-visible="isReferAndEarnDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add New Address Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-home-3-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add New Address
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Ready to use form to collect user address data with validation and custom input support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isEditAddressDialogVisible = !isEditAddressDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit Address dialog -->
|
||||
<AddEditAddressDialog v-model:isDialogVisible="isEditAddressDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Create app dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-box-3-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Create App
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Provide application data with this form to create the app dialog popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isCreateAppVisible = !isCreateAppVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<CreateAppDialog v-model:is-dialog-visible="isCreateAppVisible" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Two Factor Auth Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-lock-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Two Factor Auth
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Enhance your application security by enabling two factor authentication.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isTwoFactorDialogOpen = !isTwoFactorDialogOpen">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Enable One Time Password Dialog -->
|
||||
|
||||
<TwoFactorAuthDialog v-model:isDialogVisible="isTwoFactorDialogOpen" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Edit User Info Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Edit User Info
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Enhance your application security by enabling two factor authentication.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isUserInfoEditDialogVisible = !isUserInfoEditDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit user info dialog -->
|
||||
<UserInfoEditDialog
|
||||
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
||||
:user-data="userData"
|
||||
/>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Payment Providers Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Payment Providers
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant payment options modal popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isPaymentProvidersDialogVisible = !isPaymentProvidersDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<PaymentProvidersDialog v-model:is-dialog-visible="isPaymentProvidersDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add Payment Methods -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-2-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add Payment Methods
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant payment methods modal popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<AddPaymentMethodDialog v-model:is-dialog-visible="isAddPaymentMethodsDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.pricing-dialog {
|
||||
.pricing-title {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user