Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Public folder changes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-16 11:23:35 +03:00
parent 0731a2b548
commit 68b0f0cf64
212 changed files with 4486 additions and 13384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Dashboard.vue
View File

@@ -184,7 +184,7 @@ watch(
<Column style="width: 15%">
<template #header> Image </template>
<template #body="slotProps">
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
</template>
</Column>
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>

4
src/views/pages/Crud.vue
View File

@@ -181,7 +181,7 @@ const initFilters = () => {
<Column header="Image" headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Image</span>
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -217,7 +217,7 @@ const initFilters = () => {
</DataTable>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
<img :src="'/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
<div class="field">
<label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />

16
src/views/pages/Landing.vue
View File

@@ -63,7 +63,7 @@ const logoUrl = () => {
<Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
</div>
<div class="flex justify-content-center md:justify-content-end">
<img src="@/assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
</div>
</div>
@@ -210,7 +210,7 @@ const logoUrl = () => {
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
</p>
<img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
<img src="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
</div>
</div>
</div>
@@ -224,7 +224,7 @@ const logoUrl = () => {
<div class="grid mt-8 pb-2 md:pb-8">
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
<img src="@/assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
<img src="/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
</div>
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
@@ -250,7 +250,7 @@ const logoUrl = () => {
</div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
<img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
</div>
</div>
</div>
@@ -265,7 +265,7 @@ const logoUrl = () => {
<div class="col-12 lg:col-4 p-0 md:p-3">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="@/assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
<img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$0</span>
<span class="text-600">per month</span>
@@ -296,7 +296,7 @@ const logoUrl = () => {
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="@/assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
<img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$1</span>
<span class="text-600">per month</span>
@@ -327,7 +327,7 @@ const logoUrl = () => {
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="@/assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
<img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$999</span>
<span class="text-600">per month</span>
@@ -387,7 +387,7 @@ const logoUrl = () => {
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="@/assets/demo/images/landing/new-badge.svg" class="ml-2" /></a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
</div>

2
src/views/pages/NotFound.vue
View File

@@ -5,7 +5,7 @@ import AppConfig from '@/layout/AppConfig.vue';
<template>
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="@/assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
<span class="text-blue-500 font-bold text-3xl">404</span>

2
src/views/pages/Timeline.vue
View File

@@ -95,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="'/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
<img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!

4
src/views/pages/auth/Access.vue
View File

@@ -5,7 +5,7 @@ import AppConfig from '@/layout/AppConfig.vue';
<template>
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="@/assets/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
<div class="grid flex flex-column align-items-center">
@@ -14,7 +14,7 @@ import AppConfig from '@/layout/AppConfig.vue';
</div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-600 mb-5">You do not have the necessary permisions. Please contact admins.</span>
<img src="@/assets/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" />
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" />
<div class="col-12 mt-5 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>

4
src/views/pages/auth/Error.vue
View File

@@ -5,7 +5,7 @@ import AppConfig from '@/layout/AppConfig.vue';
<template>
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="@/assets/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
<div class="grid flex flex-column align-items-center">
@@ -14,7 +14,7 @@ import AppConfig from '@/layout/AppConfig.vue';
</div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600 mb-5">Requested resource is not available.</span>
<img src="@/assets/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" />
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" />
<div class="col-12 mt-5 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>

2
src/views/pages/auth/Login.vue
View File

@@ -21,7 +21,7 @@ const logoUrl = () => {
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
<div class="text-center mb-5">
<img src="@/assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3" />
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3" />
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
<span class="text-600 font-medium">Sign in to continue</span>
</div>

176
src/views/uikit/Button.vue
View File

@@ -90,13 +90,26 @@ const load = (index) => {
<div class="card">
<h5>Templating</h5>
<Button type="button" class="mr-2 mb-2 px-3">
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
</Button>
<Button type="button" class="p-button-outlined p-button-success mr-2 mb-2">
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
<span class="ml-2 text-bold">PrimeVue</span>
</Button>
<div class="flex flex-wrap gap-2">
<Button type="button" class="google">
<span class="flex align-items-center px-2 bg-purple-700 text-white">
<i className="pi pi-google"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
</Button>
<Button type="button" class="twitter">
<span class="flex align-items-center px-2 bg-blue-500 text-white">
<i className="pi pi-twitter"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
</Button>
<Button type="button" class="discord">
<span class="flex align-items-center px-2 bg-bluegray-800 text-white">
<i className="pi pi-discord"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
</Button>
</div>
</div>
</div>
@@ -171,3 +184,152 @@ const load = (index) => {
</div>
</div>
</template>
<style lang="scss" scoped>
.google {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--purple-700);
display: flex;
align-items: stretch;
padding: 0;
&:enabled:hover {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--purple-700);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-400);
}
}
.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--blue-500);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--blue-500);
}
&:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
}
.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--bluegray-800);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--bluegray-800);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-500);
}
}
.template-button .p-button.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--blue-500);
}
.template-button .p-button.twitter:hover {
background-position: left bottom;
}
.template-button .p-button.twitter i {
background-color: var(--blue-500);
}
.template-button .p-button.twitter:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
.template-button .p-button.slack {
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--orange-500);
}
.template-button .p-button.slack:hover {
background-position: left bottom;
}
.template-button .p-button.slack i {
background-color: var(--orange-500);
}
.template-button .p-button.slack:focus {
box-shadow: 0 0 0 1px var(--orange-200);
}
.template-button .p-button.amazon {
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #000;
border-color: var(--yellow-500);
}
.template-button .p-button.amazon:hover {
background-position: left bottom;
}
.template-button .p-button.amazon i {
background-color: var(--yellow-500);
}
.template-button .p-button.amazon:focus {
box-shadow: 0 0 0 1px var(--yellow-200);
}
.template-button .p-button.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--bluegray-800);
}
.template-button .p-button.discord:hover {
background-position: left bottom;
}
.template-button .p-button.discord i {
background-color: var(--bluegray-800);
}
.template-button .p-button.discord:focus {
box-shadow: 0 0 0 1px var(--bluegray-500);
}
@media screen and (max-width: 960px) {
-button .p-button {
margin-bottom: 0.5rem;
}
-button .p-button:not(.p-button-icon-only) {
display: flex;
flex-wrap: wrap;
}
-button .p-buttonset .p-button {
margin-bottom: 0;
}
}
</style>

4
src/views/uikit/Icons.vue
View File

@@ -4,7 +4,7 @@ const icons = ref(null);
const filter = ref(null);
onMounted(() => {
fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
@@ -131,7 +131,7 @@ export default {
</template>
<style lang="scss" scoped>
@import '@/assets/demo/documentation.scss';
@import '@/assets/demo/styles/documentation.scss';
.icons-list {
i {

4
src/views/uikit/List.vue
View File

@@ -76,7 +76,7 @@ const onSortChange = (event) => {
<template #list="slotProps">
<div class="col-12">
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
<div class="flex-1 text-center md:text-left">
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</div>
@@ -106,7 +106,7 @@ const onSortChange = (event) => {
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
</div>
<div class="text-center">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</div>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

4
src/views/uikit/Media.vue
View File

@@ -60,7 +60,7 @@ onMounted(() => {
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
<img :src="'/demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">
@@ -99,7 +99,7 @@ onMounted(() => {
<div class="card">
<h5>Image</h5>
<div class="flex justify-content-center">
<Image src="/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
<Image src="/demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
</div>
</div>
</div>

16
src/views/uikit/Misc.vue
View File

@@ -75,11 +75,11 @@ onBeforeUnmount(() => {
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
@@ -151,9 +151,9 @@ onBeforeUnmount(() => {
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
<Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
</div>
</div>

16
src/views/uikit/Table.vue
View File

@@ -132,7 +132,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
@@ -147,7 +147,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel }">
@@ -155,7 +155,7 @@ const calculateCustomerTotal = (name) => {
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@@ -228,7 +228,7 @@ const calculateCustomerTotal = (name) => {
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
<Column field="country.name" header="Country" :style="{ width: '200px' }">
<template #body="{ data }">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
</template>
</Column>
@@ -242,7 +242,7 @@ const calculateCustomerTotal = (name) => {
<Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
<Column field="representative.name" header="Representative" :style="{ width: '200px' }">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template>
</Column>
@@ -273,7 +273,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
@@ -345,7 +345,7 @@ const calculateCustomerTotal = (name) => {
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text ml-2">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@@ -357,7 +357,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
</template>
<template #groupfooter="slotProps">

8
src/views/utilities/Blocks.vue
View File

@@ -13,7 +13,7 @@ const block1 = ref(`
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`);
const block2 = ref(`
@@ -311,7 +311,7 @@ const block7 = ref(`
const block8 = ref(`
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
@@ -407,7 +407,7 @@ const checked = ref(false);
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
</div>
</div>
</BlockViewer>
@@ -719,7 +719,7 @@ const checked = ref(false);
<BlockViewer header="Sign-In" :code="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>