init
This commit is contained in:
yagnikvamja
70
javascript-version/pages/account-settings.vue
Normal file
70
javascript-version/pages/account-settings.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
import AccountSettingsAccount from '@/views/pages/account-settings/AccountSettingsAccount.vue'
|
||||
import AccountSettingsNotification from '@/views/pages/account-settings/AccountSettingsNotification.vue'
|
||||
import AccountSettingsSecurity from '@/views/pages/account-settings/AccountSettingsSecurity.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const activeTab = ref(route.params.tab)
|
||||
|
||||
// tabs
|
||||
const tabs = [
|
||||
{
|
||||
title: 'Account',
|
||||
icon: 'bx-user',
|
||||
tab: 'account',
|
||||
},
|
||||
{
|
||||
title: 'Security',
|
||||
icon: 'bx-lock-open',
|
||||
tab: 'security',
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: 'bx-bell',
|
||||
tab: 'notification',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
show-arrows
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabs"
|
||||
:key="item.icon"
|
||||
:value="item.tab"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
start
|
||||
:icon="item.icon"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="mt-5 disable-tab-transition"
|
||||
>
|
||||
<!-- Account -->
|
||||
<VWindowItem value="account">
|
||||
<AccountSettingsAccount />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Security -->
|
||||
<VWindowItem value="security">
|
||||
<AccountSettingsSecurity />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Notification -->
|
||||
<VWindowItem value="notification">
|
||||
<AccountSettingsNotification />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
27
javascript-version/pages/cards.vue
Normal file
27
javascript-version/pages/cards.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
|
||||
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
|
||||
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-2xl mb-6">
|
||||
Basic Cards
|
||||
</p>
|
||||
|
||||
<CardBasic />
|
||||
|
||||
<p class="text-2xl mb-6 mt-14">
|
||||
Navigation Cards
|
||||
</p>
|
||||
|
||||
<CardNavigation />
|
||||
|
||||
<p class="text-2xl mt-14 mb-6 ">
|
||||
Solid Cards
|
||||
</p>
|
||||
|
||||
<CardSolid />
|
||||
</div>
|
||||
</template>
|
||||
153
javascript-version/pages/dashboard.vue
Normal file
153
javascript-version/pages/dashboard.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<script setup>
|
||||
import AnalyticsCongratulations from '@/views/dashboard/AnalyticsCongratulations.vue'
|
||||
import AnalyticsFinanceTabs from '@/views/dashboard/AnalyticsFinanceTab.vue'
|
||||
import AnalyticsOrderStatistics from '@/views/dashboard/AnalyticsOrderStatistics.vue'
|
||||
import AnalyticsProfitReport from '@/views/dashboard/AnalyticsProfitReport.vue'
|
||||
import AnalyticsTotalRevenue from '@/views/dashboard/AnalyticsTotalRevenue.vue'
|
||||
import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
|
||||
|
||||
// 👉 Images
|
||||
import chart from '@images/cards/chart-success.png'
|
||||
import card from '@images/cards/credit-card-primary.png'
|
||||
import paypal from '@images/cards/paypal-error.png'
|
||||
import wallet from '@images/cards/wallet-info.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Congratulations -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<AnalyticsCongratulations />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<VRow>
|
||||
<!-- 👉 Profit -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<CardStatisticsVertical
|
||||
v-bind="{
|
||||
title: 'Profit',
|
||||
image: chart,
|
||||
stats: '$12,628',
|
||||
change: 72.80,
|
||||
}"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Sales -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<CardStatisticsVertical
|
||||
v-bind="{
|
||||
title: 'Sales',
|
||||
image: wallet,
|
||||
stats: '$4,679',
|
||||
change: 28.42,
|
||||
}"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total Revenue -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
order="2"
|
||||
order-md="1"
|
||||
>
|
||||
<AnalyticsTotalRevenue />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
md="4"
|
||||
order="1"
|
||||
order-md="2"
|
||||
>
|
||||
<VRow>
|
||||
<!-- 👉 Payments -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<CardStatisticsVertical
|
||||
v-bind=" {
|
||||
title: 'Payments',
|
||||
image: paypal,
|
||||
stats: '$2,468',
|
||||
change: -14.82,
|
||||
}"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Revenue -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<CardStatisticsVertical
|
||||
v-bind="{
|
||||
title: 'Transactions',
|
||||
image: card,
|
||||
stats: '$14,857',
|
||||
change: 28.14,
|
||||
}"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<!-- 👉 Profit Report -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="12"
|
||||
>
|
||||
<AnalyticsProfitReport />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Order Statistics -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
order="3"
|
||||
>
|
||||
<AnalyticsOrderStatistics />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Tabs chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
order="3"
|
||||
>
|
||||
<AnalyticsFinanceTabs />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Transactions -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
order="3"
|
||||
>
|
||||
<AnalyticsTransactions />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
66
javascript-version/pages/form-layouts.vue
Normal file
66
javascript-version/pages/form-layouts.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import DemoFormLayoutHorizontalForm from '@/views/pages/form-layouts/DemoFormLayoutHorizontalForm.vue'
|
||||
import DemoFormLayoutHorizontalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutHorizontalFormWithIcons.vue'
|
||||
import DemoFormLayoutMultipleColumn from '@/views/pages/form-layouts/DemoFormLayoutMultipleColumn.vue'
|
||||
import DemoFormLayoutVerticalForm from '@/views/pages/form-layouts/DemoFormLayoutVerticalForm.vue'
|
||||
import DemoFormLayoutVerticalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutVerticalFormWithIcons.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form -->
|
||||
<VCard title="Horizontal Form">
|
||||
<VCardText>
|
||||
<DemoFormLayoutHorizontalForm />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form with Icons -->
|
||||
<VCard title="Horizontal Form with Icons">
|
||||
<VCardText>
|
||||
<DemoFormLayoutHorizontalFormWithIcons />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form -->
|
||||
<VCard title="Vertical Form">
|
||||
<VCardText>
|
||||
<DemoFormLayoutVerticalForm />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form with Icons -->
|
||||
<VCard title="Vertical Form with Icons">
|
||||
<VCardText>
|
||||
<DemoFormLayoutVerticalFormWithIcons />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Multiple Column -->
|
||||
<VCard title="Multiple Column">
|
||||
<VCardText>
|
||||
<DemoFormLayoutMultipleColumn />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
91
javascript-version/pages/icons.vue
Normal file
91
javascript-version/pages/icons.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
const iconsList = [
|
||||
'bx-abacus',
|
||||
'bx-accessibility',
|
||||
'bx-add-to-queue',
|
||||
'bx-adjust',
|
||||
'bx-alarm',
|
||||
'bx-alarm-add',
|
||||
'bx-alarm-exclamation',
|
||||
'bx-alarm-off',
|
||||
'bx-alarm-snooze',
|
||||
'bx-album',
|
||||
'bx-align-justify',
|
||||
'bx-align-left',
|
||||
'bx-align-middle',
|
||||
'bx-align-right',
|
||||
'bx-analyse',
|
||||
'bx-anchor',
|
||||
'bx-angry',
|
||||
'bx-aperture',
|
||||
'bx-arch',
|
||||
'bx-archive',
|
||||
'bx-archive-in',
|
||||
'bx-archive-out',
|
||||
'bx-area',
|
||||
'bx-arrow-back',
|
||||
'bx-arrow-from-bottom',
|
||||
'bx-arrow-from-left',
|
||||
'bx-arrow-from-right',
|
||||
'bx-arrow-from-top',
|
||||
'bx-arrow-to-bottom',
|
||||
'bx-arrow-to-left',
|
||||
'bx-arrow-to-right',
|
||||
'bx-arrow-to-top',
|
||||
'bx-at',
|
||||
'bx-atom',
|
||||
'bx-award',
|
||||
'bx-badge',
|
||||
'bx-badge-check',
|
||||
'bx-baguette',
|
||||
'bx-ball',
|
||||
'bx-band-aid',
|
||||
'bx-bar-chart',
|
||||
'bx-bar-chart-alt',
|
||||
'bx-bar-chart-alt-2',
|
||||
'bx-bar-chart-square',
|
||||
'bx-barcode',
|
||||
'bx-barcode-reader',
|
||||
'bx-baseball',
|
||||
'bx-basket',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<VCard
|
||||
v-for="icon in iconsList"
|
||||
:key="icon"
|
||||
class="mb-6 me-6"
|
||||
>
|
||||
<VCardText class="py-3 px-4">
|
||||
<VIcon
|
||||
size="30"
|
||||
:icon="icon"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<!-- tooltips -->
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
{{ icon }}
|
||||
</VTooltip>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<!-- more icons -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
href="https://boxicons.com/"
|
||||
rel="noopener noreferrer"
|
||||
color="primary"
|
||||
target="_blank"
|
||||
>
|
||||
View All Box Icons
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
155
javascript-version/pages/login.vue
Normal file
155
javascript-version/pages/login.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import logo from '@images/logo.svg?raw'
|
||||
import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?url'
|
||||
import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?url'
|
||||
|
||||
const form = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<div class="position-relative my-sm-16">
|
||||
<!-- 👉 Top shape -->
|
||||
<VImg
|
||||
:src="authV1TopShape"
|
||||
class="text-primary auth-v1-top-shape d-none d-sm-block"
|
||||
/>
|
||||
|
||||
<!-- 👉 Bottom shape -->
|
||||
<VImg
|
||||
:src="authV1BottomShape"
|
||||
class="text-primary auth-v1-bottom-shape d-none d-sm-block"
|
||||
/>
|
||||
|
||||
<!-- 👉 Auth Card -->
|
||||
<VCard
|
||||
class="auth-card"
|
||||
max-width="460"
|
||||
:class="$vuetify.display.smAndUp ? 'pa-6' : 'pa-0'"
|
||||
>
|
||||
<VCardItem class="justify-center">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="app-logo"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
class="d-flex"
|
||||
v-html="logo"
|
||||
/>
|
||||
<h1 class="app-logo-title">
|
||||
sneat
|
||||
</h1>
|
||||
</NuxtLink>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Welcome to Sneat! 👋🏻
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Please sign-in to your account and start the adventure
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="$router.push('/')">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email or Username"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<!-- remember me checkbox -->
|
||||
<div class="d-flex align-center justify-space-between flex-wrap my-6">
|
||||
<VCheckbox
|
||||
v-model="form.remember"
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
<a
|
||||
class="text-primary"
|
||||
href="javascript:void(0)"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- login button -->
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- create account -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-body-1 text-center"
|
||||
>
|
||||
<span class="d-inline-block">
|
||||
New on our platform?
|
||||
</span>
|
||||
<NuxtLink
|
||||
class="text-primary ms-1 d-inline-block text-body-1"
|
||||
to="/register"
|
||||
>
|
||||
Create an account
|
||||
</NuxtLink>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VDivider />
|
||||
<span class="mx-4 text-high-emphasis">or</span>
|
||||
<VDivider />
|
||||
</VCol>
|
||||
|
||||
<!-- auth providers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<AuthProvider />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
11
javascript-version/pages/no-existence.vue
Normal file
11
javascript-version/pages/no-existence.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'Error Page! Just for demo!',
|
||||
fatal: true,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>This is just demo page to avoid console error and show you error.</p>
|
||||
</template>
|
||||
164
javascript-version/pages/register.vue
Normal file
164
javascript-version/pages/register.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import logo from '@images/logo.svg?raw'
|
||||
import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?url'
|
||||
import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?url'
|
||||
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
privacyPolicies: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<div class="position-relative my-sm-16">
|
||||
<!-- 👉 Top shape -->
|
||||
<VImg
|
||||
:src="authV1TopShape"
|
||||
class="text-primary auth-v1-top-shape d-none d-sm-block"
|
||||
/>
|
||||
|
||||
<!-- 👉 Bottom shape -->
|
||||
<VImg
|
||||
:src="authV1BottomShape"
|
||||
class="text-primary auth-v1-bottom-shape d-none d-sm-block"
|
||||
/>
|
||||
|
||||
<!-- 👉 Auth card -->
|
||||
<VCard
|
||||
class="auth-card"
|
||||
max-width="460"
|
||||
:class="$vuetify.display.smAndUp ? 'pa-6' : 'pa-0'"
|
||||
>
|
||||
<VCardItem class="justify-center">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="app-logo"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
class="d-flex"
|
||||
v-html="logo"
|
||||
/>
|
||||
<h1 class="app-logo-title">
|
||||
sneat
|
||||
</h1>
|
||||
</NuxtLink>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Adventure starts here 🚀
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Make your app management easy and fun!
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="$router.push('/')">
|
||||
<VRow>
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.username"
|
||||
autofocus
|
||||
label="Username"
|
||||
placeholder="Johndoe"
|
||||
/>
|
||||
</VCol>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center my-6">
|
||||
<VCheckbox
|
||||
id="privacy-policy"
|
||||
v-model="form.privacyPolicies"
|
||||
inline
|
||||
/>
|
||||
<VLabel
|
||||
for="privacy-policy"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span class="me-1 text-high-emphasis">I agree to</span>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>privacy policy & terms</a>
|
||||
</VLabel>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Sign up
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- login instead -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center text-base"
|
||||
>
|
||||
<span>Already have an account?</span>
|
||||
<NuxtLink
|
||||
class="text-primary ms-1"
|
||||
to="/login"
|
||||
>
|
||||
Sign in instead
|
||||
</NuxtLink>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VDivider />
|
||||
<span class="mx-4">or</span>
|
||||
<VDivider />
|
||||
</VCol>
|
||||
|
||||
<!-- auth providers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<AuthProvider />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
53
javascript-version/pages/tables.vue
Normal file
53
javascript-version/pages/tables.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import DemoSimpleTableBasics from '@/views/pages/tables/DemoSimpleTableBasics.vue'
|
||||
import DemoSimpleTableDensity from '@/views/pages/tables/DemoSimpleTableDensity.vue'
|
||||
import DemoSimpleTableFixedHeader from '@/views/pages/tables/DemoSimpleTableFixedHeader.vue'
|
||||
import DemoSimpleTableHeight from '@/views/pages/tables/DemoSimpleTableHeight.vue'
|
||||
import DemoSimpleTableTheme from '@/views/pages/tables/DemoSimpleTableTheme.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Basic">
|
||||
<DemoSimpleTableBasics />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Theme">
|
||||
<VCardText>
|
||||
use <code>theme</code> prop to switch table to the dark theme.
|
||||
</VCardText>
|
||||
<DemoSimpleTableTheme />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Density">
|
||||
<VCardText>
|
||||
You can show a dense version of the table by using the <code>density</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableDensity />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Height">
|
||||
<VCardText>
|
||||
You can set the height of the table by using the <code>height</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableHeight />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Fixed Header">
|
||||
<VCardText>
|
||||
You can fix the header of table by using the <code>fixed-header</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableFixedHeader />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
178
javascript-version/pages/typography.vue
Normal file
178
javascript-version/pages/typography.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Headlines">
|
||||
<VCardText class="d-flex flex-column gap-y-8">
|
||||
<div>
|
||||
<h1 class="text-h1">
|
||||
Heading 1
|
||||
</h1>
|
||||
<span>font-size: 6rem / line-height: 6rem / font-weight: 300</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-h2">
|
||||
Heading 2
|
||||
</h2>
|
||||
<span>font-size: 3.75rem / line-height: 3.75rem / font-weight: 300</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-h3">
|
||||
Heading 3
|
||||
</h3>
|
||||
<span>font-size: 3rem / line-height: 3.125rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-h4">
|
||||
Heading 4
|
||||
</h4>
|
||||
<span>font-size: 2.125rem / line-height: 2.5rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
Heading 5
|
||||
</h5>
|
||||
<span>font-size: 1.5rem / line-height: 2rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
Heading 6
|
||||
</h6>
|
||||
<span>font-size: 1.25rem / line-height: 2rem / font-weight: 500</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Texts">
|
||||
<VCardText>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-1 text-no-wrap">text-subtitle-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-subtitle-1 text-truncate mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 1rem / line-height: 1.75rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-2 text-no-wrap">text-subtitle-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-subtitle-2 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 1.375rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-1 text-no-wrap">text-body-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-body-1 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 1rem / line-height: 1.5rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-2 text-no-wrap">text-body-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-body-2 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 1.25rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-caption">text-caption</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-caption mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.75rem / line-height: 1.25rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-overline text-no-wrap">text-overline</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-overline mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.75rem / line-height: 2rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-button">text-button</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-button mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 2.25rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user