moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
resources/js/views/wizard-examples/checkout/Address.vue Normal file
View File

@@ -0,0 +1,290 @@
<script setup>
const props = defineProps({
currentStep: {
type: Number,
required: false,
},
checkoutData: {
type: null,
required: true,
},
})
const emit = defineEmits([
'update:currentStep',
'update:checkout-data',
])
const checkoutAddressDataLocal = ref(JSON.parse(JSON.stringify(props.checkoutData)))
const isEditAddressDialogVisible = ref(false)
watch(() => props.checkoutData, value => {
checkoutAddressDataLocal.value = JSON.parse(JSON.stringify(value))
})
const deliveryOptions = [
{
icon: { icon: 'tabler-user' },
title: 'Standard',
desc: 'Get your product in 1 Week.',
value: 'free',
},
{
icon: { icon: 'tabler-star' },
title: 'Express',
desc: 'Get your product in 4 days.',
value: 'express',
},
{
icon: { icon: 'tabler-crown' },
title: 'Overnight',
desc: 'Get your product in 1 day.',
value: 'overnight',
},
]
const resolveAddressBadgeColor = {
home: 'primary',
office: 'success',
}
const resolveDeliveryBadgeData = {
free: {
color: 'success',
price: 0,
text: 'Free',
},
express: {
color: 'secondary',
price: 10,
text: '$10',
},
overnight: {
color: 'secondary',
price: 15,
text: '$15',
},
}
const totalPriceWithDeliveryCharges = computed(() => {
let deliveryCharges = 0
if (checkoutAddressDataLocal.value.deliverySpeed !== 'free')
deliveryCharges = resolveDeliveryBadgeData[checkoutAddressDataLocal.value.deliverySpeed].price
return checkoutAddressDataLocal.value.orderAmount + deliveryCharges
})
const updateAddressData = () => {
checkoutAddressDataLocal.value.deliveryCharges = resolveDeliveryBadgeData[checkoutAddressDataLocal.value.deliverySpeed].price
emit('update:checkout-data', checkoutAddressDataLocal.value)
}
const nextStep = () => {
updateAddressData()
emit('update:currentStep', props.currentStep ? props.currentStep + 1 : 1)
}
watch(() => props.currentStep, updateAddressData)
</script>
<template>
<VRow>
<VCol
cols="12"
md="8"
>
<!-- 👉 Address options -->
<h6 class="text-h6 mb-4">
Select your preferable address
</h6>
<!-- 👉 Address custom input -->
<CustomRadios
v-model:selected-radio="checkoutAddressDataLocal.deliveryAddress"
:radio-content="checkoutAddressDataLocal.addresses"
:grid-column="{ cols: '12', sm: '6' }"
>
<template #default="{ item }">
<div class="w-100">
<div class="d-flex justify-space-between mb-3">
<h6 class="text-base font-weight-medium">
{{ item.title }}
</h6>
<VChip
:color="resolveAddressBadgeColor[item.value]"
label
size="small"
class="text-capitalize"
>
{{ item.value }}
</VChip>
</div>
<p class="mb-0 text-sm">
{{ item.desc }}
</p>
<p class="text-sm mb-3">
Mobile: {{ item.subtitle }}
</p>
<VDivider />
<div class="pt-2">
<a
href="#"
class="me-4"
>Edit</a>
<a href="#">Remove</a>
</div>
</div>
</template>
</CustomRadios>
<!-- 👉 Add New Address -->
<VBtn
variant="tonal"
class="mt-4 mb-6"
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
>
Add New Address
</VBtn>
<!-- 👉 Delivery options -->
<h6 class="text-h6 mb-4">
Choose Delivery Speed
</h6>
<!-- 👉 Delivery options custom input -->
<CustomRadiosWithIcon
v-model:selected-radio="checkoutAddressDataLocal.deliverySpeed"
:radio-content="deliveryOptions"
:grid-column="{ cols: '12', sm: '4' }"
>
<template #default="{ item }">
<div class="d-flex flex-column align-center gap-2 w-100">
<div class="d-flex justify-end w-100 mb-n3">
<VChip
:color="resolveDeliveryBadgeData[item.value].color"
size="small"
label
>
{{ resolveDeliveryBadgeData[item.value].text }}
</VChip>
</div>
<VIcon
v-bind="item.icon"
size="28"
/>
<h6 class="text-h6">
{{ item.title }}
</h6>
<p class="text-sm text-center mb-0">
{{ item.desc }}
</p>
</div>
</template>
</CustomRadiosWithIcon>
</VCol>
<VCol
cols="12"
md="4"
>
<VCard
flat
variant="outlined"
>
<!-- 👉 Delivery estimate date -->
<VCardText>
<h6 class="text-h6 mb-4">
Estimated Delivery Date
</h6>
<VList class="card-list">
<VListItem
v-for="product in checkoutAddressDataLocal.cartItems"
:key="product.name"
>
<template #prepend>
<img
height="70"
width="60"
:src="product.image"
class="me-4"
>
</template>
<div class="text-body-1">
{{ product.name }}
</div>
<h6 class="text-h6 text-medium-emphasis">
{{ product.estimatedDelivery }}
</h6>
</VListItem>
</VList>
</VCardText>
<VDivider />
<!-- 👉 Price details -->
<VCardText>
<h6 class="text-h6 mb-4">
Price Details
</h6>
<div class="d-flex align-center justify-space-between mb-2">
<span class="text-high-emphasis">Order Total</span>
<span>${{ checkoutAddressDataLocal.orderAmount }}</span>
</div>
<div class="d-flex align-center justify-space-between">
<span class="text-high-emphasis">Delivery Charges</span>
<div class="text-end">
<div
v-if="checkoutAddressDataLocal.deliverySpeed === 'free'"
class="d-flex align-center"
>
<div class="text-decoration-line-through text-disabled me-2">
$5.00
</div>
<VChip
size="small"
color="success"
>
FREE
</VChip>
</div>
<span v-else>${{ resolveDeliveryBadgeData[checkoutAddressDataLocal.deliverySpeed ].price }}.00</span>
</div>
</div>
</VCardText>
<VDivider />
<VCardText class="d-flex align-center justify-space-between text-high-emphasis">
<span class="text-base font-weight-medium">Total</span>
<span class="text-base font-weight-medium">
${{ totalPriceWithDeliveryCharges }}
</span>
</VCardText>
</VCard>
<VBtn
block
class="mt-4"
@click="nextStep"
>
Place Order
</VBtn>
</VCol>
</VRow>
<AddEditAddressDialog v-model:is-dialog-visible="isEditAddressDialogVisible" />
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1rem;
}
</style>

304
resources/js/views/wizard-examples/checkout/Cart.vue Normal file
View File

@@ -0,0 +1,304 @@
<script setup>
import emptyCartImg from '@images/pages/empty-cart.png'
const props = defineProps({
currentStep: {
type: Number,
required: false,
},
checkoutData: {
type: null,
required: true,
},
})
const emit = defineEmits([
'update:currentStep',
'update:checkout-data',
])
const checkoutCartDataLocal = ref(props.checkoutData)
const removeItem = item => {
checkoutCartDataLocal.value.cartItems = checkoutCartDataLocal.value.cartItems.filter(i => i.id !== item.id)
}
const totalCost = computed(() => {
return checkoutCartDataLocal.value.cartItems.reduce((acc, item) => {
return acc + item.price * item.quantity
}, 0)
})
const updateCartData = () => {
checkoutCartDataLocal.value.orderAmount = totalCost.value
emit('update:checkout-data', checkoutCartDataLocal.value)
}
const nextStep = () => {
updateCartData()
emit('update:currentStep', props.currentStep ? props.currentStep + 1 : 1)
}
watch(() => props.currentStep, updateCartData)
</script>
<template>
<VRow v-if="checkoutCartDataLocal">
<VCol
cols="12"
lg="8"
>
<!-- 👉 Offers alert -->
<VAlert
type="success"
variant="tonal"
icon="tabler-percentage"
title="Available Offer"
closable
>
<template #text>
<p class="mb-0">
- 0% Instant Discount on Bank of America Corp Bank Debit and Credit cards
<br>
- 50% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA
</p>
</template>
</VAlert>
<h5 class="text-h5 my-4">
My Shopping Bag ({{ checkoutCartDataLocal.cartItems.length }} Items)
</h5>
<!-- 👉 Cart items -->
<div
v-if="checkoutCartDataLocal.cartItems.length"
class="border rounded"
>
<template
v-for="(item, index) in checkoutCartDataLocal.cartItems"
:key="item.name"
>
<div
class="d-flex align-center gap-4 pa-6 position-relative flex-column flex-sm-row"
:class="index ? 'border-t' : ''"
>
<IconBtn
class="checkout-item-remove-btn"
@click="removeItem(item)"
>
<VIcon
size="18"
icon="tabler-x"
class="text-disabled"
/>
</IconBtn>
<div>
<VImg
width="140"
:src="item.image"
/>
</div>
<div class="d-flex w-100 flex-column flex-md-row">
<div class="d-flex flex-column gap-y-2">
<h6 class="text-h6">
{{ item.name }}
</h6>
<div class="d-flex align-center text-no-wrap gap-4 text-body-1">
<div class="text-disabled">
Sold by:
<span class="d-inline-block text-primary"> {{ item.seller }}</span>
</div>
<VChip
:color="item.inStock ? 'success' : 'error'"
label
size="small"
>
{{ item.inStock ? 'In Stock' : 'Out of Stock' }}
</VChip>
</div>
<VRating
density="compact"
:model-value="item.rating"
size="24"
readonly
/>
<AppTextField
v-model="item.quantity"
type="number"
style="inline-size: 9.375rem;"
density="compact"
/>
</div>
<VSpacer />
<div
class="d-flex flex-column mt-5 text-start text-md-end"
:class="$vuetify.display.mdAndDown ? 'gap-2' : 'gap-4'"
>
<div class="d-flex text-base align-self-md-end">
<div class="text-primary">
${{ item.price }}
</div>
<div>/</div>
<div class="text-decoration-line-through">
${{ item.discountPrice }}
</div>
</div>
<div>
<VBtn
variant="tonal"
size="small"
>
move to wishlist
</VBtn>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- 👉 Empty Cart -->
<div v-else>
<VImg :src="emptyCartImg" />
</div>
<!-- 👉 Add more from wishlist -->
<div
class="d-flex align-center justify-space-between rounded py-2 px-5 text-base mt-4"
style="border: 1px solid rgb(var(--v-theme-primary));"
>
<a
href="#"
class="font-weight-medium"
>Add more products from wishlist</a>
<VIcon
icon="tabler-arrow-right"
size="16"
class="flip-in-rtl text-primary"
/>
</div>
</VCol>
<VCol
cols="12"
lg="4"
>
<VCard
flat
variant="outlined"
>
<!-- 👉 payment offer -->
<VCardText>
<h6 class="text-h6 mb-4">
Offer
</h6>
<div class="d-flex align-center gap-4 flex-wrap">
<AppTextField
v-model="checkoutCartDataLocal.promoCode"
placeholder="Enter Promo Code"
style="min-inline-size: 200px;"
/>
<VBtn
variant="tonal"
@click="updateCartData"
>
Apply
</VBtn>
</div>
<!-- 👉 Gift wrap banner -->
<div class="bg-var-theme-background rounded pa-6 mt-4">
<h6 class="text-h6 mb-2">
Buying gift for a loved one?
</h6>
<p class="mb-2">
Gift wrap and personalized message on card, Only for $2.
</p>
<h6 class="text-h6">
<a href="#">Add a gift wrap</a>
</h6>
</div>
</VCardText>
<VDivider />
<!-- 👉 Price details -->
<VCardText>
<h6 class="text-h6 mb-4">
Price Details
</h6>
<div class="text-high-emphasis">
<div class="d-flex justify-space-between mb-2">
<span>Bag Total</span>
<span class="text-medium-emphasis">${{ totalCost }}.00</span>
</div>
<div class="d-flex justify-space-between mb-2">
<span>Coupon Discount</span>
<a href="#">Apply Coupon</a>
</div>
<div class="d-flex justify-space-between mb-2">
<span>Order Total</span>
<span class="text-medium-emphasis">${{ totalCost }}.00</span>
</div>
<div class="d-flex justify-space-between">
<span>Delivery Charges</span>
<div class="d-flex align-center">
<div class="text-decoration-line-through text-disabled me-2">
$5.00
</div>
<VChip
size="small"
color="success"
>
FREE
</VChip>
</div>
</div>
</div>
</VCardText>
<VDivider />
<VCardText class="d-flex justify-space-between pa-6">
<h6 class="text-h6">
Total
</h6>
<h6 class="text-h6">
${{ totalCost }}.00
</h6>
</VCardText>
</VCard>
<VBtn
block
class="mt-4"
@click="nextStep"
>
Place Order
</VBtn>
</VCol>
</VRow>
</template>
<style lang="scss" scoped>
.checkout-item-remove-btn {
position: absolute;
inset-block-start: 14px;
inset-inline-end: 14px;
}
</style>

269
resources/js/views/wizard-examples/checkout/Confirmation.vue Normal file
View File

@@ -0,0 +1,269 @@
<script setup>
const props = defineProps({
currentStep: {
type: Number,
required: false,
},
checkoutData: {
type: null,
required: true,
},
})
const emit = defineEmits([
'update:currentStep',
'update:checkout-data',
])
const selectedDeliveryAddress = computed(() => {
return props.checkoutData.addresses.filter(address => {
return address.value === props.checkoutData.deliveryAddress
})
})
const resolveDeliveryMethod = computed(() => {
if (props.checkoutData.deliverySpeed === 'overnight')
return {
method: 'Overnight Delivery',
desc: 'In 1 business day.',
}
else if (props.checkoutData.deliverySpeed === 'express')
return {
method: 'Express Delivery',
desc: 'Normally in 3-4 business days',
}
else
return {
method: 'Standard Delivery',
desc: 'Normally in 1 Week',
}
})
</script>
<template>
<section class="text-base">
<div class="text-center">
<h4 class="text-h4 mb-4">
Thank You! 😇
</h4>
<p>
Your order <span class="text-body-1 font-weight-medium text-high-emphasis">#1536548131</span> has been placed!
</p>
<p class="mb-0">
We sent an email to <span class="text-body-1 font-weight-medium text-high-emphasis">john.doe@example.com</span> with your order confirmation and receipt.
</p>
<p>If the email hasn't arrived within two minutes, please check your spam folder to see if the email was routed there.</p>
<div class="d-flex align-center gap-2 justify-center">
<VIcon
size="20"
icon="tabler-clock"
class="text-high-emphasis"
/>
<span>Time placed: 25/05/2020 13:35pm</span>
</div>
</div>
<VRow class="border rounded ma-0 mt-6">
<VCol
cols="12"
md="4"
class="pa-6"
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="tabler-map-pin"
size="20"
/>
<span class="text-base font-weight-medium">
Shipping
</span>
</div>
<template
v-for="item in selectedDeliveryAddress"
:key="item.value"
>
<p class="mb-0">
{{ item.title }}
</p>
<p class="mb-4">
{{ item.desc }}
</p>
<div class="text-base">
+{{ item.subtitle }}
</div>
</template>
</VCol>
<VCol
cols="12"
md="4"
class="pa-6"
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="tabler-credit-card"
size="20"
/>
<span class="text-base font-weight-medium">
Billing Address
</span>
</div>
<template
v-for="item in selectedDeliveryAddress"
:key="item.value"
>
<p class="mb-0">
{{ item.title }}
</p>
<p class="mb-4">
{{ item.desc }}
</p>
<div class="text-base">
+{{ item.subtitle }}
</div>
</template>
</VCol>
<VCol
cols="12"
md="4"
class="pa-6"
>
<div class="d-flex align-center gap-2 text-high-emphasis mb-4">
<VIcon
icon="tabler-ship"
size="20"
/>
<span class="text-base font-weight-medium">
Shipping Method
</span>
</div>
<p class="font-weight-medium">
Preferred Method:
</p>
<p class="mb-0">
{{ resolveDeliveryMethod.method }}
</p>
<p class="mb-0">
( {{ resolveDeliveryMethod.desc }} )
</p>
</VCol>
</VRow>
<VRow>
<VCol
cols="12"
md="9"
>
<!-- 👉 cart items -->
<div class="border rounded">
<template
v-for="(item, index) in props.checkoutData.cartItems"
:key="item.name"
>
<div
class="d-flex align-start gap-4 pa-6 position-relative flex-column flex-sm-row"
:class="index ? 'border-t' : ''"
>
<div>
<VImg
width="80"
:src="item.image"
/>
</div>
<div
class="d-flex w-100 justify-space-between gap-4"
:class="$vuetify.display.width <= 700 ? 'flex-column' : 'flex-row'"
>
<div>
<h6 class="text-h6 mb-2">
{{ item.name }}
</h6>
<div class="text-body-1 mb-2">
Sold by:
<span class="d-inline-block text-primary"> {{ item.seller }}</span>
</div>
<VChip
:color="item.inStock ? 'success' : 'error'"
label
size="small"
>
{{ item.inStock ? 'In Stock' : 'Out of Stock' }}
</VChip>
</div>
<!-- <VSpacer /> -->
<div
class="d-flex text-base"
:class="$vuetify.display.width <= 700 ? 'align-self-start' : 'align-self-center'"
>
<div class="text-primary">
${{ item.price }}
</div>
<div>/</div>
<div class="text-decoration-line-through text-disabled">
${{ item.discountPrice }}
</div>
</div>
</div>
</div>
</template>
</div>
</VCol>
<VCol
cols="12"
md="3"
>
<div class="border rounded">
<div class="border-b pa-6">
<h6 class="text-base font-weight-medium mb-4">
Price Details
</h6>
<div class="d-flex align-center justify-space-between text-base mb-4">
<span class="text-high-emphasis">Order Total</span>
<span>${{ props.checkoutData.orderAmount }}.00</span>
</div>
<div class="d-flex justify-space-between text-base">
<div class="text-high-emphasis">
Charges
</div>
<div
v-if="props.checkoutData.deliverySpeed === 'free'"
class="d-flex align-center"
>
<div class="text-decoration-line-through text-disabled me-2">
$5.00
</div>
<VChip
size="small"
color="success"
>
FREE
</VChip>
</div>
<div v-else>
<span>${{ props.checkoutData.deliveryCharges }}</span>
</div>
</div>
</div>
<div class="d-flex align-center justify-space-between text-high-emphasis font-weight-medium pa-6">
<span>Total</span>
<span>${{ props.checkoutData.orderAmount + props.checkoutData.deliveryCharges }}.00</span>
</div>
</div>
</VCol>
</VRow>
</section>
</template>

315
resources/js/views/wizard-examples/checkout/Payment.vue Normal file
View File

@@ -0,0 +1,315 @@
<script setup>
const props = defineProps({
currentStep: {
type: Number,
required: false,
},
checkoutData: {
type: null,
required: true,
},
})
const emit = defineEmits([
'update:currentStep',
'update:checkout-data',
])
const prop = __props
const checkoutPaymentDataLocal = ref(prop.checkoutData)
const selectedPaymentMethod = ref('card')
const cardFormData = ref({
cardNumber: null,
cardName: '',
cardExpiry: '',
cardCvv: null,
isCardSave: true,
})
const giftCardFormData = ref({
giftCardNumber: null,
giftCardPin: null,
})
const selectedDeliveryAddress = computed(() => {
return checkoutPaymentDataLocal.value.addresses.filter(address => {
return address.value === checkoutPaymentDataLocal.value.deliveryAddress
})
})
const updateCartData = () => {
emit('update:checkout-data', checkoutPaymentDataLocal.value)
}
const nextStep = () => {
updateCartData()
emit('update:currentStep', prop.currentStep ? prop.currentStep + 1 : 1)
}
watch(() => prop.currentStep, updateCartData)
</script>
<template>
<VRow>
<VCol
cols="12"
md="8"
>
<!-- 👉 Offers alert -->
<VAlert
type="success"
class="mb-6"
variant="tonal"
icon="tabler-percentage"
title="Available Offer"
closable
>
<template #text>
<p class="mb-0">
- 0% Instant Discount on Bank of America Corp Bank Debit and Credit cards
<br>
- 50% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA
</p>
</template>
</VAlert>
<VTabs
v-model="selectedPaymentMethod"
class="v-tabs-pill"
density="comfortable"
>
<VTab value="card">
Card
</VTab>
<VTab value="cash-on-delivery">
Cash on Delivery
</VTab>
<VTab value="gift-card">
Gift Card
</VTab>
</VTabs>
<VWindow
v-model="selectedPaymentMethod"
style="max-inline-size: 600px;"
:touch="false"
>
<VWindowItem
value="card"
class="ms-n3"
>
<VForm class="mt-3">
<VRow class="ma-0 pa-n2">
<VCol cols="12">
<AppTextField
v-model="cardFormData.cardNumber"
type="number"
label="Card Number"
placeholder="1356 3215 6548 7898"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
v-model="cardFormData.cardName"
label="Name"
placeholder="John Doe"
/>
</VCol>
<VCol
cols="6"
md="4"
>
<AppTextField
v-model="cardFormData.cardExpiry"
label="Expiry"
placeholder="MM/YY"
/>
</VCol>
<VCol
cols="6"
md="4"
>
<AppTextField
v-model="cardFormData.cardCvv"
label="CVV"
placeholder="123"
type="number"
>
<template #append-inner>
<VTooltip
text="Card Verification Value"
location="bottom"
>
<template #activator="{ props: tooltipProps }">
<VIcon
v-bind="tooltipProps"
size="20"
icon="tabler-help"
/>
</template>
</VTooltip>
</template>
</AppTextField>
</VCol>
<VCol
cols="12"
class="pt-1"
>
<VSwitch
v-model="cardFormData.isCardSave"
label="Save Card for future billing?"
/>
<div class="mt-4">
<VBtn
class="me-4"
@click="nextStep"
>
Save Changes
</VBtn>
<VBtn
variant="tonal"
color="secondary"
>
Reset
</VBtn>
</div>
</VCol>
</VRow>
</VForm>
</VWindowItem>
<VWindowItem value="cash-on-delivery">
<p class="text-base text-high-emphasis my-6">
Cash on Delivery is a type of payment method where the recipient make payment for the order at the time of delivery rather than in advance.
</p>
<VBtn @click="nextStep">
Pay on delivery
</VBtn>
</VWindowItem>
<VWindowItem value="gift-card">
<h6 class="text-base font-weight-medium mt-6">
Enter Gift Card Details
</h6>
<VForm class="ms-n3">
<VRow class="ma-0">
<VCol cols="12">
<AppTextField
v-model="giftCardFormData.giftCardNumber"
label="Gift Card Number"
placeholder="1234 5678 9012 3456"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="giftCardFormData.giftCardPin"
label="Gift Card Pin"
placeholder="1234"
/>
</VCol>
<VCol cols="12">
<VBtn @click="nextStep">
Redeem Gift Card
</VBtn>
</VCol>
</VRow>
</VForm>
</VWindowItem>
</VWindow>
</VCol>
<VCol
cols="12"
md="4"
>
<VCard
flat
variant="outlined"
>
<VCardText>
<h6 class="text-h6 mb-4">
Price Details
</h6>
<div class="d-flex justify-space-between text-base mb-2">
<span class="text-high-emphasis">Order Total</span>
<span>${{ checkoutPaymentDataLocal.orderAmount }}.00</span>
</div>
<div class="d-flex justify-space-between text-base">
<span class="text-high-emphasis">Delivery Charges</span>
<div
v-if="checkoutPaymentDataLocal.deliverySpeed === 'free'"
class="d-flex align-center"
>
<div class="text-decoration-line-through text-disabled me-2">
$5.00
</div>
<VChip
size="small"
color="success"
>
FREE
</VChip>
</div>
<div v-else>
<span>${{ checkoutPaymentDataLocal.deliveryCharges }}</span>
</div>
</div>
</VCardText>
<VDivider />
<VCardText>
<div class="d-flex justify-space-between text-base mb-2">
<span class="text-high-emphasis font-weight-medium">Total</span>
<span class="font-weight-medium">${{ checkoutPaymentDataLocal.orderAmount + checkoutPaymentDataLocal.deliveryCharges }}.00</span>
</div>
<div class="d-flex justify-space-between text-base mb-4">
<span class="text-high-emphasis font-weight-medium">Deliver to:</span>
<VChip
color="primary"
class="text-capitalize"
label
size="small"
>
{{ checkoutPaymentDataLocal.deliveryAddress }}
</VChip>
</div>
<template
v-for="item in selectedDeliveryAddress"
:key="item.value"
>
<h6 class="text-base font-weight-medium">
{{ item.title }}
</h6>
<p class="text-base text-wrap mb-0">
{{ item.desc }}
</p>
<p class="text-base mb-4">
Mobile : {{ item.subtitle }}
</p>
</template>
<h6 class="text-h6">
<a href="#">Change address</a>
</h6>
</VCardText>
</VCard>
</VCol>
</VRow>
</template>

1
resources/js/views/wizard-examples/checkout/types.js Normal file
View File

@@ -0,0 +1 @@
export {}

132
resources/js/views/wizard-examples/create-deal/DealDetails.vue Normal file
View File

@@ -0,0 +1,132 @@
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
const offeredItems = [
'iPhone 12 Pro Max',
'iPhone 12 Pro',
'iPhone 11 Pro Max',
'iPhone 11',
'iPhone 12 Mini',
'OnePlus Nord CE',
]
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.title"
label="Deal Title"
placeholder="Black Friday Sale, 50% off on all products"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.code"
label="Deal Code"
placeholder="BLACKFRIDAY50"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
v-model="formData.description"
label="Deal Description"
placeholder="Write something about this deal"
rows="5"
auto-grow
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VRow>
<VCol cols="12">
<AppSelect
v-model="formData.offeredUItems"
multiple
chips
label="Offered Items"
placeholder="Select Offered Items"
:items="offeredItems"
/>
</VCol>
<VCol cols="12">
<AppSelect
v-model="formData.cartCondition"
label="Cart Condition"
placeholder="Select Cart Condition"
:items="['Cart must contain all selected Downloads', 'Cart needs one or more of the selected Downloads']"
/>
</VCol>
</VRow>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppDateTimePicker
v-model="formData.dealDuration"
label="Deal Duration"
placeholder="Select Date Range"
:config="{ mode: 'range' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<h6 class="text-body-2 text-high-emphasis mb-2">
Notify Users
</h6>
<div class="d-flex align-center flex-wrap gap-x-3">
<VCheckbox
v-model="formData.notification.email"
label="Email"
value="email"
/>
<VCheckbox
v-model="formData.notification.sms"
label="SMS"
value="sms"
/>
<VCheckbox
v-model="formData.notification.pushNotification"
label="Push Notification"
value="push-notification"
/>
</div>
</VCol>
</VRow>
</VForm>
</template>

128
resources/js/views/wizard-examples/create-deal/DealReviewComplete.vue Normal file
View File

@@ -0,0 +1,128 @@
<script setup>
import standingGirlImg from '@images/illustrations/standingGirlImg.png'
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
class="pb-4 pb-sm-0"
>
<h4 class="text-h4 mb-4">
Almost done! 🚀
</h4>
<p>Confirm your deal details information and submit to create it.</p>
<table class="text-base">
<tbody>
<tr>
<td style="inline-size: 150px;">
<p class="font-weight-medium mb-2">
Deal Type
</p>
</td>
<td>
<p class="mb-2">
Percentage
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Amount
</p>
</td>
<td>
<p class="mb-2">
25%
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Code
</p>
</td>
<td>
<p class="mb-2">
<VChip
size="small"
color="warning"
label
>
25PEROFF
</VChip>
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Title
</p>
</td>
<td>
<p class="mb-2">
Black friday sale, 25% OFF
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Duration
</p>
</td>
<td>
<p class="mb-2">
2021-07-14 to 2021-07-30
</p>
</td>
</tr>
</tbody>
</table>
<VSwitch
v-model="formData.isDealDetailsConfirmed"
label="I have confirmed the deal details."
class="mb-3"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<div class="border rounded pa-4 pb-0">
<VImg
width="207"
:src="standingGirlImg"
class="mx-auto flip-in-rtl"
/>
</div>
</VCol>
</VRow>
</template>

122
resources/js/views/wizard-examples/create-deal/DealType.vue Normal file
View File

@@ -0,0 +1,122 @@
<script setup>
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
import sittingGirlWithLaptop from '@images/illustrations/sitting-girl-with-laptop.png'
import CreateDealBackgroundDark from '@images/pages/DealTypeBackground-dark.png'
import CreateDealBackgroundLight from '@images/pages/DealTypeBackground-light.png'
import card from '@images/svg/Card.svg'
import check from '@images/svg/Check.svg'
import diamond from '@images/svg/Diamond.svg'
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const createDealBackground = useGenerateImageVariant(CreateDealBackgroundLight, CreateDealBackgroundDark)
const discountOffers = [
{
icon: {
icon: check,
size: '28',
},
title: 'Percentage',
desc: 'Create a deal which offer uses some % off (i.e 5% OFF) on total.',
value: 'percentage',
},
{
icon: {
icon: card,
size: '28',
},
title: 'Flat Amount',
desc: 'Create a deal which offer uses some flat amount (i.e $5 OFF) on total.',
value: 'flat',
},
{
icon: {
icon: diamond,
size: '28',
},
title: 'Prime member',
desc: 'Create prime member only deal to encourage the prime members.',
value: 'prime',
},
]
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<!-- 👉 Shopping girl image -->
<VCol cols="12">
<div class="d-flex align-center justify-center w-100 deal-type-image-wrapper border rounded px-5 pt-2 pb-5">
<VImg :src="sittingGirlWithLaptop" />
<VImg
:src="createDealBackground"
class="position-absolute deal-type-background-img d-md-block d-none"
/>
</div>
</VCol>
<VCol cols="12">
<CustomRadiosWithIcon
v-model:selected-radio="formData.Offer"
:radio-content="discountOffers"
:grid-column="{ cols: '12', sm: '4' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.discount"
type="number"
label="Discount"
placeholder="25"
hint="Enter the discount percentage. 10 = 10%"
persistent-hint
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppSelect
v-model="formData.region"
label="Region"
:items="['Asia', 'Europe', 'Africa', 'Australia', 'North America', 'South America']"
placeholder="Select Region"
hint="Select applicable regions for the deal."
persistent-hint
/>
</VCol>
</VRow>
</VForm>
</template>
<style lang="scss">
.deal-type-image-wrapper {
position: relative;
block-size: 240px;
inline-size: 210px;
}
.deal-type-background-img {
inline-size: 75%;
inset-block-end: 0;
}
</style>

101
resources/js/views/wizard-examples/create-deal/DealUsage.vue Normal file
View File

@@ -0,0 +1,101 @@
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<AppSelect
v-model="formData.userType"
label="User Type"
placeholder="Select User Type"
:items="['All', 'Registered', 'Unregistered', 'Prime Member']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.maxUsers"
label="Max Users"
placeholder="1000"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.cartAmount"
label="Minimum Cart Amount"
placeholder="$199"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextField
v-model="formData.promotionFree"
label="Promotion Fee"
placeholder="$4.99"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppSelect
v-model="formData.paymentMethod"
label="Payment Method"
placeholder="Select Payment Method"
:items="['Any', 'Credit Card', 'Net Banking', 'Wallet']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppSelect
v-model="formData.dealStatus"
label="Deal Status"
placeholder="Select Deal Status"
:items="['Active', 'Inactive', 'Suspended', 'Abandoned']"
/>
</VCol>
<VCol cols="12">
<VSwitch
v-model="formData.isSingleUserCustomer"
label="Limit this discount to a single-use per customer?"
/>
</VCol>
</VRow>
</VForm>
</template>

1
resources/js/views/wizard-examples/create-deal/types.js Normal file
View File

@@ -0,0 +1 @@
export {}

142
resources/js/views/wizard-examples/property-listing/PersonalDetails.vue Normal file
View File

@@ -0,0 +1,142 @@
<script setup>
import diamond from '@images/svg/Diamond.svg'
import office from '@images/svg/office.svg'
import suitcase from '@images/svg/Suitcase.svg'
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const propertyRadioContent = [
{
title: 'I am the builder',
desc: 'List property as Builder, list your project and get highest reach fast.',
icon: {
icon: office,
size: '28',
},
value: 'builder',
},
{
title: 'I am the owner',
desc: 'Submit property as an Individual. Lease, Rent or Sell at the best price.',
icon: {
icon: diamond,
size: '28',
},
value: 'owner',
},
{
title: 'I am the broker',
desc: 'Earn highest commission by listing your clients properties at best price.',
value: 'broker',
icon: {
icon: suitcase,
size: '28',
},
},
]
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol cols="12">
<!-- 👉 User Type -->
<CustomRadiosWithIcon
v-model:selected-radio="formData.userType"
:radio-content="propertyRadioContent"
:grid-column="{ cols: '12', sm: '4' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 First Name -->
<AppTextField
v-model="formData.firstName"
label="First Name"
placeholder="John"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Last Name -->
<AppTextField
v-model="formData.lastName"
label="Last Name"
placeholder="Doe"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Username -->
<AppTextField
v-model="formData.username"
label="Username"
placeholder="Johndoe"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Password -->
<AppTextField
v-model="formData.password"
autocomplete="on"
type="password"
label="Password"
placeholder="············"
append-inner-icon="tabler-eye"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Email -->
<AppTextField
v-model="formData.email"
type="email"
label="Email"
placeholder="john.doe@email.com"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Contact -->
<AppTextField
v-model="formData.contact"
type="number"
label="Contact"
placeholder="+1 123 456 7890"
/>
</VCol>
</VRow>
</VForm>
</template>

144
resources/js/views/wizard-examples/property-listing/PriceDetails.vue Normal file
View File

@@ -0,0 +1,144 @@
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Expected Price -->
<AppTextField
v-model="formData.expectedPrice"
label="Expected Price"
type="number"
append-inner-icon="tabler-currency-dollar"
placeholder="25,000"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Price Per SQFT -->
<AppTextField
v-model="formData.pricePerSqft"
label="Price Per SQFT"
append-inner-icon="tabler-currency-dollar"
type="number"
placeholder="500"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Maintenance Charge -->
<AppTextField
v-model="formData.maintenanceCharge"
label="Maintenance Charge"
append-inner-icon="tabler-currency-dollar"
type="number"
placeholder="50"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Maintenance Period -->
<AppSelect
v-model="formData.maintenancePeriod"
label="Maintenance"
placeholder="Select Maintenance Period"
:items="['Monthly', 'Quarterly', 'Half Yearly', 'Yearly']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Booking/Token Amount -->
<AppTextField
v-model="formData.bookingAmount"
label="Booking/Token Amount"
append-inner-icon="tabler-currency-dollar"
type="number"
placeholder="250"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Other Amount -->
<AppTextField
v-model="formData.otherAmount"
label="Other Amount"
append-inner-icon="tabler-currency-dollar"
type="number"
placeholder="500"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Show Price As -->
<VRadioGroup v-model="formData.priceDisplayType">
<template #label>
<div class="text-body-1">
Show Price As
</div>
</template>
<VRadio
label="Negotiable"
value="Negotiable"
/>
<VRadio
label="Call For Price"
value="Call For Price"
/>
</VRadioGroup>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Price Includes -->
<div class="text-body-1 mb-2">
Price Includes
</div>
<VCheckbox
v-model="formData.priceIncludes"
label="Car Parking"
value="Car Parking"
/>
<VCheckbox
v-model="formData.priceIncludes"
label="Club Membership"
value="Club Membership"
/>
</VCol>
<VCol cols="12">
<!-- 👉 Registration Charges -->
<VCheckbox label="Stamp Duty & Registration charges excluded." />
</VCol>
</VRow>
</VForm>
</template>

159
resources/js/views/wizard-examples/property-listing/PropertyArea.vue Normal file
View File

@@ -0,0 +1,159 @@
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Total Area -->
<AppTextField
v-model="formData.totalArea"
label="Total Area"
suffix="sq-ft"
type="number"
placeholder="1000"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Carpet Area -->
<AppTextField
v-model="formData.carpetArea"
label="Carpet Area"
suffix="sq-ft"
type="number"
placeholder="800"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Plot Area -->
<AppTextField
v-model="formData.plotArea"
label="Plot Area"
suffix="sq-ft"
type="number"
placeholder="800"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Available From -->
<AppDateTimePicker
v-model="formData.availableFrom"
label="Available From"
type="date"
placeholder="Select Date"
format="YYYY-MM-DD"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Possession Status -->
<VRadioGroup v-model="formData.possessionStatus">
<template #label>
<div class="text-body-1">
Possession Status
</div>
</template>
<VRadio
value="Under Construciton"
label="Under Construction"
/>
<VRadio
value="Ready to Move"
label="Ready to Move"
/>
</VRadioGroup>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Transaction Type -->
<VRadioGroup v-model="formData.transactionType">
<template #label>
<div class="text-body-1">
Transaction Type
</div>
</template>
<VRadio
value="New Property"
label="New Property"
/>
<VRadio
value="Resale"
label="Resale"
/>
</VRadioGroup>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 property Location -->
<VRadioGroup v-model="formData.isOnMainRoad">
<template #label>
<div class="text-body-1">
Is Property Facing Main Road?
</div>
</template>
<VRadio
value="Yes"
label="Yes"
/>
<VRadio
value="No"
label="No"
/>
</VRadioGroup>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Gated Colony -->
<VRadioGroup v-model="formData.isGatedColony">
<template #label>
<div class="text-body-1">
Gated Colony
</div>
</template>
<VRadio
value="Yes"
label="Yes"
/>
<VRadio
value="No"
label="No"
/>
</VRadioGroup>
</VCol>
</VRow>
</VForm>
</template>

140
resources/js/views/wizard-examples/property-listing/PropertyDetails.vue Normal file
View File

@@ -0,0 +1,140 @@
<script setup>
import home from '@images/svg/home.svg'
import wallet from '@images/svg/Wallet.svg'
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const radioContent = [
{
title: 'Sell the property',
desc: 'Post your property for sale. Unlimited free listing.',
icon: {
icon: home,
size: '28',
},
value: 'sell',
},
{
title: 'Rent the property',
desc: 'Post your property for rent. Unlimited free listing.',
icon: {
icon: wallet,
size: '28',
},
value: 'rent',
},
]
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol cols="12">
<!-- 👉 Property Deal Type -->
<CustomRadiosWithIcon
v-model:selected-radio="formData.propertyDealType"
:radio-content="radioContent"
:grid-column="{ cols: '12', sm: '6' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Property Type -->
<AppSelect
v-model="formData.propertyType"
label="Property type"
placeholder="Select Property Type"
:items="['Residential', 'Commercial']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Zip Code -->
<AppTextField
v-model="formData.zipCode"
label="Zip Code"
type="number"
placeholder="123456"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Country -->
<AppSelect
v-model="formData.country"
label="Country"
placeholder="Select country"
:items="['India', 'UK', 'USA', 'AUS', 'Germany']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 State -->
<AppTextField
v-model="formData.state"
label="State"
placeholder="California"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 City -->
<AppTextField
v-model="formData.city"
label="City"
placeholder="Los Angeles"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Landmark -->
<AppTextField
v-model="formData.landmark"
label="Landmark"
placeholder="Nr. Hard Rock Cafe"
/>
</VCol>
<VCol>
<!-- 👉 Address -->
<AppTextarea
v-model="formData.address"
label="Address"
placeholder="112, 1st Cross, 1st Stage, 1st Phase, BTM Layout, Bangalore - 560068"
rows="3"
/>
</VCol>
</VRow>
</VForm>
</template>

125
resources/js/views/wizard-examples/property-listing/PropertyFeatures.vue Normal file
View File

@@ -0,0 +1,125 @@
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Bedrooms -->
<AppTextField
v-model="formData.bedroomCount"
label="Bedrooms"
placeholder="3"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Floor No -->
<AppTextField
v-model="formData.floorNo"
label="Floor No"
placeholder="12"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Bathrooms -->
<AppTextField
v-model="formData.bathroomCount"
label="Bathroom"
placeholder="4"
type="number"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Furnished Status -->
<AppSelect
v-model="formData.furnishedStatus"
label="Furnished Status"
placeholder="Select Furnished Status"
:items="['Fully Furnished', 'Furnished', 'Semi-Furnished', 'Unfurnished']"
/>
</VCol>
<VCol cols="12">
<!-- 👉 Furnishing Details -->
<AppSelect
v-model="formData.furnishingDetails"
label="Furnishing Details"
placeholder="Select Furnishing Details"
multiple
chips
closable-chips
:items="['TV', 'AC', 'RO', 'Bed', 'Fridge', 'Wifi', 'Sofa', 'Cupboard', 'Microwave', 'Dining Table', 'Washing Machine']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 xCommon Area? -->
<VRadioGroup v-model="formData.isCommonArea1">
<template #label>
<div class="text-body-1">
Is There Any Common Area?
</div>
</template>
<VRadio
label="Yes"
value="true"
/>
<VRadio
label="No"
value="false"
/>
</VRadioGroup>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Common Area? -->
<VRadioGroup v-model="formData.isCommonArea2">
<template #label>
<div class="text-body-1">
Is There Any Common Area?
</div>
</template>
<VRadio
label="Yes"
value="true"
/>
<VRadio
label="No"
value="false"
/>
</VRadioGroup>
</VCol>
</VRow>
</VForm>
</template>

1
resources/js/views/wizard-examples/property-listing/types.js Normal file
View File

@@ -0,0 +1 @@
export {}