- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
This commit is contained in:
63
views/dashboard/AnalyticsCongratulations.vue
Normal file
63
views/dashboard/AnalyticsCongratulations.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import illustrationJohnDark from '@images/cards/illustration-john-dark.png'
|
||||
import illustrationJohnLight from '@images/cards/illustration-john-light.png'
|
||||
|
||||
const { global } = useTheme()
|
||||
const illustrationJohn = computed(() => global.name.value === 'dark' ? illustrationJohnDark : illustrationJohnLight)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="text-center text-sm-start">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
order="2"
|
||||
order-sm="1"
|
||||
>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle class="text-primary">
|
||||
Congratulations John! 🎉
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
You have done 72% more sales today.
|
||||
<br>
|
||||
Check your new raising badge in your profile.
|
||||
<br>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
class="mt-6"
|
||||
size="small"
|
||||
>
|
||||
View Badges
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
order="1"
|
||||
order-sm="2"
|
||||
class="text-center"
|
||||
>
|
||||
<img
|
||||
:src="illustrationJohn"
|
||||
:height="$vuetify.display.xs ? '150' : '182'"
|
||||
:class="$vuetify.display.xs ? 'mt-6 mb-n2' : 'position-absolute'"
|
||||
class="john-illustration flip-in-rtl"
|
||||
>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.john-illustration {
|
||||
inset-block-end: -0.125rem;
|
||||
inset-inline-end: 3.5rem;
|
||||
}
|
||||
</style>
|
||||
240
views/dashboard/AnalyticsFinanceTab.vue
Normal file
240
views/dashboard/AnalyticsFinanceTab.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import statsVerticalChart from '@images/cards/chart-success.png'
|
||||
import statsVerticalPaypal from '@images/cards/paypal-error.png'
|
||||
import statsVerticalWallet from '@images/cards/wallet-primary.png'
|
||||
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
interface statistics {
|
||||
avatar: string
|
||||
title: string
|
||||
stats: string
|
||||
profitLoss: number
|
||||
profitLossAmount: string
|
||||
compareToLastWeek: string
|
||||
}
|
||||
|
||||
interface TabsData {
|
||||
income: statistics
|
||||
expenses: statistics
|
||||
profit: statistics
|
||||
}
|
||||
|
||||
const series = {
|
||||
income: [{ data: [24, 21, 30, 22, 42, 26, 35, 29] }],
|
||||
expenses: [{ data: [24, 21, 30, 25, 42, 26, 35, 29] }],
|
||||
profit: [{ data: [24, 21, 30, 22, 42, 26, 35, 35] }],
|
||||
}
|
||||
|
||||
const currentTab = ref <keyof TabsData> ('income')
|
||||
|
||||
const tabData = computed(() => {
|
||||
const data: TabsData = {
|
||||
income: {
|
||||
avatar: statsVerticalWallet,
|
||||
title: 'Total Income',
|
||||
stats: '$459.1k',
|
||||
profitLoss: 65,
|
||||
profitLossAmount: '6.5',
|
||||
compareToLastWeek: '$39k',
|
||||
|
||||
},
|
||||
expenses: {
|
||||
avatar: statsVerticalPaypal,
|
||||
title: 'Total Expenses',
|
||||
stats: '$316.5k',
|
||||
profitLoss: 27.8,
|
||||
profitLossAmount: '7.2',
|
||||
compareToLastWeek: '$16k',
|
||||
},
|
||||
profit: {
|
||||
avatar: statsVerticalChart,
|
||||
title: 'Total Profit',
|
||||
stats: '$147.9k',
|
||||
profitLoss: 35.1,
|
||||
profitLossAmount: '4.5',
|
||||
compareToLastWeek: '$28k',
|
||||
},
|
||||
}
|
||||
|
||||
return data[currentTab.value]
|
||||
})
|
||||
|
||||
const chartConfig = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
const disabledTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['disabled-opacity']})`
|
||||
const borderColor = `rgba(${hexToRgb(String(variableTheme['border-color']))},${variableTheme['border-opacity']})`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
strokeDashArray: 4.5,
|
||||
borderColor,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -20,
|
||||
right: 11,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.25,
|
||||
opacityFrom: 0.5,
|
||||
stops: [0, 95, 100],
|
||||
shadeIntensity: 0.6,
|
||||
colorStops: [
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.4,
|
||||
color: currentTheme.primary,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.2,
|
||||
color: currentTheme.surface,
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.primary,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
offsetY: 20,
|
||||
offsetX: -24,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 10,
|
||||
max: 50,
|
||||
show: false,
|
||||
tickAmount: 4,
|
||||
},
|
||||
markers: {
|
||||
size: 8,
|
||||
strokeWidth: 6,
|
||||
strokeOpacity: 1,
|
||||
offsetX: -10,
|
||||
hover: { size: 8 },
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [
|
||||
{
|
||||
size: 8,
|
||||
seriesIndex: 0,
|
||||
fillColor: '#fff',
|
||||
strokeColor: currentTheme.primary,
|
||||
dataPointIndex: series[currentTab.value][0].data.length - 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<VTabs
|
||||
v-model="currentTab"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab value="income">
|
||||
Income
|
||||
</VTab>
|
||||
<VTab value="expenses">
|
||||
Expenses
|
||||
</VTab>
|
||||
<VTab value="profit">
|
||||
Profit
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex align-center gap-3">
|
||||
<VAvatar
|
||||
size="48"
|
||||
rounded
|
||||
:image="tabData.avatar"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
{{ tabData.title }}
|
||||
</p>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<h6 class="text-h6">
|
||||
{{ tabData.stats }}
|
||||
</h6>
|
||||
<span
|
||||
class="text-sm"
|
||||
:class="tabData.profitLoss > 0 ? 'text-success' : 'text-error'"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="bx-chevron-up"
|
||||
/>
|
||||
{{ tabData.profitLoss }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:height="230"
|
||||
:options="chartConfig"
|
||||
:series="series[currentTab]"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex align-center justify-center pt-2 gap-4">
|
||||
<VProgressCircular
|
||||
size="45"
|
||||
color="primary"
|
||||
:model-value="tabData.profitLoss"
|
||||
>
|
||||
<span class="text-overline text-medium-emphasis">${{ tabData.profitLossAmount }}</span>
|
||||
</VProgressCircular>
|
||||
|
||||
<div>
|
||||
<h6 class="text-base font-weight-regular">
|
||||
<span class="text-capitalize d-inline-block">{{ currentTab }} this week</span>
|
||||
</h6>
|
||||
<span class="text-sm d-inline-block">{{ tabData.compareToLastWeek }} less than last week</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
108
views/dashboard/AnalyticsOrder.vue
Normal file
108
views/dashboard/AnalyticsOrder.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{ data: [30, 70, 35, 55, 45, 70] }]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -32,
|
||||
right: 17,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.7,
|
||||
opacityFrom: 0.5,
|
||||
shadeIntensity: 1,
|
||||
stops: [0, 90, 100],
|
||||
colorStops: [
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.6,
|
||||
color: currentTheme.success,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.1,
|
||||
color: currentTheme.surface,
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.success,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
markers: {
|
||||
size: 1,
|
||||
offsetY: 2,
|
||||
offsetX: -5,
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 1,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [
|
||||
{
|
||||
size: 6,
|
||||
seriesIndex: 0,
|
||||
fillColor: '#fff',
|
||||
strokeColor: currentTheme.success,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pb-4">
|
||||
<div class="text-base">
|
||||
Order
|
||||
</div>
|
||||
<h4 class="text-h4">
|
||||
276k
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:height="104"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
194
views/dashboard/AnalyticsOrderStatistics.vue
Normal file
194
views/dashboard/AnalyticsOrderStatistics.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [45, 80, 20, 40]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
const secondaryTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['medium-emphasis-opacity']})`
|
||||
const primaryTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['high-emphasis-opacity']})`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: true },
|
||||
animations: { enabled: false },
|
||||
},
|
||||
stroke: {
|
||||
width: 6,
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
labels: ['Fashion', 'Electronic', 'Sports', 'Decor'],
|
||||
colors: [
|
||||
currentTheme.success,
|
||||
currentTheme.primary,
|
||||
currentTheme.secondary,
|
||||
currentTheme.info,
|
||||
],
|
||||
grid: {
|
||||
padding: {
|
||||
top: -7,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
expandOnClick: false,
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 17,
|
||||
fontSize: '13px',
|
||||
color: secondaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
value: {
|
||||
offsetY: -17,
|
||||
fontSize: '18px',
|
||||
color: primaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 500,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly',
|
||||
fontSize: '13px',
|
||||
lineHeight: '18px',
|
||||
formatter: () => '38%',
|
||||
color: secondaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const orders = [
|
||||
{
|
||||
amount: '82.5k',
|
||||
title: 'Electronic',
|
||||
avatarColor: 'primary',
|
||||
subtitle: 'Mobile, Earbuds, TV',
|
||||
avatarIcon: 'bx-mobile-alt',
|
||||
},
|
||||
{
|
||||
amount: '23.8k',
|
||||
title: 'Fashion',
|
||||
avatarColor: 'success',
|
||||
subtitle: 'Tshirt, Jeans, Shoes',
|
||||
avatarIcon: 'bx-closet',
|
||||
},
|
||||
{
|
||||
amount: 849,
|
||||
title: 'Decor',
|
||||
avatarColor: 'info',
|
||||
subtitle: 'Fine Art, Dining',
|
||||
avatarIcon: 'bx-home',
|
||||
},
|
||||
{
|
||||
amount: 99,
|
||||
title: 'Sports',
|
||||
avatarColor: 'secondary',
|
||||
subtitle: 'Football, Cricket Kit',
|
||||
avatarIcon: 'bx-football',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{ title: 'Share', value: 'Share' },
|
||||
{ title: 'Refresh', value: 'Refresh' },
|
||||
{ title: 'Update', value: 'Update' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Order Statistics
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>42.82k Total Sales</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between mb-6">
|
||||
<div class="">
|
||||
<h3 class="text-h3 mb-1">
|
||||
8,258
|
||||
</h3>
|
||||
<div class="text-caption text-medium-emphasis">
|
||||
Total Orders
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:height="120"
|
||||
width="100"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="order in orders"
|
||||
:key="order.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="40"
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="order.avatarColor"
|
||||
>
|
||||
<VIcon :icon="order.avatarIcon" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ order.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-2">
|
||||
{{ order.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<span>{{ order.amount }}</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
115
views/dashboard/AnalyticsProfitReport.vue
Normal file
115
views/dashboard/AnalyticsProfitReport.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { useDisplay, useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const display = useDisplay()
|
||||
|
||||
const series = [{ data: [30, 58, 35, 53, 50, 68] }]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
dropShadow: {
|
||||
top: 12,
|
||||
blur: 4,
|
||||
left: 0,
|
||||
enabled: true,
|
||||
opacity: 0.12,
|
||||
color: currentTheme.warning,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
colors: [`rgba(${hexToRgb(String(currentTheme.warning))}, 1)`],
|
||||
stroke: {
|
||||
width: 4,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -21,
|
||||
left: -5,
|
||||
bottom: -8,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { show: false },
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: display.thresholds.value.lg,
|
||||
options: {
|
||||
chart: {
|
||||
height: 151,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.md,
|
||||
options: {
|
||||
chart: {
|
||||
height: 131,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex justify-space-between h-100">
|
||||
<div class="d-flex flex-column justify-space-between gap-y-4">
|
||||
<div>
|
||||
<h5 class="text-h5 mb-1">
|
||||
Profile Report
|
||||
</h5>
|
||||
<VChip
|
||||
color="warning"
|
||||
size="small"
|
||||
>
|
||||
Year 2022
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex gap-1 align-center text-success">
|
||||
<VIcon
|
||||
icon="bx-up-arrow-alt"
|
||||
size="20"
|
||||
/>
|
||||
<span class="text-base d-inline-block">68.2%</span>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4">
|
||||
$84,686k
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-100 d-flex align-center">
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:height="131"
|
||||
width="80%"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
96
views/dashboard/AnalyticsRevenue.vue
Normal file
96
views/dashboard/AnalyticsRevenue.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{ data: [23, 81, 70, 31, 99, 46, 73] }]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const disabledText = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['disabled-opacity']})`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
|
||||
// offsetY: -30,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2,
|
||||
distributed: true,
|
||||
columnWidth: '65%',
|
||||
endingShape: 'rounded',
|
||||
startingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 1)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
`rgba(${hexToRgb(String(currentTheme.primary))}, 0.16)`,
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
tickPlacement: 'on',
|
||||
offsetY: -10,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '11px',
|
||||
colors: disabledText,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -10,
|
||||
right: 7,
|
||||
bottom: -3,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pb-0">
|
||||
<div class="text-base">
|
||||
Revenue
|
||||
</div>
|
||||
<h4 class="text-h4 font-weight-medium">
|
||||
425k
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:height="110"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
349
views/dashboard/AnalyticsTotalRevenue.vue
Normal file
349
views/dashboard/AnalyticsTotalRevenue.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<script setup lang="ts">
|
||||
import { useDisplay, useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const display = useDisplay()
|
||||
|
||||
const series = [
|
||||
{ name: `${new Date().getFullYear() - 1}`, data: [18, 10, 15, 29, 18, 12, 9] },
|
||||
{ name: `${new Date().getFullYear() - 2}`, data: [-13, -18, -9, -14, -8, -17, -15] },
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
const disabledTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['disabled-opacity']})`
|
||||
const primaryTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['high-emphasis-opacity']})`
|
||||
const secondaryTextColor = `rgba(${hexToRgb(String(currentTheme['on-surface']))},${variableTheme['medium-emphasis-opacity']})`
|
||||
const borderColor = `rgba(${hexToRgb(String(variableTheme['border-color']))},${variableTheme['border-opacity']})`
|
||||
|
||||
return {
|
||||
bar: {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 6,
|
||||
offsetX: -12,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
colors: [`rgba(${hexToRgb(String(currentTheme.primary))}, 1)`, `rgba(${hexToRgb(String(currentTheme.info))}, 1)`],
|
||||
legend: {
|
||||
offsetX: -22,
|
||||
offsetY: -1,
|
||||
position: 'top',
|
||||
fontSize: '13px',
|
||||
horizontalAlign: 'left',
|
||||
fontFamily: 'Public Sans',
|
||||
labels: {
|
||||
colors: currentTheme.secondary,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 4,
|
||||
horizontal: 10,
|
||||
},
|
||||
markers: {
|
||||
width: 11,
|
||||
height: 11,
|
||||
radius: 10,
|
||||
offsetX: -2,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
strokeDashArray: 6,
|
||||
borderColor,
|
||||
padding: {
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 9,
|
||||
columnWidth: '30%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1980,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '32%', borderRadius: 8 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.xl,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '43%', borderRadius: 8 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.lg,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '50%', borderRadius: 7 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.md,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '48%', borderRadius: 8 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: display.thresholds.value.sm,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '44%', borderRadius: 6 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 599,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '44%', borderRadius: 8 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '55%', borderRadius: 6 },
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
radial: {
|
||||
chart: {
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
labels: ['Growth'],
|
||||
stroke: { dashArray: 5 },
|
||||
colors: [`rgba(${hexToRgb(String(currentTheme.primary))}, 1)`],
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
opacityTo: 0.6,
|
||||
opacityFrom: 1,
|
||||
shadeIntensity: 0.5,
|
||||
stops: [30, 70, 100],
|
||||
inverseColors: false,
|
||||
gradientToColors: [currentTheme.primary],
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 150,
|
||||
startAngle: -140,
|
||||
hollow: { size: '55%' },
|
||||
track: { background: 'transparent' },
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 25,
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 900,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 735,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 660,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const balanceData = [
|
||||
{ icon: 'bx-dollar', amount: '$2.54k', year: '2023', color: 'primary' },
|
||||
{ icon: 'bx-wallet', amount: '$4.21k', year: '2022', color: 'info' },
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{ title: 'Share', value: 'Share' },
|
||||
{ title: 'Refresh', value: 'Refresh' },
|
||||
{ title: 'Update', value: 'Update' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="7"
|
||||
xl="8"
|
||||
:class="$vuetify.display.smAndUp ? 'border-e' : 'border-b'"
|
||||
>
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Total Revenue</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<!-- bar chart -->
|
||||
<VCardText class="pb-0">
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:height="335"
|
||||
:options="chartOptions.bar"
|
||||
:series="series"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="5"
|
||||
xl="4"
|
||||
>
|
||||
<VCardText class="text-center pt-10">
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
class="mb-2"
|
||||
append-icon="bx-chevron-down"
|
||||
>
|
||||
2023
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, index) in ['2023', '2022', '2021']"
|
||||
:key="index"
|
||||
:value="item"
|
||||
>
|
||||
<VListItemTitle>{{ item }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
|
||||
<!-- radial chart -->
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:height="200"
|
||||
:options="chartOptions.radial"
|
||||
:series="[78]"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-medium-emphasis mb-8 mt-1">
|
||||
62% Company Growth
|
||||
</h6>
|
||||
<div class="d-flex align-center justify-center flex-wrap gap-x-6 gap-y-3">
|
||||
<div
|
||||
v-for="data in balanceData"
|
||||
:key="data.year"
|
||||
class="d-flex align-center gap-2"
|
||||
>
|
||||
<VAvatar
|
||||
:icon="data.icon"
|
||||
:color="data.color"
|
||||
size="38"
|
||||
rounded
|
||||
variant="tonal"
|
||||
/>
|
||||
|
||||
<div class="text-start">
|
||||
<span class="text-sm"> {{ data.year }}</span>
|
||||
<h6 class="text-h6">
|
||||
{{ data.amount }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/libs/apex-chart.scss"
|
||||
</style>
|
||||
105
views/dashboard/AnalyticsTransactions.vue
Normal file
105
views/dashboard/AnalyticsTransactions.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import chartInfo from '@images/cards/chart-info.png'
|
||||
import creditCardSuccess from '@images/cards/credit-card-success.png'
|
||||
import creditCardWarning from '@images/cards/credit-card-warning.png'
|
||||
import paypalError from '@images/cards/paypal-error.png'
|
||||
import walletPrimary from '@images/cards/wallet-primary.png'
|
||||
|
||||
const transactions = [
|
||||
{
|
||||
amount: +82.6,
|
||||
paymentMethod: 'PayPal',
|
||||
description: 'Send money',
|
||||
icon: paypalError,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Wallet',
|
||||
amount: +270.69,
|
||||
description: 'Mac\'D',
|
||||
icon: walletPrimary,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
amount: +637.91,
|
||||
paymentMethod: 'Transfer',
|
||||
description: 'Refund',
|
||||
icon: chartInfo,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Credit Card',
|
||||
amount: -838.71,
|
||||
description: 'Ordered Food',
|
||||
icon: creditCardSuccess,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Wallet',
|
||||
amount: +203.33,
|
||||
description: 'Starbucks',
|
||||
icon: walletPrimary,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
paymentMethod: 'Mastercard',
|
||||
amount: -92.45,
|
||||
description: 'Ordered Food',
|
||||
icon: creditCardWarning,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{ title: 'Share', value: 'Share' },
|
||||
{ title: 'Refresh', value: 'Refresh' },
|
||||
{ title: 'Update', value: 'Update' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #append>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="item in transactions"
|
||||
:key="item.paymentMethod"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
variant="tonal"
|
||||
:color="item.color"
|
||||
:image="item.icon"
|
||||
size="40"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemSubtitle>
|
||||
{{ item.paymentMethod }}
|
||||
</VListItemSubtitle>
|
||||
<VListItemTitle>
|
||||
{{ item.description }}
|
||||
</VListItemTitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<span class="me-2">{{ item.amount > 0 ? `+$${Math.abs(item.amount)}` : `-$${Math.abs(item.amount)}` }}</span>
|
||||
<span class="text-disabled">USD</span>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
376
views/pages/account-settings/AccountSettingsAccount.vue
Normal file
376
views/pages/account-settings/AccountSettingsAccount.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
|
||||
const accountData = {
|
||||
avatarImg: avatar1,
|
||||
firstName: 'john',
|
||||
lastName: 'Doe',
|
||||
email: 'johnDoe@example.com',
|
||||
org: 'ThemeSelection',
|
||||
phone: '+1 (917) 543-9876',
|
||||
address: '123 Main St, New York, NY 10001',
|
||||
state: 'New York',
|
||||
zip: '10001',
|
||||
country: 'USA',
|
||||
language: 'English',
|
||||
timezone: '(GMT-11:00) International Date Line West',
|
||||
currency: 'USD',
|
||||
}
|
||||
|
||||
const refInputEl = ref<HTMLElement>()
|
||||
|
||||
const accountDataLocal = ref(structuredClone(accountData))
|
||||
const isAccountDeactivated = ref(false)
|
||||
|
||||
const resetForm = () => {
|
||||
accountDataLocal.value = structuredClone(accountData)
|
||||
}
|
||||
|
||||
// changeAvatar function
|
||||
const changeAvatar = (file: Event) => {
|
||||
const fileReader = new FileReader()
|
||||
const { files } = file.target as HTMLInputElement
|
||||
|
||||
if (files && files.length) {
|
||||
fileReader.readAsDataURL(files[0])
|
||||
fileReader.onload = () => {
|
||||
if (typeof fileReader.result === 'string')
|
||||
accountDataLocal.value.avatarImg = fileReader.result
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// reset avatar image
|
||||
const resetAvatar = () => {
|
||||
accountDataLocal.value.avatarImg = accountData.avatarImg
|
||||
}
|
||||
|
||||
const timezones = [
|
||||
'(GMT-11:00) International Date Line West',
|
||||
'(GMT-11:00) Midway Island',
|
||||
'(GMT-10:00) Hawaii',
|
||||
'(GMT-09:00) Alaska',
|
||||
'(GMT-08:00) Pacific Time (US & Canada)',
|
||||
'(GMT-08:00) Tijuana',
|
||||
'(GMT-07:00) Arizona',
|
||||
'(GMT-07:00) Chihuahua',
|
||||
'(GMT-07:00) La Paz',
|
||||
'(GMT-07:00) Mazatlan',
|
||||
'(GMT-07:00) Mountain Time (US & Canada)',
|
||||
'(GMT-06:00) Central America',
|
||||
'(GMT-06:00) Central Time (US & Canada)',
|
||||
'(GMT-06:00) Guadalajara',
|
||||
'(GMT-06:00) Mexico City',
|
||||
'(GMT-06:00) Monterrey',
|
||||
'(GMT-06:00) Saskatchewan',
|
||||
'(GMT-05:00) Bogota',
|
||||
'(GMT-05:00) Eastern Time (US & Canada)',
|
||||
'(GMT-05:00) Indiana (East)',
|
||||
'(GMT-05:00) Lima',
|
||||
'(GMT-05:00) Quito',
|
||||
'(GMT-04:00) Atlantic Time (Canada)',
|
||||
'(GMT-04:00) Caracas',
|
||||
'(GMT-04:00) La Paz',
|
||||
'(GMT-04:00) Santiago',
|
||||
'(GMT-03:30) Newfoundland',
|
||||
'(GMT-03:00) Brasilia',
|
||||
'(GMT-03:00) Buenos Aires',
|
||||
'(GMT-03:00) Georgetown',
|
||||
'(GMT-03:00) Greenland',
|
||||
'(GMT-02:00) Mid-Atlantic',
|
||||
'(GMT-01:00) Azores',
|
||||
'(GMT-01:00) Cape Verde Is.',
|
||||
'(GMT+00:00) Casablanca',
|
||||
'(GMT+00:00) Dublin',
|
||||
'(GMT+00:00) Edinburgh',
|
||||
'(GMT+00:00) Lisbon',
|
||||
'(GMT+00:00) London',
|
||||
]
|
||||
|
||||
const currencies = [
|
||||
'USD',
|
||||
'EUR',
|
||||
'GBP',
|
||||
'AUD',
|
||||
'BRL',
|
||||
'CAD',
|
||||
'CNY',
|
||||
'CZK',
|
||||
'DKK',
|
||||
'HKD',
|
||||
'HUF',
|
||||
'INR',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Account Details">
|
||||
<VCardText class="d-flex">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
size="100"
|
||||
class="me-6"
|
||||
:image="accountDataLocal.avatarImg"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upload Photo -->
|
||||
<form class="d-flex flex-column justify-center gap-5">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<VBtn
|
||||
color="primary"
|
||||
@click="refInputEl?.click()"
|
||||
>
|
||||
<VIcon
|
||||
icon="bx-cloud-upload"
|
||||
class="d-sm-none"
|
||||
/>
|
||||
<span class="d-none d-sm-block">Upload new photo</span>
|
||||
</VBtn>
|
||||
|
||||
<input
|
||||
ref="refInputEl"
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".jpeg,.png,.jpg,GIF"
|
||||
hidden
|
||||
@input="changeAvatar"
|
||||
>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="error"
|
||||
variant="tonal"
|
||||
@click="resetAvatar"
|
||||
>
|
||||
<span class="d-none d-sm-block">Reset</span>
|
||||
<VIcon
|
||||
icon="bx-refresh"
|
||||
class="d-sm-none"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<p class="text-body-1 mb-0">
|
||||
Allowed JPG, GIF or PNG. Max size of 800K
|
||||
</p>
|
||||
</form>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 Form -->
|
||||
<VForm class="mt-6">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.firstName"
|
||||
placeholder="John"
|
||||
label="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.lastName"
|
||||
placeholder="Doe"
|
||||
label="Last Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
placeholder="johndoe@gmail.com"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Organization -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.org"
|
||||
label="Organization"
|
||||
placeholder="ThemeSelection"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Phone -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.phone"
|
||||
label="Phone Number"
|
||||
placeholder="+1 (917) 543-9876"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Address -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.address"
|
||||
label="Address"
|
||||
placeholder="123 Main St, New York, NY 10001"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 State -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.state"
|
||||
label="State"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Zip Code -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.zip"
|
||||
label="Zip Code"
|
||||
placeholder="10001"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
placeholder="Select Country"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Language -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Timezone -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
placeholder="Select Timezone"
|
||||
:items="timezones"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Currency -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
placeholder="Select Currency"
|
||||
:items="currencies"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Form Actions -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex flex-wrap gap-4"
|
||||
>
|
||||
<VBtn>Save changes</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
@click.prevent="resetForm"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Deactivate Account -->
|
||||
<VCard title="Deactivate Account">
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="isAccountDeactivated"
|
||||
label="I confirm my account deactivation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
:disabled="!isAccountDeactivated"
|
||||
color="error"
|
||||
class="mt-3"
|
||||
>
|
||||
Deactivate Account
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
132
views/pages/account-settings/AccountSettingsNotification.vue
Normal file
132
views/pages/account-settings/AccountSettingsNotification.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script lang="ts" setup>
|
||||
const recentDevices = ref(
|
||||
[
|
||||
{
|
||||
type: 'New for you',
|
||||
email: true,
|
||||
browser: true,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'Account activity',
|
||||
email: true,
|
||||
browser: true,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'A new browser used to sign in',
|
||||
email: true,
|
||||
browser: true,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'A new device is linked',
|
||||
email: true,
|
||||
browser: false,
|
||||
app: false,
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
const selectedNotification = ref('Only when I\'m online')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Recent Devices">
|
||||
<VCardText>
|
||||
We need permission from your browser to show notifications.
|
||||
<a href="javascript:void(0)">Request Permission</a>
|
||||
</VCardText>
|
||||
|
||||
<VTable class="text-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col">
|
||||
EMAIL
|
||||
</th>
|
||||
<th scope="col">
|
||||
BROWSER
|
||||
</th>
|
||||
<th scope="col">
|
||||
App
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="device in recentDevices"
|
||||
:key="device.type"
|
||||
>
|
||||
<td>
|
||||
{{ device.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.email"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.browser"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="device.app"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<p class="text-base font-weight-medium">
|
||||
When should we send you notifications?
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
v-model="selectedNotification"
|
||||
mandatory
|
||||
:items="['Only when I\'m online', 'Anytime']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 mt-4">
|
||||
<VBtn type="submit">
|
||||
Save Changes
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-table {
|
||||
th {
|
||||
text-align: start !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
336
views/pages/account-settings/AccountSettingsSecurity.vue
Normal file
336
views/pages/account-settings/AccountSettingsSecurity.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<script lang="ts" setup>
|
||||
const isCurrentPasswordVisible = ref(false)
|
||||
const isNewPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
const currentPassword = ref('12345678')
|
||||
const newPassword = ref('87654321')
|
||||
const confirmPassword = ref('87654321')
|
||||
|
||||
const passwordRequirements = [
|
||||
'Minimum 8 characters long - the more, the better',
|
||||
'At least one lowercase character',
|
||||
'At least one number, symbol, or whitespace character',
|
||||
]
|
||||
|
||||
const serverKeys = [
|
||||
{
|
||||
name: 'Server Key 1',
|
||||
key: '23eaf7f0-f4f7-495e-8b86-fad3261282ac',
|
||||
createdOn: '28 Apr 2021, 18:20 GTM+4:10',
|
||||
permission: 'Full Access',
|
||||
},
|
||||
{
|
||||
name: 'Server Key 2',
|
||||
key: 'bb98e571-a2e2-4de8-90a9-2e231b5e99',
|
||||
createdOn: '12 Feb 2021, 10:30 GTM+2:30',
|
||||
permission: 'Read Only',
|
||||
},
|
||||
{
|
||||
name: 'Server Key 3',
|
||||
key: '2e915e59-3105-47f2-8838-6e46bf83b711',
|
||||
createdOn: '28 Dec 2020, 12:21 GTM+4:10',
|
||||
permission: 'Full Access',
|
||||
},
|
||||
]
|
||||
|
||||
const recentDevicesHeaders = [
|
||||
{ title: 'BROWSER', key: 'browser' },
|
||||
{ title: 'DEVICE', key: 'device' },
|
||||
{ title: 'LOCATION', key: 'location' },
|
||||
{ title: 'RECENT ACTIVITY', key: 'recentActivity' },
|
||||
]
|
||||
|
||||
const recentDevices = [
|
||||
{
|
||||
browser: 'Chrome on Windows',
|
||||
device: 'HP Spectre 360',
|
||||
location: 'New York, NY',
|
||||
recentActivity: '28 Apr 2022, 18:20',
|
||||
deviceIcon: { icon: 'bxl-windows', color: 'primary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on iPhone',
|
||||
device: 'iPhone 12x',
|
||||
location: 'Los Angeles, CA',
|
||||
recentActivity: '20 Apr 2022, 10:20',
|
||||
deviceIcon: { icon: 'bx-mobile', color: 'error' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Android',
|
||||
device: 'Oneplus 9 Pro',
|
||||
location: 'San Francisco, CA',
|
||||
recentActivity: '16 Apr 2022, 04:20',
|
||||
deviceIcon: { icon: 'bxl-android', color: 'success' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on macOS',
|
||||
device: 'Apple iMac',
|
||||
location: 'New York, NY',
|
||||
recentActivity: '28 Apr 2022, 18:20',
|
||||
deviceIcon: { icon: 'bxl-apple', color: 'secondary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Windows',
|
||||
device: 'HP Spectre 360',
|
||||
location: 'Los Angeles, CA',
|
||||
recentActivity: '20 Apr 2022, 10:20',
|
||||
deviceIcon: { icon: 'bxl-windows', color: 'primary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Android',
|
||||
device: 'Oneplus 9 Pro',
|
||||
location: 'San Francisco, CA',
|
||||
recentActivity: '16 Apr 2022, 04:20',
|
||||
deviceIcon: { icon: 'bxl-android', color: 'success' },
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- SECTION: Change Password -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Change Password">
|
||||
<VForm>
|
||||
<VCardText>
|
||||
<!-- 👉 Current Password -->
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 current password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="currentPassword"
|
||||
:type="isCurrentPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCurrentPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
label="Current Password"
|
||||
placeholder="············"
|
||||
@click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 New Password -->
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 new password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="newPassword"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
label="New Password"
|
||||
autocomplete="on"
|
||||
placeholder="············"
|
||||
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 confirm password -->
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="confirmPassword"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
label="Confirm New Password"
|
||||
placeholder="············"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Password Requirements -->
|
||||
<VCardText>
|
||||
<p class="text-base font-weight-medium mt-2">
|
||||
Password Requirements:
|
||||
</p>
|
||||
|
||||
<ul class="d-flex flex-column gap-y-3">
|
||||
<li
|
||||
v-for="item in passwordRequirements"
|
||||
:key="item"
|
||||
class="d-flex"
|
||||
>
|
||||
<div>
|
||||
<VIcon
|
||||
size="7"
|
||||
icon="bxs-circle"
|
||||
class="me-3"
|
||||
/>
|
||||
</div>
|
||||
<span class="font-weight-medium">{{ item }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Action Buttons -->
|
||||
<VCardText class="d-flex flex-wrap gap-4">
|
||||
<VBtn>Save changes</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Two-steps verification -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Two-steps verification">
|
||||
<VCardText>
|
||||
<p class="font-weight-semibold">
|
||||
Two factor authentication is not enabled yet.
|
||||
</p>
|
||||
<p>
|
||||
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-decoration-none"
|
||||
>Learn more.</a>
|
||||
</p>
|
||||
|
||||
<VBtn>
|
||||
Enable 2FA
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- SECTION: Create an API key -->
|
||||
<VCard title="Create an API key">
|
||||
<VRow>
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
order-md="0"
|
||||
order="1"
|
||||
>
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
:id="useId()"
|
||||
label="Choose the API key type you want to create"
|
||||
placeholder="Select API key type"
|
||||
:items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Name the API Key -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
label="Name the API key"
|
||||
placeholder="Name the API key"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Create Key Button -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
block
|
||||
>
|
||||
Create Key
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
<!-- !SECTION -->
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- SECTION: API Keys List -->
|
||||
<VCard title="API Key List & Access">
|
||||
<VCardText>
|
||||
An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing.
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Server Status -->
|
||||
<VCardText class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="serverKey in serverKeys"
|
||||
:key="serverKey.key"
|
||||
class="bg-var-theme-background pa-4"
|
||||
>
|
||||
<div class="d-flex align-center flex-wrap mb-3">
|
||||
<h6 class="text-h6 mb-0 me-3">
|
||||
{{ serverKey.name }}
|
||||
</h6>
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
{{ serverKey.permission }}
|
||||
</VChip>
|
||||
</div>
|
||||
<p class="text-base font-weight-medium">
|
||||
<span class="me-3">{{ serverKey.key }}</span>
|
||||
<VIcon
|
||||
:size="18"
|
||||
icon="bx-copy"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</p>
|
||||
<span>Created on {{ serverKey.createdOn }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<!-- !SECTION -->
|
||||
</VCol>
|
||||
|
||||
<!-- SECTION Recent Devices -->
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Table -->
|
||||
<VCard title="Recent Devices">
|
||||
<VDataTable
|
||||
:headers="recentDevicesHeaders"
|
||||
:items="recentDevices"
|
||||
class="text-no-wrap rounded-0 text-sm"
|
||||
>
|
||||
<template #item.browser="{ item }">
|
||||
<div class="d-flex">
|
||||
<VIcon
|
||||
start
|
||||
:icon="item.deviceIcon.icon"
|
||||
:color="item.deviceIcon.color"
|
||||
/>
|
||||
<span class="text-high-emphasis text-base">
|
||||
{{ item.browser }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
</VRow>
|
||||
</template>
|
||||
38
views/pages/authentication/AuthProvider.vue
Normal file
38
views/pages/authentication/AuthProvider.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const { global } = useTheme()
|
||||
|
||||
const authProviders = [
|
||||
{
|
||||
icon: 'bxl-facebook',
|
||||
color: '#4267b2',
|
||||
colorInDark: '#4267b2',
|
||||
},
|
||||
{
|
||||
icon: 'bxl-twitter',
|
||||
color: '#1da1f2',
|
||||
colorInDark: '#1da1f2',
|
||||
},
|
||||
{
|
||||
icon: 'bxl-github',
|
||||
color: '#272727',
|
||||
colorInDark: '#fff',
|
||||
},
|
||||
{
|
||||
icon: 'bxl-google',
|
||||
color: '#db4437',
|
||||
colorInDark: '#db4437',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn
|
||||
v-for="link in authProviders"
|
||||
:key="link.icon"
|
||||
:icon="link.icon"
|
||||
variant="text"
|
||||
:color="global.name.value === 'dark' ? link.colorInDark : link.color"
|
||||
/>
|
||||
</template>
|
||||
477
views/pages/cards/card-basic/CardBasic.vue
Normal file
477
views/pages/cards/card-basic/CardBasic.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<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 eCommerce2 from '@images/eCommerce/2.png'
|
||||
import pages1 from '@images/pages/1.png'
|
||||
import pages2 from '@images/pages/2.png'
|
||||
import pages3 from '@images/pages/3.png'
|
||||
import pages5 from '@images/pages/5.jpg'
|
||||
import pages6 from '@images/pages/6.jpg'
|
||||
|
||||
const avatars = [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
]
|
||||
|
||||
const isCardDetailsVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg
|
||||
:src="pages1"
|
||||
cover
|
||||
/>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Influencing The Influencer</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister predicts Cancun will draw as many visitors in 2006 as it did two years ago.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Robert Meyer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages2" />
|
||||
|
||||
<VCardText class="position-relative">
|
||||
<!-- User Avatar -->
|
||||
<VAvatar
|
||||
size="75"
|
||||
class="avatar-center"
|
||||
:image="avatar1"
|
||||
/>
|
||||
|
||||
<!-- Title, Subtitle & Action Button -->
|
||||
<div class="d-flex justify-space-between flex-wrap pt-8">
|
||||
<div class="me-2 mb-2">
|
||||
<VCardTitle class="pa-0">
|
||||
Robert Meyer
|
||||
</VCardTitle>
|
||||
<VCardSubtitle class="text-caption pa-0">
|
||||
London, UK
|
||||
</VCardSubtitle>
|
||||
</div>
|
||||
<VBtn>send request</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Mutual Friends -->
|
||||
<div class="d-flex justify-space-between align-center mt-4">
|
||||
<span class="font-weight-medium">18 mutual friends</span>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="avatar in avatars"
|
||||
:key="avatar"
|
||||
:image="avatar"
|
||||
size="40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Popular Uses Of The Internet -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<VCard>
|
||||
<VImg
|
||||
:src="pages3"
|
||||
cover
|
||||
max-height="280"
|
||||
/>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Popular Uses Of The Internet</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="mb-4">
|
||||
Although cards can support multiple actions, UI controls, and an overflow menu.
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
density="comfortable"
|
||||
@click="isCardDetailsVisible = !isCardDetailsVisible"
|
||||
>
|
||||
Details
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<VExpandTransition>
|
||||
<div v-show="isCardDetailsVisible">
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple iPhone 11 Pro -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
width="137"
|
||||
height="176"
|
||||
:src="eCommerce2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple iPhone 11 Pro</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="text-subtitle-1">
|
||||
<span>Price :</span> <span class="font-weight-medium">$899</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions class="justify-space-between">
|
||||
<VBtn>
|
||||
<VIcon icon="bx-cart-add" />
|
||||
<span class="ms-2">Add to cart</span>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
icon="bx-share-alt"
|
||||
/>
|
||||
</VCardActions>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Stump town Roasters. -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex flex-column-reverse flex-md-row">
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Stumptown Roasters</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap text-body-1">
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span>5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
Before there was a United States of America, there were coffee houses, because how are you supposed to build.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</div>
|
||||
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
:width="176"
|
||||
:src="pages5"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple Watch card -->
|
||||
<VCol
|
||||
lg="4"
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages6" />
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple Watch</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="font-weight-medium text-base">
|
||||
$249.40
|
||||
</p>
|
||||
|
||||
<p class="mb-0">
|
||||
3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="rounded-t-0"
|
||||
>
|
||||
Add to cart
|
||||
</VBtn>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Lifetime Membership -->
|
||||
<VCol
|
||||
md="6"
|
||||
lg="8"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
md="12"
|
||||
lg="7"
|
||||
order="2"
|
||||
order-lg="1"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Lifetime Membership</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Here, I focus on a range of items and features that we use in life without giving them a second thought such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for picking up women or men.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VDivider />
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-center">
|
||||
<div class="me-auto pe-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="bx-lock-open"
|
||||
/>
|
||||
<span class="ms-3">Full Access</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="bx-user"
|
||||
/>
|
||||
<span class="ms-3">15 Members</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VDivider
|
||||
v-if="$vuetify.display.smAndUp"
|
||||
vertical
|
||||
inset
|
||||
/>
|
||||
|
||||
<div class="ms-auto ps-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="bx-star"
|
||||
/>
|
||||
<span class="ms-3">Access all Features</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="bx-trending-up"
|
||||
/>
|
||||
<span class="ms-3">Lifetime Free Update</span>
|
||||
</p>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="12"
|
||||
lg="5"
|
||||
order="1"
|
||||
order-lg="2"
|
||||
class="member-pricing-bg text-center"
|
||||
>
|
||||
<div class="membership-pricing d-flex flex-column align-center py-14 h-100 justify-center">
|
||||
<p class="mb-5">
|
||||
<sub class="text-h5">$</sub>
|
||||
<sup class="text-h2 font-weight-medium">899</sup>
|
||||
<sub class="text-h5">USD</sub>
|
||||
</p>
|
||||
|
||||
<p class="text-sm">
|
||||
5 Tips For Offshore <br> Software Development
|
||||
</p>
|
||||
|
||||
<VBtn class="mt-8">
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Influencing The Influencer">
|
||||
<VCardText>
|
||||
Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
If you're in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here's a rundown of some of the best systems available.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Read More</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 The Best Answers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="The Best Answers">
|
||||
<VCardText class="d-flex align-center flex-wrap">
|
||||
<ClientOnly>
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<span class="text-subtitle-2">5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p>
|
||||
If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
|
||||
</p>
|
||||
|
||||
<p class="mb-0">
|
||||
become fast, easy and simple. If you want your promotional material to be an eye-catching
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Support -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard class="text-center">
|
||||
<VCardText class="d-flex flex-column justify-center align-center">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="50"
|
||||
class="mb-4"
|
||||
>
|
||||
<VIcon
|
||||
size="2rem"
|
||||
icon="bx-help-circle"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-h6">
|
||||
Support
|
||||
</h6>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p>
|
||||
According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.
|
||||
</p>
|
||||
</VCardText>
|
||||
<VCardText>
|
||||
<VBtn variant="elevated">
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-center {
|
||||
position: absolute;
|
||||
border: 3px solid rgb(var(--v-theme-surface));
|
||||
inset-block-start: -2rem;
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
// membership pricing
|
||||
.member-pricing-bg {
|
||||
position: relative;
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
}
|
||||
|
||||
.membership-pricing {
|
||||
sup {
|
||||
inset-block-start: 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
views/pages/cards/card-basic/CardNavigation.vue
Normal file
92
views/pages/cards/card-basic/CardNavigation.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts" setup>
|
||||
const navigationTab = ref('ITEM ONE')
|
||||
const navigationTab2 = ref('ITEM ONE')
|
||||
const tabItems = ['ITEM ONE', 'ITEM TWO', 'ITEM THREE']
|
||||
const tabContent = 'Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards...'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs v-model="navigationTab">
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
{{ tabContent }}
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs
|
||||
v-model="navigationTab2"
|
||||
align-tabs="center"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab2">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
class="text-center"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>{{ tabContent }}</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
97
views/pages/cards/card-basic/CardSolid.vue
Normal file
97
views/pages/cards/card-basic/CardSolid.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const solidCardData = [
|
||||
{
|
||||
cardBg: '#16B1FF',
|
||||
title: 'Twitter Card',
|
||||
icon: 'bxl-twitter',
|
||||
text: '"Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."',
|
||||
avatarImg: avatar4,
|
||||
avatarName: 'Mary Vaughn',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
{
|
||||
cardBg: '#3B5998',
|
||||
title: 'Facebook Card',
|
||||
icon: 'bxl-facebook',
|
||||
text: 'You\'ve read about the importance of being courageous, rebellious and imaginative. These are all vital ingredients.',
|
||||
avatarImg: avatar1,
|
||||
avatarName: 'Eugene Clarke',
|
||||
likes: '3.2k',
|
||||
share: '49',
|
||||
},
|
||||
{
|
||||
cardBg: '#007BB6',
|
||||
title: 'LinkedIn Card',
|
||||
icon: 'bxl-linkedin',
|
||||
text: 'With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is directed.',
|
||||
avatarImg: avatar8,
|
||||
avatarName: 'Anne Burke1',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="data in solidCardData"
|
||||
:key="data.icon"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard :color="data.cardBg">
|
||||
<VCardItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
size="1.9rem"
|
||||
color="white"
|
||||
:icon="data.icon"
|
||||
/>
|
||||
</template>
|
||||
<VCardTitle class="text-white">
|
||||
{{ data.title }}
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="clamp-text text-white mb-0">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-between align-center flex-wrap">
|
||||
<div class="text-no-wrap">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:image="data.avatarImg"
|
||||
/>
|
||||
<span class="text-white ms-2">{{ data.avatarName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<IconBtn
|
||||
icon="bx-heart"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-subtitle-2 text-white me-4">{{ data.likes }}</span>
|
||||
|
||||
<IconBtn
|
||||
icon="bx-share-alt"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-subtitle-2 text-white">{{ data.share }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
160
views/pages/form-layouts/DemoFormLayoutHorizontalForm.vue
Normal file
160
views/pages/form-layouts/DemoFormLayoutHorizontalForm.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstName">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstName"
|
||||
v-model="firstName"
|
||||
placeholder="John"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="email">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="email"
|
||||
v-model="email"
|
||||
placeholder="johndoe@email.com"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobile">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobile"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
placeholder="+1 123 456 7890"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Password -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="password">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="password"
|
||||
v-model="password"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
/>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
/>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-4"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,164 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstNameHorizontalIcons">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstNameHorizontalIcons"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
placeholder="John"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="emailHorizontalIcons">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="emailHorizontalIcons"
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
placeholder="johndoe@email.com"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobileHorizontalIcons">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobileHorizontalIcons"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Password -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="passwordHorizontalIcons">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="passwordHorizontalIcons"
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
/>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
/>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-4"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
119
views/pages/form-layouts/DemoFormLayoutMultipleColumn.vue
Normal file
119
views/pages/form-layouts/DemoFormLayoutMultipleColumn.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const lastName = ref('')
|
||||
const city = ref('')
|
||||
const country = ref('')
|
||||
const company = ref('')
|
||||
const email = ref('')
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 City -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="United States"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Company -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Themeselection"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
78
views/pages/form-layouts/DemoFormLayoutVerticalForm.vue
Normal file
78
views/pages/form-layouts/DemoFormLayoutVerticalForm.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@example.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
label="Password"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@example.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
:id="useId()"
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
label="Password"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
:id="useId()"
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-2"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
86
views/pages/tables/DemoSimpleTableBasics.vue
Normal file
86
views/pages/tables/DemoSimpleTableBasics.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts (100g Servings)
|
||||
</th>
|
||||
<th>
|
||||
calories
|
||||
</th>
|
||||
<th>
|
||||
Fat(g)
|
||||
</th>
|
||||
<th>
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th>
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
86
views/pages/tables/DemoSimpleTableDensity.vue
Normal file
86
views/pages/tables/DemoSimpleTableDensity.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts (100g Servings)
|
||||
</th>
|
||||
<th>
|
||||
calories
|
||||
</th>
|
||||
<th>
|
||||
Fat(g)
|
||||
</th>
|
||||
<th>
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th>
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
89
views/pages/tables/DemoSimpleTableFixedHeader.vue
Normal file
89
views/pages/tables/DemoSimpleTableFixedHeader.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable
|
||||
height="250"
|
||||
fixed-header
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts (100g Servings)
|
||||
</th>
|
||||
<th>
|
||||
calories
|
||||
</th>
|
||||
<th>
|
||||
Fat(g)
|
||||
</th>
|
||||
<th>
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th>
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
86
views/pages/tables/DemoSimpleTableHeight.vue
Normal file
86
views/pages/tables/DemoSimpleTableHeight.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable height="250">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Desserts (100g Servings)
|
||||
</th>
|
||||
<th>
|
||||
calories
|
||||
</th>
|
||||
<th>
|
||||
Fat(g)
|
||||
</th>
|
||||
<th>
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th>
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
89
views/pages/tables/DemoSimpleTableTheme.vue
Normal file
89
views/pages/tables/DemoSimpleTableTheme.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable
|
||||
theme="dark"
|
||||
class="rounded-0"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Desserts (100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
Reference in New Issue
Block a user