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

Images and Some demos fixed

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-04 17:10:47 +03:00
parent c73f822ab4
commit 7d31ad2a46
20 changed files with 579 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/views/pages/CrudDemo.vue → src/views/pages/Crud.vue
View File

@@ -56,7 +56,7 @@
<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="'/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;">
@@ -92,7 +92,7 @@
</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="'/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 }" />
@@ -187,122 +187,131 @@
</div>
</template>
<script>
<script setup>
import { FilterMatchMode } from 'primevue/api';
import ProductService from '../service/ProductService';
import { ref, onMounted, onBeforeMount } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useToast } from 'primevue/usetoast';
export default {
data() {
return {
products: null,
productDialog: false,
deleteProductDialog: false,
deleteProductsDialog: false,
product: {},
selectedProducts: null,
filters: {},
submitted: false,
statuses: [
{ label: 'INSTOCK', value: 'instock' },
{ label: 'LOWSTOCK', value: 'lowstock' },
{ label: 'OUTOFSTOCK', value: 'outofstock' }
]
};
},
productService: null,
created() {
this.productService = new ProductService();
this.initFilters();
},
mounted() {
this.productService.getProducts().then((data) => (this.products = data));
},
methods: {
formatCurrency(value) {
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
return;
},
openNew() {
this.product = {};
this.submitted = false;
this.productDialog = true;
},
hideDialog() {
this.productDialog = false;
this.submitted = false;
},
saveProduct() {
this.submitted = true;
if (this.product.name.trim()) {
if (this.product.id) {
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
this.products[this.findIndexById(this.product.id)] = this.product;
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
} else {
this.product.id = this.createId();
this.product.code = this.createId();
this.product.image = 'product-placeholder.svg';
this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
this.products.push(this.product);
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
}
this.productDialog = false;
this.product = {};
}
},
editProduct(product) {
this.product = { ...product };
this.productDialog = true;
},
confirmDeleteProduct(product) {
this.product = product;
this.deleteProductDialog = true;
},
deleteProduct() {
this.products = this.products.filter((val) => val.id !== this.product.id);
this.deleteProductDialog = false;
this.product = {};
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
},
findIndexById(id) {
let index = -1;
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].id === id) {
index = i;
break;
}
}
return index;
},
createId() {
let id = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
},
exportCSV() {
this.$refs.dt.exportCSV();
},
confirmDeleteSelected() {
this.deleteProductsDialog = true;
},
deleteSelectedProducts() {
this.products = this.products.filter((val) => !this.selectedProducts.includes(val));
this.deleteProductsDialog = false;
this.selectedProducts = null;
this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
},
initFilters() {
this.filters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
};
const toast = useToast();
const products = ref(null);
const productDialog = ref(false);
const deleteProductDialog = ref(false);
const deleteProductsDialog = ref(false);
const product = ref({});
const selectedProducts = ref(null);
const dt = ref(null);
const filters = ref({});
const submitted = ref(false);
const statuses = ref([
{ label: 'INSTOCK', value: 'instock' },
{ label: 'LOWSTOCK', value: 'lowstock' },
{ label: 'OUTOFSTOCK', value: 'outofstock' }
]);
const productService = new ProductService();
onBeforeMount(() => {
initFilters();
});
onMounted(() => {
productService.getProducts().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const openNew = () => {
product.value = {};
submitted.value = false;
productDialog.value = true;
};
const hideDialog = () => {
productDialog.value = false;
submitted.value = false;
};
const saveProduct = () => {
submitted.value = true;
if (product.value.name.trim()) {
if (product.value.id) {
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
product.value[findIndexById(product.value.id)] = product.value;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
} else {
product.value.id = createId();
product.value.code = createId();
product.value.image = 'product-placeholder.svg';
product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
products.value.push(product);
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
}
productDialog.value = false;
product.value = {};
}
};
const editProduct = (editProduct) => {
product.value = { ...editProduct };
console.log(product);
productDialog.value = true;
};
const confirmDeleteProduct = (editProduct) => {
product.value = editProduct;
deleteProductDialog.value = true;
};
const deleteProduct = () => {
products.value = products.value.filter((val) => val.id !== product.value.id);
deleteProductDialog.value = false;
product.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
};
const findIndexById = (id) => {
let index = -1;
for (let i = 0; i < products.value.length; i++) {
if (products.value[i].id === id) {
index = i;
break;
}
}
return index;
};
const createId = () => {
let id = '';
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
};
const exportCSV = () => {
dt.value.exportCSV();
};
const confirmDeleteSelected = () => {
deleteProductsDialog.value = true;
};
const deleteSelectedProducts = () => {
products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
deleteProductsDialog.value = false;
selectedProducts.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
};
const initFilters = () => {
filters.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
};
};
</script>
<style scoped lang="scss">
@import '../assets/demo/badges.scss';
@import '@/assets/demo/styles/badges.scss';
</style>

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

@@ -41,7 +41,7 @@
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
<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>
<img src="layout/images/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
<img src="@/assets/demo/images/landing/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
</div>
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8" id="features">
@@ -166,7 +166,7 @@
<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="layout/images/peak-logo.svg" class="mt-4" alt="" />
<img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="" />
</div>
</div>
</div>
@@ -180,7 +180,7 @@
<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="layout/images/mockup.png" class="w-11" alt="mockup mobile" />
<img src="@/assets/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 lg:text-right align-items-center text-center">
@@ -206,7 +206,7 @@
</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="layout/images/mockup-desktop.png" class="w-11 pt-4" alt="mockup" />
<img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11 pt-4" alt="mockup" />
</div>
</div>
</div>
@@ -221,7 +221,7 @@
<div class="col-12 lg:col-4 p-0 md:p-3">
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
<h3 class="text-900 text-center">Free</h3>
<img src="layout/images/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
<img src="@/assets/demo/images/landing/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
<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>
@@ -252,7 +252,7 @@
<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 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
<h3 class="text-900 text-center">Startup</h3>
<img src="layout/images/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
<img src="@/assets/demo/images/landing/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
<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>
@@ -283,7 +283,7 @@
<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 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
<h3 class="text-900 text-center">Enterprice</h3>
<img src="layout/images/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
<img src="@/assets/demo/images/landing/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
<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>
@@ -317,7 +317,7 @@
<div class="grid justify-content-between">
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
<img :src="'layout/images/logo-' + logoColor + '.svg'" alt="footer sections" width="50" height="50" class="mr-2" />
<img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
</div>
</div>
@@ -343,7 +343,7 @@
<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="layout/images/new-badge.svg" class="ml-2" /></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">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

@@ -2,7 +2,7 @@
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
<img src="@/assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
</div>
<div class="col-12 xl:col-6" 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="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">

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

@@ -1,45 +1,100 @@
<template>
<div class="grid">
<div class="col-12">
<div class="col-6">
<div class="card">
<h4>Timeline</h4>
<h5>Custom Timeline</h5>
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<h5>Left Align</h5>
<Timeline :value="customEvents">
<template #content="slotProps">
<Card>
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ 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" />
<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!
</p>
<Button label="Read more" class="p-button-text"></Button>
</template>
</Card>
{{ slotProps.item.status }}
</template>
</Timeline>
<h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #content="slotProps">
{{ slotProps.item }}
</template>
<template #opposite> &nbsp; </template>
</Timeline>
</div>
</div>
<div class="col-6">
<div class="card">
<h5>Right Align</h5>
<Timeline :value="customEvents" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-6">
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="customEvents" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-6">
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="customEvents">
<template #opposite="slotProps">
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
</div>
<div class="card">
<h5>Custom Timeline</h5>
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card>
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ 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" />
<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!
</p>
<Button label="Read more" class="p-button-text"></Button>
</template>
</Card>
</template>
</Timeline>
</div>
<div class="card mt-3">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Bottom Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Alternate Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</template>

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

@@ -2,7 +2,7 @@
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
<img src="@/assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
</div>
<div class="col-12 xl:col-6" 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="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
@@ -12,7 +12,7 @@
</div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
<img src="layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
<img src="@/assets/layout/images/asset-access.svg" alt="Access denied" class="mt-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/uikit/Button.vue
View File

@@ -62,10 +62,10 @@
<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" />
<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" />
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
<span class="ml-2 text-bold">PrimeVue</span>
</Button>
</div>

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

@@ -17,7 +17,7 @@
<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="'/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>
@@ -47,7 +47,7 @@
<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="'/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>

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

@@ -8,7 +8,7 @@
<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="'/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">
@@ -34,10 +34,10 @@
<h5>Galleria</h5>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="'/' + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
<img :src="'/' + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</div>
@@ -47,7 +47,7 @@
<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="/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
</div>
</div>
</div>

9
src/views/uikit/Messages.vue
View File

@@ -68,16 +68,17 @@ const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const count = ref(0);
const addMessage = (type) => {
if (type === 'success') {
this.message = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++ }];
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
} else if (type === 'info') {
this.message = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++ }];
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
} else if (type === 'warn') {
this.message = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++ }];
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
} else if (type === 'error') {
this.message = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++ }];
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
}
};

10
src/views/uikit/Overlay.vue
View File

@@ -16,21 +16,21 @@
</div>
<div class="card p-fluid">
<h5>Overlay Panel</h5>
<div class="grid formgrid">
<div class="col-6">
<div class="flex flex-wrap gap-2">
<div>
<Button type="button" label="Image" @click="toggle" class="p-button-success" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
<img src="images/nature/nature9.jpg" alt="Nature 9" />
<img src="/images/nature/nature9.jpg" alt="Nature 9" />
</OverlayPanel>
</div>
<div class="col-6">
<div>
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
<OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
<Column header="Image" headerStyle="min-width:10rem;">
<template #body="slotProps">
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">

44
src/views/uikit/Panels.vue
View File

@@ -162,34 +162,22 @@
<div class="col-12">
<div class="card">
<h5>Splitter</h5>
<div class="grid">
<Splitter style="height: 300px" class="mb-5">
<SplitterPanel :size="40" :minSize="10" style="overflow: scroll">
<p class="col m-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur pariatur recusandae rerum atque nisi ipsum fuga numquam distinctio obcaecati quibusdam repellat, est assumenda quam perferendis reprehenderit,
blanditiis, excepturi facilis! Voluptatem.
</p>
</SplitterPanel>
<SplitterPanel :size="60" style="overflow: scroll">
<Splitter layout="vertical">
<SplitterPanel :size="15">
<p class="col m-3">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus.
</p>
</SplitterPanel>
<SplitterPanel :size="85">
<p class="col m-3">
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus
luctus odio.
</p>
</SplitterPanel>
</Splitter>
</SplitterPanel>
</Splitter>
</div>
<Splitter style="height: 300px" class="mb-5">
<SplitterPanel :size="30" :minSize="10" style="overflow: scroll">
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
</SplitterPanel>
<SplitterPanel :size="70" style="overflow: scroll">
<Splitter layout="vertical">
<SplitterPanel :size="15">
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
</SplitterPanel>
<SplitterPanel :size="50">
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
</SplitterPanel>
</Splitter>
</SplitterPanel>
</Splitter>
</div>
</div>
</div>

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

@@ -53,7 +53,7 @@
</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="'/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 }">
@@ -132,7 +132,6 @@
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
<Column field="name" header="Name" :style="{ width: '150px' }" frozen></Column>
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
<Column field="name" header="Name" :style="{ width: '200px' }"></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" />
@@ -180,7 +179,7 @@
</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="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
@@ -264,7 +263,7 @@
</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="'/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">

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

@@ -13,7 +13,7 @@
</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="/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>
@@ -325,7 +325,7 @@
<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="/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>