first commit
This commit is contained in:
73
components/auth/BoxedLoginForm.vue
Normal file
73
components/auth/BoxedLoginForm.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { Form } from 'vee-validate';
|
||||
|
||||
/*Social icons*/
|
||||
import google from '@/assets/images/svgs/google-icon.svg';
|
||||
import facebook from '@/assets/images/svgs/facebook-icon.svg';
|
||||
|
||||
const checkbox = ref(false);
|
||||
const valid = ref(false);
|
||||
const show1 = ref(false);
|
||||
const password = ref('admin123');
|
||||
const username = ref('info@wrappixel.com');
|
||||
const passwordRules = ref([
|
||||
(v: string) => !!v || 'Password is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
|
||||
]);
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
|
||||
function validate(values: any, { setErrors }: any) {
|
||||
const authStore = useAuthStore();
|
||||
return authStore.login(username.value, password.value).catch((error) => setErrors({ apiError: error }));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="d-flex mb-3">
|
||||
<v-col cols="6" sm="6" class="pr-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
<span class="d-md-flex d-none mr-1">Sign in with</span> Facebook
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
<span class="d-md-flex d-none mr-1">Sign in with</span> Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center text-center mb-6">
|
||||
<div class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative">
|
||||
<span class="bg-surface px-5 py-3 position-relative textSecondary">Or sign in with email</span>
|
||||
</div>
|
||||
</div>
|
||||
<Form @submit="validate" v-slot="{ errors, isSubmitting }" class="mt-5">
|
||||
<v-label class="font-weight-semibold pb-2 ">Username</v-label>
|
||||
<VTextField v-model="username" :rules="emailRules" class="mb-8" required hide-details="auto"></VTextField>
|
||||
<div class="d-flex justify-space-between align-center pb-2">
|
||||
<v-label class="font-weight-semibold ">Password</v-label>
|
||||
<RouterLink to="/auth/forgot-password2" class="text-primary text-decoration-none font-weight-medium">Forgot Password ?</RouterLink>
|
||||
</div>
|
||||
|
||||
<VTextField v-model="password" :rules="passwordRules" required hide-details="auto" type="password" class="pwdInput"></VTextField>
|
||||
<div class="d-flex flex-wrap align-center my-3 ml-n2">
|
||||
<v-checkbox
|
||||
class="pe-2"
|
||||
v-model="checkbox"
|
||||
:rules="[(v: any) => !!v || 'You must agree to continue!']"
|
||||
required
|
||||
hide-details
|
||||
color="primary"
|
||||
>
|
||||
<template v-slot:label class="font-weight-medium">Keep me logged in</template>
|
||||
</v-checkbox>
|
||||
</div>
|
||||
<v-btn size="large" :loading="isSubmitting" color="darkgray" :disabled="valid" block type="submit" flat>Sign In</v-btn>
|
||||
<div v-if="errors.apiError" class="mt-2">
|
||||
<v-alert color="error">{{ errors.apiError }}</v-alert>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
61
components/auth/BoxedRegisterForm.vue
Normal file
61
components/auth/BoxedRegisterForm.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '@/layouts/full/logo/Logo.vue';
|
||||
/*Social icons*/
|
||||
import google from '@/assets/images/svgs/google-icon.svg';
|
||||
import facebook from '@/assets/images/svgs/facebook-icon.svg';
|
||||
|
||||
const checkbox = ref(false);
|
||||
const valid = ref(true);
|
||||
const show1 = ref(false);
|
||||
const password = ref('');
|
||||
const email = ref('');
|
||||
const passwordRules = ref([
|
||||
(v: string) => !!v || 'Password is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
|
||||
]);
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
const fname = ref('');
|
||||
const fnameRules = ref([
|
||||
(v: string) => !!v || 'Name is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Name must be less than 10 characters'
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="d-flex mb-6">
|
||||
<v-col cols="6" sm="6" class="pr-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
<span class="d-md-flex d-none mr-1">Sign in with</span> Facebook
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
<span class="d-md-flex d-none mr-1">Sign in with</span> Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center text-center mb-6">
|
||||
<div class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative">
|
||||
<span class="bg-surface px-5 py-3 position-relative">Or sign up with email</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/pages/boxedlogin" class="mt-5">
|
||||
<v-label class="font-weight-medium pb-2">Name</v-label>
|
||||
<VTextField v-model="fname" :rules="fnameRules" required ></VTextField>
|
||||
<v-label class="font-weight-medium pb-2">Email Adddress</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-label class="font-weight-medium pb-2">Password</v-label>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
:counter="10"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
variant="outlined"
|
||||
type="password"
|
||||
color="primary"
|
||||
></VTextField>
|
||||
<v-btn size="large" class="mt-2" color="darkgray" block submit flat>Sign Up</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
67
components/auth/LoginForm.vue
Normal file
67
components/auth/LoginForm.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Form } from 'vee-validate';
|
||||
|
||||
/*Social icons*/
|
||||
import google from '@/assets/images/svgs/google-icon.svg';
|
||||
import facebook from '@/assets/images/svgs/facebook-icon.svg';
|
||||
|
||||
const checkbox = ref(false);
|
||||
const valid = ref(false);
|
||||
const show1 = ref(false);
|
||||
const password = ref('admin123');
|
||||
const username = ref('info@wrappixel.com');
|
||||
const passwordRules = ref([
|
||||
(v: string) => !!v || 'Password is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
|
||||
]);
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
const { signIn, getProviders } = useAuth()
|
||||
const providers = await getProviders()
|
||||
const login = () => {
|
||||
console.log(providers)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <v-row class="d-flex mb-3">
|
||||
<v-col cols="6" sm="6" class="pr-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
Facebook
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center text-center mb-6">
|
||||
<div class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative">
|
||||
<span class="bg-surface px-5 py-3 position-relative">or sign in with</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<Form class="mt-5">
|
||||
<v-label class="font-weight-semibold pb-2 ">Username</v-label>
|
||||
<VTextField v-model="username" :rules="emailRules" class="mb-8" required hide-details="auto"></VTextField>
|
||||
<v-label class="font-weight-semibold pb-2 ">Password</v-label>
|
||||
<VTextField v-model="password" :rules="passwordRules" required hide-details="auto" type="password"
|
||||
class="pwdInput"></VTextField>
|
||||
<div class="d-flex flex-wrap align-center my-3 ml-n2">
|
||||
<v-checkbox class="pe-2" v-model="checkbox" :rules="[(v: any) => !!v || 'You must agree to continue!']"
|
||||
required hide-details color="primary">
|
||||
<template v-slot:label class="font-weight-medium">Remeber this Device</template>
|
||||
</v-checkbox>
|
||||
<div class="ml-sm-auto">
|
||||
<RouterLink to="" class="text-primary text-decoration-none font-weight-medium">Forgot Password ?
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn size="large" color="primary" :disabled="valid" block flat @click="login">Sign In</v-btn>
|
||||
<!-- <div class="mt-2">
|
||||
<v-alert color="error"></v-alert>
|
||||
</div> -->
|
||||
</Form>
|
||||
</template>
|
||||
61
components/auth/RegisterForm.vue
Normal file
61
components/auth/RegisterForm.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '~/components/layout/full/logo/Logo.vue';
|
||||
/*Social icons*/
|
||||
import google from '~/assets/images/svgs/google-icon.svg';
|
||||
import facebook from '~/assets/images/svgs/facebook-icon.svg';
|
||||
|
||||
const checkbox = ref(false);
|
||||
const valid = ref(true);
|
||||
const show1 = ref(false);
|
||||
const password = ref('');
|
||||
const email = ref('');
|
||||
const passwordRules = ref([
|
||||
(v: string) => !!v || 'Password is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
|
||||
]);
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
const fname = ref('');
|
||||
const fnameRules = ref([
|
||||
(v: string) => !!v || 'Name is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Name must be less than 10 characters'
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="d-flex mb-6">
|
||||
<v-col cols="6" sm="6" class="pr-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
Facebook
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center text-center mb-6">
|
||||
<div class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative">
|
||||
<span class="bg-surface px-5 py-3 position-relative">or sign in with</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/pages/boxedlogin" class="mt-5">
|
||||
<v-label class=" font-weight-medium pb-2">Name</v-label>
|
||||
<VTextField v-model="fname" :rules="fnameRules" required ></VTextField>
|
||||
<v-label class=" font-weight-medium pb-2">Email Adddress</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-label class=" font-weight-medium pb-2">Password</v-label>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
:counter="10"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
variant="outlined"
|
||||
type="password"
|
||||
color="primary"
|
||||
></VTextField>
|
||||
<v-btn size="large" class="mt-2" color="primary" block submit flat>Sign Up</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
15
components/auth/ResetForm.vue
Normal file
15
components/auth/ResetForm.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '@/layouts/full/logo/Logo.vue';
|
||||
const valid = ref(true);
|
||||
const show1 = ref(false);
|
||||
const email = ref('');
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
</script>
|
||||
<template>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/dashboards/analytical" class="mt-6">
|
||||
<v-label class="font-weight-semibold pb-2">Email Address</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-btn size="large" color="darkgray" to="/" block submit flat>Forgot Password</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
18
components/auth/TwoStepForm.vue
Normal file
18
components/auth/TwoStepForm.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="mt-6">
|
||||
<v-label class="text-subtitle-1 font-weight-semibold pb-2 text-lightText">Type your 6 digits security code</v-label>
|
||||
<div class="d-flex justify-space-between gap-3 mb-2 verification">
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
</div>
|
||||
<v-btn color="darkgray" size="large" block flat>Verify My Account</v-btn>
|
||||
<h6 class="text-16 text-medium-emphasis d-flex align-center mt-6" >
|
||||
Didn't get the code?
|
||||
<RouterLink to="/" class="pl-0 text-primary text-16 opacity-1 pl-2 text-decoration-none"> Resend</RouterLink>
|
||||
</h6>
|
||||
</div>
|
||||
</template>
|
||||
45
components/dashboard/BlogCards.vue
Normal file
45
components/dashboard/BlogCards.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { BlogCardData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="4" v-for="card in BlogCardData" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover">
|
||||
<div>
|
||||
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
||||
<v-card-item
|
||||
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
||||
></v-card-item>
|
||||
</v-img>
|
||||
<v-avatar size="40" class="mt-n7 mx-6">
|
||||
<img :src="card.avatar" alt="icon" height="40" />
|
||||
</v-avatar>
|
||||
<v-card-item class="pt-4">
|
||||
<v-chip class="text-body-2 font-weight-medium bg-grey100" size="small" rounded="sm" v-text="card.category"></v-chip>
|
||||
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
||||
<NuxtLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</NuxtLink>
|
||||
</h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-avatar class="" size="18">
|
||||
<EyeIcon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.view"></span>
|
||||
<v-avatar class="ml-4" size="18">
|
||||
<Message2Icon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.comments"></span>
|
||||
</div>
|
||||
<div>
|
||||
<v-avatar size="10">
|
||||
<CircleIcon size="10" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-2 ml-2 text-textSecondary" v-text="card.time"></span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
35
components/dashboard/DailyActivities.vue
Normal file
35
components/dashboard/DailyActivities.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { DailyActivitiesData } from '@/data/dashboard/dashboardData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Daily activities</v-card-title>
|
||||
<div class="daily-activities mt-8 px-3">
|
||||
<div v-for="list in DailyActivitiesData" :key="list.title">
|
||||
<v-row class="d-flex mb-1">
|
||||
<v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
|
||||
<p class="text-body-1 text-textSecondary text-no-wrap">{{ list.title }}</p>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
|
||||
<Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
|
||||
<div v-if="list.line" class="line mx-auto bg-grey100"></div>
|
||||
</v-col>
|
||||
<v-col cols="7" sm="8" class="pt-0 pb-0">
|
||||
<h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
|
||||
<p v-else class="text-body-1 text-textPrimary">{{ list.subtitle }}</p>
|
||||
<div class="mt-n1">
|
||||
<NuxtLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
|
||||
list.link
|
||||
}}</NuxtLink>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
21
components/dashboard/NewCustomer.vue
Normal file
21
components/dashboard/NewCustomer.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
||||
<Icon icon="solar:football-outline" class="text-secondary" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">New Customers</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3 mt-12">
|
||||
<h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
|
||||
<div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
|
||||
</div>
|
||||
<v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
115
components/dashboard/RevenueCard.vue
Normal file
115
components/dashboard/RevenueCard.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
const select = ref('Sept 2025');
|
||||
const items = ref(['Sept 2025', 'Oct 2025', 'Nov 2025']);
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 285,
|
||||
stacked: true,
|
||||
offsetX: -15
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '15%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '2025',
|
||||
data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<div>
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="text-body-1"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n1 mt-4 pt-2">
|
||||
<apexchart type="bar" height="285" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
54
components/dashboard/RevenueProducts.vue
Normal file
54
components/dashboard/RevenueProducts.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="revenue-products">
|
||||
<v-card-item class="pb-4">
|
||||
<div class="d-flex ga-3 align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Revenue by Product</v-card-title>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<v-table class="revenue-table">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md"> <img :src="item.img" :alt="item.img" width="48" /></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-medium">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap text-textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 text-textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" class="font-weight-semibold" :color="item.statuscolor" size="small" label>{{
|
||||
item.statustext
|
||||
}}</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
68
components/dashboard/TotalIncome.vue
Normal file
68
components/dashboard/TotalIncome.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors:['rgba(var(--v-theme-error))'],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lighterror">
|
||||
<Icon icon="solar:box-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">Total Income</h6>
|
||||
</div>
|
||||
<v-row class="mt-6">
|
||||
<v-col cols="6">
|
||||
<h3 class="text-h3 heading">$680</h3>
|
||||
<div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
65
components/layout/full/Main.vue
Normal file
65
components/layout/full/Main.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, shallowRef, watch } from "vue";
|
||||
import { useDisplay } from "vuetify";
|
||||
import sidebarItems from "~/components/layout/full/vertical-sidebar/sidebarItem";
|
||||
import { Menu2Icon } from "vue-tabler-icons";
|
||||
import { useCustomizerStore } from "~/store/customizer";
|
||||
const sidebarMenu = shallowRef(sidebarItems);
|
||||
const customizer = useCustomizerStore();
|
||||
const { mdAndDown } = useDisplay();
|
||||
const sDrawer = ref(true);
|
||||
onMounted(() => {
|
||||
sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
|
||||
});
|
||||
watch(mdAndDown, (val) => {
|
||||
sDrawer.value = !val;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!------Sidebar-------->
|
||||
<v-locale-provider>
|
||||
<v-app
|
||||
:theme="customizer.actTheme"
|
||||
class="bg-containerBg"
|
||||
:class="[
|
||||
customizer.actTheme,
|
||||
customizer.mini_sidebar ? 'mini-sidebar' : '',
|
||||
customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
|
||||
customizer.setBorderCard ? 'cardBordered' : ''
|
||||
]"
|
||||
>
|
||||
<!---Customizer location left side--->
|
||||
<v-navigation-drawer
|
||||
app
|
||||
temporary
|
||||
elevation="10"
|
||||
location="left"
|
||||
v-model="customizer.Customizer_drawer"
|
||||
width="320"
|
||||
class="left-customizer"
|
||||
>
|
||||
<Customizer />
|
||||
</v-navigation-drawer>
|
||||
<LazyLayoutFullVerticalSidebar v-if="!customizer.setHorizontalLayout" />
|
||||
<div :class="customizer.boxed ? 'maxWidth' : 'full-header'">
|
||||
<LazyLayoutFullVerticalHeader v-if="!customizer.setHorizontalLayout" />
|
||||
</div>
|
||||
|
||||
<v-main class="ml-md-4">
|
||||
<div class="rtl-lyt mb-3 hr-layout bg-containerBg">
|
||||
<v-container
|
||||
fluid
|
||||
class="page-wrapper bg-background pt-md-8 rounded-xl"
|
||||
>
|
||||
<div>
|
||||
<div class="">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</v-locale-provider>
|
||||
</template>
|
||||
154
components/layout/full/customizer/Customizer.vue
Normal file
154
components/layout/full/customizer/Customizer.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { useCustomizerStore } from '~/store/customizer';
|
||||
import {
|
||||
CheckIcon,
|
||||
LayoutColumnsIcon,
|
||||
LayoutDistributeHorizontalIcon,
|
||||
LayoutDistributeVerticalIcon,
|
||||
LayoutNavbarIcon,
|
||||
LayoutSidebarLeftCollapseIcon,
|
||||
TextDirectionLtrIcon,
|
||||
TextDirectionRtlIcon
|
||||
} from 'vue-tabler-icons';
|
||||
|
||||
const theme = useTheme();
|
||||
const customizer = useCustomizerStore();
|
||||
|
||||
// template skin color options
|
||||
const themeColors = ref([
|
||||
{
|
||||
name: 'BLUE_THEME',
|
||||
bg: 'themeBlue'
|
||||
},
|
||||
{
|
||||
name: 'AQUA_THEME',
|
||||
bg: 'themeAqua'
|
||||
},
|
||||
{
|
||||
name: 'PURPLE_THEME',
|
||||
bg: 'themePurple'
|
||||
},
|
||||
{
|
||||
name: 'GREEN_THEME',
|
||||
bg: 'themeGreen'
|
||||
},
|
||||
{
|
||||
name: 'CYAN_THEME',
|
||||
bg: 'themeCyan'
|
||||
},
|
||||
{
|
||||
name: 'ORANGE_THEME',
|
||||
bg: 'themeOrange'
|
||||
}
|
||||
]);
|
||||
|
||||
// Dark Theme Colors
|
||||
const DarkthemeColors = ref([
|
||||
{ name: 'DARK_BLUE_THEME', bg: 'themeDarkBlue' },
|
||||
{ name: 'DARK_AQUA_THEME', bg: 'themeDarkAqua' },
|
||||
{ name: 'DARK_PURPLE_THEME', bg: 'themeDarkPurple' },
|
||||
{ name: 'DARK_GREEN_THEME', bg: 'themeDarkGreen' },
|
||||
{ name: 'DARK_CYAN_THEME', bg: 'themeDarkCyan' },
|
||||
{ name: 'DARK_ORANGE_THEME', bg: 'themeDarkOrange' }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<!------------------------------------->
|
||||
<!-- Customizer -->
|
||||
<!------------------------------------->
|
||||
<template>
|
||||
<div class="pa-6">
|
||||
<h5 class="text-h5">Settings</h5>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<perfect-scrollbar style="height: calc(100vh - 90px)">
|
||||
<div class="pa-6">
|
||||
<h6 class="text-h6 mb-2">Sidebar Layout</h6>
|
||||
<v-btn-toggle v-model="customizer.setHorizontalLayout" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
|
||||
<v-btn :value="false" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutColumnsIcon stroke-width="1.5" size="21" class="mr-2 icon" /> Vertical
|
||||
</v-btn>
|
||||
<v-btn :value="true" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutNavbarIcon stroke-width="1.5" size="21" class="mr-2 icon" /> Horizontal
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
|
||||
<!------Template Direction------>
|
||||
|
||||
<h6 class="text-h6 mt-8 mb-5">Template Color</h6>
|
||||
<v-item-group mandatory v-model="customizer.actTheme" class="ml-n2 v-row">
|
||||
<v-col cols="4" v-for="theme in themeColors" :key="theme.name" class="pa-2">
|
||||
<v-item v-slot="{ isSelected, toggle }" :value="theme.name">
|
||||
<v-sheet
|
||||
rounded="md"
|
||||
class="border cursor-pointer d-block text-center px-5 py-4 hover-btns"
|
||||
elevation="9"
|
||||
@click="toggle"
|
||||
>
|
||||
<v-avatar :class="theme.bg" size="25" variant="text">
|
||||
<CheckIcon color="white" size="18" v-if="isSelected" />
|
||||
</v-avatar>
|
||||
</v-sheet>
|
||||
</v-item>
|
||||
</v-col>
|
||||
</v-item-group>
|
||||
<h6 class="text-h6 mt-11 mb-5">Template Dark Color</h6>
|
||||
<v-item-group mandatory v-model="customizer.actTheme" class="ml-n2 v-row">
|
||||
<v-col cols="4" v-for="theme in DarkthemeColors" :key="theme.name" class="pa-2">
|
||||
<v-item v-slot="{ isSelected, toggle }" :value="theme.name">
|
||||
<v-sheet
|
||||
rounded="md"
|
||||
class="border cursor-pointer d-block text-center px-5 py-4 hover-btns"
|
||||
elevation="9"
|
||||
@click="toggle"
|
||||
>
|
||||
<v-avatar :class="theme.bg" size="25">
|
||||
<CheckIcon color="white" size="18" v-if="isSelected" />
|
||||
</v-avatar>
|
||||
</v-sheet>
|
||||
</v-item>
|
||||
</v-col>
|
||||
</v-item-group>
|
||||
<h6 class="text-h6 mt-11 mb-2">Container Option</h6>
|
||||
<v-btn-toggle v-model="customizer.boxed" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
|
||||
<v-btn :value="true" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutDistributeVerticalIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Boxed
|
||||
</v-btn>
|
||||
<v-btn :value="false" variant="text" elevation="9" class="rounded-md ">
|
||||
<LayoutDistributeHorizontalIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Full
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<!---Horizontal demo hide this option --->
|
||||
<v-sheet v-if="customizer.setHorizontalLayout != true">
|
||||
<h6 class="text-h6 mt-11 mb-2">Sidebar Type</h6>
|
||||
<v-btn-toggle v-model="customizer.mini_sidebar" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
|
||||
<v-btn :value="false" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutSidebarIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Full
|
||||
</v-btn>
|
||||
<v-btn :value="true" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutSidebarLeftCollapseIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Collapse
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-sheet>
|
||||
<h6 class="text-h6 mt-11 mb-2">Card with</h6>
|
||||
<v-btn-toggle v-model="customizer.setBorderCard" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
|
||||
<v-btn :value="false" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutSidebarLeftCollapseIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Shadow
|
||||
</v-btn>
|
||||
<v-btn :value="true" variant="text" elevation="9" class="rounded-md">
|
||||
<LayoutSidebarIcon stroke-width="1.5" size="21" class="mr-2 icon" />
|
||||
Border
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
26
components/layout/full/logo/Logo.vue
Normal file
26
components/layout/full/logo/Logo.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useCustomizerStore } from '~/store/customizer';
|
||||
|
||||
const customizer = useCustomizerStore();
|
||||
|
||||
//const dark = ref(false);
|
||||
const dark = computed(() => {
|
||||
if (
|
||||
customizer.actTheme === 'DARK_BLUE_THEME' ||
|
||||
customizer.actTheme === 'DARK_AQUA_THEME' ||
|
||||
customizer.actTheme === 'DARK_ORANGE_THEME' ||
|
||||
customizer.actTheme === 'DARK_PURPLE_THEME' ||
|
||||
customizer.actTheme === 'DARK_GREEN_THEME' ||
|
||||
customizer.actTheme === 'DARK_CYAN_THEME'
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<LayoutFullLogoLight v-if="dark" />
|
||||
<LayoutFullLogoDark v-else />
|
||||
</template>
|
||||
10
components/layout/full/logo/LogoDark.vue
Normal file
10
components/layout/full/logo/LogoDark.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Logoimg from "/images/logos/dark-logo.svg";
|
||||
</script>
|
||||
<template>
|
||||
<div class="logo">
|
||||
<NuxtLink to="/">
|
||||
<img :src="Logoimg" alt="home" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
10
components/layout/full/logo/LogoLight.vue
Normal file
10
components/layout/full/logo/LogoLight.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Logoimg from "/images/logos/light-logo.svg";
|
||||
</script>
|
||||
<template>
|
||||
<div class="logo">
|
||||
<NuxtLink to="/">
|
||||
<img :src="Logoimg" alt="home" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
24
components/layout/full/vertical-header/AppsLink.vue
Normal file
24
components/layout/full/vertical-header/AppsLink.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import {appsLink} from '~/_mockApis/headerData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- apps link -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" v-for="(item, i) in appsLink" :key="i">
|
||||
<router-link :to="item.href" class="text-decoration-none custom-text-primary">
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="45" :color=" 'light' + item.color" rounded="md">
|
||||
<Icon :icon="'solar:' + item.avatar" height="24" :class="'text-' + item.color"/>
|
||||
</v-avatar>
|
||||
<div class="ml-3">
|
||||
<h6 class="text-subtitle-1 mb-1 heading custom-title">{{ item.title }}</h6>
|
||||
<p class="text-subtitle-2 textSecondary">{{ item.subtext }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
47
components/layout/full/vertical-header/LanguageDD.vue
Normal file
47
components/layout/full/vertical-header/LanguageDD.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { languageDD } from '@/_mockApis/headerData';
|
||||
import flag1 from '~/assets/images/flag/icon-flag-en.svg';
|
||||
import flag2 from '~/assets/images/flag/icon-flag-ro.svg';
|
||||
import flag3 from '~/assets/images/flag/icon-flag-zh.svg';
|
||||
import flag4 from '~/assets/images/flag/icon-flag-fr.svg';
|
||||
</script>
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- language DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu open-on-hover open-on-click>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
|
||||
<v-avatar size="20">
|
||||
<img v-if="$i18n.locale === 'en'" :src="flag1" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
|
||||
<img v-if="$i18n.locale === 'fr'" :src="flag4" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
|
||||
<img v-if="$i18n.locale === 'ro'" :src="flag2" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
|
||||
<img v-if="$i18n.locale === 'zh'" :src="flag3" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="md" width="200" elevation="10">
|
||||
<v-list class="theme-list">
|
||||
<v-list-item
|
||||
v-for="(item, index) in languageDD"
|
||||
:key="index"
|
||||
color="primary"
|
||||
:active="$i18n.locale == item.value"
|
||||
class="d-flex align-center"
|
||||
@click="() => ($i18n.locale = item.value)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar size="22">
|
||||
<img :src="item.avatar" :alt="item.avatar" width="22" height="22" class="obj-cover" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="text-subtitle-1 font-weight-regular">
|
||||
{{ item.title }}
|
||||
<span class="text-disabled text-subtitle-1 pl-2">({{ item.subtext }})</span>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
30
components/layout/full/vertical-header/Navigations.vue
Normal file
30
components/layout/full/vertical-header/Navigations.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- mega menu DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu open-on-hover open-on-click >
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn class="hidden-sm-and-down custom-hover-primary" size="small" variant="text" icon color="primary" v-bind="props"> <Icon icon="solar:widget-3-line-duotone" height="20" /> </v-btn>
|
||||
</template>
|
||||
<v-sheet width="900" height="300" elevation="10" rounded="md" class="pa-0 overflow-hidden">
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="8" class="d-flex">
|
||||
<div class="pa-6">
|
||||
<LazyLayoutFullVerticalHeaderAppsLink />
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="pa-0">
|
||||
<img src="@/assets/images/backgrounds/mega-dd-bg.jpg" alt="matdash-img" height="320" class="w-100" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
s
|
||||
43
components/layout/full/vertical-header/NotificationDD.vue
Normal file
43
components/layout/full/vertical-header/NotificationDD.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import {notifications} from '~/_mockApis/headerData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- notifications DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu open-on-hover open-on-click >
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
|
||||
<Icon icon="solar:bell-bing-line-duotone" height="22" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="md" width="360" elevation="10">
|
||||
<div class="px-6 pt-6 pb-4">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<h6 class="text-h5">Notifications</h6>
|
||||
<v-chip color="primary" variant="flat" size="small" class="text-white rounded-sm">5 New</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
<perfect-scrollbar style="height: 350px">
|
||||
<v-list class="py-0 theme-list" lines="two">
|
||||
<v-list-item v-for="item in notifications" :key="item.title" :value="item" color="primary" class="py-3 px-6">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar size="45" :color=" 'light' + item.color" rounded="circle">
|
||||
<Icon :icon="'solar:' + item.avatar" height="20" :class="'text-' + item.color"/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<div class="d-flex justify-space-between">
|
||||
<h6 class="text-subtitle-1 heading mb-1">{{ item.title }}</h6>
|
||||
<span class="text-subtitle-2 textSecondary">{{ item.time }}</span>
|
||||
</div>
|
||||
<p class="text-subtitle-2 font-weight-regular textSecondary">{{ item.subtitle }}</p>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</perfect-scrollbar>
|
||||
<div class="py-4 px-6 text-center">
|
||||
<v-btn color="primary" variant="flat" size="large" block>See all Notifications</v-btn>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
66
components/layout/full/vertical-header/ProfileDD.vue
Normal file
66
components/layout/full/vertical-header/ProfileDD.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { profileDD } from "@/_mockApis/headerData";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- notifications DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu open-on-hover open-on-click>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
class="custom-hover-primary"
|
||||
color="primary"
|
||||
v-bind="props"
|
||||
icon
|
||||
>
|
||||
<v-avatar size="35">
|
||||
<img
|
||||
src="@/assets/images/profile/user-1.jpg"
|
||||
width="35"
|
||||
alt="Julia"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="md" width="280" elevation="10">
|
||||
<div class="pa-6">
|
||||
<div class="d-flex align-center pb-6">
|
||||
<v-avatar size="55">
|
||||
<img src="@/assets/images/profile/user-1.jpg" width="55" />
|
||||
</v-avatar>
|
||||
<div class="ml-3">
|
||||
<h6 class="text-subtitle-1">
|
||||
David McMichael <span class="text-success text-caption">Pro</span>
|
||||
</h6>
|
||||
<span class="text-subtitle-1 textSecondary"
|
||||
>david@wrappixel.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<perfect-scrollbar
|
||||
style="height: calc(100vh - 240px); max-height: 240px"
|
||||
>
|
||||
<v-list class="py-0 theme-list mt-3" lines="one">
|
||||
<v-list-item
|
||||
v-for="item in profileDD"
|
||||
:key="item.title"
|
||||
class="py-0 px-2 rounded-md custom-text-primary"
|
||||
color="primary"
|
||||
:to="item.href"
|
||||
>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<p class="text-subtitle-1 heading custom-title">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<v-chip size="small" color="error" v-if="item.badge">4</v-chip>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<v-menu open-on-hover open-on-click >
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
|
||||
<Icon icon="solar:widget-line-duotone" height="22" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="md" width="360" elevation="10">
|
||||
<perfect-scrollbar style="height: 370px">
|
||||
<div class="pa-6">
|
||||
<LazyLayoutFullVerticalHeaderAppsLink />
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
39
components/layout/full/vertical-header/Searchbar.vue
Normal file
39
components/layout/full/vertical-header/Searchbar.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { searchSugg } from '~/_mockApis/headerData';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- search1 -->
|
||||
<!-- ------------------------------------------------>
|
||||
<v-menu :close-on-content-click="false">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
|
||||
<Icon icon="solar:magnifer-linear" height="20" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet width="360" elevation="10" rounded="md">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-text-field placeholder="Search" color="primary" density="compact" variant="outlined" hide-details></v-text-field>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<h5 class="text-h5 mt-4 px-5 pb-4">Quick Page Links</h5>
|
||||
<perfect-scrollbar style="height: 380px">
|
||||
<v-list class="pt-0 pb-5" lines="two">
|
||||
<v-list-item
|
||||
:value="item"
|
||||
v-for="(item, index) in searchSugg"
|
||||
:key="index"
|
||||
:to="item.href"
|
||||
color="primary"
|
||||
class="px-5 py-2"
|
||||
>
|
||||
<h6 class="text-subtitle-1 heading mb-1">{{ item.title }}</h6>
|
||||
<p class="text-subtitle-2 textSecondary">{{ item.href }}</p>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</perfect-scrollbar>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
38
components/layout/full/vertical-header/ThemeToggler.vue
Normal file
38
components/layout/full/vertical-header/ThemeToggler.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { useCustomizerStore } from '~/store/customizer';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const theme = useTheme();
|
||||
const customizer = useCustomizerStore();
|
||||
|
||||
// template skin color options
|
||||
const themeColors = ref([
|
||||
{
|
||||
name: 'BLUE_THEME',
|
||||
bg: 'togglethemeBlue'
|
||||
},
|
||||
{
|
||||
name: 'DARK_BLUE_THEME',
|
||||
bg: 'togglethemeDarkBlue'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="position-relative">
|
||||
<v-item-group mandatory v-model="customizer.actTheme" class="d-flex">
|
||||
<div v-for="theme in themeColors" :key="theme.name">
|
||||
<v-item v-slot="{ toggle }" :value="theme.name">
|
||||
<v-sheet rounded="circle" class="cursor-pointer text-center hover-btns" elevation="0" @click="toggle">
|
||||
<v-btn icon :class="theme.bg" class="custom-hover-primary" size="small" variant="text" color="primary">
|
||||
<SunIcon v-if="theme.bg == 'togglethemeBlue'" :class="theme.bg" height="22" />
|
||||
<MoonIcon v-if="theme.bg == 'togglethemeDarkBlue'" :class="theme.bg" height="22" />
|
||||
</v-btn>
|
||||
</v-sheet>
|
||||
</v-item>
|
||||
</div>
|
||||
</v-item-group>
|
||||
</div>
|
||||
</template>
|
||||
120
components/layout/full/vertical-header/VerticalHeader.vue
Normal file
120
components/layout/full/vertical-header/VerticalHeader.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useCustomizerStore } from '~/store/customizer';
|
||||
// import { useEcomStore } from '@/stores/apps/eCommerce';
|
||||
// import LanguageDD from './LanguageDD.vue';
|
||||
import NotificationDD from './NotificationDD.vue';
|
||||
import ProfileDD from './ProfileDD.vue';
|
||||
import Searchbar from './Searchbar.vue';
|
||||
import RightMobileSidebar from './RightMobileSidebar.vue';
|
||||
import Navigations from './Navigations.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import Logo from '../logo/Logo.vue';
|
||||
import ThemeToggler from './ThemeToggler.vue';
|
||||
const customizer = useCustomizerStore();
|
||||
const showSearch = ref(false);
|
||||
const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
|
||||
function searchbox() {
|
||||
showSearch.value = !showSearch.value;
|
||||
}
|
||||
watch(priority, (newPriority) => {
|
||||
priority.value = newPriority;
|
||||
});
|
||||
|
||||
// count items
|
||||
// const store = useEcomStore();
|
||||
// const getCart = computed(() => {
|
||||
// return store.cart;
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app-bar elevation="0" :priority="priority" height="70" id="top" class="main-head">
|
||||
<v-btn
|
||||
class="hidden-lg-and-up custom-hover-primary"
|
||||
size="small"
|
||||
variant="text"
|
||||
color="primary"
|
||||
icon
|
||||
@click.stop="customizer.SET_SIDEBAR_DRAWER"
|
||||
>
|
||||
<Icon icon="solar:hamburger-menu-line-duotone" height="22" />
|
||||
</v-btn>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Search part -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<Searchbar />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mega menu -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<Navigations />
|
||||
</div>
|
||||
|
||||
<v-spacer class="hidden-sm-and-down" />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mobile Logo -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-md-and-up">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
|
||||
<ThemeToggler />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- translate -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<LanguageDD />
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- ShoppingCart -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- <v-btn icon class="custom-hover-primary hidden-sm-and-down" size="small" variant="text" color="primary" to="/ecommerce/checkout">
|
||||
<v-badge color="error" :content="getCart?.length">
|
||||
<Icon icon="solar:cart-large-2-outline" height="22" />
|
||||
</v-badge>
|
||||
</v-btn> -->
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Notification -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<NotificationDD />
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- User Profile -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<ProfileDD />
|
||||
</div>
|
||||
|
||||
<!----Mobile ----->
|
||||
<v-menu :close-on-content-click="true" class="mobile_popup">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="hidden-md-and-up custom-hover-primary" color="primary" variant="text" v-bind="props" size="small">
|
||||
<Icon icon="solar:menu-dots-bold-duotone" height="22" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="lg" elevation="10" class="mt-4 dropdown-box px-4 py-3">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<RightMobileSidebar />
|
||||
<!-- <LanguageDD /> -->
|
||||
<!-- <v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
|
||||
<v-badge color="primary" :content="getCart?.length" offset-x="-4" offset-y="-6">
|
||||
<Icon icon="solar:cart-large-2-outline" height="22" />
|
||||
</v-badge>
|
||||
</v-btn> -->
|
||||
<NotificationDD />
|
||||
<ProfileDD />
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-0">
|
||||
<!---Single Item-->
|
||||
<v-list-item
|
||||
:href="item.external ? item.to : undefined"
|
||||
:to="!item.external ? item.to : undefined"
|
||||
rounded="lg"
|
||||
class=""
|
||||
color=""
|
||||
:ripple="false"
|
||||
:disabled="item.disabled"
|
||||
:target="item.external === true ? '_blank' : undefined"
|
||||
>
|
||||
<!---If icon-->
|
||||
<template v-slot:prepend>
|
||||
<Icon
|
||||
:icon="'solar:' + item.icon"
|
||||
height="18"
|
||||
width="18"
|
||||
:level="level"
|
||||
class="dot"
|
||||
:class="'text-' + item.BgColor"
|
||||
/>
|
||||
</template>
|
||||
<v-list-item-title class="text-body-1 text-darkText">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle
|
||||
v-if="item.subCaption"
|
||||
class="text-caption mt-n1 hide-menu"
|
||||
>
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
|
||||
<!---If any chip or label-->
|
||||
<template v-slot:append v-if="item.chip">
|
||||
<v-chip
|
||||
color="secondary"
|
||||
class="font-weight-bold"
|
||||
size="x-small"
|
||||
rounded="sm"
|
||||
>
|
||||
{{ item.chip }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
23
components/layout/full/vertical-sidebar/Icon.vue
Normal file
23
components/layout/full/vertical-sidebar/Icon.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="level > 0">
|
||||
<component
|
||||
:is="item"
|
||||
size="5"
|
||||
fill="currentColor"
|
||||
stroke-width="1.5"
|
||||
class="iconClass"
|
||||
></component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="item"
|
||||
size="20"
|
||||
stroke-width="1.5"
|
||||
class="iconClass"
|
||||
></component>
|
||||
</template>
|
||||
</template>
|
||||
50
components/layout/full/vertical-sidebar/MinIconItems.ts
Normal file
50
components/layout/full/vertical-sidebar/MinIconItems.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
|
||||
export interface minisidebar {
|
||||
icon?: string;
|
||||
id?:number;
|
||||
tooltip?:string
|
||||
}
|
||||
const MiniSideIcons: minisidebar[] = [
|
||||
{
|
||||
icon: 'layers-line-duotone',
|
||||
tooltip:'Dashboards',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
icon: 'notes-line-duotone',
|
||||
tooltip:'Pages',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
icon: 'palette-round-line-duotone',
|
||||
tooltip:'Forms',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
icon:'align-vertical-spacing-broken',
|
||||
tooltip:'Tables',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
icon:'chart-line-duotone',
|
||||
tooltip:'Charts',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
icon:'widget-6-line-duotone',
|
||||
tooltip:'UI Components',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
icon:'lock-keyhole-line-duotone',
|
||||
tooltip:'Authentication Pages',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
icon:'mirror-left-line-duotone',
|
||||
tooltip:'Others',
|
||||
id: 8
|
||||
}
|
||||
]
|
||||
|
||||
export default MiniSideIcons;
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import NavItem from '../NavItem/NavItem.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Item Childern -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-list-group no-action>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Dropdown -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props" :value="item.title" rounded>
|
||||
<!---Icon -->
|
||||
<template v-slot:prepend>
|
||||
<!-- <span class="dot"></span> -->
|
||||
<Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor" />
|
||||
</template>
|
||||
<!---Title -->
|
||||
<v-list-item-title class="mr-auto">{{ $t(item.title) }}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Sub Item-->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<template v-for="(subitem, i) in item.children" :key="i" v-if="item.children">
|
||||
<NavCollapse :item="subitem" v-if="subitem.children" :level="level + 1" />
|
||||
<NavItem :item="subitem" :level="level + 1" v-else></NavItem>
|
||||
</template>
|
||||
</v-list-group>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---End Item Sub Header -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
const props = defineProps({ item: Object });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-list-subheader
|
||||
class="smallCap text-uppercase text-subtitle-2 mt-3 font-weight-bold d-flex align-items-center"
|
||||
>
|
||||
<span class="mini-icon"
|
||||
><DotsIcon size="16" stroke-width="1.5" class="iconClass"
|
||||
/></span>
|
||||
<span class="mini-text">{{ $t(props.item.header) }}</span>
|
||||
</v-list-subheader>
|
||||
</template>
|
||||
49
components/layout/full/vertical-sidebar/NavItem/NavItem.vue
Normal file
49
components/layout/full/vertical-sidebar/NavItem/NavItem.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { Icon } from "@iconify/vue";
|
||||
const props = defineProps({ item: Object, level: Number });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!---Single Item-->
|
||||
|
||||
<v-list-item
|
||||
:to="item.type === 'external' ? '' : item.to"
|
||||
:href="item.type === 'external' ? item.to : ''"
|
||||
rounded
|
||||
:disabled="item.disabled"
|
||||
:target="item.type === 'external' ? '_blank' : ''"
|
||||
v-scroll-to="{ el: '#top' }"
|
||||
>
|
||||
<!---If icon-->
|
||||
<template v-slot:prepend>
|
||||
<Icon
|
||||
:icon="'solar:' + item.icon"
|
||||
height="18"
|
||||
width="18"
|
||||
:level="level"
|
||||
class="dot"
|
||||
:class="'text-' + item.BgColor"
|
||||
/>
|
||||
</template>
|
||||
<v-list-item-title>{{ $t(item.title) }}</v-list-item-title>
|
||||
<!---If Caption-->
|
||||
<v-list-item-subtitle
|
||||
v-if="item.subCaption"
|
||||
class="text-caption mt-n1 hide-menu"
|
||||
>
|
||||
{{ item.subCaption }}
|
||||
</v-list-item-subtitle>
|
||||
<!---If any chip or label-->
|
||||
<template v-slot:append v-if="item.chip">
|
||||
<v-chip
|
||||
:color="item.chipColor"
|
||||
:class="'sidebarchip hide-menu bg-' + item.chipBgColor"
|
||||
:size="item.chipIcon ? 'small' : 'small'"
|
||||
:variant="item.chipVariant"
|
||||
:prepend-icon="item.chipIcon"
|
||||
>
|
||||
{{ item.chip }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
134
components/layout/full/vertical-sidebar/VerticalSidebar.vue
Normal file
134
components/layout/full/vertical-sidebar/VerticalSidebar.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import { useCustomizerStore } from '~/store/customizer';
|
||||
import sidebarItems from './sidebarItem';
|
||||
import Logo from '../logo/Logo.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
// MiniSidebar Icons
|
||||
import MiniSideIcons from './MinIconItems';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const findTitleByPath = (items: any, path: any) => {
|
||||
let title = '';
|
||||
|
||||
for (const item of items) {
|
||||
if (item.to === path) {
|
||||
title = item.id;
|
||||
break;
|
||||
} else if (item.children) {
|
||||
for (const child of item.children) {
|
||||
if (child.to === path) {
|
||||
title = item.id;
|
||||
break;
|
||||
} else if (child.children) {
|
||||
for (const grandChild of child.children) {
|
||||
if (grandChild.to === path) {
|
||||
title = item.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return title;
|
||||
};
|
||||
const foundId = findTitleByPath(sidebarItems, route.path);
|
||||
const getCurrent = foundId ? foundId : 1;
|
||||
const currentMenu = ref<any>(getCurrent);
|
||||
function showData(data: any) {
|
||||
currentMenu.value = data;
|
||||
//customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
|
||||
}
|
||||
|
||||
// MiniSidebar Icons End
|
||||
const customizer = useCustomizerStore();
|
||||
const sidebarMenu = shallowRef(sidebarItems);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<!-- Minisidebar Icons -->
|
||||
<v-navigation-drawer class="bg-light" v-model="customizer.Sidebar_drawer" top="0" rail rail-width="80">
|
||||
<perfect-scrollbar class="miniscrollnavbar">
|
||||
<v-list-item class="px-0">
|
||||
<!-- Toggle Sidebar Button -->
|
||||
<div class="px-4 mb-3">
|
||||
<v-btn
|
||||
class="hidden-md-and-down my-2"
|
||||
icon
|
||||
rounded="md"
|
||||
variant="plain"
|
||||
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
|
||||
>
|
||||
<Icon icon="solar:hamburger-menu-line-duotone" height="25" />
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="miniicons mt-lg-0 mt-4">
|
||||
<!-- MiniSidebar Icons -->
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class="miniicons-list px-4" v-for="menu in MiniSideIcons" :key="menu.icon">
|
||||
<v-btn
|
||||
rounded="md"
|
||||
flat
|
||||
icon
|
||||
variant="plain"
|
||||
@click="showData(menu.id)"
|
||||
:class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
|
||||
>
|
||||
<Icon :icon="'solar:' + menu.icon" width="25" />
|
||||
<!-- Tooltip on Hover -->
|
||||
<v-tooltip activator="parent" location="end" class="custom-tooltip">{{ menu.tooltip }}</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</perfect-scrollbar>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- LeftSidebar Items -->
|
||||
<v-navigation-drawer
|
||||
v-model="customizer.Sidebar_drawer"
|
||||
elevation="0"
|
||||
rail-width="1"
|
||||
app
|
||||
top="0"
|
||||
class="leftSidebar"
|
||||
:rail="customizer.mini_sidebar"
|
||||
width="240"
|
||||
>
|
||||
<!---Logo part -->
|
||||
<div class="pa-4 pb-0">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!---Navigation -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<perfect-scrollbar class="scrollnavbar">
|
||||
<div class="px-4 py-0 sidebar-menus">
|
||||
<v-list class="py-1">
|
||||
<template v-for="(item, i) in sidebarMenu">
|
||||
<template v-if="currentMenu == item.id">
|
||||
<!---Item Sub Header -->
|
||||
<LazyLayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
|
||||
<!---If Has Child -->
|
||||
<template v-for="sItem in item.children">
|
||||
<LazyLayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="sItem" :level="0" v-if="sItem.children" />
|
||||
<LazyLayoutFullVerticalSidebarNavItem :item="sItem" class="leftPadding" v-else />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</v-list>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
709
components/layout/full/vertical-sidebar/sidebarItem.ts
Normal file
709
components/layout/full/vertical-sidebar/sidebarItem.ts
Normal file
@@ -0,0 +1,709 @@
|
||||
export interface menu {
|
||||
header?: string;
|
||||
title?: string;
|
||||
icon?: any;
|
||||
id?: number;
|
||||
to?: string;
|
||||
chip?: string;
|
||||
BgColor?: string;
|
||||
chipBgColor?: string;
|
||||
chipColor?: string;
|
||||
chipVariant?: string;
|
||||
chipIcon?: string;
|
||||
children?: menu[];
|
||||
disabled?: boolean;
|
||||
type?: string;
|
||||
subCaption?: string;
|
||||
}
|
||||
const sidebarItem: menu[] = [
|
||||
{
|
||||
header: 'dashboards',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: 'Dashboard1',
|
||||
icon: 'widget-add-line-duotone',
|
||||
to: '/dashboards/dashboard1'
|
||||
},
|
||||
{
|
||||
title: 'Dashboard2',
|
||||
icon: 'chart-line-duotone',
|
||||
to: '/dashboards/dashboard2'
|
||||
},
|
||||
{
|
||||
title: 'Dashboard3',
|
||||
icon: 'screencast-2-line-duotone',
|
||||
to: '/dashboards/dashboard3'
|
||||
},
|
||||
{
|
||||
title: 'Front Pages',
|
||||
icon: 'home-angle-linear',
|
||||
to: '/',
|
||||
children: [
|
||||
{
|
||||
title: 'Homepage',
|
||||
to: '/front-page/homepage'
|
||||
},
|
||||
{
|
||||
title: 'About Us',
|
||||
to: '/front-page/about-us'
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
to: '/front-page/blog/posts'
|
||||
},
|
||||
{
|
||||
title: 'Blog Details',
|
||||
to: '/front-page/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
|
||||
},
|
||||
{
|
||||
title: 'Contact Us',
|
||||
to: '/front-page/contact-us'
|
||||
},
|
||||
{
|
||||
title: 'Portfolio',
|
||||
to: '/front-page/portfolio'
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
to: '/front-page/pricing'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'apps',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: 'ECommerce',
|
||||
icon: 'cart-3-line-duotone',
|
||||
to: '/ecommerce/',
|
||||
children: [
|
||||
{
|
||||
title: 'Shop',
|
||||
to: '/ecommerce/products'
|
||||
},
|
||||
{
|
||||
title: 'Detail',
|
||||
to: '/ecommerce/product/detail/1'
|
||||
},
|
||||
{
|
||||
title: 'List',
|
||||
to: '/ecommerce/productlist'
|
||||
},
|
||||
{
|
||||
title: 'Checkout',
|
||||
to: '/ecommerce/checkout'
|
||||
},
|
||||
{
|
||||
title: 'Add Product',
|
||||
to: '/ecommerce/add-product'
|
||||
},
|
||||
{
|
||||
title: 'Edit Product',
|
||||
to: '/ecommerce/edit-product'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
icon: 'widget-4-line-duotone',
|
||||
to: '/',
|
||||
children: [
|
||||
{
|
||||
title: 'Blog Posts',
|
||||
to: '/apps/blog/posts'
|
||||
},
|
||||
{
|
||||
title: 'Blog Details',
|
||||
to: '/apps/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'User Profile',
|
||||
icon: 'shield-user-line-duotone',
|
||||
to: '/',
|
||||
children: [
|
||||
{
|
||||
title: 'Profile',
|
||||
to: '/apps/user/profile'
|
||||
},
|
||||
{
|
||||
title: 'Followers',
|
||||
to: '/apps/user/profile/followers'
|
||||
},
|
||||
{
|
||||
title: 'Friends',
|
||||
to: '/apps/user/profile/friends'
|
||||
},
|
||||
{
|
||||
title: 'Gallery',
|
||||
to: '/apps/user/profile/gallery'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Invoice',
|
||||
icon: 'bill-check-outline',
|
||||
to: '/',
|
||||
children: [
|
||||
{
|
||||
title: 'List',
|
||||
to: '/apps/invoice'
|
||||
},
|
||||
{
|
||||
title: 'Details',
|
||||
to: '/apps/invoice/details/102'
|
||||
},
|
||||
{
|
||||
title: 'Create',
|
||||
to: '/apps/invoice/create'
|
||||
},
|
||||
{
|
||||
title: 'Edit',
|
||||
to: '/apps/invoice/edit/102'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Calendar',
|
||||
icon: 'calendar-mark-line-duotone',
|
||||
to: '/apps/calendar'
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
icon: 'letter-linear',
|
||||
to: '/apps/email'
|
||||
},
|
||||
{
|
||||
title: 'Chats',
|
||||
icon: 'chat-round-line-line-duotone',
|
||||
to: '/apps/chats'
|
||||
},
|
||||
{
|
||||
title: 'Notes',
|
||||
icon: 'document-text-line-duotone',
|
||||
to: '/apps/notes'
|
||||
},
|
||||
{
|
||||
title: 'Kanban',
|
||||
icon: 'airbuds-case-minimalistic-line-duotone',
|
||||
to: '/apps/kanban'
|
||||
},
|
||||
{
|
||||
title: 'Contact',
|
||||
icon: 'iphone-line-duotone',
|
||||
to: '/apps/contacts'
|
||||
},
|
||||
{
|
||||
title: 'Tickets',
|
||||
icon: 'ticker-star-outline',
|
||||
to: '/apps/tickets'
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'pages',
|
||||
id: 2,
|
||||
children: [
|
||||
|
||||
{
|
||||
title: 'Account Setting',
|
||||
icon: 'settings-minimalistic-line-duotone',
|
||||
to: '/pages/account-settings'
|
||||
},
|
||||
{
|
||||
title: 'Banners Widgets',
|
||||
icon: 'align-vertical-spacing-line-duotone',
|
||||
to: '/widgets/banners'
|
||||
},
|
||||
{
|
||||
title: 'Cards Widgets',
|
||||
icon: 'cardholder-line-duotone',
|
||||
to: '/widgets/cards'
|
||||
},
|
||||
{
|
||||
title: 'Charts Widgets',
|
||||
icon: 'chart-square-line-duotone',
|
||||
to: '/widgets/charts'
|
||||
},
|
||||
{
|
||||
title: 'FAQ',
|
||||
icon: 'question-circle-line-duotone',
|
||||
to: '/pages/faq'
|
||||
},
|
||||
{
|
||||
title: 'Gallery Lightbox',
|
||||
icon: 'gallery-bold-duotone',
|
||||
to: '/pages/gallery-lightbox',
|
||||
},
|
||||
{
|
||||
title: 'Landing Page',
|
||||
icon: 'passport-line-duotone',
|
||||
to: '/'
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
icon: 'dollar-line-duotone',
|
||||
to: '/pages/pricing'
|
||||
},
|
||||
{
|
||||
title: 'Search Results',
|
||||
icon: 'card-search-line-duotone',
|
||||
to: '/pages/search-results'
|
||||
},
|
||||
{
|
||||
title: 'Social Contacts',
|
||||
icon: 'chat-round-like-linear',
|
||||
to: '/pages/social-media-contacts'
|
||||
},
|
||||
{
|
||||
title: 'Treeview',
|
||||
icon: 'transmission-line-duotone',
|
||||
to: '/pages/treeview'
|
||||
},
|
||||
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'icons',
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
title: 'Tabler Icons',
|
||||
icon: 'sticker-smile-circle-2-line-duotone',
|
||||
to: '/icons/tabler'
|
||||
},
|
||||
{
|
||||
title: 'Solar Icons',
|
||||
icon: 'sticker-smile-circle-2-line-duotone',
|
||||
to: '/icons/solar'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'Forms',
|
||||
id: 3,
|
||||
children: [
|
||||
{
|
||||
title: 'Form Elements',
|
||||
icon: 'text-selection-line-duotone',
|
||||
to: '/components/',
|
||||
children: [
|
||||
{
|
||||
title: 'Autocomplete',
|
||||
to: '/forms/form-elements/autocomplete'
|
||||
},
|
||||
{
|
||||
title: 'Combobox',
|
||||
to: '/forms/form-elements/combobox'
|
||||
},
|
||||
{
|
||||
title: 'Button',
|
||||
to: '/forms/form-elements/button'
|
||||
},
|
||||
{
|
||||
title: 'Checkbox',
|
||||
to: '/forms/form-elements/checkbox'
|
||||
},
|
||||
{
|
||||
title: 'Custom Inputs',
|
||||
to: '/forms/form-elements/custominputs'
|
||||
},
|
||||
{
|
||||
title: 'File Inputs',
|
||||
to: '/forms/form-elements/fileinputs'
|
||||
},
|
||||
{
|
||||
title: 'Radio',
|
||||
to: '/forms/form-elements/radio'
|
||||
},
|
||||
{
|
||||
title: 'Date Time',
|
||||
to: '/forms/form-elements/date-time'
|
||||
},
|
||||
{
|
||||
title: 'Select',
|
||||
to: '/forms/form-elements/select'
|
||||
},
|
||||
{
|
||||
title: 'Slider',
|
||||
to: '/forms/form-elements/slider'
|
||||
},
|
||||
{
|
||||
title: 'Switch',
|
||||
to: '/forms/form-elements/switch'
|
||||
},
|
||||
{
|
||||
title: 'Time Picker',
|
||||
to: '/forms/form-elements/time-picker'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Stepper',
|
||||
to: '/forms/form-elements/stepper'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Form Layout',
|
||||
icon: 'layers-minimalistic-outline',
|
||||
to: '/forms/form-layouts'
|
||||
},
|
||||
{
|
||||
title: 'Form Horizontal',
|
||||
icon: 'password-minimalistic-input-line-duotone',
|
||||
to: '/forms/form-horizontal'
|
||||
},
|
||||
{
|
||||
title: 'Form Vertical',
|
||||
icon: 'slider-vertical-line-duotone',
|
||||
to: '/forms/form-vertical'
|
||||
},
|
||||
{
|
||||
title: 'Form Custom',
|
||||
icon: 'clapperboard-play-outline',
|
||||
to: '/forms/form-custom'
|
||||
},
|
||||
{
|
||||
title: 'Form Validation',
|
||||
icon: 'soundwave-square-line-duotone',
|
||||
to: '/forms/form-validation'
|
||||
},
|
||||
{
|
||||
title: 'Editor',
|
||||
icon: 'clapperboard-edit-line-duotone',
|
||||
to: '/forms/editor'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'tables',
|
||||
id: 4,
|
||||
children: [
|
||||
{
|
||||
title: 'Basic Table',
|
||||
icon: 'tablet-line-duotone',
|
||||
to: '/tables/basic'
|
||||
},
|
||||
{
|
||||
title: 'Dark Table',
|
||||
icon: 'bedside-table-4-outline',
|
||||
to: '/tables/dark'
|
||||
},
|
||||
{
|
||||
title: 'Density Table',
|
||||
icon: 'bedside-table-3-linear',
|
||||
to: '/tables/density'
|
||||
},
|
||||
{
|
||||
title: 'Fixed Header Table',
|
||||
icon: 'archive-up-minimlistic-broken',
|
||||
to: '/tables/fixed-header'
|
||||
},
|
||||
{
|
||||
title: 'Height Table',
|
||||
icon: 'archive-down-minimlistic-broken',
|
||||
to: '/tables/height'
|
||||
},
|
||||
{
|
||||
title: 'Editable Table',
|
||||
icon: 'document-add-linear',
|
||||
to: '/tables/editable'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'datatables',
|
||||
id: 4,
|
||||
children: [
|
||||
{
|
||||
title: 'Basic Table',
|
||||
icon: 'database-outline',
|
||||
to: '/tables/datatables/basic'
|
||||
},
|
||||
{
|
||||
title: 'Header Table',
|
||||
icon: 'folder-open-broken',
|
||||
to: '/tables/datatables/header'
|
||||
},
|
||||
{
|
||||
title: 'Selection Table',
|
||||
icon: 'chart-square-broken',
|
||||
to: '/tables/datatables/selection'
|
||||
},
|
||||
{
|
||||
title: 'Sorting Table',
|
||||
icon: 'card-send-line-duotone',
|
||||
to: '/tables/datatables/sorting'
|
||||
},
|
||||
{
|
||||
title: 'Pagination Table',
|
||||
icon: 'tag-horizontal-broken',
|
||||
to: '/tables/datatables/pagination'
|
||||
},
|
||||
{
|
||||
title: 'Filtering Table',
|
||||
icon: 'tuning-square-2-line-duotone',
|
||||
to: '/tables/datatables/filtering'
|
||||
},
|
||||
{
|
||||
title: 'Grouping Table',
|
||||
icon: 'tuning-square-2-line-duotone',
|
||||
to: '/tables/datatables/grouping'
|
||||
},
|
||||
{
|
||||
title: 'Table Slots',
|
||||
icon: 'closet-line-duotone',
|
||||
to: '/tables/datatables/slots'
|
||||
},
|
||||
{
|
||||
title: 'CRUD Table',
|
||||
icon: 'text-underline-cross-broken',
|
||||
to: '/tables/datatables/crudtable'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'Charts',
|
||||
id: 5,
|
||||
children: [
|
||||
{
|
||||
title: 'Line',
|
||||
icon: 'chat-square-2-outline',
|
||||
to: '/charts/line-chart'
|
||||
},
|
||||
{
|
||||
title: 'Gredient',
|
||||
icon: 'round-graph-linear',
|
||||
to: '/charts/gredient-chart'
|
||||
},
|
||||
{
|
||||
title: 'Area',
|
||||
icon: 'graph-up-linear',
|
||||
to: '/charts/area-chart'
|
||||
},
|
||||
{
|
||||
title: 'Candlestick',
|
||||
icon: 'chandelier-broken',
|
||||
to: '/charts/candlestick-chart'
|
||||
},
|
||||
{
|
||||
title: 'Column',
|
||||
icon: 'colour-tuneing-broken',
|
||||
to: '/charts/column-chart'
|
||||
},
|
||||
{
|
||||
title: 'Doughnut & Pie',
|
||||
icon: 'pie-chart-2-linear',
|
||||
to: '/charts/doughnut-pie-chart'
|
||||
},
|
||||
{
|
||||
title: 'Radialbar & Radar',
|
||||
icon: 'radar-2-outline',
|
||||
to: '/charts/radialbar-chart'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'UI',
|
||||
id: 6,
|
||||
children: [
|
||||
{
|
||||
title: 'Alert',
|
||||
icon: 'info-circle-linear',
|
||||
to: '/ui-components/alert'
|
||||
},
|
||||
{
|
||||
title: 'Accordion',
|
||||
icon: 'waterdrops-line-duotone',
|
||||
to: '/ui-components/accordion'
|
||||
},
|
||||
{
|
||||
title: 'Avatar',
|
||||
icon: 'expressionless-circle-outline',
|
||||
to: '/ui-components/avatar'
|
||||
},
|
||||
{
|
||||
title: 'Chip',
|
||||
icon: 'tag-horizontal-line-duotone',
|
||||
to: '/ui-components/chip'
|
||||
},
|
||||
{
|
||||
title: 'Dialog',
|
||||
icon: 'bolt-line-duotone',
|
||||
to: '/ui-components/dialogs'
|
||||
},
|
||||
{
|
||||
title: 'List',
|
||||
icon: 'checklist-bold-duotone',
|
||||
to: '/ui-components/list'
|
||||
},
|
||||
{
|
||||
title: 'Menus',
|
||||
icon: 'menu-dots-circle-outline',
|
||||
to: '/ui-components/menus'
|
||||
},
|
||||
{
|
||||
title: 'Rating',
|
||||
icon: 'shield-star-outline',
|
||||
to: '/ui-components/rating'
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
icon: 'box-minimalistic-line-duotone',
|
||||
to: '/ui-components/tabs'
|
||||
},
|
||||
{
|
||||
title: 'Tooltip',
|
||||
icon: 'transmission-square-outline',
|
||||
to: '/ui-components/tooltip'
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
icon: 'text-circle-linear',
|
||||
to: '/ui-components/typography'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'Auth',
|
||||
id: 7,
|
||||
children: [
|
||||
{
|
||||
title: 'Error',
|
||||
icon: 'bug-minimalistic-line-duotone',
|
||||
to: '/auth/404'
|
||||
},
|
||||
{
|
||||
title: 'Side Login',
|
||||
icon: 'login-3-line-duotone',
|
||||
to: '/auth/login'
|
||||
},
|
||||
{
|
||||
title: 'Boxed Login',
|
||||
icon: 'login-3-line-duotone',
|
||||
to: '/auth/login2'
|
||||
},
|
||||
{
|
||||
title: 'Side Register',
|
||||
icon: 'user-plus-rounded-line-duotone',
|
||||
to: '/auth/register'
|
||||
},
|
||||
{
|
||||
title: 'Boxed Register',
|
||||
icon: 'user-plus-rounded-line-duotone',
|
||||
to: '/auth/register2'
|
||||
},
|
||||
{
|
||||
title: 'Side Forgot Pwd',
|
||||
icon: 'password-outline',
|
||||
to: '/auth/forgot-password'
|
||||
},
|
||||
{
|
||||
title: 'Boxed Forgot Pwd',
|
||||
icon: 'password-outline',
|
||||
to: '/auth/forgot-password2'
|
||||
},
|
||||
{
|
||||
title: 'Side Two Steps',
|
||||
icon: 'siderbar-line-duotone',
|
||||
to: '/auth/two-step'
|
||||
},
|
||||
{
|
||||
title: 'Boxed Two Steps',
|
||||
icon: 'siderbar-line-duotone',
|
||||
to: '/auth/two-step2'
|
||||
},
|
||||
{
|
||||
title: 'Maintenance',
|
||||
icon: 'settings-line-duotone',
|
||||
to: '/auth/maintenance'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Multi Level',
|
||||
id: 8,
|
||||
children: [
|
||||
{
|
||||
title: 'Menu Level',
|
||||
icon: 'align-left-line-duotone',
|
||||
to: '#',
|
||||
id: 8,
|
||||
children: [
|
||||
{
|
||||
title: 'Level 1',
|
||||
to: '/level1'
|
||||
},
|
||||
{
|
||||
title: 'Level 1 ',
|
||||
to: '/2level',
|
||||
children: [
|
||||
{
|
||||
title: 'Level 2',
|
||||
to: '/barry'
|
||||
},
|
||||
{
|
||||
title: 'Level 2',
|
||||
to: '/2.2level',
|
||||
children: [
|
||||
{
|
||||
title: 'Level 3',
|
||||
to: '/barry'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'More Options',
|
||||
id: 8,
|
||||
children: [
|
||||
{
|
||||
title: 'Applications',
|
||||
icon: 'check-circle-bold',
|
||||
BgColor: 'primary'
|
||||
},
|
||||
{
|
||||
title: 'Form Options',
|
||||
icon: 'check-circle-bold',
|
||||
BgColor: 'secondary'
|
||||
},
|
||||
{
|
||||
title: 'Table Variations',
|
||||
icon: 'check-circle-bold',
|
||||
BgColor: 'error'
|
||||
},
|
||||
{
|
||||
title: 'Charts Selection',
|
||||
icon: 'check-circle-bold',
|
||||
BgColor: 'warning'
|
||||
},
|
||||
{
|
||||
title: 'Widgets',
|
||||
icon: 'check-circle-bold',
|
||||
BgColor: 'success'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default sidebarItem;
|
||||
24
components/shared/CardHeaderFooter.vue
Normal file
24
components/shared/CardHeaderFooter.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<slot name="footer" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
17
components/shared/UiChildCard.vue
Normal file
17
components/shared/UiChildCard.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card variant="outlined">
|
||||
<v-card-item class="py-4 px-6">
|
||||
<v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
21
components/shared/UiParentCard.vue
Normal file
21
components/shared/UiParentCard.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Parent Card||=============================== //
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
|
||||
<slot name="action"></slot>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
22
components/shared/UiParentCardLogo.vue
Normal file
22
components/shared/UiParentCardLogo.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from "@/layouts/full/logo/Logo.vue";
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Parent Card||=============================== //
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5"><Logo/></v-card-title>
|
||||
<!-- <template v-slot:append> -->
|
||||
<slot name="action"></slot>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
19
components/shared/UiTableCard.vue
Normal file
19
components/shared/UiTableCard.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Card -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<slot />
|
||||
</v-card>
|
||||
</template>
|
||||
9
components/shared/UiTextfieldPrimary.vue
Normal file
9
components/shared/UiTextfieldPrimary.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// const props = defineProps({
|
||||
// title: String,
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-text-field color="primary"><slot /></v-text-field>
|
||||
</template>
|
||||
20
components/shared/WidgetCard.vue
Normal file
20
components/shared/WidgetCard.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
23
components/shared/WidgetCardv2.vue
Normal file
23
components/shared/WidgetCardv2.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
hideaction: Boolean
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<!-- Card with Header & Footer -->
|
||||
<!-- -------------------------------------------------------------------- -->
|
||||
<v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-18">{{ title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<slot />
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions :class="`${hideaction ? 'd-none' : ''}`">
|
||||
<slot name="footer" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
15
components/style-components/shadow/Shadow.vue
Normal file
15
components/style-components/shadow/Shadow.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
</script>
|
||||
<template>
|
||||
<UiParentCard title="Shadow">
|
||||
<v-row justify="center" class="mb-5 mt-1 px-8 px-3">
|
||||
<v-col v-for="(m, n) in 25" :key="n" cols="6" sm="auto">
|
||||
<v-card
|
||||
:class="['d-flex justify-center align-center bg-primary py-sm-4 py-3 px-sm-8 px-4', `elevation-${n}`]">
|
||||
<div>{{ n }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</template>
|
||||
25
components/style-components/typography/DefaultText.vue
Normal file
25
components/style-components/typography/DefaultText.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const colortext = ref(
|
||||
[
|
||||
['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
|
||||
['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
|
||||
['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
|
||||
['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
|
||||
['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
|
||||
['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
|
||||
<v-card elevation="10" >
|
||||
<div class="py-6 px-4">
|
||||
<h5 :class="[cls1, '']">{{ name1 }} </h5>
|
||||
<div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
49
components/style-components/typography/Heading.vue
Normal file
49
components/style-components/typography/Heading.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const headings = ref([
|
||||
['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
|
||||
['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
|
||||
['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
|
||||
['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
|
||||
['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
|
||||
['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
|
||||
]);
|
||||
|
||||
const subtext = ref(
|
||||
[
|
||||
['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
|
||||
['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
|
||||
['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
|
||||
['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
|
||||
['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
|
||||
['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
|
||||
<div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls, '']">{{ name }}</div>
|
||||
<div class="text-body-1">
|
||||
<div class="text-muted">{{ val }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
|
||||
<div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
|
||||
<v-card elevation="10">
|
||||
<div class="py-6 px-4">
|
||||
<div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
|
||||
<div class="text-body-1 ">
|
||||
<div class="text-muted">{{ prop }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
6
components/ui-components/alert/Basic.vue
Normal file
6
components/ui-components/alert/Basic.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<v-alert class="mb-3 " color="error" variant="tonal">This is an error alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3 " color="warning" variant="tonal">This is a warning alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3 " color="info" variant="tonal">This is an info alert — check it out!</v-alert>
|
||||
<v-alert color="success" variant="tonal">This is a success alert — check it out!</v-alert>
|
||||
</template>
|
||||
30
components/ui-components/alert/Closable.vue
Normal file
30
components/ui-components/alert/Closable.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const alert = ref(true);
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<v-alert
|
||||
v-model="alert"
|
||||
border="start"
|
||||
variant="tonal"
|
||||
closable
|
||||
close-label="Close Alert"
|
||||
color="primary"
|
||||
title="Closable Alert"
|
||||
>
|
||||
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
|
||||
|
||||
Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
|
||||
</v-alert>
|
||||
<div
|
||||
v-if="!alert"
|
||||
>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="alert = true" flat>
|
||||
Reset
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
8
components/ui-components/alert/Filled.vue
Normal file
8
components/ui-components/alert/Filled.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-alert class="mb-3" type="error">This is an error alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3" type="warning">This is a warning alert — check it out!</v-alert>
|
||||
<v-alert class="mb-3" type="info">This is an info alert — check it out!</v-alert>
|
||||
<v-alert type="success">This is a success alert — check it out!</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
10
components/ui-components/button/BaseButtons.vue
Normal file
10
components/ui-components/button/BaseButtons.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height d-flex justify-space-between">
|
||||
<v-btn >elevates (default)</v-btn>
|
||||
<v-btn variant="flat" color="primary">flat</v-btn>
|
||||
<v-btn variant="tonal" color="primary">tonal</v-btn>
|
||||
<v-btn variant="outlined" color="primary">outlined</v-btn>
|
||||
<v-btn variant="text" color="primary">text</v-btn>
|
||||
<v-btn variant="plain" color="primary">plain</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
12
components/ui-components/button/ColorsButtons.vue
Normal file
12
components/ui-components/button/ColorsButtons.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'error', 'warning','success']);
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex ga-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="flat">
|
||||
{{ btn }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
9
components/ui-components/button/IconColorSizes.vue
Normal file
9
components/ui-components/button/IconColorSizes.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="d-flex flex-wrap justify-center ga-3 align-center flex-column flex-sm-row fill-height">
|
||||
<v-btn color="primary" icon size="x-small" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="secondary" icon size="small" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="success" icon flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="error" icon size="large" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
<v-btn color="warning" icon size="x-large" flat><BellIcon stroke-width="1.5" /></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
11
components/ui-components/button/OutlinedButtons.vue
Normal file
11
components/ui-components/button/OutlinedButtons.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
<template>
|
||||
<div class="d-flex ga-3 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn color="primary" variant="outlined">primary</v-btn>
|
||||
<v-btn color="secondary" variant="outlined">secondary</v-btn>
|
||||
<v-btn variant="flat" disabled>
|
||||
Disabled
|
||||
</v-btn>
|
||||
<v-btn color="info" variant="outlined">link</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
23
components/ui-components/button/SizeButtons.vue
Normal file
23
components/ui-components/button/SizeButtons.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="d-flex gap-2 justify-space-around align-center flex-column flex-md-row fill-height">
|
||||
<v-btn size="x-small" color="primary" flat>
|
||||
Extra small
|
||||
</v-btn>
|
||||
|
||||
<v-btn size="small" color="primary" flat>
|
||||
Small
|
||||
</v-btn>
|
||||
|
||||
<v-btn color="primary" flat>
|
||||
Normal
|
||||
</v-btn>
|
||||
|
||||
<v-btn color="primary" size="large" flat>
|
||||
Large
|
||||
</v-btn>
|
||||
|
||||
<v-btn size="x-large" color="primary" flat>
|
||||
Extra large
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
12
components/ui-components/button/TextButtons.vue
Normal file
12
components/ui-components/button/TextButtons.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-wrap ga-3 my-2 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
|
||||
<v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="text">
|
||||
{{ btn }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
82
components/ui-components/cards/CardsContentWrap.vue
Normal file
82
components/ui-components/cards/CardsContentWrap.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import proimg1 from '/images/blog/blog-img1.jpg';
|
||||
|
||||
const messages = ref([
|
||||
{
|
||||
from: "You",
|
||||
message: `Sure, I'll see you later.`,
|
||||
time: "10:42am",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
from: "John Doe",
|
||||
message: "Yeah, sure. Does 1:00pm work?",
|
||||
time: "10:37am",
|
||||
color: "secondary",
|
||||
},
|
||||
{
|
||||
from: "You",
|
||||
message: "Did you still want to grab lunch today?",
|
||||
time: "9:47am",
|
||||
color: "success",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Content Wrap -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<div class="pa-3">
|
||||
<v-row justify="space-around">
|
||||
<v-card elevation="0">
|
||||
<v-img
|
||||
height="200"
|
||||
:src='proimg1'
|
||||
cover
|
||||
class="text-white"
|
||||
>
|
||||
<v-layout full-height>
|
||||
<v-app-bar
|
||||
density="comfortable"
|
||||
color="rgba(0, 0, 0, 0)"
|
||||
flat
|
||||
theme="dark"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-app-bar-nav-icon></v-app-bar-nav-icon>
|
||||
</template>
|
||||
|
||||
<v-toolbar-title class="text-subtitle-1"> Messages </v-toolbar-title>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-dots-vertical"></v-icon>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
<div class="font-weight-bold ml-1 mb-2">Today</div>
|
||||
|
||||
<v-timeline density="compact">
|
||||
<v-timeline-item
|
||||
v-for="message in messages"
|
||||
:key="message.time"
|
||||
:dot-color="message.color"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<div class="font-weight-normal">
|
||||
<strong>{{ message.from }}</strong> @{{ message.time }}
|
||||
</div>
|
||||
<div>{{ message.message }}</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
34
components/ui-components/cards/CardsMedia.vue
Normal file
34
components/ui-components/cards/CardsMedia.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import proimg2 from '/images/blog/blog-img3.jpg';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Media -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
|
||||
<v-card elevation="0">
|
||||
<v-img
|
||||
class="align-end text-white"
|
||||
height="200"
|
||||
:src='proimg2'
|
||||
cover
|
||||
>
|
||||
<v-card-title>Top 10 Australian beaches</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-subtitle class="pt-4"> Number 10 </v-card-subtitle>
|
||||
|
||||
<v-card-text>
|
||||
<div>Whitehaven Beach</div>
|
||||
|
||||
<div>Whitsunday Island, Whitsunday Islands</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="orange"> Share </v-btn>
|
||||
|
||||
<v-btn color="orange"> Explore </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
12
components/ui-components/cards/CardsProps.vue
Normal file
12
components/ui-components/cards/CardsProps.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Props -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card elevation="0"
|
||||
title="This is a title"
|
||||
subtitle="This is a subtitle"
|
||||
text="This is content"
|
||||
></v-card>
|
||||
</template>
|
||||
14
components/ui-components/cards/CardsSlots.vue
Normal file
14
components/ui-components/cards/CardsSlots.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Props -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card elevation="0">
|
||||
<template v-slot:title> This is a title </template>
|
||||
|
||||
<template v-slot:subtitle> This is a subtitle </template>
|
||||
|
||||
<template v-slot:text> This is content </template></v-card
|
||||
>
|
||||
</template>
|
||||
49
components/ui-components/cards/CardsTwitter.vue
Normal file
49
components/ui-components/cards/CardsTwitter.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Twiteter -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
color="#26c6da"
|
||||
theme="dark"
|
||||
max-width="450"
|
||||
prepend-icon="mdi-twitter"
|
||||
title="Twitter"
|
||||
elevation="0"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="x-large"></v-icon>
|
||||
</template>
|
||||
|
||||
<v-card-text class="text-h5 py-2">
|
||||
"Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-list-item class="w-100">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar
|
||||
color="grey-darken-3"
|
||||
image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
|
||||
></v-avatar>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>Evan You</v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>Vue Creator</v-list-item-subtitle>
|
||||
|
||||
<template v-slot:append>
|
||||
<div class="justify-self-end">
|
||||
<v-icon class="me-1" icon="mdi-heart"></v-icon>
|
||||
<span class="subheading me-2">256</span>
|
||||
<span class="me-1">·</span>
|
||||
<v-icon class="me-1" icon="mdi-share-variant"></v-icon>
|
||||
<span class="subheading">45</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
115
components/ui-components/cards/CardsWeather.vue
Normal file
115
components/ui-components/cards/CardsWeather.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const labels = ref({
|
||||
0: "SU",
|
||||
1: "MO",
|
||||
2: "TU",
|
||||
3: "WED",
|
||||
4: "TH",
|
||||
5: "FR",
|
||||
6: "SA",
|
||||
});
|
||||
|
||||
const expand = ref(false);
|
||||
const time = ref(0);
|
||||
|
||||
const forecast = ref([
|
||||
{ day: "Tuesday", icon: "mdi-white-balance-sunny", temp: "24\xB0/12\xB0" },
|
||||
{ day: "Wednesday", icon: "mdi-white-balance-sunny", temp: "22\xB0/14\xB0" },
|
||||
{ day: "Thursday", icon: "mdi-cloud", temp: "25\xB0/15\xB0" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Weather -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<v-card class="mx-auto" elevation="0">
|
||||
<v-card-item title="Florida">
|
||||
<template v-slot:subtitle>
|
||||
<v-icon
|
||||
icon="mdi-alert"
|
||||
size="18"
|
||||
color="error"
|
||||
class="me-1 pb-1"
|
||||
></v-icon>
|
||||
|
||||
Extreme Weather Alert
|
||||
</template>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-text class="py-0">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col
|
||||
class="text-h3"
|
||||
cols="6"
|
||||
>
|
||||
64°F
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" class="text-right">
|
||||
<v-icon
|
||||
color="error"
|
||||
icon="mdi-weather-hurricane"
|
||||
size="40"
|
||||
></v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<div class="d-flex py-3 justify-space-between">
|
||||
<v-list-item
|
||||
density="compact"
|
||||
prepend-icon="mdi-weather-windy"
|
||||
>
|
||||
<v-list-item-subtitle>123 km/h</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
density="compact"
|
||||
prepend-icon="mdi-weather-pouring"
|
||||
>
|
||||
<v-list-item-subtitle>48%</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-if="expand">
|
||||
<div class="py-2">
|
||||
<v-slider
|
||||
v-model="time"
|
||||
:max="6"
|
||||
:step="1"
|
||||
:ticks="labels"
|
||||
class="mx-4"
|
||||
color="primary"
|
||||
density="compact"
|
||||
hide-details
|
||||
show-ticks="always"
|
||||
thumb-size="10"
|
||||
></v-slider>
|
||||
</div>
|
||||
|
||||
<v-list class="bg-transparent">
|
||||
<v-list-item
|
||||
v-for="item in forecast"
|
||||
:key="item.day"
|
||||
:title="item.day"
|
||||
:append-icon="item.icon"
|
||||
:subtitle="item.temp"
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn @click="expand = !expand">
|
||||
{{ !expand ? 'Full Report' : 'Hide Report' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user