mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 02:21:06 +08:00
remove unuse file
This commit is contained in:
jxxghp
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import router from '@/router';
|
||||
import avatar1 from '@images/avatars/avatar-1.png';
|
||||
import { useStore } from 'vuex';
|
||||
import router from "@/router";
|
||||
import avatar1 from "@images/avatars/avatar-1.png";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// Vuex Store
|
||||
const store = useStore();
|
||||
@@ -9,36 +9,20 @@ const store = useStore();
|
||||
// 执行注销操作
|
||||
const logout = () => {
|
||||
// 清除登录状态信息
|
||||
store.dispatch('auth/clearToken');
|
||||
store.dispatch("auth/clearToken");
|
||||
|
||||
// 重定向到登录页面或其他适当的页面
|
||||
router.push('/login')
|
||||
}
|
||||
router.push("/login");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom right"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
color="success"
|
||||
bordered
|
||||
>
|
||||
<VAvatar
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
|
||||
<VAvatar class="cursor-pointer" color="primary" variant="tonal">
|
||||
<VImg :src="avatar1" />
|
||||
|
||||
<!-- SECTION Menu -->
|
||||
<VMenu
|
||||
activator="parent"
|
||||
width="230"
|
||||
location="bottom end"
|
||||
offset="14px"
|
||||
>
|
||||
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
|
||||
<VList>
|
||||
<!-- 👉 User Avatar & Name -->
|
||||
<VListItem>
|
||||
@@ -51,34 +35,22 @@ const logout = () => {
|
||||
offset-y="3"
|
||||
color="success"
|
||||
>
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VAvatar color="primary" variant="tonal">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-semibold">
|
||||
管理员
|
||||
</VListItemTitle>
|
||||
<VListItemTitle class="font-weight-semibold"> 管理员 </VListItemTitle>
|
||||
<VListItemSubtitle>Admin</VListItemSubtitle>
|
||||
</VListItem>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- 👉 Profile -->
|
||||
<VListItem
|
||||
link
|
||||
to="account-settings"
|
||||
>
|
||||
<VListItem link to="account-setting">
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="mdi-account-outline"
|
||||
size="22"
|
||||
/>
|
||||
<VIcon class="me-2" icon="mdi-account-outline" size="22" />
|
||||
</template>
|
||||
|
||||
<VListItemTitle>个人中心</VListItemTitle>
|
||||
@@ -87,11 +59,7 @@ const logout = () => {
|
||||
<!-- 👉 FAQ -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="mdi-help-circle-outline"
|
||||
size="22"
|
||||
/>
|
||||
<VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
|
||||
</template>
|
||||
|
||||
<VListItemTitle>帮助</VListItemTitle>
|
||||
@@ -103,11 +71,7 @@ const logout = () => {
|
||||
<!-- 👉 Logout -->
|
||||
<VListItem @click="logout">
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="mdi-logout"
|
||||
size="22"
|
||||
/>
|
||||
<VIcon class="me-2" icon="mdi-logout" size="22" />
|
||||
</template>
|
||||
|
||||
<VListItemTitle>注销</VListItemTitle>
|
||||
|
||||
@@ -1,59 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
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'
|
||||
import AccountSettingAccount from "@/views/account-setting/AccountSettingAccount.vue";
|
||||
import AccountSettingSecurity from "@/views/account-setting/AccountSettingSecurity.vue";
|
||||
import AccountSettingSystem from "@/views/account-setting/AccountSettingSystem.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute()
|
||||
const route = useRoute();
|
||||
|
||||
const activeTab = ref(route.params.tab)
|
||||
const activeTab = ref(route.params.tab);
|
||||
|
||||
// tabs
|
||||
const tabs = [
|
||||
{ title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
|
||||
{ title: 'Security', icon: 'mdi-lock-open-outline', tab: 'security' },
|
||||
{ title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notification' },
|
||||
]
|
||||
{ title: "账户", icon: "mdi-account-outline", tab: "account" },
|
||||
{ title: "安全", icon: "mdi-lock-open-outline", tab: "security" },
|
||||
{ title: "系统", icon: "mdi-bell-outline", tab: "system" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
show-arrows
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabs"
|
||||
:key="item.icon"
|
||||
:value="item.tab"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
start
|
||||
:icon="item.icon"
|
||||
/>
|
||||
<VTabs v-model="activeTab" show-arrows>
|
||||
<VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
|
||||
<VIcon size="20" start :icon="item.icon" />
|
||||
{{ item.title }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
<VDivider />
|
||||
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="mt-5 disable-tab-transition"
|
||||
>
|
||||
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
|
||||
<!-- Account -->
|
||||
<VWindowItem value="account">
|
||||
<AccountSettingsAccount />
|
||||
<AccountSettingAccount />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Security -->
|
||||
<VWindowItem value="security">
|
||||
<AccountSettingsSecurity />
|
||||
<AccountSettingSecurity />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Notification -->
|
||||
<VWindowItem value="notification">
|
||||
<AccountSettingsNotification />
|
||||
<!-- System -->
|
||||
<VWindowItem value="system">
|
||||
<AccountSettingSystem />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
|
||||
@@ -1,53 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
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>
|
||||
<script setup lang="ts"></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>
|
||||
<template></template>
|
||||
|
||||
268
src/views/account-setting/AccountSettingAccount.vue
Normal file
268
src/views/account-setting/AccountSettingAccount.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from "@images/avatars/avatar-1.png";
|
||||
|
||||
const accountData = {
|
||||
avatarImg: avatar1,
|
||||
firstName: "john",
|
||||
lastName: "Doe",
|
||||
email: "johnDoe@example.com",
|
||||
org: "ThemeSelection",
|
||||
phone: "+1 (917) 543-9876",
|
||||
address: "123 Main St, New York, NY 10001",
|
||||
state: "New York",
|
||||
zip: "10001",
|
||||
country: "USA",
|
||||
language: "English",
|
||||
timezone: "(GMT-11:00) International Date Line West",
|
||||
currency: "USD",
|
||||
};
|
||||
|
||||
const refInputEl = ref<HTMLElement>();
|
||||
|
||||
const accountDataLocal = ref(structuredClone(accountData));
|
||||
const isAccountDeactivated = ref(false);
|
||||
|
||||
const resetForm = () => {
|
||||
accountDataLocal.value = structuredClone(accountData);
|
||||
};
|
||||
|
||||
// changeAvatar function
|
||||
const changeAvatar = (file: Event) => {
|
||||
const fileReader = new FileReader();
|
||||
const { files } = file.target as HTMLInputElement;
|
||||
|
||||
if (files && files.length) {
|
||||
fileReader.readAsDataURL(files[0]);
|
||||
fileReader.onload = () => {
|
||||
if (typeof fileReader.result === "string")
|
||||
accountDataLocal.value.avatarImg = fileReader.result;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// reset avatar image
|
||||
const resetAvatar = () => {
|
||||
accountDataLocal.value.avatarImg = accountData.avatarImg;
|
||||
};
|
||||
|
||||
const timezones = [
|
||||
"(GMT-11:00) International Date Line West",
|
||||
"(GMT-11:00) Midway Island",
|
||||
"(GMT-10:00) Hawaii",
|
||||
"(GMT-09:00) Alaska",
|
||||
"(GMT-08:00) Pacific Time (US & Canada)",
|
||||
"(GMT-08:00) Tijuana",
|
||||
"(GMT-07:00) Arizona",
|
||||
"(GMT-07:00) Chihuahua",
|
||||
"(GMT-07:00) La Paz",
|
||||
"(GMT-07:00) Mazatlan",
|
||||
"(GMT-07:00) Mountain Time (US & Canada)",
|
||||
"(GMT-06:00) Central America",
|
||||
"(GMT-06:00) Central Time (US & Canada)",
|
||||
"(GMT-06:00) Guadalajara",
|
||||
"(GMT-06:00) Mexico City",
|
||||
"(GMT-06:00) Monterrey",
|
||||
"(GMT-06:00) Saskatchewan",
|
||||
"(GMT-05:00) Bogota",
|
||||
"(GMT-05:00) Eastern Time (US & Canada)",
|
||||
"(GMT-05:00) Indiana (East)",
|
||||
"(GMT-05:00) Lima",
|
||||
"(GMT-05:00) Quito",
|
||||
"(GMT-04:00) Atlantic Time (Canada)",
|
||||
"(GMT-04:00) Caracas",
|
||||
"(GMT-04:00) La Paz",
|
||||
"(GMT-04:00) Santiago",
|
||||
"(GMT-03:30) Newfoundland",
|
||||
"(GMT-03:00) Brasilia",
|
||||
"(GMT-03:00) Buenos Aires",
|
||||
"(GMT-03:00) Georgetown",
|
||||
"(GMT-03:00) Greenland",
|
||||
"(GMT-02:00) Mid-Atlantic",
|
||||
"(GMT-01:00) Azores",
|
||||
"(GMT-01:00) Cape Verde Is.",
|
||||
"(GMT+00:00) Casablanca",
|
||||
"(GMT+00:00) Dublin",
|
||||
"(GMT+00:00) Edinburgh",
|
||||
"(GMT+00:00) Lisbon",
|
||||
"(GMT+00:00) London",
|
||||
];
|
||||
|
||||
const currencies = [
|
||||
"USD",
|
||||
"EUR",
|
||||
"GBP",
|
||||
"AUD",
|
||||
"BRL",
|
||||
"CAD",
|
||||
"CNY",
|
||||
"CZK",
|
||||
"DKK",
|
||||
"HKD",
|
||||
"HUF",
|
||||
"INR",
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="个人信息">
|
||||
<VCardText class="d-flex">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
size="100"
|
||||
class="me-6"
|
||||
:image="accountDataLocal.avatarImg"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upload Photo -->
|
||||
<form class="d-flex flex-column justify-center gap-5">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<VBtn color="primary" @click="refInputEl?.click()">
|
||||
<VIcon icon="mdi-cloud-upload-outline" class="d-sm-none" />
|
||||
<span class="d-none d-sm-block">上传头像</span>
|
||||
</VBtn>
|
||||
|
||||
<input
|
||||
ref="refInputEl"
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".jpeg,.png,.jpg,GIF"
|
||||
hidden
|
||||
@input="changeAvatar"
|
||||
/>
|
||||
|
||||
<VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
|
||||
<span class="d-none d-sm-block">重置</span>
|
||||
<VIcon icon="mdi-refresh" class="d-sm-none" />
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<p class="text-body-1 mb-0">允许 JPG, GIF 或 PNG 格式， 最大尽寸 800K。</p>
|
||||
</form>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 Form -->
|
||||
<VForm class="mt-6">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol md="6" cols="12">
|
||||
<VTextField v-model="accountDataLocal.firstName" label="First Name" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol md="6" cols="12">
|
||||
<VTextField v-model="accountDataLocal.lastName" label="Last Name" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Organization -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.org" label="Organization" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Phone -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.phone" label="Phone Number" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Address -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.address" label="Address" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 State -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.state" label="State" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Zip Code -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.zip" label="Zip Code" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Language -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Timezone -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
:items="timezones"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Currency -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
:items="currencies"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Form Actions -->
|
||||
<VCol cols="12" class="d-flex flex-wrap gap-4">
|
||||
<VBtn>保存</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
@click.prevent="resetForm"
|
||||
>
|
||||
重置
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Deactivate Account -->
|
||||
<VCard title="删除账户">
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox v-model="isAccountDeactivated" label="我确认删除我的账户信息" />
|
||||
</div>
|
||||
|
||||
<VBtn :disabled="!isAccountDeactivated" color="error" class="mt-3">
|
||||
删除账户
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
183
src/views/account-setting/AccountSettingSecurity.vue
Normal file
183
src/views/account-setting/AccountSettingSecurity.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script lang="ts" setup>
|
||||
const isCurrentPasswordVisible = ref(false);
|
||||
const isNewPasswordVisible = ref(false);
|
||||
const isConfirmPasswordVisible = ref(false);
|
||||
const currentPassword = ref("12345678");
|
||||
const newPassword = ref("87654321");
|
||||
const confirmPassword = ref("87654321");
|
||||
|
||||
const recentDevices = [
|
||||
{
|
||||
browser: "Chrome on Windows",
|
||||
device: "HP Spectre 360",
|
||||
location: "New York, NY",
|
||||
recentActivity: "28 Apr 2022, 18:20",
|
||||
deviceIcon: { icon: "mdi-microsoft-windows", color: "primary" },
|
||||
},
|
||||
{
|
||||
browser: "Chrome on iPhone",
|
||||
device: "iPhone 12x",
|
||||
location: "Los Angeles, CA",
|
||||
recentActivity: "20 Apr 2022, 10:20",
|
||||
deviceIcon: { icon: "mdi-cellphone", color: "error" },
|
||||
},
|
||||
{
|
||||
browser: "Chrome on Android",
|
||||
device: "Oneplus 9 Pro",
|
||||
location: "San Francisco, CA",
|
||||
recentActivity: "16 Apr 2022, 04:20",
|
||||
deviceIcon: { icon: "mdi-android", color: "success" },
|
||||
},
|
||||
{
|
||||
browser: "Chrome on MacOS",
|
||||
device: "Apple iMac",
|
||||
location: "New York, NY",
|
||||
recentActivity: "28 Apr 2022, 18:20",
|
||||
deviceIcon: { icon: "mdi-apple", color: "secondary" },
|
||||
},
|
||||
{
|
||||
browser: "Chrome on Windows",
|
||||
device: "HP Spectre 360",
|
||||
location: "Los Angeles, CA",
|
||||
recentActivity: "20 Apr 2022, 10:20",
|
||||
deviceIcon: { icon: "mdi-microsoft-windows", color: "primary" },
|
||||
},
|
||||
{
|
||||
browser: "Chrome on Android",
|
||||
device: "Oneplus 9 Pro",
|
||||
location: "San Francisco, CA",
|
||||
recentActivity: "16 Apr 2022, 04:20",
|
||||
deviceIcon: { icon: "mdi-android", color: "success" },
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- SECTION: Change Password -->
|
||||
<VCol cols="12">
|
||||
<VCard title="修改密码">
|
||||
<VForm>
|
||||
<VCardText>
|
||||
<!-- 👉 Current Password -->
|
||||
<VRow class="mb-3">
|
||||
<VCol cols="12" md="6">
|
||||
<!-- 👉 current password -->
|
||||
<VTextField
|
||||
v-model="currentPassword"
|
||||
:type="isCurrentPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="
|
||||
isCurrentPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
|
||||
"
|
||||
label="原密码"
|
||||
@click:append-inner="
|
||||
isCurrentPasswordVisible = !isCurrentPasswordVisible
|
||||
"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 New Password -->
|
||||
<VRow>
|
||||
<VCol cols="12" md="6">
|
||||
<!-- 👉 new password -->
|
||||
<VTextField
|
||||
v-model="newPassword"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="
|
||||
isNewPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
|
||||
"
|
||||
label="新密码"
|
||||
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<!-- 👉 confirm password -->
|
||||
<VTextField
|
||||
v-model="confirmPassword"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="
|
||||
isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
|
||||
"
|
||||
label="确认新密码"
|
||||
@click:append-inner="
|
||||
isConfirmPasswordVisible = !isConfirmPasswordVisible
|
||||
"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Action Buttons -->
|
||||
<VCardText class="d-flex flex-wrap gap-4">
|
||||
<VBtn> 保存 </VBtn>
|
||||
|
||||
<VBtn type="reset" color="secondary" variant="tonal"> 重置 </VBtn>
|
||||
</VCardText>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- SECTION: Create an API key -->
|
||||
<VCard title="安全密钥">
|
||||
<VRow>
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol cols="12" md="5" order-md="0" order="1">
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 Name the API Key -->
|
||||
<VCol cols="12">
|
||||
<VTextField label="Name the API key" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Create Key Button -->
|
||||
<VCol cols="12">
|
||||
<VBtn type="submit" block> 保存 </VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
<!-- !SECTION -->
|
||||
</VCol>
|
||||
|
||||
<!-- SECTION Recent Devices -->
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Table -->
|
||||
<VCard title="最近活跃设备">
|
||||
<VTable class="text-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">浏览器</th>
|
||||
<th scope="col">设备</th>
|
||||
<th scope="col">地点</th>
|
||||
<th scope="col">最后活动时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="device in recentDevices" :key="device.recentActivity">
|
||||
<td>
|
||||
<VIcon
|
||||
start
|
||||
:icon="device.deviceIcon.icon"
|
||||
:color="device.deviceIcon.color"
|
||||
/>
|
||||
{{ device.browser }}
|
||||
</td>
|
||||
<td>{{ device.device }}</td>
|
||||
<td>{{ device.location }}</td>
|
||||
<td>{{ device.recentActivity }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -1,351 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png';
|
||||
|
||||
const accountData = {
|
||||
avatarImg: avatar1,
|
||||
firstName: 'john',
|
||||
lastName: 'Doe',
|
||||
email: 'johnDoe@example.com',
|
||||
org: 'ThemeSelection',
|
||||
phone: '+1 (917) 543-9876',
|
||||
address: '123 Main St, New York, NY 10001',
|
||||
state: 'New York',
|
||||
zip: '10001',
|
||||
country: 'USA',
|
||||
language: 'English',
|
||||
timezone: '(GMT-11:00) International Date Line West',
|
||||
currency: 'USD',
|
||||
}
|
||||
|
||||
const refInputEl = ref<HTMLElement>()
|
||||
|
||||
const accountDataLocal = ref(structuredClone(accountData))
|
||||
const isAccountDeactivated = ref(false)
|
||||
|
||||
const resetForm = () => {
|
||||
accountDataLocal.value = structuredClone(accountData)
|
||||
}
|
||||
|
||||
// changeAvatar function
|
||||
const changeAvatar = (file: Event) => {
|
||||
const fileReader = new FileReader()
|
||||
const { files } = file.target as HTMLInputElement
|
||||
|
||||
if (files && files.length) {
|
||||
fileReader.readAsDataURL(files[0])
|
||||
fileReader.onload = () => {
|
||||
if (typeof fileReader.result === 'string')
|
||||
accountDataLocal.value.avatarImg = fileReader.result
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// reset avatar image
|
||||
const resetAvatar = () => {
|
||||
accountDataLocal.value.avatarImg = accountData.avatarImg
|
||||
}
|
||||
|
||||
const timezones = [
|
||||
'(GMT-11:00) International Date Line West',
|
||||
'(GMT-11:00) Midway Island',
|
||||
'(GMT-10:00) Hawaii',
|
||||
'(GMT-09:00) Alaska',
|
||||
'(GMT-08:00) Pacific Time (US & Canada)',
|
||||
'(GMT-08:00) Tijuana',
|
||||
'(GMT-07:00) Arizona',
|
||||
'(GMT-07:00) Chihuahua',
|
||||
'(GMT-07:00) La Paz',
|
||||
'(GMT-07:00) Mazatlan',
|
||||
'(GMT-07:00) Mountain Time (US & Canada)',
|
||||
'(GMT-06:00) Central America',
|
||||
'(GMT-06:00) Central Time (US & Canada)',
|
||||
'(GMT-06:00) Guadalajara',
|
||||
'(GMT-06:00) Mexico City',
|
||||
'(GMT-06:00) Monterrey',
|
||||
'(GMT-06:00) Saskatchewan',
|
||||
'(GMT-05:00) Bogota',
|
||||
'(GMT-05:00) Eastern Time (US & Canada)',
|
||||
'(GMT-05:00) Indiana (East)',
|
||||
'(GMT-05:00) Lima',
|
||||
'(GMT-05:00) Quito',
|
||||
'(GMT-04:00) Atlantic Time (Canada)',
|
||||
'(GMT-04:00) Caracas',
|
||||
'(GMT-04:00) La Paz',
|
||||
'(GMT-04:00) Santiago',
|
||||
'(GMT-03:30) Newfoundland',
|
||||
'(GMT-03:00) Brasilia',
|
||||
'(GMT-03:00) Buenos Aires',
|
||||
'(GMT-03:00) Georgetown',
|
||||
'(GMT-03:00) Greenland',
|
||||
'(GMT-02:00) Mid-Atlantic',
|
||||
'(GMT-01:00) Azores',
|
||||
'(GMT-01:00) Cape Verde Is.',
|
||||
'(GMT+00:00) Casablanca',
|
||||
'(GMT+00:00) Dublin',
|
||||
'(GMT+00:00) Edinburgh',
|
||||
'(GMT+00:00) Lisbon',
|
||||
'(GMT+00:00) London',
|
||||
]
|
||||
|
||||
const currencies = [
|
||||
'USD',
|
||||
'EUR',
|
||||
'GBP',
|
||||
'AUD',
|
||||
'BRL',
|
||||
'CAD',
|
||||
'CNY',
|
||||
'CZK',
|
||||
'DKK',
|
||||
'HKD',
|
||||
'HUF',
|
||||
'INR',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Account Details">
|
||||
<VCardText class="d-flex">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
size="100"
|
||||
class="me-6"
|
||||
:image="accountDataLocal.avatarImg"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upload Photo -->
|
||||
<form class="d-flex flex-column justify-center gap-5">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<VBtn
|
||||
color="primary"
|
||||
@click="refInputEl?.click()"
|
||||
>
|
||||
<VIcon
|
||||
icon="mdi-cloud-upload-outline"
|
||||
class="d-sm-none"
|
||||
/>
|
||||
<span class="d-none d-sm-block">Upload new photo</span>
|
||||
</VBtn>
|
||||
|
||||
<input
|
||||
ref="refInputEl"
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".jpeg,.png,.jpg,GIF"
|
||||
hidden
|
||||
@input="changeAvatar"
|
||||
>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="error"
|
||||
variant="tonal"
|
||||
@click="resetAvatar"
|
||||
>
|
||||
<span class="d-none d-sm-block">Reset</span>
|
||||
<VIcon
|
||||
icon="mdi-refresh"
|
||||
class="d-sm-none"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<p class="text-body-1 mb-0">
|
||||
Allowed JPG, GIF or PNG. Max size of 800K
|
||||
</p>
|
||||
</form>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 Form -->
|
||||
<VForm class="mt-6">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.firstName"
|
||||
label="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.lastName"
|
||||
label="Last Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Organization -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.org"
|
||||
label="Organization"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Phone -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.phone"
|
||||
label="Phone Number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Address -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.address"
|
||||
label="Address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 State -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.state"
|
||||
label="State"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Zip Code -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountDataLocal.zip"
|
||||
label="Zip Code"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Language -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Timezone -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
:items="timezones"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Currency -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
:items="currencies"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Form Actions -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex flex-wrap gap-4"
|
||||
>
|
||||
<VBtn>Save changes</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
@click.prevent="resetForm"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Deactivate Account -->
|
||||
<VCard title="Deactivate Account">
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox
|
||||
v-model="isAccountDeactivated"
|
||||
label="I confirm my account deactivation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
:disabled="!isAccountDeactivated"
|
||||
color="error"
|
||||
class="mt-3"
|
||||
>
|
||||
Deactivate Account
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -1,331 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const isCurrentPasswordVisible = ref(false)
|
||||
const isNewPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
const currentPassword = ref('12345678')
|
||||
const newPassword = ref('87654321')
|
||||
const confirmPassword = ref('87654321')
|
||||
|
||||
const passwordRequirements = [
|
||||
'Minimum 8 characters long - the more, the better',
|
||||
'At least one lowercase character',
|
||||
'At least one number, symbol, or whitespace character',
|
||||
]
|
||||
|
||||
const serverKeys = [
|
||||
{
|
||||
name: 'Server Key 1',
|
||||
key: '23eaf7f0-f4f7-495e-8b86-fad3261282ac',
|
||||
createdOn: '28 Apr 2021, 18:20 GTM+4:10',
|
||||
permission: 'Full Access',
|
||||
},
|
||||
{
|
||||
name: 'Server Key 2',
|
||||
key: 'bb98e571-a2e2-4de8-90a9-2e231b5e99',
|
||||
createdOn: '12 Feb 2021, 10:30 GTM+2:30',
|
||||
permission: 'Read Only',
|
||||
},
|
||||
{
|
||||
name: 'Server Key 3',
|
||||
key: '2e915e59-3105-47f2-8838-6e46bf83b711',
|
||||
createdOn: '28 Dec 2020, 12:21 GTM+4:10',
|
||||
permission: 'Full Access',
|
||||
},
|
||||
]
|
||||
const recentDevices = [
|
||||
{
|
||||
browser: 'Chrome on Windows',
|
||||
device: 'HP Spectre 360',
|
||||
location: 'New York, NY',
|
||||
recentActivity: '28 Apr 2022, 18:20',
|
||||
deviceIcon: { icon: 'mdi-microsoft-windows', color: 'primary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on iPhone',
|
||||
device: 'iPhone 12x',
|
||||
location: 'Los Angeles, CA',
|
||||
recentActivity: '20 Apr 2022, 10:20',
|
||||
deviceIcon: { icon: 'mdi-cellphone', color: 'error' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Android',
|
||||
device: 'Oneplus 9 Pro',
|
||||
location: 'San Francisco, CA',
|
||||
recentActivity: '16 Apr 2022, 04:20',
|
||||
deviceIcon: { icon: 'mdi-android', color: 'success' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on MacOS',
|
||||
device: 'Apple iMac',
|
||||
location: 'New York, NY',
|
||||
recentActivity: '28 Apr 2022, 18:20',
|
||||
deviceIcon: { icon: 'mdi-apple', color: 'secondary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Windows',
|
||||
device: 'HP Spectre 360',
|
||||
location: 'Los Angeles, CA',
|
||||
recentActivity: '20 Apr 2022, 10:20',
|
||||
deviceIcon: { icon: 'mdi-microsoft-windows', color: 'primary' },
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Android',
|
||||
device: 'Oneplus 9 Pro',
|
||||
location: 'San Francisco, CA',
|
||||
recentActivity: '16 Apr 2022, 04:20',
|
||||
deviceIcon: { icon: 'mdi-android', color: 'success' },
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- SECTION: Change Password -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Change Password">
|
||||
<VForm>
|
||||
<VCardText>
|
||||
<!-- 👉 Current Password -->
|
||||
<VRow class="mb-3">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 current password -->
|
||||
<VTextField
|
||||
v-model="currentPassword"
|
||||
:type="isCurrentPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCurrentPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
label="Current Password"
|
||||
@click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 New Password -->
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 new password -->
|
||||
<VTextField
|
||||
v-model="newPassword"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isNewPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
label="New Password"
|
||||
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 confirm password -->
|
||||
<VTextField
|
||||
v-model="confirmPassword"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
label="Confirm New Password"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Password Requirements -->
|
||||
<VCardText>
|
||||
<p class="text-base font-weight-medium mt-2">
|
||||
Password Requirements:
|
||||
</p>
|
||||
|
||||
<ul class="d-flex flex-column gap-y-3">
|
||||
<li
|
||||
v-for="item in passwordRequirements"
|
||||
:key="item"
|
||||
class="d-flex"
|
||||
>
|
||||
<div>
|
||||
<VIcon
|
||||
size="7"
|
||||
icon="mdi-circle"
|
||||
class="me-3"
|
||||
/>
|
||||
</div>
|
||||
<span class="font-weight-medium">{{ item }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Action Buttons -->
|
||||
<VCardText class="d-flex flex-wrap gap-4">
|
||||
<VBtn>Save changes</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Two-steps verification -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Two-steps verification">
|
||||
<VCardText>
|
||||
<p class="font-weight-semibold">
|
||||
Two factor authentication is not enabled yet.
|
||||
</p>
|
||||
<p>
|
||||
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-decoration-none"
|
||||
>Learn more.</a>
|
||||
</p>
|
||||
|
||||
<VBtn>
|
||||
Enable two-factor authentication
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- SECTION: Create an API key -->
|
||||
<VCard title="Create an API key">
|
||||
<VRow>
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
order-md="0"
|
||||
order="1"
|
||||
>
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 Choose API Key -->
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
label="Choose the API key type you want to create"
|
||||
:items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Name the API Key -->
|
||||
<VCol cols="12">
|
||||
<VTextField label="Name the API key" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Create Key Button -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
block
|
||||
>
|
||||
Create Key
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
<!-- !SECTION -->
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- SECTION: API Keys List -->
|
||||
<VCard title="API Key List & Access">
|
||||
<VCardText>
|
||||
An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing.
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Server Status -->
|
||||
<VCardText class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="serverKey in serverKeys"
|
||||
:key="serverKey.key"
|
||||
class="bg-var-theme-background pa-4"
|
||||
>
|
||||
<div class="d-flex align-center flex-wrap mb-3">
|
||||
<h6 class="text-h6 mb-0 me-3">
|
||||
{{ serverKey.name }}
|
||||
</h6>
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
{{ serverKey.permission }}
|
||||
</VChip>
|
||||
</div>
|
||||
<p class="text-base font-weight-medium">
|
||||
<span class="me-3">{{ serverKey.key }}</span>
|
||||
<VIcon
|
||||
:size="18"
|
||||
icon="mdi-content-copy"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</p>
|
||||
<span>Created on {{ serverKey.createdOn }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<!-- !SECTION -->
|
||||
</VCol>
|
||||
|
||||
<!-- SECTION Recent Devices -->
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Table -->
|
||||
<VCard title="Recent Devices">
|
||||
<VTable class="text-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
BROWSER
|
||||
</th>
|
||||
<th scope="col">
|
||||
DEVICE
|
||||
</th>
|
||||
<th scope="col">
|
||||
LOCATION
|
||||
</th>
|
||||
<th scope="col">
|
||||
RECENT ACTIVITIES
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="device in recentDevices"
|
||||
:key="device.recentActivity"
|
||||
>
|
||||
<td>
|
||||
<VIcon
|
||||
start
|
||||
:icon="device.deviceIcon.icon"
|
||||
:color="device.deviceIcon.color"
|
||||
/>
|
||||
{{ device.browser }}
|
||||
</td>
|
||||
<td>{{ device.device }}</td>
|
||||
<td>{{ device.location }}</td>
|
||||
<td>{{ device.recentActivity }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -1,38 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const { global } = useTheme()
|
||||
|
||||
const authProviders = [
|
||||
{
|
||||
icon: 'mdi-facebook',
|
||||
color: '#4267b2',
|
||||
colorInDark: '#4267b2',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-twitter',
|
||||
color: '#1da1f2',
|
||||
colorInDark: '#1da1f2',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-github',
|
||||
color: '#272727',
|
||||
colorInDark: '#fff',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-google',
|
||||
color: '#db4437',
|
||||
colorInDark: '#db4437',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn
|
||||
v-for="link in authProviders"
|
||||
:key="link.icon"
|
||||
:icon="link.icon"
|
||||
variant="text"
|
||||
:color="global.name.value === 'dark' ? link.colorInDark : link.color"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,474 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import eCommerce2 from '@images/eCommerce/2.png'
|
||||
import pages1 from '@images/pages/1.png'
|
||||
import pages2 from '@images/pages/2.png'
|
||||
import pages3 from '@images/pages/3.png'
|
||||
import pages5 from '@images/pages/5.jpg'
|
||||
import pages6 from '@images/pages/6.jpg'
|
||||
|
||||
const avatars = [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
]
|
||||
|
||||
const isCardDetailsVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg
|
||||
:src="pages1"
|
||||
cover
|
||||
/>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Influencing The Influencer</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister predicts Cancun will draw as many visitors in 2006 as it did two years ago.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Robert Meyer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages2" />
|
||||
|
||||
<VCardText class="position-relative">
|
||||
<!-- User Avatar -->
|
||||
<VAvatar
|
||||
size="75"
|
||||
class="avatar-center"
|
||||
:image="avatar1"
|
||||
/>
|
||||
|
||||
<!-- Title, Subtitle & Action Button -->
|
||||
<div class="d-flex justify-space-between flex-wrap pt-8">
|
||||
<div class="me-2 mb-2">
|
||||
<VCardTitle class="pa-0">
|
||||
Robert Meyer
|
||||
</VCardTitle>
|
||||
<VCardSubtitle class="text-caption pa-0">
|
||||
London, UK
|
||||
</VCardSubtitle>
|
||||
</div>
|
||||
<VBtn>send request</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Mutual Friends -->
|
||||
<div class="d-flex justify-space-between align-center mt-8">
|
||||
<span class="font-weight-medium">18 mutual friends</span>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="avatar in avatars"
|
||||
:key="avatar"
|
||||
:image="avatar"
|
||||
size="45"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Popular Uses Of The Internet -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages3" />
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Popular Uses Of The Internet</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Although cards can support multiple actions, UI controls, and an overflow menu.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn @click="isCardDetailsVisible = !isCardDetailsVisible">
|
||||
Details
|
||||
</VBtn>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<VBtn
|
||||
icon
|
||||
size="small"
|
||||
@click="isCardDetailsVisible = !isCardDetailsVisible"
|
||||
>
|
||||
<VIcon :icon="isCardDetailsVisible ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
|
||||
<VExpandTransition>
|
||||
<div v-show="isCardDetailsVisible">
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple iPhone 11 Pro -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
width="137"
|
||||
height="176"
|
||||
:src="eCommerce2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple iPhone 11 Pro</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="text-subtitle-1">
|
||||
<span>Price :</span> <span class="font-weight-medium">$899</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions class="justify-space-between">
|
||||
<VBtn>
|
||||
<VIcon icon="mdi-cart-plus" />
|
||||
<span class="ms-2">Add to cart</span>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
icon="mdi-share-variant-outline"
|
||||
/>
|
||||
</VCardActions>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Stump town Roasters. -->
|
||||
<VCol
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="d-flex flex-column-reverse flex-md-row">
|
||||
<div>
|
||||
<VCardItem>
|
||||
<VCardTitle>Stumptown Roasters</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="d-flex align-center flex-wrap text-body-1">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
class="me-3"
|
||||
density="compact"
|
||||
/>
|
||||
<span>5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
Before there was a United States of America, there were coffee houses, because how are you supposed to build.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</div>
|
||||
|
||||
<div class="ma-auto pa-5">
|
||||
<VImg
|
||||
:width="176"
|
||||
:src="pages5"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Apple Watch card -->
|
||||
<VCol
|
||||
lg="4"
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VImg :src="pages6" />
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle>Apple Watch</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="font-weight-medium text-base">
|
||||
$249.40
|
||||
</p>
|
||||
|
||||
<p class="mb-0">
|
||||
3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="rounded-t-0"
|
||||
>
|
||||
Add to cart
|
||||
</VBtn>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Lifetime Membership -->
|
||||
<VCol
|
||||
md="6"
|
||||
lg="8"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
md="12"
|
||||
lg="7"
|
||||
order="2"
|
||||
order-lg="1"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Lifetime Membership</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
Here, I focus on a range of items and features that we use in life without giving them a second thought such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for picking up women or men.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VDivider />
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-center">
|
||||
<div class="me-auto pe-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="mdi-lock-open-outline"
|
||||
/>
|
||||
<span class="ms-3">Full Access</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="mdi-account-outline"
|
||||
/>
|
||||
<span class="ms-3">15 Members</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VDivider
|
||||
v-if="$vuetify.display.smAndUp"
|
||||
vertical
|
||||
inset
|
||||
/>
|
||||
|
||||
<div class="ms-auto ps-4">
|
||||
<p class="d-flex align-center mb-6">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="mdi-star-outline"
|
||||
/>
|
||||
<span class="ms-3">Access all Features</span>
|
||||
</p>
|
||||
|
||||
<p class="d-flex align-center mb-0">
|
||||
<VIcon
|
||||
color="primary"
|
||||
icon="mdi-trending-up"
|
||||
/>
|
||||
<span class="ms-3">Lifetime Free Update</span>
|
||||
</p>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="12"
|
||||
lg="5"
|
||||
order="1"
|
||||
order-lg="2"
|
||||
class="member-pricing-bg text-center"
|
||||
>
|
||||
<div class="membership-pricing d-flex flex-column align-center py-14 h-100 justify-center">
|
||||
<p class="mb-5">
|
||||
<sub class="text-h5">$</sub>
|
||||
<sup class="text-h2 font-weight-medium">899</sup>
|
||||
<sub class="text-h5">USD</sub>
|
||||
</p>
|
||||
|
||||
<p class="text-sm">
|
||||
5 Tips For Offshore <br> Software Development
|
||||
</p>
|
||||
|
||||
<VBtn class="mt-8">
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Influencing The Influencer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Influencing The Influencer">
|
||||
<VCardText>
|
||||
Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
If you're in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here's a rundown of some of the best systems available.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Read More</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 The Best Answers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="The Best Answers">
|
||||
<VCardText class="d-flex align-center flex-wrap">
|
||||
<VRating
|
||||
:model-value="5"
|
||||
readonly
|
||||
density="compact"
|
||||
class="me-3"
|
||||
/>
|
||||
<span class="text-subtitle-2">5 Star | 98 reviews</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
become fast, easy and simple. If you want your promotional material to be an eye-catching
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn>Location</VBtn>
|
||||
<VBtn>Reviews</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Support -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard class="text-center">
|
||||
<VCardText class="d-flex flex-column justify-center align-center">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="50"
|
||||
class="mb-4"
|
||||
>
|
||||
<VIcon
|
||||
size="2rem"
|
||||
icon="mdi-help-circle-outline"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-h6">
|
||||
Support
|
||||
</h6>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p>
|
||||
According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions class="justify-center">
|
||||
<VBtn variant="elevated">
|
||||
Contact Now
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-center {
|
||||
position: absolute;
|
||||
border: 3px solid rgb(var(--v-theme-surface));
|
||||
inset-block-start: -2rem;
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
// membership pricing
|
||||
.member-pricing-bg {
|
||||
position: relative;
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
}
|
||||
|
||||
.membership-pricing {
|
||||
sup {
|
||||
inset-block-start: 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const navigationTab = ref('ITEM ONE')
|
||||
const navigationTab2 = ref('ITEM ONE')
|
||||
const tabItems = ['ITEM ONE', 'ITEM TWO', 'ITEM THREE']
|
||||
const tabContent = 'Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards...'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs v-model="navigationTab">
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
{{ tabContent }}
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<VTabs
|
||||
v-model="navigationTab2"
|
||||
align-tabs="center"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- tabs content -->
|
||||
<VWindow v-model="navigationTab2">
|
||||
<VWindowItem
|
||||
v-for="item in tabItems"
|
||||
:key="item"
|
||||
:value="item"
|
||||
class="text-center"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Navigation Card</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>{{ tabContent }}</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VBtn>Learn More</VBtn>
|
||||
</VCardText>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -1,97 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png';
|
||||
import avatar4 from '@images/avatars/avatar-4.png';
|
||||
import avatar8 from '@images/avatars/avatar-8.png';
|
||||
|
||||
const solidCardData = [
|
||||
{
|
||||
cardBg: '#16B1FF',
|
||||
title: 'Twitter Card',
|
||||
icon: 'mdi-twitter',
|
||||
text: '"Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."',
|
||||
avatarImg: avatar4,
|
||||
avatarName: 'Mary Vaughn',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
{
|
||||
cardBg: '#3B5998',
|
||||
title: 'Facebook Card',
|
||||
icon: 'mdi-facebook',
|
||||
text: 'You\'ve read about the importance of being courageous, rebellious and imaginative. These are all vital ingredients.',
|
||||
avatarImg: avatar1,
|
||||
avatarName: 'Eugene Clarke',
|
||||
likes: '3.2k',
|
||||
share: '49',
|
||||
},
|
||||
{
|
||||
cardBg: '#007BB6',
|
||||
title: 'Linkedin Card',
|
||||
icon: 'mdi-linkedin',
|
||||
text: 'With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is directed.',
|
||||
avatarImg: avatar8,
|
||||
avatarName: 'Anne Burke1',
|
||||
likes: '1.2k',
|
||||
share: '80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="data in solidCardData"
|
||||
:key="data.icon"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard :color="data.cardBg">
|
||||
<VCardItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
size="1.9rem"
|
||||
color="white"
|
||||
:icon="data.icon"
|
||||
/>
|
||||
</template>
|
||||
<VCardTitle class="text-white">
|
||||
{{ data.title }}
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="clamp-text text-white mb-0">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-between align-center flex-wrap">
|
||||
<div class="text-no-wrap">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:image="data.avatarImg"
|
||||
/>
|
||||
<span class="text-white ms-2">{{ data.avatarName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<IconBtn
|
||||
icon="mdi-heart"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-subtitle-2 text-white me-4">{{ data.likes }}</span>
|
||||
|
||||
<IconBtn
|
||||
icon="mdi-share-variant"
|
||||
color="white"
|
||||
class="me-1"
|
||||
/>
|
||||
<span class="text-subtitle-2 text-white">{{ data.share }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -1,99 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Subscribers',
|
||||
data: [28, 40, 36, 52, 38, 60, 55],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5,
|
||||
},
|
||||
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.1,
|
||||
stops: [0, 80, 100],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
|
||||
color: currentTheme.success,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 0.65,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
42.5k
|
||||
</h6>
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:height="116"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
<h6 class="text-sm text-center font-weight-semibold">
|
||||
Total Growth
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -1,97 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: '2020',
|
||||
data: [45, 85, 65, 50, 70],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const backgroundColor = currentTheme.value.background
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -7,
|
||||
right: 0,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
colors: [currentTheme.value.error, currentTheme.value.primary, currentTheme.value.error, currentTheme.value.primary, currentTheme.value.primary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '20%',
|
||||
borderRadius: 4,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
distributed: true,
|
||||
colors: {
|
||||
backgroundBarColors: [backgroundColor, backgroundColor, backgroundColor, backgroundColor, backgroundColor],
|
||||
backgroundBarRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
2,856
|
||||
</h6>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-sm text-center font-weight-semibold">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -1,116 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [180, 120, 284, 180, 102],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [-100, -130, -100, -60, -120],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -15,
|
||||
right: 0,
|
||||
bottom: 5,
|
||||
},
|
||||
yaxis: {
|
||||
lines: { show: false },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
colors: [currentTheme.value.secondary, currentTheme.value.error],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '25%',
|
||||
endingShape: 'rounded',
|
||||
startingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
4,350
|
||||
</h6>
|
||||
<VueApexCharts
|
||||
id="sessions-chart"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="116"
|
||||
/>
|
||||
|
||||
<h6 class="text-sm text-center font-weight-semibold">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#sessions-chart {
|
||||
.apexcharts-series {
|
||||
&[seriesName="Earning"] {
|
||||
transform: scaleY(0.965);
|
||||
}
|
||||
|
||||
&[seriesName="Expense"] {
|
||||
transform: scaleY(1.035);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [
|
||||
{
|
||||
data: [28, 58, 40, 68],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: -2,
|
||||
top: -10,
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'line',
|
||||
offsetX: -8,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
blur: 4,
|
||||
|
||||
color: currentTheme.value.primary,
|
||||
opacity: 0.09,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 6,
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 4,
|
||||
discrete: [
|
||||
{
|
||||
seriesIndex: 0,
|
||||
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
fillColor: currentTheme.value.surface,
|
||||
strokeColor: currentTheme.value.primary,
|
||||
size: 6,
|
||||
},
|
||||
],
|
||||
hover: {
|
||||
size: 7,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
colors: [currentTheme.value.primary],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
$35.4k
|
||||
</h6>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="116"
|
||||
/>
|
||||
|
||||
<h6 class="text-sm text-center font-weight-semibold">
|
||||
Total Revenue
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -1,83 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { hexToRgb } from '@layouts/utils';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
const variableTheme = computed(() => vuetifyTheme.current.value.variables)
|
||||
|
||||
const series = [78]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: [currentTheme.value.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: '65%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: '600',
|
||||
offsetY: 0,
|
||||
color: `rgba(${hexToRgb(currentTheme.value['on-surface'])},${variableTheme.value['high-emphasis-opacity']})`,
|
||||
},
|
||||
},
|
||||
track: {
|
||||
background: currentTheme.value.background,
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
135k
|
||||
</h6>
|
||||
<VueApexCharts
|
||||
id="stats-radial-bar-chart"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
type="radialBar"
|
||||
:height="150"
|
||||
/>
|
||||
|
||||
<h6 class="text-sm text-center font-weight-semibold mt-9">
|
||||
Total Revenue
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#stats-radial-bar-chart {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-text {
|
||||
&.apexcharts-datalabel-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { hexToRgb } from '@layouts/utils';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
const variableTheme = computed(() => vuetifyTheme.current.value.variables)
|
||||
|
||||
const series = [
|
||||
{
|
||||
data: [0, 20, 5, 30, 15, 45],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
grid: {
|
||||
borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
|
||||
strokeDashArray: 6,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
yaxis: {
|
||||
lines: { show: false },
|
||||
},
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -7,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
lineCap: 'butt',
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [currentTheme.value.primary],
|
||||
markers: {
|
||||
size: 6,
|
||||
offsetY: 4,
|
||||
offsetX: -2,
|
||||
strokeWidth: 3,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [
|
||||
{
|
||||
size: 5.5,
|
||||
seriesIndex: 0,
|
||||
strokeColor: currentTheme.value.primary,
|
||||
fillColor: currentTheme.value.surface,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
},
|
||||
],
|
||||
hover: { size: 7 },
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { show: false },
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
$86.4k
|
||||
</h6>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="110"
|
||||
/>
|
||||
|
||||
<h6 class="text-sm text-center font-weight-semibold">
|
||||
Total Profit
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -1,64 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '245k',
|
||||
icon: 'mdi-trending-up',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '12.5k',
|
||||
icon: 'mdi-account-outline',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
stats: '1.54k',
|
||||
icon: 'mdi-cellphone-link',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
stats: '$88k',
|
||||
icon: 'mdi-currency-usd',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="42"
|
||||
class="elevation-1 me-3"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-caption">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span class="text-h6 font-weight-medium">{{ item.stats }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -1,142 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstName">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstName"
|
||||
v-model="firstName"
|
||||
placeholder="First Name"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="email">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="email"
|
||||
v-model="email"
|
||||
placeholder="Email"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobile">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobile"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Password -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="password">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,146 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstNameHorizontalIcons">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstNameHorizontalIcons"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
placeholder="First Name"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="emailHorizontalIcons">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="emailHorizontalIcons"
|
||||
v-model="email"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
placeholder="Email"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobileHorizontalIcons">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobileHorizontalIcons"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
prepend-inner-icon="mdi-cellphone"
|
||||
placeholder="Number"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Password -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="passwordHorizontalIcons">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="passwordHorizontalIcons"
|
||||
v-model="password"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Checkbox -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,112 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const lastName = ref('')
|
||||
const city = ref('')
|
||||
const country = ref('')
|
||||
const company = ref('')
|
||||
const email = ref('')
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 City -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="City"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="Country"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Company -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Company"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="mdi-cellphone"
|
||||
label="Mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-2"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts(100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts(100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,89 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable
|
||||
height="250"
|
||||
fixed-header
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts(100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable height="250">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts(100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable theme="dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Desserts(100g Servings)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
calories
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Fat(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
Carbs(g)
|
||||
</th>
|
||||
<th class="text-uppercase text-center">
|
||||
protein(g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>
|
||||
{{ item.dessert }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,143 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstName">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstName"
|
||||
v-model="firstName"
|
||||
placeholder="First Name"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="email">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="email"
|
||||
v-model="email"
|
||||
placeholder="Email"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobile">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobile"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Password -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="password">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstNameHorizontalIcons">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstNameHorizontalIcons"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
placeholder="First Name"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="emailHorizontalIcons">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="emailHorizontalIcons"
|
||||
v-model="email"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
placeholder="Email"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobileHorizontalIcons">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobileHorizontalIcons"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
prepend-inner-icon="mdi-cellphone"
|
||||
placeholder="Number"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Password -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="passwordHorizontalIcons">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="passwordHorizontalIcons"
|
||||
v-model="password"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Checkbox -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,112 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const lastName = ref('')
|
||||
const city = ref('')
|
||||
const country = ref('')
|
||||
const company = ref('')
|
||||
const email = ref('')
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 City -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="City"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="Country"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Company -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Company"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref<number>()
|
||||
const password = ref<string>()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="mdi-cellphone"
|
||||
label="Mobile"
|
||||
type="number"
|
||||
placeholder="Number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-2"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Dessert (100g serving)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Calories
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Fat (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Protein (g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>{{ item.dessert }}</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,90 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable theme="dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text--primary">
|
||||
Dessert (100g serving)
|
||||
</th>
|
||||
<th class="text-center text-uppercase text--primary">
|
||||
Calories
|
||||
</th>
|
||||
<th class="text-center text-uppercase text--primary">
|
||||
Fat (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase text--primary">
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase text--primary">
|
||||
Protein (g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>{{ item.dessert }}</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-table {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Dessert (100g serving)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Calories
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Fat (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Protein (g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>{{ item.dessert }}</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable
|
||||
height="250"
|
||||
fixed-header
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Dessert (100g serving)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Calories
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Fat (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Protein (g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>{{ item.dessert }}</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const desserts = [
|
||||
{
|
||||
dessert: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
dessert: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTable height="250">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
Dessert (100g serving)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Calories
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Fat (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Carbs (g)
|
||||
</th>
|
||||
<th class="text-center text-uppercase">
|
||||
Protein (g)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in desserts"
|
||||
:key="item.dessert"
|
||||
>
|
||||
<td>{{ item.dessert }}</td>
|
||||
<td class="text-center">
|
||||
{{ item.calories }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.fat }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.carbs }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.protein }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<VCard title="Texts">
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-1 text-no-wrap">text-subtitle-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-subtitle-1 text-truncate mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 1rem / line-height: 1.75rem / font-weight: 400</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-2 text-no-wrap">text-subtitle-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-subtitle-2 mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 0.875rem / line-height: 1.375rem / font-weight: 500</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-1 text-no-wrap">text-body-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-body-1 mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 1rem / line-height: 1.5rem / font-weight: 400</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-2 text-no-wrap">text-body-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-body-2 mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 0.875rem / line-height: 1.25rem / font-weight: 400</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-caption">text-caption</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-caption mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 0.75rem / line-height: 1.25rem / font-weight: 400</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-overline text-no-wrap">text-overline</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-overline mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 0.75rem / line-height: 2rem / font-weight: 500</small>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="4"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-button">text-button</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="8"
|
||||
md="10"
|
||||
>
|
||||
<p class="text-button mb-0">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<small>font-size: 0.875rem / line-height: 2.25rem / font-weight: 500</small>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user